:root{
  /* Monogram UI Foundations v0.1 — editable in the editor (Administration → Website colours) */
  --m-dark:#1A2B33;--m-blue:#0077B2;--m-bl:#99DDFF;--m-ul:#E5F6FF;--m-white:#FFFFFF;--m-red:#FF4B2B;--m-cmp:#FFC32B;
  --m-dk1:color-mix(in srgb,var(--m-dark) 86%,#fff);--m-dk2:color-mix(in srgb,var(--m-dark) 78%,#fff);--m-dk3:color-mix(in srgb,var(--m-dark) 68%,#fff);
  --m-dk4:color-mix(in srgb,var(--m-dark) 52%,#fff);--m-dk5:color-mix(in srgb,var(--m-dark) 44%,#fff);--m-blue-dk:color-mix(in srgb,var(--m-blue) 82%,#000);
  --ff:"Libertinus Sans","Helvetica Neue",Arial,sans-serif;
}
:root{
  --navy:var(--m-dark);--navy2:var(--m-dk1);--navy-line:var(--m-dk3);--on-navy:#FFFFFF;--on-navy2:#B9C3CA;
  --accent:var(--m-red);
  --ground:#ECEEEF;--card:#FFFFFF;--paper:#FFFFFF;--ink:var(--m-dark);--ink2:#5B6B76;
  --line:#D3D9DD;--deep:var(--m-dark);--ok:#2F7A4B;--warn:#B07A1E;--bad:#A3413A;
  --r:4px;
  --serif:var(--ff);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--ff);font-variant-numeric:tabular-nums;font-size:15px;line-height:1.45}
button,input,select{font:inherit;color:inherit}
img{max-width:100%;display:block}

/* ---------- layout ---------- */
.filters-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.filters h2{font-family:var(--serif);font-weight:400;font-size:17px;letter-spacing:.08em;text-transform:uppercase;margin:0}
fieldset{border:0;margin:0;padding:12px 0;border-top:1px solid var(--line);min-width:0}
fieldset>*:not(legend){clear:both}
fieldset:first-of-type{border-top:0}
legend{float:left;width:100%;font-size:13px;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.08em;padding:0;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:5px 12px;font-size:13px;cursor:pointer}
.chip[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.chip:focus-visible,.btn:focus-visible,select:focus-visible,input:focus-visible,.card:focus-visible,.fu:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.range{display:flex;align-items:center;gap:8px}
.range select,.range input{flex:1;min-width:0;width:0;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
input[type=range]{width:100%;accent-color:var(--navy)}
output{display:block;font-size:13px;color:var(--ink2);margin-top:4px}
.check{display:flex;gap:8px;align-items:center;font-size:15px;padding:3px 0;cursor:pointer}
.check input{accent-color:var(--navy);width:16px;height:16px}
.link{border:0;background:none;color:var(--ink2);cursor:pointer;font-size:13px;padding:0;text-decoration:underline}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--r);padding:9px 14px;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;border:1px solid var(--navy);letter-spacing:.08em}
.btn.primary{background:var(--navy);color:var(--on-navy)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.wide{width:100%;margin-top:12px}
.sort{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ink2)}
.sort select{padding:6px 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--ink)}

.empty{padding:40px;text-align:center;color:var(--ink2)}
.note{font-size:13px;color:var(--ink2);margin-top:24px}
/* ---------- unit sheet (detail) ---------- */
dialog{border:0;padding:0;border-radius:2px;width:min(1240px,calc(100vw - 32px));max-height:calc(100vh - 32px);background:var(--paper);color:var(--ink);overflow:auto}
dialog::backdrop{background:rgba(20,28,34,.65)}
.sheet{display:grid;grid-template-columns:27% 1fr;min-height:min(680px,calc(100vh - 32px));position:relative;border:10px solid var(--paper)}
.d-close{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;border:1px solid var(--navy-line);background:var(--navy);color:#fff;cursor:pointer;z-index:2}

.sh-side{background:var(--navy);color:var(--on-navy);padding:34px 26px 24px;display:flex;flex-direction:column;gap:22px;margin-right:2px}
.sh-brand{text-align:center;font-family:var(--serif)}
.sh-brand img{max-width:60%;margin:0 auto 12px}
.sh-brand .mk{display:inline-grid;place-items:center;width:30px;height:30px;background:#fff;color:var(--navy);font-size:17px;margin-bottom:14px}
.sh-brand .w1{font-size:24px;letter-spacing:.08em;text-transform:uppercase;line-height:1.1}
.sh-brand .w2{font-size:15px;letter-spacing:.08em;text-transform:uppercase;margin-top:6px}
.sh-brand .w3{font-family:var(--ff);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-navy2);margin-top:8px}
.sh-cap{margin:0 0 10px;font-family:var(--serif);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.sh-keys{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sh-keys svg{width:100%;height:auto;display:block}
.sh-floor{display:flex;flex-wrap:wrap;gap:3px}
.fu{flex:0 0 auto;min-width:38px;height:30px;padding:0 4px;border:0;border-radius:1px;background:#fff;color:var(--navy);font-size:11px;font-weight:700;cursor:pointer}
.fu.cur{background:var(--accent);color:#fff}
.fu.sold{background:#7B8790;color:#E3E7EA}
.fu.reserved{background:#C9D0D5}
.fu:hover:not(.cur){background:#DDE3E7}
.sh-floor-note{font-size:11px;color:var(--on-navy2);margin:6px 0 0}

.sh-main{display:grid;grid-template-rows:auto 1fr auto;border:1px solid var(--navy);min-width:0}
.sh-head{background:var(--navy);color:var(--on-navy);display:flex;align-items:center;justify-content:space-between;gap:10px 24px;padding:20px 56px 20px 28px;flex-wrap:wrap}
.sh-head h2{margin:0;display:flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:.08em;text-transform:uppercase}
.sh-pill{font-family:var(--ff);font-size:13px;font-weight:700;letter-spacing:.08em;background:var(--accent);color:#fff;border-radius:999px;padding:3px 10px}
.sh-rooms{font-size:17px;letter-spacing:.08em}
.sh-areas{margin:0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-navy)}
.sh-areas b{font-weight:700}
.sh-areas i{font-style:normal;color:var(--on-navy2);margin:0 8px}

.sh-body{display:grid;grid-template-columns:1fr 250px;min-height:0}
.sh-plan{display:flex;flex-direction:column;padding:16px 22px 14px;min-width:0}
.sh-img{flex:1;display:flex;justify-content:center;align-items:center;min-height:260px;cursor:zoom-in}
.sh-img img{max-height:min(470px,52vh);width:auto;object-fit:contain}
.sh-legend h3,.sh-spec h3{font-family:var(--serif);font-weight:400;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:12px 0 8px;display:flex;align-items:center;gap:12px}
.sh-legend h3::after{content:"";flex:1;border-top:1px solid var(--line)}
.sh-legend ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:4px 18px;font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.sh-legend li{display:flex;align-items:center;gap:6px}
.sh-legend li .n{flex:0 0 17px;height:17px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:9px}
.sh-legend li.ter .n{border-style:dashed}
.sh-legend li .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-legend li .lk{font-size:9px;color:var(--ink2);letter-spacing:0}
.sh-legend li .ar{white-space:nowrap;color:var(--ink2)}
.sh-legend .lvl{grid-column:1/-1;font-size:11px;color:var(--ink2);margin-top:4px}

.sh-spec{background:var(--navy);color:var(--on-navy);padding:6px 18px 18px;display:flex;flex-direction:column}
.sh-spec h3{margin-top:16px;padding-bottom:10px;border-bottom:1px solid var(--navy-line)}
.sh-spec table{width:100%;border-collapse:collapse;font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.sh-spec td{padding:7px 0;border-bottom:1px solid var(--navy-line);vertical-align:top}
.sh-spec td:last-child{text-align:right;white-space:nowrap;font-weight:700;padding-left:8px}
.sh-spec td small{color:var(--on-navy2);font-size:11px}
.sh-spec tr.tot td{border-bottom:0;font-weight:700;font-size:13px;padding-top:10px}
.sh-facts{margin:14px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;font-size:11px}
.sh-facts dt{color:var(--on-navy2);text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.sh-facts dd{margin:0}
.sh-cta{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;gap:8px}
.sh-cta .btn.line{color:var(--on-navy);border-color:var(--navy-line)}
.sh-cta-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sh-cta-row .btn{padding:8px 6px;font-size:13px}
.d-hours{font-size:11px;color:var(--on-navy2);margin:2px 0 0;text-align:center}

.sh-foot{border-top:1px solid var(--navy);padding:12px 22px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);line-height:1.5}
.sh-foot b{color:var(--ink);margin-right:6px}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .sheet{grid-template-columns:1fr}
  .sh-side{margin:0 0 2px;display:grid;grid-template-columns:1fr 1fr;align-items:start}
  .sh-side .sh-brand{grid-column:1/-1}
  .sh-body{grid-template-columns:1fr}
}
@media(max-width:600px){
  dialog{width:100vw;max-height:100vh;max-width:100vw;margin:0}
  .sheet{border-width:0}
  .sh-side{grid-template-columns:1fr;padding:22px 18px;order:2;margin:2px 0 0}
  .sh-side .sh-brand{display:none}
  .sh-head{padding:16px 18px}
  .sh-head h2{font-size:17px;flex-wrap:wrap}
  .sh-plan{padding:12px}
}
/* ---------- print: one landscape sheet ---------- */
@media print{
  @page{size:A4 landscape;margin:8mm}
  body>*:not(dialog){display:none!important}
  body{background:#fff}
  dialog{position:static;display:block;width:100%;max-height:none;overflow:visible;box-shadow:none}
  dialog::backdrop{display:none}
  .no-print{display:none!important}
  .sheet{border:0;min-height:0;grid-template-columns:27% 1fr}
  .sh-side,.sh-head,.sh-spec,.fu,.sh-pill{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sh-body{grid-template-columns:1fr 230px}
  .sh-img img{max-height:118mm}
}

dialog.ct{width:min(620px,calc(100vw - 32px));background:var(--navy);color:#fff;border-radius:6px}
.ct-in{position:relative;padding:34px 36px 28px}
.ct-in h2{font-family:var(--serif);font-weight:400;font-size:28px;margin:0 0 6px}
.ct-lead{margin:0 0 20px;color:var(--on-navy2)}
.ct-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ct-opt{display:flex;flex-direction:column;gap:4px;background:var(--navy2);border:1px solid var(--navy-line);border-radius:4px;padding:16px;color:#fff;text-decoration:none}
.ct-opt:hover{border-color:#fff}
.ct-opt .qe{font-size:24px}
.ct-opt .qs{font-size:13px;color:var(--on-navy2);word-break:break-word}
.ct-hours{margin:16px 0 0;font-size:13px;color:var(--on-navy2)}


/* ================= Selector layout (Marius) ================= */
:root{--blue:var(--m-blue);--sold:var(--m-red);--panel:var(--m-dark);--panel2:var(--m-dk1);--hh:66px;--fh:58px}
body{background:var(--panel);padding-bottom:var(--fh)}
body.drawer{overflow:hidden}
/* header */
.top{position:sticky;top:0;z-index:20;background:#fff;color:var(--navy);border-bottom:1px solid var(--line)}
.top-in{height:var(--hh);padding:0 24px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy);min-width:0}
.mark{flex:0 0 32px;width:32px;height:32px;display:block}.mark svg,.mark img{width:100%;height:100%;display:block}
.bw{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.bw b{font-family:var(--serif);font-weight:400;font-size:17px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.bw span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.stockb{display:flex;gap:2px;flex-wrap:wrap}
.sb{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;padding:6px 10px;white-space:nowrap}
.sb.sold{background:var(--sold)}.sb.res{background:#B07A1E}.sb.av{background:var(--blue)}
.mainnav{display:flex;align-items:center;gap:2px;margin-left:auto}
.mainnav button{border:0;background:none;color:var(--navy);font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;cursor:pointer;border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.mainnav button:hover{color:var(--blue)}
.mainnav button[aria-current=page]{color:var(--blue);border-bottom-color:var(--blue)}
.mainnav .heart{font-size:17px;line-height:1}
.mainnav em{font-style:normal;font-size:11px;font-weight:700;background:var(--sold);color:#fff;border-radius:999px;min-width:17px;height:17px;padding:0 4px;display:inline-grid;place-items:center}
.mainnav em:empty{display:none}
.lang{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.lang button{border:0;background:#fff;padding:5px 9px;font-size:13px;cursor:pointer;color:var(--ink2)}
.lang button[aria-pressed=true]{background:var(--navy);color:#fff}

/* two columns */
.app{display:grid;grid-template-columns:340px minmax(0,1fr);min-height:calc(100vh - var(--hh) - var(--fh))}
.ask{position:sticky;top:var(--hh);align-self:start;height:calc(100vh - var(--hh) - var(--fh));overflow:auto;background:var(--panel);color:#fff;padding:30px 26px 22px;border-right:1px solid var(--m-dk2)}
.ask h2{margin:0;font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:.08em;text-transform:uppercase;text-align:center}
.ask-sub{margin:8px 0 26px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-align:center;color:var(--on-navy2)}
.crit{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.cr{background:#fff;color:var(--navy);border-radius:2px;transition:box-shadow .15s}
.cr.drag{box-shadow:0 10px 24px rgba(0,0,0,.45);transform:scale(1.02);position:relative;z-index:2}
.crit.dragging .cr:not(.drag){opacity:.85}
.cr-row{display:flex;align-items:stretch}
.cr-h{flex:0 0 24px;display:grid;place-items:center;color:#9AA6AE;cursor:grab;touch-action:none;user-select:none;font-size:15px}
.cr-h:active{cursor:grabbing}
.cr-b{flex:1;min-width:0;display:flex;align-items:center;gap:8px;border:0;background:none;padding:10px 8px 10px 0;text-align:left;cursor:pointer;color:inherit}
.cr-tag{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--blue);color:#fff;padding:3px 6px;border-radius:2px}
.cr:not(.set) .cr-tag{background:var(--m-dk5)}
.cr-v{flex:1;min-width:0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr:not(.set) .cr-v{color:var(--ink2)}
.cr-c{flex:0 0 10px;height:10px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg) translate(-2px,-2px);margin-right:4px}
.cr.open .cr-c{transform:rotate(-135deg) translate(-2px,-2px)}
.cr-mv{display:flex;flex-direction:column;border-left:1px solid var(--line)}
.cr-mv button{flex:1;border:0;background:none;color:#9AA6AE;font-size:8px;padding:0 7px;cursor:pointer}
.cr-mv button:hover:not(:disabled){color:var(--navy)}.cr-mv button:disabled{opacity:.3;cursor:default}
.cr-opts{border-top:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:6px}
.cr-q{margin:0 0 4px;font-family:var(--serif);font-size:15px}
.cr-o{display:flex;gap:10px;align-items:flex-start;text-align:left;border:1px solid var(--line);background:#fff;border-radius:2px;padding:8px 10px;cursor:pointer;color:var(--navy)}
.cr-o:hover{border-color:var(--blue)}
.cr-o[aria-pressed=true]{border-color:var(--blue);background:var(--m-ul)}
.cr-o .qe{font-size:17px;line-height:1.1}
.cr-o b{display:block;font-size:13px;font-weight:700}
.cr-o small{display:block;font-size:13px;color:var(--ink2);line-height:1.35;margin-top:2px}
.cr-clear{align-self:flex-end;border:0;background:none;color:var(--ink2);font-size:13px;text-decoration:underline;cursor:pointer;padding:2px}
.cr-b:focus-visible,.cr-o:focus-visible,.cr-mv button:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.ask-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:30px}
.ask-foot #count{font-family:var(--serif);font-weight:400;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.ask .sort,.filters .sort{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.ask .sort select,.filters .sort select{border:0;border-radius:2px;padding:7px 8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;background:#fff;color:var(--navy);max-width:150px}
.ask-act{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.rst,.fnote{border:0;background:none;color:#fff;font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:4px 0}
.rst span:first-child{font-size:15px}
.fnote{color:var(--m-bl);text-decoration:underline}

/* filters page ("Explorează toate locuințele"): the filters take the place of the questions */
.app .filters{display:none}
.app.browse .ask{display:none}
.app.browse .filters{display:block;position:sticky;top:var(--hh);align-self:start;height:calc(100vh - var(--hh) - var(--fh));overflow:auto;background:var(--panel);color:#fff;padding:30px 26px 22px;border-right:1px solid var(--m-dk2)}
.filters .filters-head{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:18px}
.filters h2{margin:0;font-family:var(--serif);font-weight:400;font-size:17px;letter-spacing:.08em;text-transform:uppercase;text-align:center;color:#fff}
.filters .link{color:var(--on-navy2);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.filters fieldset{border-top-color:var(--m-dk2)}
.filters legend{color:var(--on-navy2);font-size:11px;letter-spacing:.08em}
.filters .chip{background:transparent;border-color:var(--m-dk3);color:#fff;font-size:13px}
.filters .chip[aria-pressed=true]{background:#fff;border-color:#fff;color:var(--navy)}
.filters .range select,.filters .range input{background:#fff;border:0;border-radius:2px;color:var(--navy)}
.filters input[type=range]{accent-color:#fff}
.filters output{color:var(--on-navy2)}
.filters .check{color:#fff;font-size:13px}
.filters .check input{accent-color:var(--blue)}
.filters .ask-foot{margin-top:22px}
.filters .ask-foot b{font-family:var(--serif);font-weight:400;font-size:15px;letter-spacing:.08em;text-transform:uppercase}

/* results */
.results{padding:36px 40px 40px;min-width:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:36px 40px;max-width:1300px}
.card{background:#fff;color:var(--navy);border:1px solid #fff;border-radius:3px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:transform .12s,box-shadow .12s}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.35)}
.card:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.c-h{background:var(--panel);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;color:#fff;border:1px solid #fff;border-bottom:0}
.c-t{font-size:13px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-t b{color:var(--m-bl);font-weight:700}
.c-s{flex:0 0 auto;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border:1px solid #fff;color:#fff}
.c-s.available{background:var(--blue)}.c-s.reserved{background:#B07A1E}.c-s.sold{background:var(--sold)}
.c-plan{position:relative;height:190px;padding:12px 12px 6px 12px;display:flex;justify-content:center;align-items:center}
.c-plan img{max-height:100%;max-width:calc(100% - 46px);margin-left:40px;object-fit:contain}
.c-key{position:absolute;left:10px;top:12px;width:40px;display:flex;flex-direction:column;gap:4px;font-size:7.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);line-height:1.15}
.c-key svg{width:26px;height:auto;display:block}
.c-box{margin:6px 14px 14px;border:1px solid var(--navy);border-radius:6px;display:flex;align-items:stretch}
.c-rooms{flex:0 0 74px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid var(--navy);padding:6px 4px}
.c-rooms b{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1}
.c-rooms span{font-size:9px;letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
.c-box dl{flex:1;margin:0;padding:7px 10px;display:flex;flex-direction:column;justify-content:center;gap:1px;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.c-box dl div{display:flex;justify-content:space-between;gap:8px}
.c-box dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.c-f{margin-top:auto;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:12px 14px}
.c-p{flex:1;font-size:13px;font-weight:700;letter-spacing:.08em}
.c-m{font-size:11px;font-weight:700;color:var(--blue);background:var(--m-ul);border-radius:999px;padding:2px 7px}
.c-m.hi{color:#fff;background:var(--blue)}
.c-save{border:0;background:none;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;color:var(--navy);display:inline-flex;align-items:center;gap:5px;padding:4px}
.c-save span{font-size:17px;line-height:1}
.c-save[aria-pressed=true]{color:var(--sold)}
.sl-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:#fff;margin:0 0 22px}
.sl-head b{font-family:var(--serif);font-weight:400;font-size:17px;letter-spacing:.08em;text-transform:uppercase}
.sl-head span{color:var(--on-navy2);font-size:13px}
.sl-head .btn.line{color:#fff;border-color:var(--m-dk2);margin-left:auto;padding:6px 12px}
.linkbtn{border:0;background:none;color:var(--m-bl);text-decoration:underline;cursor:pointer;font-size:13px;padding:0}
.results .empty{color:var(--on-navy2)}
.results .note{color:var(--m-dk5)}

/* footer bar */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:20;height:var(--fh);background:#fff;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:16px;padding:0 16px}
.bar p{margin:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);display:flex;gap:6px 20px;flex-wrap:wrap;justify-content:center}
.bar .hrs{color:var(--ink2)}
.bar .wa{display:flex;align-items:center;flex:0 0 auto}
.bar .wa img{width:30px;height:30px;border-radius:50%;object-fit:cover;margin-left:-6px;border:2px solid #fff}

@media(max-width:1100px){.stockb{display:none}}
@media(max-width:900px){
  :root{--hh:104px}
  .top-in{height:auto;flex-wrap:wrap;padding:10px 16px;gap:8px 12px}
  .mainnav{order:3;width:100%;margin:0;justify-content:space-between}
  .mainnav button{padding:6px 4px;font-size:13px;letter-spacing:.08em}
  .lang{margin-left:auto}
  .app{grid-template-columns:minmax(0,1fr)}
  .ask,.app.browse .filters{position:static;height:auto;overflow:visible;border-right:0;border-bottom:1px solid var(--m-dk2);padding:22px 16px}
  .results{padding:22px 16px 30px}
  .grid{gap:20px}
  .bar p .hrs,.bar p span:first-child{display:none}
}
@media(max-width:480px){.ask .sort select{max-width:120px}.bw b{font-size:15px}.bw span{display:none}.grid{grid-template-columns:1fr}}
.cr-opts[hidden],.sl-head[hidden],.fnote[hidden],.empty[hidden]{display:none}
.bar .wa img[hidden]{display:none}.ask h2{font-size:17px}

/* ================= Home (3 boxes) ================= */
body.on-home{padding-bottom:0}
body.on-home .top,body.on-home .bar{display:none}
.app[hidden],.home[hidden]{display:none!important}
.home{min-height:100vh;background:var(--panel);color:#fff;display:flex;flex-direction:column;align-items:center;padding:32px 16px 28px;text-align:center}
.hm-logo{display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--serif);text-transform:uppercase}
.hm-mark{width:26px;height:26px;display:block}.hm-mark svg,.hm-mark img{width:100%;height:100%;display:block}
.hm-w1{font-size:24px;letter-spacing:.08em;line-height:1}
.hm-w2{font-size:9px;letter-spacing:.08em}
.hm-title{margin:clamp(40px,8vh,80px) 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(22px,3vw,30px);letter-spacing:.08em;text-transform:uppercase}
.hm-lead{margin:18px auto 0;max-width:300px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;line-height:1.7}
.hm-cards{display:grid;grid-template-columns:repeat(3,minmax(0,220px));gap:26px;margin-top:clamp(36px,6vh,60px);justify-content:center}
.hm-c{background:#fff;color:var(--navy);border-radius:3px;padding:24px 16px 16px;display:flex;flex-direction:column;align-items:center;min-height:214px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.hm-c h2{margin:0;font-family:var(--serif);font-weight:400;font-size:17px;letter-spacing:.08em;text-transform:uppercase;line-height:1.3}
.hm-c p{margin:22px 0 18px;font-size:11px;line-height:1.6;color:var(--ink2);flex:1}
.hm-b{border:1px solid var(--navy);background:var(--m-ul);color:var(--navy);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 8px;border-radius:2px;cursor:pointer;width:100%}
.hm-b:hover{background:color-mix(in srgb,var(--m-ul) 85%,var(--m-blue))}
.hm-b.solid{background:var(--blue);border-color:var(--blue);color:#fff}.hm-b.solid:hover{background:var(--m-blue-dk)}
.hm-b:focus-visible{outline:2px solid var(--m-bl);outline-offset:2px}
.hm-sales{margin:clamp(40px,7vh,60px) auto 0;max-width:230px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;line-height:1.7}
.hm-sales[hidden]{display:none}
.hm-foot{margin-top:auto;padding-top:clamp(40px,7vh,60px);display:flex;flex-direction:column;align-items:center;gap:22px}
.hm-logo.sm .hm-w1{font-size:17px}
.hm-links{display:flex;gap:28px;flex-wrap:wrap;justify-content:center}
.hm-links a{color:#fff;font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.hm-links a:hover{text-decoration:underline}
.hm-lang{border-color:var(--m-dk2)}.hm-lang button{background:transparent;color:var(--on-navy2)}.hm-lang button[aria-pressed=true]{background:#fff;color:var(--navy)}
@media(max-width:720px){.hm-cards{grid-template-columns:minmax(0,320px)}.hm-c{min-height:0}}
.ask-foot b{white-space:nowrap}
.c-t{font-size:11px;letter-spacing:.08em}
.c-h{padding:9px 8px}.c-s{padding:4px 5px;font-size:9px}
.ask-foot{flex-wrap:wrap}.ask-foot .sort select{max-width:140px}

/* ---------- subtle scrollbars on the left panels ---------- */
/* The scrollbar space is always reserved (both edges, so the content stays centred) → boxes never change width when scrolling appears.
   Chrome/Edge use the 4px ::-webkit bar below (no arrows); the standard properties are only for Firefox, since in Chrome they would replace it with the wide Windows bar. */
.ask,.filters,.slp{scrollbar-gutter:stable both-edges}
@supports not selector(::-webkit-scrollbar){
  .ask,.app.browse .filters,.slp{scrollbar-width:thin;scrollbar-color:transparent transparent;transition:scrollbar-color .3s}
  .ask:hover,.app.browse .filters:hover,.slp:hover{scrollbar-color:rgba(255,255,255,.18) transparent}
}
.slp::-webkit-scrollbar{width:4px}.slp::-webkit-scrollbar-track{background:transparent}.slp::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}
.slp:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}.slp::-webkit-scrollbar-button{display:none}
.ask::-webkit-scrollbar,.filters::-webkit-scrollbar{width:4px}
.ask::-webkit-scrollbar-track,.filters::-webkit-scrollbar-track{background:transparent}
.ask::-webkit-scrollbar-thumb,.filters::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}
.ask:hover::-webkit-scrollbar-thumb,.filters:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}
.ask::-webkit-scrollbar-button,.filters::-webkit-scrollbar-button{display:none}

/* ---------- filters panel: dark fields ---------- */
.filters .range select,.filters .range input,.filters .sort select{
  -webkit-appearance:none;appearance:none;background-color:transparent;color:#fff;
  border:1px solid var(--m-dk3);border-radius:2px;padding:9px 12px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  transition:border-color .15s,background-color .15s}
.filters .range select,.filters .sort select{
  padding-right:30px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23B9C3CA' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
.filters .range select:hover,.filters .range input:hover,.filters .sort select:hover{border-color:var(--m-dk4)}
.filters .range select:focus,.filters .range input:focus,.filters .sort select:focus{outline:none;border-color:#fff;background-color:rgba(255,255,255,.04)}
.filters select option{background:var(--panel);color:#fff;text-transform:none}
.filters .range input::placeholder{color:var(--m-dk4)}
.filters .range input::-webkit-outer-spin-button,.filters .range input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.filters .range input[type=number]{-moz-appearance:textfield}
.filters .range span{color:var(--m-dk4)}
/* thin price slider */
.filters input[type=range]{-webkit-appearance:none;appearance:none;height:16px;background:transparent;cursor:pointer;margin:4px 0 2px}
.filters input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--m-dk3)}
.filters input[type=range]::-moz-range-track{height:1px;background:var(--m-dk3)}
.filters input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:#fff;border:0;margin-top:-6px}
.filters input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#fff;border:0}
.filters input[type=range]:focus-visible{outline:none}
.filters input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(255,255,255,.2)}
.filters output{font-size:13px;letter-spacing:.08em}
/* checkboxes: thin square */
.filters .check input{-webkit-appearance:none;appearance:none;width:14px;height:14px;border:1px solid var(--m-dk4);border-radius:1px;background:transparent;display:grid;place-items:center;cursor:pointer;margin:0}
.filters .check input:checked{background:#fff;border-color:#fff}
.filters .check input:checked::after{content:"";width:7px;height:4px;border-left:1.5px solid var(--panel);border-bottom:1.5px solid var(--panel);transform:rotate(-45deg) translate(1px,-1px)}
.filters .check{font-size:13px;letter-spacing:.08em;text-transform:uppercase;gap:10px;padding:5px 0}
/* chips: lighter, more spacing */
.filters .chip{border-color:var(--m-dk3);font-size:13px;letter-spacing:.08em;padding:6px 13px;transition:border-color .15s,background .15s}
.filters .chip:hover{border-color:var(--m-dk4)}

/* ================= Shortlist / recommendations: left panel closed, panel on the right ================= */
.app.sl{grid-template-columns:minmax(0,1fr) 370px}
.app.sl .ask,.app.sl .filters{display:none!important}
.app.sl .results{padding:0 0 40px;grid-column:1}
.sl-bar[hidden],.slp[hidden],.slp-form[hidden],.slp-done[hidden],.slp-rec[hidden],#recNav[hidden]{display:none!important}
.sl-bar{position:sticky;top:var(--hh);z-index:5;background:var(--panel);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:16px 40px;border-bottom:1px solid var(--m-dk3);margin-bottom:36px}
.sl-bar b{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.sl-cmp{border:0;background:none;color:#fff;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:6px 10px}
.sl-cmp:hover:not(:disabled){color:var(--m-bl)}.sl-cmp:disabled{opacity:.35;cursor:default}
.sl-bar .sort{justify-self:end;display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.sl-bar .sort select{-webkit-appearance:none;appearance:none;border:0;border-radius:2px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231F2C35' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 10px center;color:var(--navy);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:7px 34px 7px 10px;cursor:pointer}
.app.sl .grid,.app.sl .empty,.app.sl .note{margin-left:40px;margin-right:40px}
.slp{grid-column:2;grid-row:1;position:sticky;top:var(--hh);align-self:start;height:calc(100vh - var(--hh) - var(--fh));overflow:auto;background:var(--panel);color:#fff;border-left:1px solid var(--m-dk3);padding:26px 30px 24px;text-align:center}
.slp h2{margin:0;font-family:var(--serif);font-weight:400;font-size:17px;letter-spacing:.08em;text-transform:uppercase}
.slp-lead{margin:12px auto 26px;max-width:280px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;line-height:1.7;color:var(--on-navy2)}
.slp-form{display:flex;flex-direction:column;gap:14px;text-align:left}
.slp-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.slp-form label{display:flex;flex-direction:column;gap:7px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.slp-form input:not([type=checkbox]),.slp-form textarea{width:100%;border:1px solid transparent;border-radius:2px;background:#EEF0F1;color:var(--navy);font-size:13px;padding:8px 10px;letter-spacing:0;text-transform:none;font-weight:400}
.slp-form textarea{resize:vertical;min-height:72px;font-size:13px;line-height:1.5}
.slp-form textarea::placeholder{color:var(--m-dk5)}
.slp-form input:focus,.slp-form textarea:focus{outline:none;border-color:var(--blue);background:#fff}
.slp-form .slp-ok{flex-direction:row;align-items:flex-start;gap:9px;font-weight:400;letter-spacing:.08em;text-transform:none;font-size:11px;color:var(--on-navy2);line-height:1.45;cursor:pointer}
.slp-ok input{-webkit-appearance:none;appearance:none;flex:0 0 14px;width:14px;height:14px;margin:1px 0 0;border:1px solid var(--m-dk4);border-radius:1px;display:grid;place-items:center;cursor:pointer}
.slp-ok input:checked{background:#fff;border-color:#fff}
.slp-ok input:checked::after{content:"";width:7px;height:4px;border-left:1.5px solid var(--panel);border-bottom:1.5px solid var(--panel);transform:rotate(-45deg) translate(1px,-1px)}
.slp-err{margin:0;min-height:0;font-size:13px;color:#FFB4A3}
.slp-err:empty{display:none}
.slp-b{width:100%;border-radius:2px;padding:10px 12px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.slp-b.line{background:transparent;border:1px solid var(--m-bl);color:#fff;margin-top:12px}.slp-b.line:hover{background:rgba(158,208,245,.08)}
.slp-b.solid{background:var(--blue);border:1px solid var(--blue);color:#fff}.slp-b.solid:hover{background:var(--m-blue-dk)}
.slp-b:disabled{opacity:.6;cursor:wait}
.slp-b:focus-visible{outline:2px solid var(--m-bl);outline-offset:2px}
.slp-note{margin:4px 0 0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;line-height:1.7;text-align:center;color:var(--on-navy2)}
.slp-done{padding:20px 6px}.slp-check{font-size:34px;margin:0 0 8px;color:var(--m-bl)}.slp-done p{font-size:13px;line-height:1.6}
.slp-rec{display:flex;flex-direction:column;gap:12px}
.mainnav .heart.on{color:var(--sold)}
.mainnav .sl #slCount{margin-left:2px}
/* compare dialog */
dialog.cmp{width:min(1100px,calc(100vw - 32px));background:#fff;color:var(--navy);border-radius:3px}
.cmp-in{position:relative;padding:28px 28px 24px}
.cmp-in h2{margin:0 0 18px;font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:.08em;text-transform:uppercase}
.cmp-scroll{overflow-x:auto}
.cmp-t{border-collapse:collapse;width:100%;font-size:13px}
.cmp-t th,.cmp-t td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.cmp-t tbody th{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.cmp-t td.best{font-weight:700;color:var(--blue)}
.cmp-u{border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;width:130px;color:var(--navy)}
.cmp-u img{width:130px;height:96px;object-fit:contain}
.cmp-u b{font-size:13px;letter-spacing:.08em}
@media(max-width:1000px){
  .app.sl{grid-template-columns:minmax(0,1fr)}
  .slp{grid-column:1;grid-row:auto;position:static;height:auto;border-left:0;border-top:1px solid var(--m-dk3)}
  .sl-bar{padding:12px 16px;grid-template-columns:1fr auto;top:var(--hh)}
  .sl-bar .sort span{display:none}
  .sl-cmp{justify-self:end}.sl-bar .sort{grid-column:1/-1;justify-self:stretch}.sl-bar .sort select{width:100%}
  .app.sl .grid,.app.sl .empty,.app.sl .note{margin-left:16px;margin-right:16px}
}
@media(max-width:900px){.mainnav{overflow-x:auto;scrollbar-width:none;justify-content:flex-start;gap:6px;min-width:0}.mainnav::-webkit-scrollbar{display:none}.mainnav button{flex:0 0 auto}}
/* message: handwritten, like a note to the advisor */
.slp-form textarea#ldMsg{font-family:var(--ff);font-style:italic;font-size:17px;line-height:1.3;letter-spacing:.08em;color:var(--navy);padding:10px 12px;min-height:110px}
.slp-form textarea#ldMsg::placeholder{font-family:inherit;font-size:inherit;color:#6E7D88;opacity:1}
/* contact window, addressed by the advisor's name */
.ct-head{display:flex;align-items:center;gap:18px}
.ct-av{flex:0 0 64px;width:64px;height:64px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.15)}
.ct-av[hidden]{display:none}.ct-av img{width:100%;height:100%;object-fit:cover;display:block}
.ct-in h2{margin:0}
.ct-role{margin:6px 0 0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-navy2)}
.ct-role:empty{display:none}
.ct-lead{margin:20px 0 22px}
.ct-opt .qe{display:block;width:24px;height:24px;color:var(--m-bl);margin-bottom:6px}.ct-opt .qe svg{width:100%;height:100%;display:block}
.ct-opt b{font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.ct-opt:hover .qe{color:#fff}
.ct-head .qz-step{margin:0 0 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-navy2)}

/* ================= campaign prices & codes ================= */
.c-p .was{font-weight:400;font-size:13px;color:var(--m-dk5);letter-spacing:.08em;margin-right:4px}
.c-p .now{color:var(--sold)}
.c-band{display:flex;align-items:center;gap:8px;background:#FFF1EC;color:#B33A17;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-left:1px solid #fff;border-right:1px solid #fff}
.c-promo{background:var(--sold);color:#fff;border-radius:2px;padding:2px 6px;font-size:11px;letter-spacing:.08em}
.sh-spec tr.promo td{color:var(--on-navy2);font-size:11px}
.sh-spec tr.promo td:last-child{color:#FFB49C}
.code-btn{border:0;background:none;color:var(--m-bl);font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:4px 0;display:inline-flex;align-items:center;gap:6px;max-width:100%;text-align:left}
.code-btn:hover{color:#fff}
.code-btn.dark{color:var(--m-bl);align-self:center;margin:2px 0}
.ask-act{flex-wrap:wrap}
.slp-codes{margin:14px 0 0;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--m-bl)}
.slp-codes #slCodes:empty{display:none}
dialog.cd{width:min(480px,calc(100vw - 32px))}
.cd-row{display:flex;gap:8px;margin-top:6px}
.cd-row input{flex:1;min-width:0;background:transparent;border:1px solid var(--m-dk3);border-radius:2px;color:#fff;padding:11px 12px;font-size:17px;letter-spacing:.08em;text-transform:uppercase;font-family:ui-monospace,Menlo,monospace}
.cd-row input:focus{outline:none;border-color:#fff}
.cd-go{border:0;border-radius:2px;background:var(--blue);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:0 18px;cursor:pointer}
.cd-go:disabled{opacity:.6}
.cd-msg{min-height:18px;margin:12px 0 0;font-size:13px;color:var(--on-navy2)}
.cd-msg.ok{color:#8FE0A8}.cd-msg.bad{color:#FFB4A3}
.cd-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.cd-list:empty{display:none}
.cd-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;border-top:1px solid var(--m-dk2);padding-top:8px}
.cd-list li.h{border:0;padding:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-navy2)}
.cd-list code{font-size:13px;color:var(--on-navy2)}
.cd-list button{border:0;background:none;color:var(--m-bl);font-size:13px;text-decoration:underline;cursor:pointer}
.cmp-t .was{display:none}
.sh-spec tr.promo.fin td{color:#fff;font-weight:700;border-bottom-color:var(--m-dk4)}

/* ================= special campaign: home teaser + key + letter boxes ================= */
:root{--gold:#C9A86A;--gold2:#E7D3A6}
.hm-swap{display:grid;justify-items:center;margin:18px auto 0;min-height:64px}
.ic-wrap{display:block;line-height:0}
.hm-swap>*{grid-area:1/1}
.hm-swap .hm-lead{margin:0 auto;-webkit-mask-image:linear-gradient(90deg,transparent 0 33%,#000 66% 100%);mask-image:linear-gradient(90deg,transparent 0 33%,#000 66% 100%);-webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;transition:-webkit-mask-position 1s ease-in-out,mask-position 1s ease-in-out}
.hm-swap.on .hm-lead{-webkit-mask-position:0 0;mask-position:0 0}
.hm-teaser{display:flex;flex-direction:column;align-items:center;gap:10px;border:0;background:none;color:#fff;cursor:pointer;padding:0;font:inherit;visibility:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 0 33%,transparent 66% 100%);mask-image:linear-gradient(90deg,#000 0 33%,transparent 66% 100%);-webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;
  transition:-webkit-mask-position 1.1s ease-in-out .7s,mask-position 1.1s ease-in-out .7s,visibility 0s linear .7s}
.hm-swap.on .hm-teaser{visibility:visible;-webkit-mask-position:0 0;mask-position:0 0}
.hm-swap.on .hm-teaser{pointer-events:auto}
.hm-teaser .ic{height:60px;width:auto;color:var(--gold);filter:drop-shadow(0 0 10px rgba(201,168,106,.25))}
.hm-swap.on .hm-teaser .ic{animation:keyIn 1.6s ease-out .8s both,keyGlint 4.5s ease-in-out 3s infinite}
.ht-t{max-width:340px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;line-height:1.7}
.ht-cta{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold2);border-bottom:1px solid rgba(231,211,166,.5);padding-bottom:2px}
.hm-teaser:hover .ht-cta,.hm-teaser:focus-visible .ht-cta{color:#fff;border-color:#fff}
.hm-teaser:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.hm-teaser.done .ic{color:#8FE0A8;filter:none}.hm-teaser.done[data-icon=key] .ic{transform:rotate(-90deg)}
@keyframes keyIn{from{transform:translateX(-14px) rotate(0);opacity:0}60%{opacity:1}to{transform:none;opacity:1}}
@keyframes keyGlint{0%,80%,100%{filter:drop-shadow(0 0 8px rgba(201,168,106,.2))}88%{filter:drop-shadow(0 0 16px rgba(231,211,166,.7))}}

dialog.cd{width:min(calc(var(--n,6) * 62px + 90px),calc(100vw - 32px));min-width:min(440px,calc(100vw - 32px));text-align:center}
.cd .ct-in{display:flex;flex-direction:column;align-items:center}
.cd-key{color:var(--gold);margin:4px 0 10px}
.cd-key .ic{height:44px;width:auto;transition:transform .8s cubic-bezier(.3,1.4,.5,1),color .4s}
.cd-key.turn .ic{color:#8FE0A8}.cd-key.turn[data-icon=key] .ic{transform:rotate(-90deg)}.cd-key.turn:not([data-icon=key]) .ic{animation:pop .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{40%{transform:scale(1.25) rotate(-6deg)}70%{transform:scale(.95) rotate(3deg)}}
.hm-swap.on .hm-teaser[data-icon=ghost] .ic{animation:keyIn 1.6s ease-out .8s both,float 3.2s ease-in-out 2.4s infinite}
@keyframes float{50%{transform:translateY(-5px)}}
.cd .qz-step{margin:0 0 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold2)}
.cd h2{margin:0}
.cd .ct-lead{margin:12px 0 22px;max-width:420px}
.cd-boxes{display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,52px));gap:8px;justify-content:center;width:100%}
.cd-boxes[hidden],.cd-row[hidden]{display:none}
.cb{width:100%;aspect-ratio:52/64;min-width:0;border:1px solid var(--m-dk3);border-radius:3px;background:rgba(255,255,255,.04);color:#fff;text-align:center;font-family:var(--serif);font-size:clamp(20px,5vw,30px);text-transform:uppercase;caret-color:var(--gold);padding:0;transition:border-color .15s,background .15s,transform .15s}
.cb:focus{outline:none;border-color:var(--gold);background:rgba(201,168,106,.08)}
.cd-boxes.ok .cb{border-color:#8FE0A8;color:#8FE0A8}
.cd-boxes.bad{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.cd .cd-row{width:100%}
.cd-go{margin-top:18px;padding:12px 28px;font-size:11px}
.cd-call{margin:10px 0 0;font-size:13px;color:var(--on-navy2)}
.cd-call a{color:var(--gold2);white-space:nowrap}
.cd-list{width:100%;text-align:left}
@media (prefers-reduced-motion:reduce){
  .hm-swap .hm-lead,.hm-teaser{transition:opacity .4s,visibility 0s;-webkit-mask-image:none;mask-image:none}
  .hm-swap.on .hm-lead{opacity:0}.hm-teaser{opacity:0}.hm-swap.on .hm-teaser{opacity:1}
  .hm-swap.on .hm-teaser .ic{animation:none}.cd-boxes.bad{animation:none}
}
.hm-teaser:not([data-icon=key]) .ic{height:78px}
.cd-key:not([data-icon=key]) .ic{height:58px}

/* ================= selection / offer sent to a client ================= */
.hm-c.hm-of{background:#FBF7EE;box-shadow:0 0 0 2px var(--gold),0 8px 24px rgba(0,0,0,.25)}
.hm-c.hm-of h2::before{content:"✦ ";color:var(--gold)}
.hm-c.hm-of .hm-b{background:var(--navy);border-color:var(--navy);color:#fff}
.slp-rec a.slp-b{display:block;text-align:center;text-decoration:none;box-sizing:border-box}
.slp-rec a.slp-b[hidden]{display:none}
.of-msg{margin:0 0 6px;padding:12px 14px;border-left:2px solid var(--gold);background:rgba(255,255,255,.04);font-family:var(--ff);font-style:italic;font-size:17px;line-height:1.3;color:#fff;text-align:left}
.of-note{margin:0;font-size:13px;line-height:1.5;color:#FFC9B8;text-align:left}
.of-adv{display:flex;flex-direction:column;gap:2px;font-size:13px;margin:6px 0}
.of-adv:empty{display:none}
.of-adv a{color:var(--m-bl);font-size:13px}
#recNav .heart{color:var(--gold)}

/* nav: two text tabs, then three icons (shortlist ♥ · your offer ✦ · contact) */
.nav-sep{width:1px;height:22px;background:var(--line);margin:0 10px}
.mainnav .nav-ic{position:relative;padding:8px 9px;border-bottom:2px solid transparent}
.mainnav .nav-ic[hidden]{display:none}
.nav-ic svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;transition:fill .15s,color .15s,transform .15s}
.nav-ic:hover svg{transform:scale(1.08)}
.nav-ic.sl.on svg{fill:var(--sold);stroke:var(--sold)}
.nav-ic.rc svg{stroke:var(--gold);fill:rgba(201,168,106,.18)}
.nav-ic.rc[aria-current=page] svg{fill:var(--gold)}
.mainnav .nav-ic em{position:absolute;top:1px;right:0;min-width:16px;height:16px;padding:0 4px;font-size:9px;line-height:16px;text-align:center;border-radius:999px;background:var(--navy);color:#fff;display:block}
.mainnav .nav-ic em:empty{display:none}
/* label shows as a small tooltip under the icon */
.nav-tip{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--navy);color:#fff;font-size:11px;letter-spacing:.08em;padding:4px 8px;border-radius:2px;opacity:0;pointer-events:none;transition:opacity .15s;z-index:30}
.nav-ic:hover .nav-tip,.nav-ic:focus-visible .nav-tip{opacity:1}
@media(max-width:900px){.nav-sep{margin:0 4px}.mainnav .nav-ic{padding:6px 7px}.nav-tip{display:none}}

/* ================= unit sheet: Caracteristici / Prețuri ================= */
.sh-body{grid-template-columns:1fr 300px}
.sh-tabs{display:grid;grid-template-columns:1fr 1fr;margin:14px 0 14px;border-bottom:1px solid var(--navy-line)}
.sh-tabs button{border:0;background:none;color:var(--on-navy2);font-family:var(--serif);font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:8px 4px 10px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.sh-tabs button[aria-selected=true]{color:#fff;border-bottom-color:var(--accent)}
.sh-panel[hidden]{display:none}
.print-only{display:none}
.sh-spec .sh-facts{margin:0;grid-template-columns:1fr;gap:0}
.sh-spec .sh-facts>div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--navy-line)}
.sh-spec .sh-facts dd{text-align:right;font-size:13px;font-weight:700;max-width:62%}
.sh-spec .sh-facts dt{font-size:11px;padding-top:1px}
.sh-spec .sh-facts>div.wide{flex-direction:column}
.sh-spec .sh-facts>div.wide dd{max-width:none;text-align:left}
.sh-ter{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.sh-ter li{display:flex;justify-content:space-between;gap:8px;font-weight:400}
.sh-ter small{display:block;color:var(--on-navy2);font-size:11px;font-weight:400}
.pp-promo{width:100%;border-collapse:collapse;font-size:11px;margin-bottom:10px}
.pp-promo td{padding:4px 0;color:var(--on-navy2)}.pp-promo td:last-child{text-align:right;color:#FFB49C}
.pp-card{border:1px solid var(--navy-line);border-radius:3px;padding:12px 12px 10px;margin-bottom:12px}
.pp-k{margin:0;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-navy2)}
.pp-card h4{margin:3px 0 0;font-family:var(--serif);font-weight:400;font-size:15px;letter-spacing:.08em}
.pp-tot{margin:6px 0 2px;font-size:17px;font-weight:700;letter-spacing:.08em}
.pp-more{margin:0 0 4px;font-size:11px;color:#FFB49C}
.pp-rows{width:100%;border-collapse:collapse;font-size:11px;margin-top:6px}
.pp-rows td{padding:5px 0;border-top:1px solid var(--navy-line);vertical-align:top}
.pp-rows td small{display:block;font-size:9px;color:var(--on-navy2)}
.pp-rows td.pc{color:var(--on-navy2);text-align:right;padding-right:8px;white-space:nowrap}
.pp-rows td:last-child{text-align:right;white-space:nowrap;font-weight:700}
.pp-rows tr.step td:first-child{padding-left:10px}
.pp-res{margin:6px 0 0;font-size:11px;color:var(--on-navy2)}
.pp-onreq{font-size:13px}
@media print{.sh-panel[hidden]{display:block!important}.print-only{display:block}.pp-card{break-inside:avoid}.sh-body{grid-template-columns:1fr 300px}}
@media(max-width:1000px){.sh-body{grid-template-columns:1fr}}
.sh-spec h3.print-only{display:none}@media print{.sh-spec h3.print-only{display:flex}}
/* three tabs; price tabs use the same rows as the details tab */
.sh-tabs{grid-template-columns:repeat(3,1fr)}
.sh-tabs button{font-size:13px;letter-spacing:.08em}
.sh-spec .sh-facts dt small{display:block;margin-top:2px;font-size:9px;letter-spacing:.08em;text-transform:none;color:var(--m-dk5)}
.sh-spec .sh-facts dd small{display:block;margin-top:2px;font-size:11px;font-weight:400;color:var(--on-navy2)}
.sh-spec .sh-facts .pp-name dd{font-weight:400;font-size:13px}
.sh-spec .sh-facts .pp-sub dd{font-weight:400}
.sh-spec .sh-facts .pp-sub.promo dd{color:#FFB49C}
.sh-spec .sh-facts .pp-total dt{color:#fff;font-weight:700;padding-top:3px}
.sh-spec .sh-facts .pp-total dd{font-size:15px;font-weight:700}
.sh-spec .sh-facts .pp-pay.step dt{padding-left:10px}
.pp-note{padding:9px 0 0;font-size:11px;color:var(--on-navy2);line-height:1.5}
.sh-spec .sh-facts .pp-pay dd,.sh-spec .sh-facts .pp-total dd{white-space:nowrap}.sh-spec .sh-facts .pp-pay dt{flex:1;min-width:0}
/* payment milestones: one line each — name · date | % · amount */
.sh-spec .sh-facts .pp-pay{align-items:baseline;gap:8px;padding:6px 0}
.sh-spec .sh-facts .pp-pay dt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0}
.sh-spec .sh-facts .pp-pay dt i{font-style:normal;text-transform:none;letter-spacing:.08em;color:var(--m-dk5);font-size:9px;margin-left:6px}
.sh-spec .sh-facts .pp-pay dd{display:flex;align-items:baseline;gap:8px;max-width:none}
.sh-spec .sh-facts .pp-pay dd small{display:inline;margin:0;min-width:28px;text-align:right}
.sh-spec .sh-facts .pp-pay.step dt{padding-left:10px}
.cr-b{padding-right:12px}
@media (pointer:coarse){.cr-h{flex-basis:34px;font-size:17px}}
/* building sections at their real proportions: the section gets its own full-width row */
.sh-keys{grid-template-columns:1fr;gap:18px}
.sh-keys #sh-site{max-width:150px}
.sh-keys #sh-stack{width:100%;height:auto;max-height:130px}
.c-key{width:56px}
.c-key svg{height:auto;max-width:56px}
.c-plan img{margin-left:58px;max-width:calc(100% - 62px)}
.sh-keys #sh-site{max-width:230px;width:100%;height:auto}

/* ---------- unit sheet: fixed size on desktop; the right column scrolls inside instead of resizing the window ---------- */
@media screen and (min-width:1001px){
  #detail{height:min(820px,calc(100vh - 32px));overflow:hidden}
  #detail .sheet{height:100%;min-height:0}
  #detail .sh-main{min-height:0;grid-template-rows:auto minmax(0,1fr) auto}
  #detail .sh-body{min-height:0;overflow:hidden}
  #detail .sh-plan{min-height:0;overflow:hidden}
  #detail .sh-img{min-height:0}
  #detail .sh-img img{max-height:100%}
  #detail .sh-side{min-height:0;overflow-y:auto;scrollbar-width:none}
  #detail .sh-side::-webkit-scrollbar{display:none}
  #detail .sh-spec{min-height:0;overflow:hidden}
  #detail .sh-panel{flex:1 1 0;min-height:0;overflow-y:auto;scrollbar-gutter:stable;margin-right:-10px;padding-right:6px}
  #detail .sh-panel::-webkit-scrollbar{width:4px}
  #detail .sh-panel::-webkit-scrollbar-track{background:transparent}
  #detail .sh-panel::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}
  #detail .sh-panel:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22)}
  #detail .sh-panel::-webkit-scrollbar-button{display:none}
  #detail .sh-cta{flex:none}
}
@supports not selector(::-webkit-scrollbar){@media screen and (min-width:1001px){#detail .sh-panel{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}}}

/* filters page: same bottom block as the selector (count · white sort box · reset left, code right) */
.filters .ask-foot{margin-top:30px}
.filters .ask-foot .sort select{-webkit-appearance:auto;appearance:auto;background-image:none;background-color:#fff;color:var(--navy);border:0;border-radius:2px;padding:7px 8px;font-size:13px;letter-spacing:.08em;max-width:150px}
.filters .ask-foot .sort select:hover,.filters .ask-foot .sort select:focus{background-color:#fff;border:0}
.filters .ask-foot .sort select option{background:#fff;color:var(--navy)}

/* ---------- unit sheet: navigate by building / floor / apartment; north on the left ---------- */
#sh-bld,#sh-floorUnitsCap{display:flex;align-items:center;justify-content:space-between;gap:10px}
.north{display:inline-flex;align-items:center;gap:3px;font-family:var(--ff);font-size:9px;letter-spacing:.08em;color:var(--on-navy2)}
.north svg{width:13px;height:15px;transform:rotate(-90deg);color:#fff}
#sh-site .bldc{cursor:pointer}
#sh-site .bldc:not(.on):hover polygon,#sh-site .bldc:not(.on):hover rect{fill:#9AA6AE}
#sh-stack .lvc{cursor:pointer}
#sh-stack .lvc:not(.on):hover rect:not([fill=transparent]){fill:#D5DCE1}
.sh-floor{display:flex;margin-top:-16px}
.fc{display:inline-flex;align-items:center;gap:4px;max-width:100%}
.fc-mid{display:flex;flex-direction:column;gap:4px;min-width:0}
.fc-row{display:flex;gap:3px;flex-wrap:wrap}
.fc-row:empty{display:none}
.fc-hall{height:9px;background:var(--m-dk3);border-radius:1px}
.fc-end{display:flex;flex-direction:column;gap:3px}
.fc-k{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-navy2);text-align:center}
@media print{.north,.fc-k{display:none}}

/* left column: site key, section and floor plan all span the full column width */
.sh-keys #sh-site{max-width:none;width:100%;height:auto;overflow:visible}
.sh-keys #sh-stack.prof{width:100%;height:auto;max-height:190px}
.sh-floor{display:block;margin-top:-12px}
.fc{display:flex;flex-direction:column;align-items:stretch;gap:5px;width:100%}
.fc-row{display:grid;gap:3px}
.fc-row .fu{width:100%;min-width:0}
.fc-hall{height:9px;background:var(--m-dk3);border-radius:1px}
.fc-k{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-navy2);text-align:left}
/* apartment map in the same grey as the section (current = red, hover = lighter, reserved / sold darker) */
.fc .fu{background:#9AA6AE;color:var(--navy)}
.fc .fu:hover:not(.cur){background:#D5DCE1}
.fc .fu.reserved{background:#7B8790;color:#E3E7EA}
.fc .fu.sold{background:var(--m-dk3);color:#B9C3CA}
.fc .fu.cur{background:var(--accent);color:#fff}

/* =====================================================================================
   Monogram UI Foundations v0.1 (Figma "Selector", Prototip-Desktop) — redesign of the public site
   Colours come from the tokens at the top (editable in the editor: Administration → Website colours).
   ===================================================================================== */
:root{--hh:84px;--fh:72px;--ink2:color-mix(in srgb,var(--m-dark) 65%,#fff);--on-navy2:color-mix(in srgb,var(--m-white) 78%,var(--m-dark))}
html,body{font-family:var(--ff);font-size:17px;color:var(--m-dark)}
body{background:var(--m-dark)}
/* header */
.top{background:var(--m-white);border-bottom:1px solid color-mix(in srgb,var(--m-dark) 15%,#fff)}
.top-in{padding:0 32px;gap:24px}
.mark{flex:0 0 40px;width:40px;height:40px}
.bw b{font-size:24px;letter-spacing:.08em}
.bw span{font-size:13px;letter-spacing:.08em;color:var(--m-dark)}
.stockb{gap:0}
.sb{font-size:13px;font-weight:700;letter-spacing:.08em;padding:7px 12px}
.sb.sold{background:var(--m-red);border-radius:2px 0 0 2px}.sb.av{background:var(--m-blue);border-radius:0 2px 2px 0}.sb:only-child{border-radius:2px}
.mainnav{gap:12px}
.mainnav button{font-size:17px;letter-spacing:.08em;color:var(--m-dark);padding:10px 8px;border-bottom:0}
.mainnav button[aria-current=page]{color:var(--m-blue);font-weight:700;border-bottom:0}
.mainnav .nav-ic{padding:10px 8px}
.mainnav .nav-ic.sl{display:inline-flex;align-items:center;gap:8px}.mainnav .nav-ic.sl .nav-lbl{order:1}.mainnav .nav-ic.sl em{order:2}.mainnav .nav-ic.sl svg{order:3}
.mainnav .nav-ic.sl .nav-lbl{font-size:17px;letter-spacing:.08em;text-transform:uppercase}
.mainnav .nav-ic.sl em{position:static;background:none;color:inherit;font-size:17px;padding:0;min-width:0;height:auto;line-height:1;margin-left:-4px}
.mainnav .nav-ic.sl[aria-current=page]{color:var(--m-blue);font-weight:700}
.nav-ic.sl svg{width:22px;height:22px}
.nav-ic.sl.on svg{fill:var(--m-red);stroke:var(--m-red)}
.nav-sep{display:none}
.lang{border-color:var(--m-dark)}.lang button{font-size:13px;color:var(--m-dark);background:var(--m-white)}.lang button[aria-pressed=true]{background:var(--m-dark);color:#fff}
/* footer bar */
.bar{background:var(--m-white);border-top:1px solid color-mix(in srgb,var(--m-dark) 15%,#fff);gap:24px}
.bar p{font-size:15px;letter-spacing:.08em;gap:6px 26px;color:var(--m-dark)}
.bar .hrs{color:var(--m-dark)}
/* left panels */
.app{grid-template-columns:420px minmax(0,1fr)}
.ask,.app.browse .filters{padding:32px 36px 24px;border-right-color:color-mix(in srgb,var(--m-white) 18%,var(--m-dark))}
.ask h2,.filters h2{font-size:28px;letter-spacing:.08em;line-height:1.3}
.ask-sub{font-size:17px;letter-spacing:0;color:#fff;margin:8px 0 32px}
.filters .filters-head{margin-bottom:24px}
.crit{gap:12px}
.cr{border-radius:4px}
.cr-b{min-height:46px;padding:10px 10px 10px 0;gap:10px}
.cr-h{color:var(--m-dark);flex-basis:28px}
.cr-tag{font-size:15px;font-weight:700;letter-spacing:0;padding:1px 6px;border-radius:4px;background:var(--m-blue)}
.cr:not(.set) .cr-tag{background:var(--m-blue)}
.cr-v{font-size:15px;letter-spacing:0;color:var(--m-dark)}
.cr:not(.set) .cr-v{color:var(--m-dark)}
.cr-c{flex-basis:12px;height:12px}
.cr-o[aria-pressed=true]{background:var(--m-ul);border-color:var(--m-blue)}
.cr-q{font-size:17px}
.ask-foot{margin-top:40px}
.ask-foot #count,.filters .ask-foot b{font-size:17px;font-weight:700;letter-spacing:.08em}
.ask .sort,.filters .sort,.sl-bar .sort{font-size:15px;letter-spacing:0;font-weight:400}
.ask .sort select{font-size:15px;letter-spacing:0;padding:8px 10px;border-radius:4px;max-width:170px}
.rst{font-size:15px;letter-spacing:0}
.code-btn{font-size:15px}
.filters legend{font-size:15px;letter-spacing:0;color:#fff}
.filters .chip{font-size:15px;letter-spacing:0;border-radius:4px;padding:6px 14px;border-color:color-mix(in srgb,var(--m-white) 55%,var(--m-dark))}
.filters .chip[aria-pressed=true]{font-weight:700}
.filters .range select,.filters .range input,.filters .sort select{font-size:15px;letter-spacing:0;border-radius:4px}
.filters .check{font-size:15px;letter-spacing:0}
.filters output{font-size:15px}
/* results grid + unit card */
.results{padding:40px 32px 48px}
.grid{grid-template-columns:repeat(auto-fill,minmax(270px,302px));gap:48px 32px;max-width:none;justify-content:center}
.card{width:auto;border:1px solid var(--m-dark);border-radius:4px;box-shadow:0 16px 32px -16px rgba(0,0,0,.45)}
.card:hover{box-shadow:0 22px 40px -16px rgba(0,0,0,.6)}
.c-h{background:var(--m-dark);height:46px;padding:0 12px;border:0;border-bottom:1px solid var(--m-dark)}
.c-t{font-size:15px;font-weight:700;letter-spacing:.08em}
.c-t b{color:var(--m-bl);font-weight:700;margin-left:4px}
.c-s{font-size:13px;font-weight:700;letter-spacing:.08em;padding:5px 9px;border:1px solid var(--m-bl);border-radius:2px}
.c-s.available{background:var(--m-blue)}
.c-plan{height:250px;padding:14px}
.c-plan img{max-height:200px;max-width:calc(100% - 64px);margin-left:56px}
.c-key{left:14px;top:40px;width:50px;gap:8px;font-size:9px;color:var(--m-dark)}
.c-box{margin:0 18px 16px;border:1px solid var(--m-dark);border-radius:8px;min-height:76px}
.c-rooms{flex-basis:92px;border-right-color:var(--m-dark)}
.c-rooms b{font-size:28px}
.c-rooms span{font-size:13px;letter-spacing:0}
.c-box dl{font-size:13px;letter-spacing:0;padding:8px 12px;gap:2px}
.c-box dd{font-weight:700}
.c-f{border-top:1px solid var(--m-dark);height:62px;padding:0 18px;gap:10px}
.c-p{font-size:17px;font-weight:700;letter-spacing:.08em}
.c-save{font-size:15px;font-weight:700;letter-spacing:0;color:var(--m-dark)}
.c-save span{font-size:17px}
.c-save[aria-pressed=true]{color:var(--m-red)}
.c-m{background:var(--m-ul);color:var(--m-blue)}.c-m.hi{background:var(--m-blue);color:#fff}
/* shortlist: compare ticks + yellow bar */
.c-cmp{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;text-transform:uppercase;cursor:pointer;margin-left:auto}
.c-cmp input{-webkit-appearance:none;appearance:none;width:17px;height:17px;border:2px solid var(--m-dark);border-radius:2px;background:#fff;margin:0;display:grid;place-items:center;cursor:pointer}
.c-cmp input:checked::after{content:"";width:5px;height:9px;border-right:2px solid var(--m-dark);border-bottom:2px solid var(--m-dark);transform:rotate(45deg) translate(-1px,-1px)}
.app.sl .c-save{padding:4px 0}
.card.cmp-on .c-f{background:var(--m-cmp)}
.cmp-bar{position:sticky;bottom:var(--fh);z-index:6;margin:40px 0 0;height:72px;background:var(--m-cmp);display:flex;align-items:center;justify-content:center;gap:16px}
.cmp-bar[hidden]{display:none}
.cb-n{background:var(--m-dark);color:#fff;font-size:13px;text-transform:uppercase;padding:5px 10px;border-radius:2px}
.cb-go{background:#fff;border:1px solid var(--m-dark);color:var(--m-dark);font:inherit;font-weight:700;font-size:15px;text-transform:uppercase;padding:5px 14px;border-radius:2px;cursor:pointer}
.cb-go:disabled{opacity:.5;cursor:default}
/* offer: why we chose it */
.c-why{background:var(--m-ul);color:var(--m-dark);padding:12px 16px;border-top:1px solid var(--m-dark)}
.c-why b{display:block;font-size:13px;font-weight:700;text-transform:uppercase;color:var(--m-blue)}
.c-why p{margin:4px 0 0;font-size:15px;line-height:1.45}
/* shortlist bar + panel */
.app.sl{grid-template-columns:minmax(0,1fr) 440px}
.sl-bar{padding:24px 56px;border-bottom-color:color-mix(in srgb,var(--m-white) 18%,var(--m-dark))}
.sl-bar b{font-size:17px;font-weight:700;letter-spacing:.08em}
.sl-cmp{font-size:15px;letter-spacing:0;font-weight:700}
.app.sl .grid{justify-content:start}
.slp{padding:32px 36px 28px;border-left-color:color-mix(in srgb,var(--m-white) 18%,var(--m-dark))}
.slp h2{font-size:24px;letter-spacing:.08em;line-height:1.4}
.slp-lead{font-size:15px;letter-spacing:0;color:#fff;max-width:340px}
.slp-form label{font-size:15px;letter-spacing:0;font-weight:400}
.slp-form input:not([type=checkbox]),.slp-form textarea{background:#F2F4F5;font-size:15px}
.slp-form textarea{font-family:var(--ff);font-style:normal;font-size:15px}
.slp-form .slp-ok{font-size:13px}
.slp-b{font-size:15px;font-weight:700;letter-spacing:.08em;padding:12px}
.slp-b.solid{background:var(--m-blue);border-color:var(--m-blue)}
.slp-b.line{border-color:rgba(255,255,255,.75)}
.slp-note{font-size:13px;letter-spacing:0}
/* home (entry page) */
.home{background:var(--m-dark)}
.hm-w1{font-size:28px;letter-spacing:.08em}.hm-w2{font-size:15px;letter-spacing:.08em}
.hm-mark{width:36px;height:36px}
.hm-title{font-size:clamp(28px,3.2vw,40px);letter-spacing:.08em}
.hm-lead{font-size:17px;letter-spacing:.08em;max-width:520px;line-height:1.35}
.hm-cards{grid-template-columns:repeat(3,minmax(0,330px));gap:40px}
.hm-c{border-radius:4px;padding:36px 30px 28px;min-height:300px;box-shadow:0 16px 32px -16px rgba(0,0,0,.5)}
.hm-c h2{font-size:28px;letter-spacing:.08em;line-height:1.25}
.hm-c p{font-size:15px;line-height:1.5;color:var(--m-dark);margin:26px 0 26px}
.hm-b{font-size:15px;font-weight:700;letter-spacing:.08em;padding:10px 14px;background:var(--m-ul);border-color:var(--m-dark)}
.hm-b:hover{background:color-mix(in srgb,var(--m-ul) 85%,var(--m-blue))}
.hm-b.solid{background:var(--m-blue);border-color:var(--m-blue)}.hm-b.solid:hover{background:var(--m-blue-dk)}
.hm-sales{font-size:17px;letter-spacing:.08em;max-width:300px;line-height:1.6}
.hm-links a{font-size:13px;letter-spacing:.08em}
@media(max-width:1100px){.hm-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.hm-c h2{font-size:24px}}
@media(max-width:720px){.hm-cards{grid-template-columns:minmax(0,340px)}}
/* contact window */
dialog.ct{background:var(--m-white);color:var(--m-dark);border-radius:4px;width:min(640px,calc(100vw - 32px))}
.ct-in{padding:40px 44px 32px}
.ct-in h2{font-size:32px;letter-spacing:.08em;text-transform:uppercase}
.ct-head .qz-step{color:var(--m-blue);font-weight:700;font-size:15px;letter-spacing:0}
.ct-role{color:var(--m-dark);font-size:15px;letter-spacing:0}
.ct-lead{color:var(--m-dark);font-size:17px}
.ct-opt{background:var(--m-white);border:1px solid var(--m-dark);color:var(--m-dark)}
.ct-opt:hover{border-color:var(--m-blue)}.ct-opt .qe{color:var(--m-blue)}.ct-opt:hover .qe{color:var(--m-blue)}
.ct-opt b{font-size:15px;letter-spacing:0;font-weight:700}
.ct-opt .qs{color:var(--m-dark);font-size:13px}
.ct-hours{color:var(--m-dark);font-size:15px;text-transform:uppercase}
dialog.ct .d-close{background:var(--m-dark);border-color:var(--m-dark)}
/* compare */
dialog.cmp{width:min(1200px,calc(100vw - 32px));border-radius:4px}
.cmp-in{padding:28px 32px 26px}
.cmp-in h2{font-size:24px;letter-spacing:.08em;text-align:center}
.cmp-t{font-size:15px}
.cmp-t thead th{background:var(--m-dark);color:#fff;padding:14px 18px}
.cmp-t thead th:first-child{background:var(--m-dark)}
.cmp-u{color:#fff;width:150px}.cmp-u img{width:150px;height:110px;background:#fff;border-radius:2px}.cmp-u b{color:var(--m-bl);font-size:17px}
.cmp-t tbody th{background:#F4F6F7;font-size:13px;letter-spacing:.08em;color:color-mix(in srgb,var(--m-dark) 70%,#fff);width:240px}
.cmp-t td{padding:10px 18px}
.cmp-t td.best{color:var(--m-blue)}

/* ---------- apartment sheet: full page in 3 columns (selector · apartment & plan · details) ---------- */
dialog#detail{position:fixed;inset:var(--hh) 0 var(--fh) 0;margin:0;width:100%;max-width:none;height:auto;max-height:none;border-radius:0;background:var(--m-dark);color:#fff;overflow:hidden}
dialog#detail::backdrop{background:rgba(10,16,20,.35)}
#detail .sheet{display:grid;grid-template-columns:330px minmax(0,1fr) 432px;height:100%;min-height:0;border:0;background:var(--m-dark)}
#detail .d-close{top:14px;right:14px;width:34px;height:34px;background:#fff;color:var(--m-dark);border:0;font-size:15px}
#detail .sh-side{margin:0;padding:30px 28px;gap:20px;border-right:1px solid color-mix(in srgb,var(--m-white) 18%,var(--m-dark));overflow:auto;background:var(--m-dark)}
#detail .sh-sel{margin:0;font-weight:400;font-size:24px;letter-spacing:.08em;text-transform:uppercase;text-align:center;line-height:1.3}
#detail .sh-cap{font-size:15px;letter-spacing:0}
#detail .sh-main{display:flex;flex-direction:column;border:0;padding:28px 32px 16px;min-height:0;overflow:hidden}
#detail .sh-head{background:none;padding:0 0 16px;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap}
#detail .sh-ttl h2{font-weight:400;font-size:28px;letter-spacing:.08em;gap:10px}
#detail .sh-pill{background:none;color:var(--m-bl);font-size:28px;font-weight:400;padding:0;letter-spacing:.08em;font-family:var(--ff)}
#detail .sh-sub{margin:6px 0 0;font-size:15px;text-transform:uppercase}
#detail .sh-sub b{font-weight:700}#detail .sh-sub i{font-style:normal;margin:0 6px;opacity:.7}
#detail .sh-price{text-align:right;flex:0 0 auto}
#detail .sh-price b{display:block;font-size:28px;font-weight:700;letter-spacing:.08em}
#detail .sh-price b s{font-size:17px;font-weight:400;opacity:.6;margin-right:8px}
#detail .sh-price small{display:block;color:var(--m-bl);font-size:13px;margin-top:4px;text-transform:uppercase}
#detail .sh-plan{flex:1;min-height:0;padding:0;display:flex}
#detail .sh-img{flex:1;background:#fff;border-radius:4px;min-height:0;padding:16px;display:flex;align-items:center;justify-content:center}
#detail .sh-img img{max-height:100%;max-width:100%;height:auto}
#detail .sh-areas{margin:12px 0 0;font-size:13px;text-transform:uppercase;color:#fff;text-align:center}
#detail .sh-foot{border:0;padding:6px 0 0;font-size:13px;color:var(--on-navy2);text-align:center}
#detail .sh-foot b{color:#fff}
#detail .sh-right{border-left:1px solid color-mix(in srgb,var(--m-white) 18%,var(--m-dark));padding:62px 28px 24px;overflow:auto;display:flex;flex-direction:column;gap:22px}
#detail .sh-acts{display:flex;gap:10px}
.sh-act{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 14px;border-radius:2px;font:inherit;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;text-decoration:none;white-space:nowrap}
.sh-act.line{border:1px solid rgba(255,255,255,.8);color:#fff;background:none;flex:1}
.sh-act.solid{border:0;background:#fff;color:var(--m-dark)}
.sh-act svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}
.sh-act[aria-pressed=true] svg{fill:var(--m-red);stroke:var(--m-red)}
#detail .sh-legend h3{font-family:var(--ff);font-size:15px;letter-spacing:0;margin:0 0 10px;color:#fff}
#detail .sh-legend h3::after{display:none}
#detail .sh-legend ol{grid-template-columns:1fr;font-size:13px;gap:5px;letter-spacing:0;color:#fff}
#detail .sh-legend li .n{background:#fff;color:var(--m-dark);border:0;font-weight:700;font-size:11px}
#detail .sh-legend li.ter .n{background:var(--m-ul)}
#detail .sh-legend li .ar,#detail .sh-legend li .lk,#detail .sh-legend .lvl{color:var(--on-navy2)}
/* details & prices: a white card with tabs on top */
#detail .sh-spec{background:none;padding:0;color:var(--m-dark);--navy-line:color-mix(in srgb,var(--m-dark) 14%,#fff);--on-navy2:color-mix(in srgb,var(--m-dark) 62%,#fff);--m-dk5:color-mix(in srgb,var(--m-dark) 62%,#fff);--m-dk4:color-mix(in srgb,var(--m-dark) 30%,#fff)}
#detail .sh-tabs{display:flex;gap:6px;margin:0;border:0}
#detail .sh-tabs button{flex:0 0 auto;font-family:var(--ff);font-weight:700;font-size:15px;letter-spacing:0;padding:9px 14px;background:color-mix(in srgb,var(--m-dark) 45%,#fff);color:var(--m-dark);border:0;border-radius:4px 4px 0 0;margin:0}
#detail .sh-tabs button[aria-selected=true]{background:#fff;color:var(--m-dark)}
#detail .sh-panel{background:#fff;color:var(--m-dark);border-radius:0 4px 4px 4px;padding:6px 14px}
#detail .sh-spec .sh-facts dd{font-size:13px;color:var(--m-dark)}
#detail .sh-spec .sh-facts dt{font-size:13px;color:var(--m-dark)}
#detail .sh-spec .sh-facts .pp-total dt{color:var(--m-dark)}
#detail .sh-spec tr.promo.fin td{color:var(--m-dark)}
#detail .sh-spec .sh-facts .pp-sub.promo dd,#detail .sh-spec tr.promo td:last-child{color:var(--m-red)}
#detail .sh-cta{margin-top:auto;padding-top:0}
#detail .sh-cta .btn{font-family:var(--ff);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.08em;border-radius:2px}
#detail .sh-cta .btn.accent{background:var(--m-blue);border-color:var(--m-blue)}
#detail .sh-cta .btn.line{color:#fff;border-color:rgba(255,255,255,.55)}
#detail .sh-cta-row{grid-template-columns:repeat(3,1fr);gap:6px}
#detail .sh-cta-row .btn{font-size:11px;padding:8px 4px}
#detail .fu{font-family:var(--ff);font-weight:700;font-size:11px}
#detail .fu.cur{background:var(--m-cmp);color:var(--m-dark)}
@media(max-width:1200px){#detail .sheet{grid-template-columns:280px minmax(0,1fr) 384px}}
@media(max-width:1000px){
  dialog#detail{inset:0;overflow:auto}
  #detail .sheet{grid-template-columns:1fr;height:auto}
  #detail .sh-main{order:1;overflow:visible}#detail .sh-right{order:2;border:0;padding:20px 18px}#detail .sh-side{order:3;border:0}
  #detail .sh-img{min-height:300px}
}
@media print{
  dialog#detail{position:static;inset:auto;background:#fff;color:#000}
  #detail .sheet{grid-template-columns:24% 1fr 30%;height:auto;background:#fff}
  #detail .sh-side,#detail .sh-main,#detail .sh-right{color:#000;background:#fff;border:0}
}
.grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.grid .card{max-width:302px;width:100%;justify-self:center}
.app.sl .grid .card{justify-self:start}
#detail .sh-spec{flex:none;display:block;height:auto;min-height:0;overflow:visible}
#detail .sh-panel{flex:none;height:auto;max-height:none;overflow:visible;min-height:0}
#detail .sh-right{overflow-x:hidden}#detail .sh-legend ol{margin:0;width:100%;padding-right:2px}#detail .sh-legend li{min-width:0}
/* horizontal scroll guard: the page itself never scrolls sideways; inner panels can't widen it */
html{overflow-x:hidden}
body{overflow-x:clip;max-width:100%}
.app>*{min-width:0}
.results{overflow-x:clip}
.app.browse .filters,.ask{overflow-x:hidden;overflow-y:auto}
.filters *,.ask *{min-width:0}
.filters input,.filters select,.ask input,.ask select{max-width:100%;box-sizing:border-box}
#detail .sh-acts{flex-wrap:wrap}#detail .sh-act{min-width:0}#detail .sh-act.line{flex:1 1 0}
@media(max-width:1280px){#detail .sh-act{padding:0 8px;letter-spacing:.08em;font-size:13px;gap:5px}#detail .sh-act svg{width:15px;height:15px}}
/* unit page: the page behind it doesn't scroll (no main scroll bar), and the inner panels scroll without a visible bar, so they keep their full width */
html:has(dialog#detail[open]){overflow:hidden}
#detail,#detail .sheet,#detail .sh-side,#detail .sh-main,#detail .sh-right{scrollbar-width:none;-ms-overflow-style:none}
#detail::-webkit-scrollbar,#detail .sheet::-webkit-scrollbar,#detail .sh-side::-webkit-scrollbar,#detail .sh-main::-webkit-scrollbar,#detail .sh-right::-webkit-scrollbar{display:none;width:0;height:0}
#detail .sh-right{overscroll-behavior:contain}
/* unit page, left column: the three graphics sit 50% further from the edges (28px -> 42px) and keep their proportions */
#detail .sh-keys svg,#detail .sh-floor{box-sizing:border-box;width:calc(100% - 28px)!important;margin-left:14px;margin-right:14px}
#detail .sh-keys #sh-stack.prof{max-height:none}
#detail .sh-floor .fu{height:auto;aspect-ratio:52/30}
/* logo mark keeps its 48:42 proportions */
.mark{flex:0 0 auto;width:46px;height:40px}
.hm-mark{width:41px;height:36px}
#homeLink.brand{gap:22px}
/* filters panel: count under the title, sort + reset at the bottom, current choice next to the heading */
.filters .pstat{margin:10px 0 4px;text-align:center;font-size:15px;letter-spacing:.08em;color:var(--m-bl);text-transform:uppercase}
.filters .pstat b{color:var(--m-white);font-weight:700;font-size:17px}.filters .pstat i{font-style:normal;opacity:.55;margin:0 8px}
.filters legend{display:flex;justify-content:space-between;align-items:baseline;width:100%;gap:10px}
.filters legend .lv{font-weight:400;color:var(--m-bl);text-transform:none;letter-spacing:.08em;font-size:13px}
.filters .ptools{display:flex;align-items:center;gap:12px;margin:22px 0 0;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--m-white) 18%,var(--m-dark))}
.filters .ptools .sort{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--m-white)}
.filters .ptools .sort select{flex:1;width:100%;max-width:none;min-width:0;background:var(--m-dark);color:var(--m-white);border:1px solid color-mix(in srgb,var(--m-white) 55%,var(--m-dark));border-radius:2px;height:38px;padding:0 10px;font:inherit;font-size:13px;text-transform:uppercase}
.filters .ptools .sort select option{background:var(--m-dark);color:var(--m-white)}
.filters .ptools .rst{white-space:nowrap}
.filters .pfoot{display:flex;justify-content:flex-end;margin-top:18px}
/* unit page, right column: one white box, folders on top (Details · Rooms) and under it (Price 1 · Price 2); one open at a time */
#detail .sh-spec{margin-top:4px}
#detail .sh-tabs{gap:4px}
#detail .sh-tabs button{flex:1;text-align:center;text-transform:uppercase;letter-spacing:.08em;font-size:13px;border-radius:4px 4px 0 0;background:color-mix(in srgb,var(--m-white) 14%,var(--m-dark));color:color-mix(in srgb,var(--m-white) 78%,var(--m-dark))}
#detail .sh-tabs button[aria-selected=true]{background:var(--m-white);color:var(--m-dark)}
#detail .sh-box{background:var(--m-white);color:var(--m-dark);border-radius:0;position:relative}
#detail .sh-spec[data-on=top] .sh-box{border-radius:0 0 4px 4px}
#detail .sh-spec[data-on=bottom] .sh-box{border-radius:4px 4px 0 0}
#detail .sh-box .sh-panel{background:none;border-radius:0;padding:10px 14px 12px}
#detail .sh-ptabs{display:flex;gap:4px}
#detail .sh-ptabs button{flex:1;min-width:0;border:0;text-align:left;font:inherit;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:9px 10px 11px;border-radius:0 0 4px 4px;background:color-mix(in srgb,var(--m-white) 14%,var(--m-dark));color:var(--m-white)}
#detail .sh-ptabs button small{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--m-bl);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#detail .sh-ptabs button b{font-size:17px;font-weight:700;white-space:nowrap}
#detail .sh-ptabs button[aria-selected=true]{background:var(--m-white);color:var(--m-dark)}
#detail .sh-ptabs button[aria-selected=true] small{color:var(--m-blue)}
#detail .sh-ptabs .pbar{display:flex;gap:2px;height:7px}#detail .sh-ptabs .pbar i{display:block;border-radius:2px}
#detail .sh-ptabs button:hover:not([aria-selected=true]){background:color-mix(in srgb,var(--m-white) 22%,var(--m-dark))}
/* rooms list inside the white box */
#detail .sh-box .sh-legend ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:0;font-size:13px;color:var(--m-dark)}
#detail .sh-box .sh-legend li{display:flex;align-items:baseline;gap:8px;padding:5px 0;border-bottom:1px solid color-mix(in srgb,var(--m-dark) 8%,#fff);text-transform:none}
#detail .sh-box .sh-legend li .n{background:var(--m-dark);color:var(--m-white);flex:none}
#detail .sh-box .sh-legend li.ter .n{background:var(--m-blue);color:var(--m-white)}
#detail .sh-box .sh-legend li .nm{flex:1;min-width:0;white-space:normal;overflow:visible;text-overflow:clip}
#detail .sh-box .sh-legend li .ar{color:var(--m-dark);font-weight:700;white-space:nowrap}
#detail .sh-box .sh-legend li .lk{color:color-mix(in srgb,var(--m-dark) 55%,#fff)}
#detail .sh-box .sh-legend .lvl{border:0;padding:8px 0 2px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--m-dark) 55%,#fff)}
#detail .sh-box .sh-legend .lvl:first-child{padding-top:0}
@media print{#detail .sh-box{min-height:0}#detail .sh-box .sh-panel{display:block!important}}
#detail .sh-box .sh-legend li .n{width:20px;height:20px;min-width:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;line-height:1;align-self:center}
/* unit page: finer text, €/m² + down payment, running total per payment */
#detail .sh-box .sh-panel{padding:8px 14px 10px}
#detail .sh-spec .sh-facts>div{padding:5px 0;gap:8px;border-bottom-color:color-mix(in srgb,var(--m-dark) 7%,#fff)}
#detail .sh-spec .sh-facts dt{font-size:13px;font-weight:400;text-transform:none;letter-spacing:.08em;color:color-mix(in srgb,var(--m-dark) 62%,#fff)}
#detail .sh-spec .sh-facts dd{font-size:13px;font-weight:700;color:var(--m-dark)}
#detail .sh-spec .sh-facts .pp-name dd{font-weight:400;font-size:13px}
#detail .sh-spec .sh-facts .pp-total{padding:7px 0;border-bottom:1px solid var(--m-dark)}
#detail .sh-spec .sh-facts .pp-total dt{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--m-dark)}
#detail .sh-spec .sh-facts .pp-total dd{font-size:15px;font-weight:700}
#detail .sh-spec .sh-facts .pp-pay{padding:4px 0}
#detail .sh-spec .sh-facts .pp-pay dt{font-size:13px;color:var(--m-dark)}
#detail .sh-spec .sh-facts .pp-pay.step dt{padding-left:12px;color:color-mix(in srgb,var(--m-dark) 62%,#fff)}
#detail .sh-spec .sh-facts .pp-pay dd{font-size:13px;font-weight:700;gap:10px}
#detail .sh-spec .sh-facts .pp-pay dd small{font-size:11px;color:color-mix(in srgb,var(--m-dark) 50%,#fff);font-weight:400;min-width:26px}
#detail .sh-spec .sh-facts .pp-pay dd .cum{font-size:11px;font-weight:400;color:color-mix(in srgb,var(--m-dark) 50%,#fff);min-width:34px;text-align:right}
#detail .sh-spec .sh-facts .pp-head{padding:6px 0 2px;border:0}#detail .sh-spec .sh-facts .pp-head dt,#detail .sh-spec .sh-facts .pp-head dd{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:color-mix(in srgb,var(--m-dark) 45%,#fff);font-weight:400}
#detail .sh-spec .sh-facts .pp-head dd{display:flex;gap:10px;max-width:none}#detail .sh-spec .sh-facts .pp-head dd span:nth-child(1),#detail .sh-spec .sh-facts .pp-pay dd small{width:28px;min-width:28px;text-align:right}#detail .sh-spec .sh-facts .pp-head dd span:nth-child(2),#detail .sh-spec .sh-facts .pp-pay dd .am{width:84px;text-align:right}#detail .sh-spec .sh-facts .pp-head dd span:nth-child(3),#detail .sh-spec .sh-facts .pp-pay dd .cum{width:36px;min-width:36px;text-align:right}
#detail .sh-spec .sh-facts .pp-kpi{display:grid!important;grid-template-columns:1fr 1fr 1fr;gap:6px;border:0;padding:8px 0 4px}
#detail .sh-spec .sh-facts .pp-kpi span{background:color-mix(in srgb,var(--m-ul) 70%,#fff);border-radius:3px;padding:6px 7px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:color-mix(in srgb,var(--m-dark) 60%,#fff)}
#detail .sh-spec .sh-facts .pp-kpi b{display:block;font-size:13px;color:var(--m-dark);letter-spacing:0;text-transform:none;margin-top:2px}
#detail .pp-note{font-size:11px;padding-top:7px}
#detail .sh-spec .sh-facts .pp-head dt{padding:0}
#detail .sh-box .sh-panel{min-width:0}
#detail .sh-box .sh-facts{grid-template-columns:minmax(0,1fr)}
#detail .sh-spec .sh-facts>div{min-width:0}
#detail .sh-spec .sh-facts .pp-name dd{white-space:normal;max-width:70%}
#detail .sh-spec .sh-facts .pp-pay dd,#detail .sh-spec .sh-facts .pp-head dd{gap:6px}
#detail .sh-spec .sh-facts .pp-head dd span:nth-child(2),#detail .sh-spec .sh-facts .pp-pay dd .am{width:76px}
#detail .sh-spec .sh-facts .pp-head dd span:nth-child(3),#detail .sh-spec .sh-facts .pp-pay dd .cum{width:32px;min-width:32px}
#detail .sh-spec .sh-facts .pp-head dd span{letter-spacing:.08em;white-space:nowrap}#detail .sh-spec .sh-facts .pp-head dd span:nth-child(3){width:34px;min-width:34px}#detail .sh-spec .sh-facts .pp-pay dd .cum{width:34px;min-width:34px}
/* price folders: only the instalments on screen */
@media screen{#detail .sh-spec .sh-facts .pp-pr{display:none}}
#detail .sh-spec .sh-facts .pp-head{padding-top:2px}
/* rooms folder: same type and spacing as the details folder */
#detail .sh-box .sh-legend ol{font-size:13px}
#detail .sh-box .sh-legend li{padding:5px 0;gap:8px;align-items:center;border-bottom-color:color-mix(in srgb,var(--m-dark) 7%,#fff)}
#detail .sh-box .sh-legend li .nm{font-size:13px;font-weight:400;letter-spacing:.08em;color:color-mix(in srgb,var(--m-dark) 62%,#fff)}
#detail .sh-box .sh-legend li .ar{font-size:13px;font-weight:700}
#detail .sh-box .sh-legend li .n{width:17px;height:17px;min-width:17px;font-size:9px}
#detail .sh-box .sh-legend li .lk{font-size:11px}
#detail .sh-box .sh-legend .lvl{font-size:11px;padding:7px 0 1px}
/* unit page: 3 rows of text — title + price · rooms + areas · commercial-plan note under the plan */
#detail .sh-head{flex-wrap:wrap;align-items:baseline;row-gap:0}
#detail .sh-ttl{flex:1 1 auto;min-width:0}
#detail .sh-price{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
#detail .sh-price b{display:inline}
#detail .sh-price small{display:inline;margin:0;font-size:13px;letter-spacing:.08em}
#detail .sh-sub{margin:10px 0 0;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--m-white)}
#detail .sh-sub b{font-weight:700}
#detail .sh-sub i{font-style:normal;opacity:.45;margin:0 12px}
#detail .sh-sub .v{color:var(--m-bl)}
#detail .sh-foot{padding:12px 0 0;font-size:13px;letter-spacing:.08em;text-transform:none;color:color-mix(in srgb,var(--m-white) 62%,var(--m-dark));text-align:center}
#detail .sh-foot b{color:var(--m-bl);font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-right:8px}
@media(max-width:1000px){#detail .sh-sub i{margin:0 6px}#detail .sh-sub{font-size:13px}}
#detail .sh-head>.sh-sub{flex:0 0 100%;order:3}#detail .sh-ttl{flex:1 1 0}
#detail .sh-ttl h2{display:block;font-size:clamp(22px,2.1vw,34px);line-height:1.15}#detail .sh-ttl h2 .sh-pill{display:inline}
#detail .sh-ttl h2{font-size:clamp(20px,1.75vw,34px)}
#detail .sh-ttl h2 .sh-pill,#detail .sh-ttl h2 .sh-word{font-size:1em}#detail .sh-price b{font-size:clamp(22px,2vw,28px)}
#detail .sh-box .sh-legend li .n{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--m-dark) 30%,#fff)}
#detail .sh-box .sh-legend li .n{box-shadow:inset 0 0 0 1px rgba(26,43,51,.18)}
#detail .sh-foot b{color:inherit;margin-right:0;font-weight:700}#detail .sh-foot b::after{content:"|";display:inline-block;margin:0 12px;font-weight:400;opacity:.55}
/* ---------- offer page (?o=…): a page of its own, no selector around it ---------- */
body.op-mode{background:var(--m-dark)}
body.op-mode>*:not(#offerPage):not(#pdoc):not(script):not(dialog):not(.ps-host):not(.html2canvas-container){display:none!important}
.op{display:block;background:var(--m-dark);color:var(--m-white);min-height:100vh}
.op-in{max-width:1040px;margin:0 auto;padding:40px 24px 30px;position:relative;text-align:center}
.op-lang{position:absolute;right:24px;top:24px;display:flex}.op-lang button{border:1px solid color-mix(in srgb,var(--m-white) 45%,var(--m-dark));background:none;color:var(--m-white);font:inherit;font-size:13px;padding:5px 9px;cursor:pointer}.op-lang button[aria-pressed=true]{background:var(--m-white);color:var(--m-dark)}
.op .op-logo{margin:0 auto 40px}
.op-kick{margin:0 0 14px;color:var(--m-bl);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.op-title{margin:0;font-weight:400;font-size:clamp(26px,3.4vw,40px);letter-spacing:.08em;text-transform:uppercase;line-height:1.2}
.op-sub{margin:14px auto 0;max-width:560px;color:var(--m-bl);font-size:15px;letter-spacing:.08em;text-transform:uppercase;line-height:1.5}
.op-intro{margin:40px auto 0;max-width:430px;font-size:15px;line-height:1.6}
.op-meta{margin:10px 0 0;font-size:13px;color:color-mix(in srgb,var(--m-white) 62%,var(--m-dark))}
.op-msg{margin:22px auto 0;max-width:560px;font-style:italic;font-size:17px;line-height:1.5}
.op-list{margin:56px 0 0;display:flex;flex-direction:column;gap:56px}
.op-row{display:grid;grid-template-columns:minmax(0,1fr) 302px minmax(0,1fr);gap:22px;align-items:stretch;text-align:left}
.op-why{border:1px solid color-mix(in srgb,var(--m-white) 55%,var(--m-dark));border-radius:4px;padding:16px 18px;display:flex;flex-direction:column}
.op-why small{display:block;text-align:center;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--m-bl);padding-bottom:12px;border-bottom:1px solid color-mix(in srgb,var(--m-white) 25%,var(--m-dark))}
.op-why p{margin:auto 0;padding:18px 4px;text-align:center;font-size:17px;line-height:1.45;letter-spacing:.08em;text-transform:uppercase}
.op-card .card{margin:0;max-width:none;width:100%;cursor:default}
.op-card .c-cmp,.op-card .c-m{display:none}
.op-spec{background:var(--m-ul);color:var(--m-dark);border-radius:4px;padding:16px 18px}
.op-spec h3{margin:0 0 12px;text-align:center;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.op-spec dl{margin:0}.op-spec dl div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid color-mix(in srgb,var(--m-dark) 12%,var(--m-ul))}
.op-spec dt{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--m-dark) 70%,var(--m-ul))}
.op-spec dd{margin:0;font-size:13px;font-weight:700;text-align:right}
.op-gone{padding:20px;min-height:200px}.op-gone p{color:var(--m-dark);text-align:center;margin-top:40px}
.op-close{margin:72px 0 0}.op-close small{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--m-bl)}.op-close p{margin:8px 0 0;font-size:17px;letter-spacing:.08em;text-transform:uppercase;line-height:1.4}
.op-btns{margin:36px auto 0;display:flex;flex-direction:column;align-items:center;gap:10px}
.op-btns a{min-width:300px;height:42px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-radius:2px}
.op-wa{background:#25D366;color:#fff}.op-alt{border:1px solid color-mix(in srgb,var(--m-white) 60%,var(--m-dark));color:var(--m-white)}
.op-foot{margin:80px 0 0;padding-top:30px}.op-foot p{margin:0 0 18px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--m-bl)}
.op-foot .op-logo{margin:0 auto 18px}.op-foot nav{display:flex;justify-content:center;gap:22px}.op-foot nav a{color:var(--m-bl);font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
@media(max-width:900px){.op-row{grid-template-columns:1fr;max-width:420px;margin:0 auto}.op-why p{font-size:17px}.op-lang{top:14px;right:14px}}
@media print{body.op-mode{background:#fff}.op-lang,.op-btns,.op-act{display:none}}
@media print{html,body{height:auto!important;overflow:visible!important}dialog[open]{inset:0 auto auto 0!important;margin:0!important;transform:none!important}body.op-mode #offerPage{display:none!important}}
/* cards: no building / floor sketch — the plan fills the whole picture area */
.card .c-plan{padding:8px;height:250px}
.card .c-plan img{margin:0;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
.op-card .card{border:1px solid color-mix(in srgb,var(--m-white) 55%,var(--m-dark));border-radius:4px;overflow:hidden;box-shadow:none}
/* offer page: approve the offer */
.op-appr{margin:36px auto 0;max-width:600px;padding:20px 0 0;border-top:1px solid color-mix(in srgb,var(--m-bl) 35%,var(--m-dark));text-align:center}
.op-appr p{margin:0 0 16px;font-size:15px;line-height:1.55;color:color-mix(in srgb,var(--m-white) 78%,var(--m-dark))}
.op-act{display:flex;justify-content:center;align-items:center;gap:10px}
.op-appr button{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 26px;border:0;border-radius:2px;background:var(--m-white);color:var(--m-dark);font:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .15s}
.op-appr button:hover{background:var(--m-bl)}
.op-circ{width:44px;height:44px;flex:0 0 44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:filter .15s,border-color .15s}
.op-circ.op-wa{background:#25D366;color:#fff}.op-circ.op-wa:hover{filter:brightness(1.08)}
.op-circ.op-alt{border:1px solid color-mix(in srgb,var(--m-white) 55%,var(--m-dark));color:var(--m-white)}.op-circ.op-alt:hover{border-color:var(--m-bl);color:var(--m-bl)}
.op-appr.done p{color:#7EE2A6}
.op-in>.op-foot{margin:56px 0 0;padding-top:0}.op-in>.op-foot p{margin:0 0 12px;font-size:11px}.op-in>.op-foot .op-logo{zoom:.7;margin:0 auto 12px}
.op-btns{margin-top:22px}
/* ---------- downloadable plan sheet (A4 landscape, rendered off-screen to PDF) ---------- */
.ps-host{position:absolute;left:-20000px;top:0;z-index:-1;pointer-events:none}
.ps-pg{--ink:#1A2B33;--mut:#7E8A92;--ln:#D5DADE;width:1123px;height:794px;background:#fff;color:var(--ink);display:grid;grid-template-columns:250px minmax(0,1fr) 280px;grid-template-rows:62px minmax(0,1fr) 54px;border:1px solid var(--ink);font-family:var(--ff),serif;box-sizing:border-box;overflow:hidden}
.ps-pg *{box-sizing:border-box}
.ps-sd{grid-row:1/4;border-right:1px solid var(--ink);padding:28px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:0}
.ps-lg{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:24px}.ps-lg svg,.ps-lg img{height:34px;width:auto}
.ps-lg b{font-weight:400;font-size:25px;letter-spacing:.14em;text-transform:uppercase}.ps-lg small{font-size:13px;letter-spacing:.3em;text-transform:uppercase}
.ps-site{width:150px;margin:4px 0 12px}.ps-site svg{width:100%;height:auto;display:block}.ps-site text{display:none}
.ps-cap{margin:0;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;line-height:1.8}
.ps-pill{display:inline-block;background:var(--acc);color:#fff;padding:0 8px;border-radius:3px;font-size:11px;letter-spacing:.04em;line-height:19px;height:19px;vertical-align:middle}
.ps-stk{width:120px;margin:18px auto 14px}.ps-stk svg{width:100%;height:auto;display:block}
.ps-k{margin:0 0 6px;align-self:flex-start;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.ps-fg{width:100%}.ps-fr{display:grid;gap:2px}.ps-fr i{font-style:normal;height:22px;display:block;text-align:center;line-height:20px;font-size:9px;white-space:nowrap;border:1px solid var(--ln);color:var(--mut);overflow:hidden}.ps-fr i.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:700}.ps-hall{height:5px;background:var(--ln);margin:2px 0}
.ps-hd{grid-column:2/4;border-bottom:1px solid var(--ink);display:flex;align-items:center;gap:14px;padding:0 26px;white-space:nowrap;min-width:0}
.ps-hd .t{font-size:21px;letter-spacing:.06em;text-transform:uppercase}.ps-hd .ps-pill{font-size:13px;line-height:22px;height:22px;padding:0 9px}.ps-hd .r{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ps-hd .a{margin-left:auto;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}.ps-hd .a span{font-weight:400}.ps-hd .a i{font-style:normal;margin:0 7px;font-weight:400;color:var(--mut)}
.ps-pl{border-right:1px solid var(--ink);padding:18px;min-height:0;min-width:0;overflow:hidden}.ps-pl{display:flex;align-items:center;justify-content:center}.ps-pl img{display:block}
.ps-rt{display:flex;flex-direction:column;min-height:0}.ps-rt section{padding:16px 20px;border-bottom:1px solid var(--ink)}.ps-rt section:last-child{border:0;flex:1}
.ps-rt h4{margin:0 0 12px;font-size:12.5px;letter-spacing:.12em;font-weight:700;text-transform:uppercase}
.ps-rt table{width:100%;border-collapse:collapse}
.ps-rt .lgd td{padding:2px 0;font-size:9.8px;text-transform:uppercase;letter-spacing:.04em;vertical-align:top;border:0}
.ps-rt .lgd td.n{width:24px}.ps-rt .lgd td.n span{display:block;width:16px;height:16px;border:1px solid var(--acc);color:var(--acc);border-radius:50%;text-align:center;line-height:14px;font-size:8.5px;letter-spacing:0}
.ps-rt .lgd td.nm{line-height:1.3;padding-top:3px}.ps-rt .lgd td.ar{text-align:right;white-space:nowrap;color:var(--mut);font-weight:400;padding:3px 0 0 8px}
.ps-rt .lgd tr.lv td{font-size:9px;color:var(--mut);letter-spacing:.12em;padding-top:6px}
.ps-rt .spc{font-size:10px;text-transform:uppercase;letter-spacing:.03em}.ps-rt .spc td{padding:5px 0;border-bottom:1px solid var(--ln)}.ps-rt .spc td:last-child{text-align:right;white-space:nowrap;font-weight:700;padding-left:10px}
.ps-pg.dense .ps-rt section{padding:12px 20px}.ps-pg.dense .ps-rt h4{margin-bottom:9px}.ps-pg.dense .ps-rt .lgd td{padding-top:1px;padding-bottom:1px}.ps-pg.dense .ps-rt .lgd td.nm,.ps-pg.dense .ps-rt .lgd td.ar{padding-top:2px}.ps-pg.dense .ps-rt .spc td{padding:3.5px 0}
.ps-ft{grid-column:2/4;border-top:1px solid var(--ink);padding:0 26px;display:flex;align-items:center;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;color:var(--mut)}.ps-ft b{color:var(--ink);margin-right:8px}
#sh-dl.busy{opacity:.55;cursor:progress}
/* unit sheet opened from an offer link: offer price, the offer's schedule only, no navigation to other units */
.op-row .card.op-open{cursor:pointer}.op-row .card.op-open:hover{box-shadow:0 0 0 2px var(--m-bl)}
#detail.ofm #sh-save{display:none}
#detail.ofm #sh-site,#detail.ofm #sh-stack,#detail.ofm .sh-side .fu{cursor:default;pointer-events:none}
#detail.ofm .sh-side .fu.notof{opacity:.35}
#detail.ofm .sh-side .fu.inof{box-shadow:inset 0 0 0 2px var(--m-cmp)}
#detail.ofm .sh-ptabs button:disabled{cursor:default;opacity:.45}
#detail.ofm .sh-ptabs button:disabled:hover{background:color-mix(in srgb,var(--m-white) 14%,var(--m-dark))}

/* while the catalog loads (~1 s): the Monogram mark, white, filling with light blue from top to bottom */
body.booting{background:var(--m-dark)}
body.booting>*:not(script):not(#boot){visibility:hidden}
#boot{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:9999;pointer-events:none}
body.booting #boot{display:flex}
#boot .bk{position:relative;width:64px;height:56px}
#boot svg{position:absolute;inset:0;width:100%;height:100%}
#boot .fill{clip-path:inset(0 0 100% 0);animation:bootfill 1.4s cubic-bezier(.6,0,.3,1) infinite}
@keyframes bootfill{0%{clip-path:inset(0 0 100% 0)}70%,100%{clip-path:inset(0 0 0 0)}}

/* footer: Knight Frank logo (white), same slot and spacing as the former footer logo */
.hm-kf{height:84px;display:flex;align-items:center;justify-content:center}.hm-kf img{display:block;height:52px;width:auto}

/* unit sheet: only the WhatsApp button under the panel (e-mail, copy link and print removed) */
#detail .sh-cta-row{display:none!important}

/* the offer page container is in every page, hidden: its min-height was adding an empty screen below the selector, filters and questionnaire */
#offerPage[hidden]{display:none!important}

/* desktop: the right column is fixed to the window — buttons on top, prices + WhatsApp at the bottom,
   the white box takes the space between and scrolls inside (no visible scrollbar, so widths never change) */
@media(min-width:1001px){
  #detail .sh-right{overflow:hidden}
  #detail .sh-acts,#detail .sh-tabs,#detail .sh-ptabs,#detail .sh-cta{flex:none}
  #detail .sh-spec{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  #detail .sh-box{flex:1 1 auto;min-height:0!important;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none}
  #detail .sh-box::-webkit-scrollbar{display:none;width:0;height:0}
  #detail .sh-fade{position:sticky;bottom:0;display:block;height:40px;margin-top:-40px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 85%);pointer-events:none;opacity:0;transition:opacity .2s}
  #detail .sh-box.more .sh-fade{opacity:1}
}
@media(max-width:1000px){#detail .sh-fade{display:none}}
@media print{#detail .sh-fade{display:none}}

/* sort box (dark): a down arrow like the filter selects, so it reads as a drop-down list */
.filters .ptools .sort select{-webkit-appearance:none;appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FFFFFF' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}

/* "Doesn't matter" questions: gathered at the end, under a thin labelled line, dimmed */
.cr{position:relative}
.cr.any{opacity:.55;transition:opacity .2s}.cr.any:hover,.cr.any.open{opacity:1}
.cr.landed{opacity:1;box-shadow:0 0 0 2px var(--m-bl);transition:box-shadow .3s,opacity .3s}
.cr-note{position:absolute;right:8px;top:-9px;z-index:2;background:var(--m-bl);color:var(--m-dark);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:2px;animation:crnote .3s ease-out;transition:opacity .35s}
.cr-note.out{opacity:0}
@keyframes crnote{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* selector: link under the recommendations to show every unit */
.more-u{display:block;margin:22px auto 0;background:none;border:0;border-bottom:1px solid color-mix(in srgb,var(--m-white) 45%,transparent);color:var(--m-white);font:inherit;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:4px 2px;cursor:pointer;opacity:.8}.more-u:hover{opacity:1;border-color:var(--m-bl);color:var(--m-bl)}.more-u[hidden]{display:none}

/* selector, every answer "No preference": no list, a quiet invitation instead */
.results .empty.noprefs{padding:clamp(60px,14vh,140px) 20px;font-family:var(--serif);font-size:clamp(20px,2vw,26px);letter-spacing:.08em;text-transform:uppercase;color:var(--m-white);line-height:1.4}
.results .empty.noprefs .np-ct{display:table;margin:22px auto 0;font-family:var(--ff);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--m-bl);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:3px;transition:border-color .15s}
.results .empty.noprefs .np-ct:hover{border-bottom-color:var(--m-bl)}

/* card: the match % sits on the plan (top right), so the price always stays on one line */
.card .c-plan .c-m{position:absolute;top:10px;right:10px;z-index:1;font-size:13px;padding:3px 9px}
.c-p{white-space:nowrap;min-width:0}
/* selector answers: same size as the home-page card text (15px) */
.cr-o b{font-size:15px}
.cr-o small{font-size:15px;line-height:1.45;margin-top:3px}

/* bottom of both left panels, same layout: Sort on its own full-width row, then Reset (left) · Have a code? (right) */
.filters .pfoot{justify-content:space-between;align-items:center;gap:12px;margin-top:16px}
.ask .ask-foot{flex-direction:column;align-items:stretch;gap:18px}
.ask .ask-foot #count{text-align:left}
.ask .ask-foot .sort{display:flex;align-items:center;gap:8px;width:100%;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--m-white) 18%,var(--m-dark));text-transform:uppercase;letter-spacing:.08em;font-size:13px}
.ask .ask-foot .sort select{flex:1;width:100%;max-width:none;min-width:0;height:38px;padding:0 10px;border-radius:2px;font-size:13px;text-transform:uppercase}
.ask .ask-act{margin-top:16px}

/* ================= phone (≤ 900px) — written last so it wins over the desktop redesign rules above ================= */
@media(max-width:900px){
  :root{--hh:104px;--fh:52px}
  /* header: logo + RO/EN on one row, the menu on the second */
  .top-in{height:auto;flex-wrap:wrap;padding:8px 14px 4px;gap:4px 10px}
  .mark{flex:0 0 30px;width:30px;height:30px}
  .bw b{font-size:15px;letter-spacing:.08em}.bw span{font-size:11px}
  .stockb{display:none}
  .lang{margin-left:auto}.lang button{padding:4px 8px;font-size:11px}
  .mainnav{order:3;width:100%;margin:0;gap:2px;justify-content:space-between;overflow:visible}
  .mainnav button{font-size:13px;padding:8px 4px;letter-spacing:.08em}
  .mainnav .nav-ic{padding:8px 6px}
  .mainnav .nav-ic.sl .nav-lbl{display:none}
  .mainnav .nav-ic.sl em{font-size:13px}
  /* one column: the panel on top, the units under it */
  .app,.app.sl,.app.browse{grid-template-columns:minmax(0,1fr)}
  .ask,.app.browse .filters{position:static;height:auto;overflow:visible;border-right:0}
  .results{padding-bottom:70px}
  /* bottom bar: one short line */
  .bar{gap:10px;padding:0 12px}
  .bar p{font-size:13px;letter-spacing:.08em;flex-wrap:nowrap;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;min-width:0}
  .bar p #barLeadTxt,.bar p .hrs{display:none}
  /* unit window: the price never runs under the close button */
  #detail .sh-head{padding-right:52px}
  #detail .sh-ttl{flex:0 0 100%}
  #detail .sh-ttl h2{font-size:24px}
  #detail .sh-price{order:2;margin-top:6px}
  #detail .sh-price b{font-size:24px}
  /* contact: the three ways under each other */
  .ct-opts{grid-template-columns:1fr}
  .ct-opt{flex-direction:row;align-items:center;gap:12px}
  .ct-opt .qs{word-break:normal;overflow-wrap:anywhere}
}
/* phone: a button that jumps from the long panel to the units */
.to-res{display:none}
@media(max-width:900px){
  .to-res{position:fixed;left:14px;right:14px;bottom:calc(var(--fh) + 10px);z-index:19;height:46px;border:0;border-radius:2px;background:var(--m-blue);color:#fff;font:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 6px 18px rgba(0,0,0,.35);cursor:pointer;transition:opacity .2s,transform .2s}
  .to-res.on{display:block}
  .to-res.away{opacity:0;transform:translateY(12px);pointer-events:none}
}
body.on-home .to-res,body.op-mode .to-res{display:none!important}

/* ================= budget filter: the quiz bands as equal segments (budget134) ================= */
.bsc{position:relative;height:44px;margin:14px 9px 2px;touch-action:none;cursor:pointer;user-select:none;-webkit-user-select:none}
.bs-s{position:absolute;top:4px;height:10px}
.bs-s::before{content:"";position:absolute;inset:0 2px;border-radius:1px;background:color-mix(in srgb,var(--m-white) 22%,transparent);transition:background .15s}
.bs-s.on::before{background:var(--m-bl)}
.bs-l{position:absolute;top:24px;transform:translateX(-50%);font-size:13px;letter-spacing:.08em;color:color-mix(in srgb,var(--m-white) 55%,transparent);white-space:nowrap;pointer-events:none}
.bs-l.on{color:var(--m-white);font-weight:700}.bs-l.l{transform:none;margin-left:-4px}.bs-l.r{transform:translateX(-100%);margin-left:4px}
.bs-h{position:absolute;top:9px;width:18px;height:18px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:grab;transition:left .12s}
.bs-h:active{cursor:grabbing}.bs-h:focus{outline:none}.bs-h:focus-visible{box-shadow:0 0 0 4px rgba(255,255,255,.25)}
#o-budget{display:block;margin-top:6px}
.bsc-k[hidden]{display:none}
.bsc-k{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:13px;color:var(--m-white);cursor:pointer}
.bsc-k input{width:16px;height:16px;margin:0;accent-color:#fff}

/* ================= prices hidden: "Preț la cerere" (stage 3) ================= */
#detail .sh-por{display:flex;align-items:center;justify-content:center;padding:14px 10px;border-radius:0 0 4px 4px;background:var(--m-white);color:var(--m-dark)}
#detail .sh-por[hidden]{display:none}
#detail .sh-por b{font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
@media print{#detail .sh-por{display:none!important}}
#goneDlg .ct-in{text-align:center}
#goneDlg .cd-go{display:block;width:100%;height:46px;margin-top:22px}
#goneDlg .gone-call{margin:14px 0 0;font-size:13px}#goneDlg .gone-call a{color:var(--m-blue)}

/* ================= access codes (stage 4) ================= */
.card .c-s.preview{background:#fff;color:var(--m-blue);border-color:var(--m-blue)}
.cd-list li.all{justify-content:center;border-top:1px solid var(--m-dk2);padding-top:12px;margin-top:4px}
.cd-list li.all button{border:1px solid currentColor;background:none;color:inherit;font:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:9px 16px;border-radius:2px;cursor:pointer;opacity:.8}
.cd-list li.all button:hover{opacity:1}

/* compare: a small pill next to the heart — fits next to "Price on request" too */
.card .c-f .c-cmp{margin:0 0 0 auto;flex:0 0 auto;gap:0;height:22px;padding:0 7px;border:1.5px solid var(--m-dark);border-radius:999px;background:#fff;color:var(--m-dark);font-size:9px;font-weight:700;letter-spacing:.08em;line-height:1;text-transform:uppercase;transition:background .15s,color .15s}
.card .c-f .c-cmp input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.card .c-f .c-cmp:has(input:checked){background:var(--m-dark);color:#fff}
.card .c-f .c-cmp:has(input:focus-visible){outline:2px solid var(--m-blue);outline-offset:2px}
.card.cmp-on .c-f .c-cmp{border-color:var(--m-dark)}
.app.sl .card .c-f{gap:8px}

/* ================= code window: in the site's own look (navy head like the unit cards, white body) ================= */
dialog#codeDlg{width:min(680px,calc(100vw - 32px));max-width:calc(100vw - 32px);min-width:0;margin:auto;padding:0;border:0;border-radius:4px;overflow:hidden;background:var(--m-white);color:var(--m-dark);text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.45)}
dialog#codeDlg::backdrop{background:rgba(16,26,32,.72);backdrop-filter:blur(3px)}
#codeDlg .ct-in{padding:0 0 28px;align-items:stretch}
#codeDlg .cd-key{display:none}
#codeDlg .d-close{background:transparent;border:1px solid color-mix(in srgb,var(--m-white) 40%,transparent);color:#fff;top:16px;right:16px}
#codeDlg .d-close:hover{border-color:#fff}
#codeDlg .cd-head{background:var(--m-dark);color:var(--m-white);padding:38px 48px 30px;position:relative}
#codeDlg .cd-head::after{content:"";position:absolute;left:50%;bottom:0;width:56px;height:3px;background:var(--m-bl);transform:translateX(-50%)}
#codeDlg .qz-step{margin:0 0 10px;color:var(--m-bl);font-size:13px;font-weight:700;letter-spacing:.08em}
#codeDlg h2{margin:0;font-size:28px;letter-spacing:.08em;text-transform:uppercase;color:var(--m-white)}
#codeDlg .ct-lead{margin:12px auto 0;max-width:440px;font-size:15px;line-height:1.5;color:color-mix(in srgb,var(--m-white) 75%,var(--m-dark))}
/* 12 boxes in three groups of four, letters always visible */
#codeDlg .cd-boxes{display:flex;justify-content:center;gap:6px;margin:34px auto 0;padding:0 28px;width:auto}
#codeDlg .cb{flex:0 1 44px;width:44px;min-width:0;height:58px;aspect-ratio:auto;border:0;border-bottom:2px solid color-mix(in srgb,var(--m-dark) 28%,#fff);border-radius:0;background:color-mix(in srgb,var(--m-dark) 4%,#fff);color:var(--m-dark);caret-color:var(--m-blue);font-family:var(--serif);font-size:28px;font-weight:400;text-align:center;text-transform:uppercase;padding:0;transition:border-color .15s,background .15s,transform .15s}
#codeDlg .cb:focus{outline:none;border-bottom-color:var(--m-blue);background:var(--m-ul);transform:translateY(-2px)}
#codeDlg .cb:not(:placeholder-shown),#codeDlg .cb.full{border-bottom-color:var(--m-dark)}
#codeDlg .cd-boxes.ok .cb{background:var(--m-blue);color:#fff;border-bottom-color:var(--m-blue);animation:cbok .5s both}
#codeDlg .cd-boxes.ok .cb:nth-child(n){animation-delay:calc(var(--i,0) * 35ms)}
@keyframes cbok{0%{transform:translateY(0)}40%{transform:translateY(-6px)}100%{transform:translateY(0)}}
#codeDlg .cd-row{padding:0 48px;margin-top:30px}
#codeDlg .cd-row input{color:var(--m-dark);border:0;border-bottom:2px solid var(--m-dark);background:color-mix(in srgb,var(--m-dark) 4%,#fff);text-align:center;font-family:var(--serif);font-size:24px}
#codeDlg .cd-go{align-self:center;margin:26px auto 0;min-width:240px;height:48px;padding:0 32px;border-radius:2px;background:var(--m-blue);font-size:13px;font-weight:700;letter-spacing:.08em}
#codeDlg .cd-go:hover{background:color-mix(in srgb,var(--m-blue) 85%,#000)}
#codeDlg .cd-msg{margin:14px 48px 0;min-height:20px;font-size:15px;color:color-mix(in srgb,var(--m-dark) 70%,#fff)}
#codeDlg .cd-msg.ok{color:#1F7A4D}#codeDlg .cd-msg.bad{color:#B3402A}
#codeDlg .cd-call{margin:4px 48px 0;font-size:13px;color:color-mix(in srgb,var(--m-dark) 65%,#fff)}
#codeDlg .cd-call a{color:var(--m-blue);text-decoration:none;border-bottom:1px solid currentColor}
/* active codes */
#codeDlg .cd-list{margin:24px 48px 0;width:auto;gap:8px}
#codeDlg .cd-list li{border:1px solid var(--m-dark);border-left:3px solid var(--m-blue);border-radius:2px;padding:11px 14px;font-size:15px;color:var(--m-dark);background:#fff}
#codeDlg .cd-list li span{display:block}
#codeDlg .cd-list li.h{border:0;background:none;padding:0 0 2px;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--m-blue)}
#codeDlg .cd-list li.all{border:0;background:none;padding:6px 0 0;justify-content:center}
#codeDlg .cd-list li.all button{border:0;background:none;color:var(--m-dark);opacity:.75;font-size:13px;font-weight:700;letter-spacing:.08em;text-decoration:underline;text-underline-offset:4px;padding:6px 10px}
#codeDlg .cd-list li.all button:hover{opacity:1;color:#B3402A}
@media(max-width:600px){
  #codeDlg .cd-head{padding:34px 22px 24px}#codeDlg h2{font-size:24px}
  #codeDlg .cd-boxes{padding:0 14px;gap:3px;margin-top:26px}#codeDlg .cb{flex:1 1 0;width:auto;height:44px;font-size:17px}
  #codeDlg .cd-list,#codeDlg .cd-msg,#codeDlg .cd-call{margin-left:18px;margin-right:18px}
}
#codeDlg .cd-boxes{width:100%;box-sizing:border-box;align-self:stretch}#codeDlg .cd-list,#codeDlg .cd-msg,#codeDlg .cd-call{align-self:stretch}

/* home: "Ai un cod?" under the three cards */
.hm-code{text-align:center;margin:34px 0 0}
.hm-cb{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 22px;border:1px solid color-mix(in srgb,var(--m-white) 35%,transparent);border-radius:2px;background:color-mix(in srgb,var(--m-white) 6%,transparent);color:var(--m-white);font:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:border-color .15s,background .15s}
.hm-cb .cb-k{color:var(--m-bl)}
.hm-cb:hover{border-color:var(--m-bl);background:color-mix(in srgb,var(--m-white) 10%,transparent)}
.hm-cb:focus-visible{outline:2px solid var(--m-bl);outline-offset:3px}

/* ================= master switch off: the "we'll be back" page only ================= */
body.offline>*:not(.ofl){display:none!important}
.ofl{position:fixed;inset:0;z-index:999;background:var(--m-dark);color:var(--m-white);display:grid;place-items:center;text-align:center;padding:24px;overflow:auto}
.ofl-in{max-width:620px}
.ofl-logo{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:56px}
.ofl-logo .hm-mark svg,.ofl-logo .hm-mark img{width:44px;height:auto;display:block}
.ofl-logo b{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:.08em;text-transform:uppercase}
.ofl-logo>span:last-child{font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.ofl-k{margin:0 0 14px;color:var(--m-bl);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ofl h1{margin:0;font-family:var(--serif);font-weight:400;font-size:40px;letter-spacing:.08em;text-transform:uppercase;line-height:1.2}
.ofl-p{margin:22px auto 0;font-size:17px;line-height:1.6;color:color-mix(in srgb,var(--m-white) 78%,transparent);max-width:520px}
.ofl-j{margin:18px auto 0;font-size:17px;font-style:italic;color:var(--m-bl)}
.ofl-line{width:56px;height:2px;background:var(--m-bl);margin:40px auto 0}
.ofl-c{margin:22px 0 0;font-size:13px;letter-spacing:.08em;color:color-mix(in srgb,var(--m-white) 60%,transparent)}
.ofl-lang{margin-top:40px;display:flex;justify-content:center}
.ofl-lang button{background:none;border:1px solid color-mix(in srgb,var(--m-white) 40%,transparent);color:var(--m-white);font:inherit;font-size:11px;padding:5px 9px;cursor:pointer}
.ofl-lang button[aria-pressed=true]{background:var(--m-white);color:var(--m-dark)}
@media(max-width:600px){.ofl h1{font-size:28px}.ofl-logo{margin-bottom:40px}}

/* code opened: split-flap board (app.js flapCode) */
#codeDlg .cd-boxes.flap{position:relative;overflow:visible}
#codeDlg .cd-boxes.flap .cb{position:relative;z-index:1;border-radius:0;pointer-events:none;caret-color:transparent}
#codeDlg .cd-boxes.flap.done .cb{background:var(--m-dark);color:#fff;border-bottom-color:var(--m-dark)}
#codeDlg .cd-dot{position:absolute;z-index:2;width:8px;height:8px;border-radius:50%;background:#000;transform:translate(-50%,-50%) scale(0)}
#codeDlg .cd-win{margin:22px 28px 6px;font-size:17px;line-height:1.45;color:var(--m-dark)}
#codeDlg .cd-win[hidden]{display:none}
#codeDlg .cd-win b{font-weight:700}
#codeDlg .cd-go[hidden]{display:none}

/* compare: groups, × per row, hidden rows, toggles, print buttons */
.cmp-t tr.cmp-g td{background:#fff;padding:18px 18px 5px;border-bottom:1px solid var(--m-dark);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--m-blue)}
.cmp-t tr.pr th,.cmp-t tr.pr td{background:#F2F5F7}.cmp-t tr.cmp-g.pr td{background:#F2F5F7}
.cmp-t tbody th{position:relative;padding-left:40px}
.cmp-x{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:20px;height:20px;padding:0;border:1px solid transparent;border-radius:2px;background:none;color:#9AA5AB;font-size:17px;line-height:17px;cursor:pointer}
.cmp-t tbody tr:hover .cmp-x{color:#C2185B}.cmp-x:hover,.cmp-x:focus-visible{background:#C2185B;border-color:#C2185B;color:#fff!important;outline:none}
.cmp-t tbody tr:has(.cmp-x:hover) th,.cmp-t tbody tr:has(.cmp-x:hover) td{background:#FBF1F4}
.cmp-hid{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 0;font-size:13px}.cmp-hid[hidden]{display:none}
.cmp-hid .k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#5B6B76;margin-right:4px}
.cmp-hid button{border:1px dashed #8A979D;background:#fff;color:#3E4F57;font:inherit;font-size:13px;padding:4px 10px;cursor:pointer}.cmp-hid button:hover{border-style:solid;border-color:var(--m-dark);color:var(--m-dark)}
.cmp-hid button.all{border:0;color:var(--m-blue);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.cmp-ft{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:20px}
.cmp-ck{display:flex;align-items:center;gap:8px;font-size:15px;cursor:pointer}.cmp-ck[hidden]{display:none}.cmp-ck input{width:16px;height:16px;accent-color:var(--m-dark);margin:0}
.cmp-bt{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.cmp-b{height:44px;padding:0 20px;border:1px solid var(--m-dark);border-radius:2px;background:#fff;color:var(--m-dark);font:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.cmp-b:hover{background:var(--m-ul)}.cmp-b.pr{background:var(--m-blue);border-color:var(--m-blue);color:#fff}.cmp-b.pr:hover{filter:brightness(1.08);background:var(--m-blue)}
@media(max-width:700px){.cmp-bt{margin-left:0;width:100%}.cmp-b{flex:1}}

/* print document (#pdoc): A4 landscape pages, comparison + unit sheets */
#pdoc{display:none}#pdoc.prep{display:block;position:fixed;left:0;top:0;z-index:-1;opacity:.01;pointer-events:none;max-height:100vh;overflow:hidden}
@media print{
  @page pdoc{size:A4 landscape;margin:0}
  body.pdoc>*:not(#pdoc){display:none!important}
  body.pdoc>#pdoc{display:block!important}
  body.pdoc{background:#fff!important;margin:0!important;padding:0!important;min-height:0!important;height:auto!important}
  html:has(body.pdoc){background:#fff!important;height:auto!important;min-height:0!important;padding:0!important}
  body.pdoc::before,body.pdoc::after{display:none!important}
}
#pdoc,#pdoc *{-webkit-print-color-adjust:exact;print-color-adjust:exact;box-sizing:border-box}
#pdoc{color:var(--m-dark);font-family:var(--ff)}
.pd-pg{page:pdoc;width:297mm;height:209.5mm;position:relative;overflow:hidden;background:#fff;break-after:page;page-break-after:always}
.pd-pg:last-child{break-after:auto;page-break-after:auto}
.pd-top{position:absolute;left:0;right:0;top:0;height:64px;border-bottom:1px solid var(--m-dark);display:flex;align-items:center;gap:18px;padding:0 26px}
.pd-logo{display:flex;align-items:center;gap:10px}.pd-logo svg,.pd-logo img{width:34px;height:30px}.pd-logo b{font-family:var(--serif);font-weight:400;font-size:17px;letter-spacing:.08em;text-transform:uppercase}.pd-logo i{font-style:normal;font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.pd-top h1{margin:0 0 0 auto;font-family:var(--serif);font-weight:400;font-size:17px;letter-spacing:.08em;text-transform:uppercase}
.pd-top p{margin:0 0 0 18px;font-size:11px;letter-spacing:.08em;text-align:right;line-height:1.5;text-transform:lowercase}.pd-top p b{font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.pd-ttl{margin-left:auto;display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:17px;letter-spacing:.08em;text-transform:uppercase}.pd-ttl small{font-family:var(--ff);font-size:11px;letter-spacing:.08em}
.pd-pill{display:inline-block;background:var(--m-blue);color:#fff;font-family:var(--ff);font-size:13px;letter-spacing:.08em;padding:3px 8px;border-radius:2px}
.pd-ttl .pd-pill{font-size:15px;padding:4px 10px}
.pd-ft{position:absolute;left:0;right:0;bottom:0;height:34px;border-top:1px solid var(--m-dark);display:flex;align-items:center;gap:10px;padding:0 26px;font-size:9px;letter-spacing:.08em;text-transform:uppercase}.pd-ft em{flex:1}
.pd-grid{position:absolute;top:64px;bottom:34px;left:0;right:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}
.pd-c{border-right:1px solid var(--m-dark);padding:12px 18px;display:flex;flex-direction:column;min-width:0}.pd-c:nth-child(4n){border-right:0}
.pd-h{font-family:var(--serif);font-size:13px;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:8px}.pd-h small{margin-left:auto;font-family:var(--ff);font-size:11px;font-weight:700;letter-spacing:.08em;white-space:nowrap}.pd-h{white-space:nowrap}
.pd-pl{height:150px;margin:9px 0 0;border:1px solid #C9D2D8;display:flex;align-items:center;justify-content:center}.pd-pl img{max-width:96%;max-height:142px}
.pd-why{background:var(--m-blue);color:#fff;border-radius:2px;padding:7px 11px;margin:8px 0 4px;font-size:13px;line-height:1.4;letter-spacing:.08em;height:50px;display:flex;align-items:center;overflow:hidden}
.pd-gk{font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--m-blue);margin:8px 0 0;padding-bottom:3px;border-bottom:1px solid var(--m-dark)}
#pdoc dl{margin:0}#pdoc dl div{display:flex;justify-content:space-between;align-items:baseline;gap:8px;border-bottom:1px solid #C9D2D8;padding:3px 0}#pdoc .pd-side dl div{padding:2px 0!important}#pdoc .pd-side .pd-gk{margin-top:6px}
#pdoc dt{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#5B6B76}#pdoc dd{margin:0;font-size:11.5px;font-weight:700;white-space:nowrap}
#pdoc dd.best{color:var(--m-blue)}#pdoc dd.best::before{content:"";display:inline-block;width:5px;height:5px;background:var(--m-blue);border-radius:50%;margin-right:6px;vertical-align:2px}
#pdoc dd.n{font-weight:400}
.pd-gp{background:#F4F7F9;margin:9px -8px 0;padding:0 8px 2px}.pd-gp .pd-gk{margin-top:0;padding-top:7px}
.pd-body{position:absolute;top:64px;bottom:34px;left:0;right:0;display:grid;grid-template-columns:1fr 330px;grid-template-rows:minmax(0,1fr)}
.pd-plan{border-right:1px solid var(--m-dark);display:flex;flex-direction:column;padding:16px 22px}
.pd-im{flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.pd-im img{display:block;max-width:100%;max-height:100%;width:auto;height:auto}
.pd-plan .pd-why{height:auto;min-height:0;margin:12px 0 0;font-size:13px;padding:9px 14px}
#pdoc .pd-side{padding:14px 20px;display:flex;flex-direction:column;overflow:hidden;min-height:0}#pdoc .pd-side>.pd-gk:first-child{margin-top:0}
#pdoc .pd-side dl.rm dt{text-transform:none;letter-spacing:.02em;font-size:11px;color:var(--m-dark)}#pdoc .pd-side dl.rm dt i{font-style:normal;display:inline-block;width:15px;height:15px;border:1px solid var(--m-dark);border-radius:50%;font-size:8.5px;text-align:center;line-height:13px;margin-right:7px}
#pdoc .pd-side dl.rm dd{font-weight:400}
#pdoc .pd-side.dense dl div{padding:1.5px 0}#pdoc .pd-side.dense dt,#pdoc .pd-side.dense dd{font-size:10px}
#pdoc .pd-side.xdense dl div{padding:1px 0!important}#pdoc .pd-side.xdense dt,#pdoc .pd-side.xdense dd{font-size:9.5px}#pdoc .pd-side.xdense .pd-gk{margin-top:5px}
#pdoc .pd-side.xdense dl.rm dt i{width:12px;height:12px;line-height:10px;font-size:7px;margin-right:5px}#pdoc .pd-side.xdense .pd-tot b{font-size:16px}
body.pdoc dialog::backdrop{display:none}
#pdoc .pd-cmp.wy .pd-pl{height:128px}#pdoc .pd-cmp.wy .pd-pl img{max-height:120px}#pdoc .pd-cmp.wy dl div{padding:2px 0}#pdoc .pd-cmp.wy .pd-gk{margin-top:6px}#pdoc .pd-cmp.wy .pd-gp{margin-top:7px}
#pdoc .pd-side.dense dl.rm dt{font-size:10px}#pdoc .pd-side.xdense dl.rm dt,#pdoc .pd-side.xdense dl.rm dd{font-size:9.5px}
.pd-pb{margin:auto -20px 0;padding:0 20px 6px}
.pd-tot{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0 3px;border-bottom:1px solid #C9D2D8}.pd-tot span{font-size:9px;letter-spacing:.08em;text-transform:uppercase}.pd-tot b{font-size:17px}
.pd-disc{background:#F6D6E0;color:#9C1B4B;padding:1px 6px;font-weight:700}

/* offer page: floating print + confirm — round icons that open into the full button */
.op-fab{position:fixed;right:28px;bottom:28px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.op-fab button{display:flex;flex-direction:row-reverse;align-items:center;height:56px;max-width:56px;padding:0;border:0;border-radius:28px;background:var(--m-white);color:var(--m-dark);font:inherit;box-shadow:0 12px 30px rgba(0,0,0,.45);overflow:hidden;white-space:nowrap;cursor:pointer;transition:max-width .4s cubic-bezier(.3,.9,.3,1),transform .25s,background .2s,opacity .25s}
.op-fab .ic{flex:0 0 56px;height:56px;display:grid;place-items:center}
.op-fab .lb{padding-left:24px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:opacity .2s .05s}
.op-fab .lb i{font-style:normal;font-weight:400;letter-spacing:.08em;text-transform:none;color:#5B6B76;margin-left:6px}
.op-fab .ok{background:var(--m-bl)}.op-fab .ok.done{background:#2F9E5B;color:#fff;cursor:default}
.op-fab button.on,.op-fab button:focus-visible{max-width:340px;transform:scale(1.06)}.op-fab button.on .lb,.op-fab button:focus-visible .lb{opacity:1}
@media(hover:hover){.op-fab button:hover{max-width:340px;transform:scale(1.06)}.op-fab button:hover .lb{opacity:1}}
.op-fab .ok.away{opacity:0;pointer-events:none;transform:translateY(10px)}
@media(max-width:700px){.op-fab{right:16px;bottom:16px}.op-fab .pr{display:none}.op-fab button{height:48px;max-width:48px;border-radius:24px}.op-fab .ic{flex-basis:48px;height:48px}.op-fab .lb{padding-left:20px;font-size:13px}}
@media print{.op-fab{display:none!important}}

/* offer page: disclaimer, layout switch (detailed / grid), homes under contract */
.op-dis{margin:12px auto 0;max-width:560px;font-size:13px;font-style:italic;color:color-mix(in srgb,var(--m-white) 58%,var(--m-dark))}
.op-lay{display:flex;justify-content:center;gap:0;margin:26px 0 0}
.op-lay button{width:44px;height:38px;display:grid;place-items:center;background:none;border:1px solid color-mix(in srgb,var(--m-white) 40%,var(--m-dark));color:var(--m-white);cursor:pointer;padding:0}
.op-lay button+button{border-left:0}.op-lay button[aria-pressed=true]{background:var(--m-white);color:var(--m-dark)}
.op-lay button:hover:not([aria-pressed=true]){border-color:var(--m-bl);color:var(--m-bl)}
.op-list.grid{display:grid;grid-template-columns:repeat(3,302px);justify-content:center;gap:28px;margin-top:44px}
.op-list.grid .op-row{display:contents}.op-list.grid .op-why,.op-list.grid .op-spec,.op-list.grid .op-row>div:empty{display:none}
.op-list.grid .op-card,.op-list.grid .op-card .card{height:100%}
.op-card .card{display:flex;flex-direction:column}.op-card .card .c-f{margin-top:auto}
.card.inact{position:relative;background:#E4E8EA}.card.inact>*{filter:grayscale(1);opacity:.6}
.card.inact::after{content:attr(data-lbl);position:absolute;left:0;right:0;top:44%;background:var(--m-red);color:#fff;text-align:center;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:10px 0;z-index:2}
.card.inact .c-p{visibility:hidden}.card.inact .c-save{opacity:.35;pointer-events:none}.card.inact{cursor:default}
.c-s.contract{background:var(--m-red);border-color:var(--m-red);color:#fff}
.op-row.inact .op-why,.op-row.inact .op-spec{opacity:.55}
@media(max-width:1000px){.op-list.grid{grid-template-columns:repeat(2,302px)}}
@media(max-width:700px){.op-list.grid{grid-template-columns:minmax(0,340px)}}
@media print{.op-lay,.op-dis{display:none}}

/* offer page: layout switch over the last column, back to the selector, interest picker */
.op-lay{margin:0}.op-lay button{width:38px;height:32px}
.op-bar{display:flex;justify-content:flex-end;margin:44px auto -30px}.op-bar.grid{max-width:962px;margin-bottom:-28px}
.op-list.grid{margin-top:44px}
.op-dis{margin:44px auto 0;text-align:center}
.op-back{position:absolute;left:24px;top:24px;color:var(--m-white);font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border:1px solid color-mix(in srgb,var(--m-white) 40%,var(--m-dark));padding:6px 12px}
.op-back:hover{border-color:var(--m-bl);color:var(--m-bl)}
@media(max-width:900px){.op-back{left:14px;top:14px;font-size:11px;padding:5px 9px}.op-bar{justify-content:center;margin-bottom:-20px}}
dialog.op-int{width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 40px);padding:0;border:0;border-radius:4px;background:#fff;color:var(--m-dark);box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:auto}
dialog.op-int::backdrop{background:rgba(10,18,22,.62);backdrop-filter:blur(2px)}
.op-int .in-hd{position:relative;background:var(--m-dark);color:#fff;padding:26px 48px 22px;text-align:center}
.op-int .in-hd small{display:block;color:var(--m-bl);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.op-int .in-hd h3{margin:0;font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:.08em;text-transform:uppercase;line-height:1.35}
.op-int .in-x{position:absolute;right:12px;top:12px;width:32px;height:32px;border:1px solid color-mix(in srgb,#fff 40%,transparent);background:none;color:#fff;border-radius:50%;cursor:pointer}
.op-int ul{list-style:none;margin:0;padding:6px 26px}
.op-int li label{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid #E3E8EB;cursor:pointer}
.op-int li input{width:20px;height:20px;accent-color:var(--m-dark);margin:0;flex:0 0 auto}
.op-int li img{width:64px;height:46px;object-fit:contain;border:1px solid #E3E8EB;background:#fff;flex:0 0 auto}
.op-int li .t{flex:1;min-width:0}.op-int li b{font-size:15px;letter-spacing:.08em;text-transform:uppercase}.op-int li .t span{display:block;font-size:13px;color:#5B6B76}
.op-int li .p{font-weight:700;font-size:15px;white-space:nowrap}
.op-int .in-nt{margin:10px 26px 0;font-size:13px;color:#5B6B76}.op-int .in-err{margin:6px 26px 0;color:#B3261E;font-size:13px;min-height:1px}
.op-int .in-ft{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 26px 22px}.op-int .in-ft.c{justify-content:center}
.op-int .in-all{background:none;border:0;color:var(--m-blue);font:inherit;font-size:13px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:0}
.op-int .in-go{height:46px;padding:0 24px;background:var(--m-dark);color:#fff;border:0;border-radius:2px;font:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.op-int .in-go:disabled{opacity:.6}
.op-int .in-thx{margin:26px 34px 6px;text-align:center;font-size:17px;line-height:1.55}
@media(max-width:600px){dialog.op-int{width:100vw;max-width:100vw;height:100%;max-height:100%;border-radius:0}.op-int .in-ft{position:sticky;bottom:0;background:#fff;border-top:1px solid #E3E8EB}.op-int .in-go{padding:0 16px;font-size:13px;letter-spacing:.08em;white-space:nowrap}.op-int .in-all{white-space:nowrap;font-size:11px}.op-int .in-hd{padding:22px 48px 18px}.op-int .in-hd h3{font-size:17px}}

/* the floating buttons docked in the action row (left of WhatsApp / call) */
.op-fab.dock{position:static;flex-direction:row;align-items:center;gap:10px;z-index:auto}
.op-fab.dock:empty{display:none}
.op-fab.dock button{height:44px;max-width:44px;border-radius:22px;box-shadow:none}.op-fab.dock .ic{flex-basis:44px;height:44px}
.op-fab.dock .lb{padding-left:20px;font-size:13px}
.op-fab.dock button:hover,.op-fab.dock button.on{transform:none}
/* docked: "Confirm my interest" stays open as the big oval, the row centred */
.op-act{justify-content:center;flex-wrap:wrap}
.op-fab.dock .ok{max-width:360px;height:52px;border-radius:26px}.op-fab.dock .ok .ic{flex-basis:52px;height:52px}.op-fab.dock .ok .lb{opacity:1;padding-left:26px;font-size:13px}
.op-fab.dock .ok.done{cursor:default}

/* top-right "Show prices" (opens the code window): dark before any code, white with a count and a bar once prices are open */
.pr-btn{position:relative;overflow:hidden;height:34px;margin-left:18px;padding:0 16px;display:inline-flex;align-items:center;gap:10px;background:var(--m-dark);color:#fff;border:1.5px solid var(--m-dark);border-radius:2px;font:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.pr-btn[hidden]{display:none}
.pr-btn.on{background:var(--m-blue);border-color:var(--m-blue);color:#fff}.pr-btn.on .pb-bar{background:#fff}.pr-btn.on .pb-n{opacity:.9}
.pr-btn .pb-n{font-weight:400;letter-spacing:.08em;opacity:.7}.pr-btn .pb-n:empty{display:none}
.pr-btn .pb-bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--m-blue);transition:width .5s}
.pr-btn:hover{filter:brightness(1.12)}
body.on-home .pr-btn{display:none}
@media(max-width:900px){.pr-btn{margin-left:8px;padding:0 10px;font-size:11px;letter-spacing:.08em;height:30px}}

/* cards: a light hairline all round, so the dark header keeps its top edge on the dark page */
.card{border-color:color-mix(in srgb,var(--m-white) 24%,var(--m-dark))}
.card .c-f{justify-content:space-between}.card .c-f .c-save{margin-left:auto}
.card .c-f .c-cmp+.c-save{margin-left:0}

/* building filter: the small site plan beside the chips */
#f-building{display:flex;flex-wrap:nowrap;align-items:center;gap:8px}
.bld-map{flex:1 1 130px;max-width:150px;margin-left:8px;height:44px}.bld-map svg{width:100%;height:100%;display:block}
.bld-map polygon{fill:#5B6B76;cursor:pointer;transition:fill .15s}.bld-map g.hv polygon{fill:#8FA0A9}.bld-map g.on polygon{fill:var(--m-cmp)}
.bld-map text{font:700 46px var(--ff);fill:#fff;text-anchor:middle;dominant-baseline:middle;pointer-events:none}.bld-map g.on text{fill:var(--m-dark)}
@media(max-width:700px){#f-building{flex-wrap:wrap}.bld-map{flex-basis:100%;max-width:none;margin:6px 0 0;height:64px}}

.filters .check.f-sub{margin-top:12px}

.filters legend .akind{display:inline-flex;border:1px solid color-mix(in srgb,var(--m-white) 35%,transparent);border-radius:999px;padding:2px;gap:2px}
.akind button{all:unset;cursor:pointer;font-size:13px;letter-spacing:.08em;padding:3px 10px;border-radius:999px;color:color-mix(in srgb,var(--m-white) 70%,transparent);transition:background .15s,color .15s}
.akind button[aria-pressed="true"]{background:var(--m-white);color:var(--m-dark);font-weight:700}
.akind button:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.3)}
#o-area{display:block;margin-top:6px}

/* home: RO / EN in the top row, right edge on the cards' right edge, like the offer page */
.home{position:relative}
.home .hm-lang{position:absolute;top:32px;right:max(16px,calc((100% - 1070px) / 2));border:0;border-radius:0;gap:0}
.home .hm-lang button{border:1px solid color-mix(in srgb,var(--m-white) 45%,var(--m-dark));background:none;color:var(--m-white);font:inherit;font-size:13px;padding:5px 9px;cursor:pointer}
.home .hm-lang button[aria-pressed=true]{background:var(--m-white);color:var(--m-dark)}
@media(max-width:720px){.home .hm-lang{top:32px;right:max(16px,calc((100% - 340px) / 2))}}

/* ---------- unit sheet: a bottom sheet — rises from the bottom over the sticky bar, sinks back on close; round close on the top edge ---------- */
dialog#detail{inset:auto 0 0 0;height:min(820px,calc(100dvh - 40px));overflow:visible;border-top:6px solid #fff;box-shadow:0 -10px 30px rgba(0,0,0,.35);animation:shUp .38s cubic-bezier(.2,.8,.2,1)}
dialog#detail .sheet{height:100%;overflow:hidden}
dialog#detail.closing{animation:shDown .3s cubic-bezier(.4,0,1,1) forwards}
dialog#detail::backdrop{animation:shFade .38s ease}
dialog#detail.closing::backdrop{animation:shFade .3s ease reverse forwards}
@keyframes shUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes shDown{from{transform:none}to{transform:translateY(calc(100% + 40px))}}
@keyframes shFade{from{opacity:0}to{opacity:1}}
#detail .d-close{position:absolute;top:0;left:auto;right:28px;transform:translateY(-50%);width:56px;height:56px;padding:0;border-radius:50%;background:var(--m-ul);color:var(--m-dark);border:4px solid var(--m-dark);display:grid;place-items:center;z-index:5;box-shadow:0 2px 10px rgba(0,0,0,.25);transition:transform .15s,background .15s}
#detail .d-close svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
#detail .d-close:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
#detail .d-close:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(153,221,255,.6)}
@media(max-width:1000px){
  dialog#detail{inset:auto 0 0 0;height:calc(100dvh - 36px);overflow:visible}
  dialog#detail .sheet{height:100%;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column}
  dialog#detail .sheet>*{flex:none}
  #detail .d-close{width:48px;height:48px;border-width:3px;right:16px}#detail .d-close svg{width:22px;height:22px}
}
@media(prefers-reduced-motion:reduce){dialog#detail,dialog#detail::backdrop{animation:none}}
@media print{dialog#detail{height:auto;border:0;animation:none;transform:none}dialog#detail .sheet{overflow:visible;height:auto}}
#detail .sheet:focus{outline:none}
/* the page keeps its scrollbar space while the sheet is open, so the cards do not shift sideways */
html:has(dialog#detail[open]){scrollbar-gutter:stable}
#detail .sh-ptabs[hidden],#detail .sh-por[hidden]{display:none}
/* area toggle: nothing changes size when switching (same weight both states, equal halves, fixed heights) */
.filters legend .akind{display:inline-flex;flex:none;height:28px;box-sizing:border-box;align-items:stretch}
.akind button{font-weight:700;text-align:center;line-height:20px;height:22px;box-sizing:border-box}
#fs-area legend{height:28px;box-sizing:content-box}
#o-area{height:20px;line-height:20px;overflow:hidden}
#fs-area legend>span:first-child{white-space:nowrap}

/* shortlist form: errors where the eye is — under the field, and under the button that was pressed */
#leadForm .f-err{display:block;margin-top:5px;font-size:13px;letter-spacing:0;text-transform:none;font-weight:400;color:#FFB4A3}
#leadForm .f-err:empty{display:none}
#leadForm input.bad,#leadForm textarea.bad{outline:2px solid var(--m-red);outline-offset:0;box-shadow:none}
#leadForm .slp-ok.bad input{outline:2px solid var(--m-red);outline-offset:1px}
#leadForm .slp-ok+.f-err{margin:-6px 0 0}
#leadForm .slp-b+.slp-err{margin:-4px 0 4px;text-align:center}
/* action row: every button the same height (52px), the oval included */
.op-act .op-circ{width:52px;height:52px;flex-basis:52px}
.op-fab.dock button{height:52px;max-width:52px;border-radius:26px}.op-fab.dock .ic{flex-basis:52px;height:52px}
.op-fab.dock .ok{max-width:360px}
.op-fab.dock .ok{gap:0}.op-fab.dock .ok .ic{flex:0 0 auto;width:auto;padding:0 24px 0 3px}

/* ---------- Save: heart fills from the bottom, label rolls Salvează ⇅ Salvat ---------- */
.sv-h{position:relative;display:inline-block;width:20px;height:20px;flex:none}
.sv-h svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sv-h .o{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;transition:stroke .3s}
.sv-h .f{fill:var(--m-red);stroke:var(--m-red);stroke-width:1.8;stroke-linejoin:round}
.sv-h .fw{position:absolute;inset:-2px;padding:2px;clip-path:inset(100% 0 0 0);transition:clip-path .5s cubic-bezier(.6,0,.3,1)}
.sv-h .fw svg{inset:2px;width:calc(100% - 4px);height:calc(100% - 4px)}
[aria-pressed=true] .sv-h .fw{clip-path:inset(0 0 0 0)}
[aria-pressed=true] .sv-h .o{stroke:var(--m-red)}
.sv-lb{display:inline-block;height:1.25em;line-height:1.25em;overflow:hidden;text-align:right;vertical-align:middle}
.sv-r{display:flex;flex-direction:column;transition:transform .38s cubic-bezier(.6,0,.3,1)}
.sv-r span{display:block;height:1.25em}
[aria-pressed=true] .sv-r{transform:translateY(-1.25em)}
.c-save .sv-lb,.c-save .sv-lb span{font-size:inherit}
.c-save{transition:color .3s}
.c-save .sv-h{width:20px;height:20px}
.sh-act .sv-h{width:19px;height:19px}
.sh-act .sv-h svg{width:100%;height:100%}
.sh-act[aria-pressed=true] .sv-h .o{fill:none}
.sh-act .sv-h .fw svg{width:calc(100% - 4px);height:calc(100% - 4px)}
@media(max-width:1280px){#detail .sh-act .sv-h{width:15px;height:15px}}
@media(prefers-reduced-motion:reduce){.sv-h .fw,.sv-r,.sv-h .o,.c-save{transition:none}}
.c-save .sv-lb,.c-save .sv-lb span{line-height:1.25em}

/* ---------- contact: the same frame as "Unlock prices" / "Confirm interest" — navy header, blue accent, white body ---------- */
dialog#contact{width:min(640px,calc(100vw - 32px));max-width:calc(100vw - 32px);margin:auto;padding:0;border:0;border-radius:4px;overflow:hidden;background:var(--m-white);color:var(--m-dark);box-shadow:0 30px 80px rgba(0,0,0,.45)}
dialog#contact::backdrop{background:rgba(16,26,32,.72);backdrop-filter:blur(3px)}
#contact .ct-in{padding:0 0 28px}
#contact .d-close{background:transparent;border:1px solid color-mix(in srgb,var(--m-white) 40%,transparent);color:#fff;top:16px;right:16px}
#contact .d-close:hover{border-color:#fff}
#contact .ct-head{display:block;background:var(--m-dark);color:var(--m-white);text-align:center;padding:34px 48px 30px;position:relative}
#contact .ct-head::after{content:"";position:absolute;left:50%;bottom:0;width:56px;height:3px;background:var(--m-bl);transform:translateX(-50%)}
#contact .ct-av{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 16px;border:2px solid var(--m-bl);background:linear-gradient(160deg,color-mix(in srgb,var(--m-white) 22%,var(--m-dark)),var(--m-dark))}
#contact .ct-av[hidden]{display:none}
#contact .ct-av span{font-size:24px;letter-spacing:.08em;color:var(--m-white)}
#contact .qz-step{margin:0 0 10px;color:var(--m-bl);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
#contact h2{margin:0;font-size:28px;letter-spacing:.08em;text-transform:uppercase;color:var(--m-white);line-height:1.2}
#contact .ct-role{margin:8px 0 0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--m-white) 75%,var(--m-dark))}
#contact .ct-lead{margin:16px auto 0;max-width:440px;font-size:15px;line-height:1.5;color:color-mix(in srgb,var(--m-white) 85%,var(--m-dark))}
#contact .ct-lead:empty{display:none}
#contact .ct-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:32px 40px 0}
#contact .ct-opt{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:22px 10px 18px;border:1px solid color-mix(in srgb,var(--m-dark) 18%,#fff);border-radius:4px;background:var(--m-white);color:var(--m-dark);transition:border-color .15s,background .15s,transform .15s}
#contact .ct-opt[hidden]{display:none}
#contact .ct-opt:hover{border-color:var(--m-blue);background:var(--m-ul);transform:translateY(-2px)}
#contact .ct-opt .qe{width:44px;height:44px;margin:0 0 4px;border-radius:50%;display:grid;place-items:center;background:var(--m-ul);color:var(--m-blue)}
#contact .ct-opt .qe svg{width:22px;height:22px}
#contact #ct-wa .qe{background:#25D366;color:#fff}
#contact .ct-opt b{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
#contact .ct-opt .qs{font-size:13px;color:color-mix(in srgb,var(--m-dark) 75%,#fff);overflow-wrap:anywhere}
#contact .ct-hours{margin:22px 0 0;text-align:center;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--m-dark) 75%,#fff)}
@media(max-width:600px){
  #contact .ct-head{padding:30px 22px 24px}#contact h2{font-size:24px}
  #contact .ct-opts{grid-template-columns:1fr;padding:22px 20px 0;gap:10px}
  #contact .ct-opt{display:grid;grid-template-columns:44px 1fr;column-gap:14px;row-gap:2px;align-items:center;text-align:left;padding:12px 14px}
  #contact .ct-opt .qe{margin:0;grid-row:span 2}
  #contact .ct-opt b{align-self:end}#contact .ct-opt .qs{align-self:start}
}

/* ---------- shortlist: thank-you in the same panel ---------- */
.slp-done{padding:28px 4px 8px;text-align:center;outline:none}
.slp-done .dn-ic{display:block;width:64px;height:64px;margin:0 auto 18px}
.slp-done .dn-ic svg{width:100%;height:100%;fill:none;stroke:var(--m-bl);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.slp-done .dn-ic circle{stroke-dasharray:151;stroke-dashoffset:0;opacity:.55}
.slp-done .dn-ic path{stroke-width:3;stroke-dasharray:34;stroke-dashoffset:0}
.slp-done.in .dn-ic circle{animation:dnC .6s cubic-bezier(.6,0,.3,1) both}
.slp-done.in .dn-ic path{animation:dnP .4s .45s cubic-bezier(.6,0,.3,1) both}
@keyframes dnC{from{stroke-dashoffset:151}}@keyframes dnP{from{stroke-dashoffset:34}}
.slp-done.in>*:not(.dn-ic){animation:dnUp .45s .3s ease both}
@keyframes dnUp{from{opacity:0;transform:translateY(8px)}}
.slp-done .dn-k{margin:0 0 8px;color:var(--m-bl);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.slp-done .dn-t{margin:0;font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;color:#fff}
.slp-done .dn-p{margin:14px auto 0;max-width:360px;font-size:15px;line-height:1.55;color:color-mix(in srgb,var(--m-white) 85%,var(--m-dark))}
.slp-done .dn-u{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.slp-done .dn-u li{font-size:13px;font-weight:700;letter-spacing:.08em;padding:5px 9px;border:1px solid color-mix(in srgb,var(--m-white) 35%,var(--m-dark));border-radius:2px;color:#fff}
.slp-done .dn-u li.more{color:var(--m-bl);border-color:color-mix(in srgb,var(--m-bl) 50%,var(--m-dark))}
.slp-done .dn-u:empty{display:none}
.slp-done .dn-h{margin:16px 0 0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--m-white) 70%,var(--m-dark))}
.slp-done .dn-h[hidden]{display:none}
.slp-done .dn-wa{display:block;margin-top:24px;text-decoration:none;box-sizing:border-box;background:#25D366;border-color:#25D366}
.slp-done .dn-wa:hover{background:#1fbe5b}
.slp-done .dn-wa[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.slp-done.in .dn-ic circle,.slp-done.in .dn-ic path,.slp-done.in>*{animation:none}}
.slp:has(#ldDone:not([hidden])) .slp-lead{display:none}

/* ================= phone (≤900px): menu on the whole screen; results, shortlist form and unit as sheets from the bottom ================= */
.mnav-btn,.mnav,.rs-hd,.rs-ft,.rs-bd,.sl-mbar,.sh-x,.slp-grab,.sh-grab{display:none}
@media(max-width:900px){
  /* header: the brand and ☰ */
  .top .mainnav,.top .lang,.top .pr-btn,.top .stockb{display:none!important}
  .top-in{flex-wrap:nowrap!important}
  .mnav-btn{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;margin-left:auto;width:44px;height:44px;padding:0 10px;border:0;background:none;cursor:pointer}
  .mnav-btn i{display:block;height:2px;border-radius:1px;background:var(--m-dark)}
  .mnav:not([hidden]){display:flex;position:fixed;inset:0;z-index:70;flex-direction:column;align-items:center;justify-content:center;gap:34px;background:color-mix(in srgb,var(--m-dark) 96%,transparent);backdrop-filter:blur(4px);color:#fff;animation:mnIn .22s ease both}
  .mnav.out{animation:mnOut .22s ease both}
  @keyframes mnOut{to{opacity:0}}
  .mn-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:1px solid color-mix(in srgb,var(--m-white) 40%,transparent);background:none;color:#fff;font-size:15px;cursor:pointer}
  .mn-logo{display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--serif);text-transform:uppercase}
  .mn-logo .hm-mark{width:44px;height:38px;display:block}.mn-logo .hm-mark svg{width:100%;height:100%}
  .mn-logo .hm-w1{font-size:24px;letter-spacing:.08em}.mn-logo .hm-w2{font-size:13px;letter-spacing:.08em;color:color-mix(in srgb,var(--m-white) 75%,var(--m-dark))}
  .mn-list{display:flex;flex-direction:column;align-items:center;gap:6px}
  .mn-list button{border:0;background:none;color:#fff;font:inherit;font-size:24px;letter-spacing:.08em;text-transform:uppercase;padding:8px 16px;cursor:pointer}
  .mn-list button[hidden]{display:none}
  .mn-list button b{font-weight:400;font-size:17px;color:var(--m-bl);letter-spacing:.08em}
  .mn-list button[aria-current=page]{color:var(--m-bl)}
  .mnav:not([hidden]) .mn-list button{animation:mnUp .3s ease both}
  .mn-list button:nth-child(2){animation-delay:.03s}.mn-list button:nth-child(3){animation-delay:.06s}.mn-list button:nth-child(4){animation-delay:.09s}.mn-list button:nth-child(5){animation-delay:.12s}
  @keyframes mnUp{from{opacity:0;transform:translateY(10px)}}
  .mn-lang{display:flex!important;margin:0!important;border-color:color-mix(in srgb,var(--m-white) 45%,var(--m-dark))}
  .mn-lang button{background:none!important;color:#fff!important;padding:7px 14px;font-size:13px}.mn-lang button[aria-pressed=true]{background:#fff!important;color:var(--m-dark)!important}
  html:has(body.mn-open){overflow:hidden}

  /* filters / selector: the panel is the page; the units come up as a sheet over it ("See the units") */
  .app:not(.sl) .results{display:none}
  body.rs-open .app:not(.sl) .results{display:block;position:fixed;left:0;right:0;bottom:0;top:56px;z-index:45;margin:0;padding:0 14px 0;background:var(--m-dark);border-radius:16px 16px 0 0;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 -12px 40px rgba(0,0,0,.45);animation:shtUp .34s cubic-bezier(.2,.8,.2,1) both;transition:transform .25s}
  .results.sh-out,#slPanel.sh-out{animation:shtDown .26s cubic-bezier(.4,0,1,1) both!important}
  @keyframes shtUp{from{transform:translateY(100%)}}@keyframes shtDown{to{transform:translateY(100%)}}
  body.rs-open .rs-hd{display:flex;position:sticky;top:0;z-index:3;align-items:center;justify-content:center;margin:0 -14px 12px;padding:22px 56px 14px;background:var(--m-dark);border-bottom:1px solid color-mix(in srgb,var(--m-white) 12%,var(--m-dark));touch-action:none;cursor:grab}
  .rs-grab{position:absolute;top:8px;left:50%;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:color-mix(in srgb,var(--m-white) 35%,var(--m-dark))}
  body.rs-open .rs-grab,body.slp-open .slp-grab{display:block}
  .rs-hd b{font-family:var(--serif);font-weight:400;font-size:17px;letter-spacing:.08em;text-transform:uppercase;color:#fff}
  .rs-x,.slp-x{position:absolute;right:12px;top:14px;width:34px;height:34px;border-radius:50%;border:1px solid color-mix(in srgb,var(--m-white) 40%,transparent);background:none;color:#fff;font-size:13px;cursor:pointer}
  body.rs-open .rs-ft{display:flex;position:sticky;bottom:0;z-index:3;align-items:center;justify-content:space-between;gap:12px;margin:14px -14px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--m-blue);color:#fff}
  .rs-ft .sort{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;color:#fff;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  .rs-ft select{flex:0 1 200px;height:38px;border:0;border-radius:2px;background:#fff;color:var(--m-dark);font:inherit;font-size:13px;letter-spacing:.08em;padding:0 10px}
  .rs-bd:not([hidden]){display:block;position:fixed;inset:0;z-index:44;background:rgba(10,18,22,.55);animation:mnIn .25s ease both}
  html:has(body.rs-open),html:has(body.slp-open){overflow:hidden}
  body.rs-open .to-res{display:none!important}

  /* shortlist: the cards on the page, "Compare" + "Send the list" fixed at the bottom; the form is a sheet */
  .app.sl #slPanel{display:none!important}
  body.slp-open .app.sl #slPanel{display:block!important;position:fixed;left:0;right:0;bottom:0;top:56px;z-index:45;margin:0;padding:54px 22px calc(26px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 -12px 40px rgba(0,0,0,.45);animation:shtUp .34s cubic-bezier(.2,.8,.2,1) both;transition:transform .25s}
  body.slp-open .slp-x{display:block}
  .slp-grab{touch-action:none}
  .app.sl~.sl-mbar,.app.sl .sl-mbar{display:flex}
  .sl-mbar{position:fixed;left:0;right:0;bottom:0;z-index:25;gap:10px;align-items:center;justify-content:space-between;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--m-dark);border-top:1px solid color-mix(in srgb,var(--m-white) 15%,var(--m-dark))}
  .sl-mbar button{height:46px;border-radius:2px;font:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
  .sm-cmp{flex:0 0 auto;padding:0 18px;border:1px solid color-mix(in srgb,var(--m-white) 60%,var(--m-dark));background:none;color:#fff}
  .sm-cmp:disabled{opacity:.4;cursor:default}
  .sm-send{flex:1;border:0;background:var(--m-blue);color:#fff}
  body.slp-open .sl-mbar{display:none!important}
  .app.sl{padding-bottom:80px}

  /* unit sheet: a handle to drag it down */
  #detail .sh-grab{display:block;position:absolute;top:-22px;left:50%;width:120px;height:44px;margin-left:-60px;z-index:4;touch-action:none;cursor:grab}
  #detail .sh-grab::after{content:"";position:absolute;left:50%;top:30px;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:color-mix(in srgb,var(--m-white) 40%,var(--m-dark))}
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){.mnav,.mn-list button,.results,#slPanel,.rs-bd{animation:none!important}}
@media(max-width:900px){.app.sl #cmpBtn{display:none}}
@keyframes mnIn{from{opacity:0}}

/* phone sheets: the same frame as the unit sheet — white line on the top edge, round close button on it (right) */
@media(max-width:900px){
  body.rs-open .app:not(.sl) .results,body.slp-open .app.sl #slPanel{border-radius:0;border-top:6px solid #fff;top:64px;bottom:auto;height:calc(100dvh - 64px);max-height:none;box-sizing:border-box}
  body.rs-open .rs-hd{padding:20px 20px 14px}
  body.slp-open .app.sl #slPanel{padding-top:40px}
  .sh-x{position:fixed;top:40px;right:16px;z-index:47;width:48px;height:48px;padding:0;border-radius:50%;background:var(--m-ul);color:var(--m-dark);border:3px solid var(--m-dark);place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.25);cursor:pointer;animation:shtUpX .34s cubic-bezier(.2,.8,.2,1) both;transition:transform .25s}
  .sh-x svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
  .sh-x:active{background:#fff}
  body.rs-open #rsX,body.slp-open #slpX{display:grid}
  .sh-x.sh-out{animation:shtDownX .26s cubic-bezier(.4,0,1,1) both}
  @keyframes shtUpX{from{transform:translateY(calc(100vh - 40px))}}@keyframes shtDownX{to{transform:translateY(calc(100vh - 40px))}}
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){.sh-x{animation:none!important}}

/* ---------- building filter: the buildings themselves are the buttons (raised tiles; chosen = pressed, yellow) ---------- */
#f-building{display:block}
#f-building .chip{display:none}
#f-building .bld-map{display:block;width:100%;max-width:none;height:auto;margin:2px 0 0}
#f-building .bld-map svg{width:100%;height:auto;display:block;overflow:visible}
#f-building [data-bm]{cursor:pointer;outline:none}
#f-building [data-bm] .tile{transition:transform .12s}
#f-building [data-bm] polygon.top{fill:#5B6B76;transition:fill .15s}
#f-building [data-bm] polygon.sd{fill:#36474f;transition:fill .12s}
#f-building [data-bm]:hover polygon.top{fill:#728591}
#f-building [data-bm].on .tile{transform:translateY(6px)}
#f-building [data-bm].on polygon.top{fill:var(--m-cmp)}
#f-building [data-bm].on polygon.sd{fill:transparent}
#f-building [data-bm]:focus-visible polygon.top{stroke:var(--m-bl);stroke-width:3;vector-effect:non-scaling-stroke}
#f-building text{text-anchor:middle;dominant-baseline:middle;pointer-events:none;font-family:var(--ff)}
#f-building text.n{font-size:34px;font-weight:700;fill:#fff}
#f-building text.c{font-size:17px;fill:#dfe6e9}
#f-building [data-bm].on text{fill:var(--m-dark)}
@media(max-width:700px){#f-building .bld-map{flex-basis:auto;height:auto;margin:2px 0 0}}
@media(prefers-reduced-motion:reduce){#f-building [data-bm] .tile{transition:none}}
#f-building .bld-map{margin-bottom:8px}
#f-building [data-bm].on polygon.top{fill:var(--m-bl)}
/* ---------- "Show prices": the codes and offers so far, one short line each (what each adds over the ones above) ---------- */
#codeDlg .cd-list{margin:24px 0 0;padding:12px 40px 16px;background:#F7F9FA;border-top:1px solid #E3E8EB;gap:0}
#codeDlg .ct-in:has(.cd-list:not(:empty)){padding-bottom:0}
#codeDlg .cd-list li.cl-h{display:flex;justify-content:space-between;align-items:baseline;border:0;background:none;padding:4px 0 8px;margin:0;font-size:13px;color:#5B6B76;letter-spacing:0;font-weight:400;text-transform:none}
#codeDlg .cd-list li.cl-h b{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5B6B76}
#codeDlg .cd-list li.cl-h strong{color:var(--m-dark)}
#codeDlg .cd-list li.cl-r+li.cl-h{margin-top:14px;padding-top:14px;border-top:1px solid #E3E8EB}
#codeDlg .cd-list li.cl-r{display:flex;align-items:center;gap:10px;border:0;border-top:1px solid #E3E8EB;border-radius:0;background:none;padding:10px 0;font-size:15px;color:var(--m-dark)}
#codeDlg .cd-list li.cl-r span{display:inline}
#codeDlg .cl-r .nm{flex:1 1 auto;min-width:0;font-weight:700;letter-spacing:.08em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis}
#codeDlg .cl-r .nm small{display:block;margin-top:2px;font-size:13px;font-weight:400;letter-spacing:.08em;text-transform:none;color:#7B8A92}
#codeDlg .cd-list li.cl-r .cl-p{display:flex;flex:none;gap:6px;flex-wrap:nowrap}#codeDlg .cd-list li.cl-r .pl{display:inline-block}#codeDlg .cd-list li.cl-r .nm{display:block}
#codeDlg .cl-r .pl{font-size:13px;font-weight:700;padding:5px 11px;border-radius:999px;white-space:nowrap}
#codeDlg .cl-r .pl.sh{background:var(--m-ul);color:var(--m-blue)}
#codeDlg .cl-r .pl.of{background:#E3F4EA;color:#2F9E5B}
#codeDlg .cl-r .pl.pr{background:#FFF4D6;color:#8A5A00}
#codeDlg .cl-i{flex:none;width:28px;height:28px;display:grid;place-items:center;border:0;background:none;padding:0;color:#7B8A92;cursor:pointer;text-decoration:none}
#codeDlg .cl-i svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#codeDlg .cl-i.cl-x:hover{color:#C2391C}
#codeDlg .cl-i.cl-v{color:var(--m-blue)}#codeDlg .cl-i.cl-v svg{width:20px;height:20px;stroke-width:1.8}#codeDlg .cl-i.cl-v:hover{color:var(--m-dark)}
@media(max-width:600px){
  #codeDlg .cd-list{padding:10px 16px 14px;margin-left:0!important;margin-right:0!important}
  #codeDlg .cd-list li.cl-r{flex-wrap:wrap;row-gap:8px}
  #codeDlg .cl-r .nm{flex:1 1 60%}
  #codeDlg .cd-list li.cl-r .cl-p{order:3;flex:1 1 100%;gap:4px}
  #codeDlg .cl-r .pl{font-size:11px;padding:4px 8px}
}

/* ---------- compare mode: the whole card is the target; a chosen card is covered in yellow; "Cancel" leaves the mode ---------- */
.app.cmpbar .card:not(.inact){cursor:copy}
.app.cmpbar .card{position:relative}
.app.cmpbar .card:not(.inact)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:transparent;transition:background .15s}
.app.cmpbar .card:not(.cmp-on):not(.inact):hover::after{background:color-mix(in srgb,var(--m-cmp) 22%,transparent)}
.app.cmpbar .card.cmp-on::after{background:color-mix(in srgb,var(--m-cmp) 75%,transparent)}
.app.cmpbar .card.cmp-on::before{content:"✓";position:absolute;z-index:2;top:50%;left:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--m-dark);color:var(--m-cmp);font-size:34px;font-weight:700;display:grid;place-items:center;pointer-events:none}
.app.cmpbar .card [data-save]{position:relative;z-index:3}
.cb-h{font-size:13px;color:var(--m-dark);margin-right:6px}
.cb-x{background:none;border:0;color:var(--m-dark);font:inherit;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:5px 8px}
.cb-x:hover{color:#B3402A}
@media(max-width:700px){.cb-h{display:none}}

/* ---------- contact v2: white top (name, role), the advisor's photo on the seam, navy bottom with three coloured cards ---------- */
#contact .ct-in{padding:0;display:flex;flex-direction:column}
#contact .d-close{top:14px;right:14px;width:34px;height:34px;border:0;border-radius:50%;background:var(--m-dark);color:#fff;font-size:15px}
#contact .d-close:hover{background:#000}
#contact .ct-head{background:#fff;color:var(--m-dark);padding:40px 56px 58px;text-align:center}
#contact .ct-head::after{display:none}
#contact h2{color:var(--m-dark);font-size:28px;letter-spacing:.08em}
#contact .ct-role{margin:8px 0 0;color:var(--m-blue);font-size:13px;letter-spacing:.08em}
#contact .ct-body{position:relative;background:var(--m-dark);color:#fff;padding:62px 40px 28px;text-align:center}
#contact .ct-av{position:absolute;top:0;left:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border:4px solid #fff;border-radius:50%;overflow:hidden;background:linear-gradient(160deg,color-mix(in srgb,var(--m-white) 22%,var(--m-dark)),var(--m-dark));display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.3)}
#contact .ct-av[hidden]{display:none}
#contact .ct-av img{width:100%;height:100%;object-fit:cover;display:block}
#contact .ct-av span{font-size:32px;letter-spacing:.08em;color:#fff}
#contact .ct-body:has(.ct-av[hidden]){padding-top:32px}
#contact .ct-lead{margin:0 auto;max-width:470px;color:#fff;font-size:15px;line-height:1.6;letter-spacing:.08em;text-transform:uppercase}
#contact .ct-opts{padding:28px 0 0;gap:14px}
#contact .ct-opt{border:0;border-radius:6px;padding:22px 12px 20px;gap:10px}
#contact .ct-opt:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.25)}
#contact #ct-mail{order:1;background:#fff}
#contact #ct-phone{order:2;background:var(--m-ul)}
#contact #ct-wa{order:3;background:#DDF7E6}
#contact #ct-mail .qe{background:var(--m-ul);color:var(--m-blue)}
#contact #ct-phone .qe{background:var(--m-blue);color:#fff}
#contact #ct-wa .qe{background:none;color:#25D366;width:40px;height:40px}#contact #ct-wa .qe svg{width:34px;height:34px}
#contact #ct-mail b,#contact #ct-phone b{display:none}
#contact #ct-wa .qs{display:none}
#contact #ct-mail .qs,#contact #ct-phone .qs{font-size:15px;color:var(--m-dark)}
#contact #ct-wa b{font-size:13px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--m-dark)}
#contact .ct-hours{margin:22px 0 0;color:#fff;font-size:13px;letter-spacing:.08em}
@media(max-width:600px){
  #contact .ct-head{padding:34px 22px 54px}#contact h2{font-size:24px}
  #contact .ct-body{padding:58px 18px 22px}
  #contact .ct-opts{padding-top:22px}
  #contact .ct-opt{border-radius:6px}
}
@media(max-width:600px){#contact .ct-opt{display:flex;flex-direction:row;align-items:center;text-align:left;gap:14px;padding:12px 16px}#contact .ct-opt .qe{grid-row:auto;margin:0;flex:none}}
@media(max-width:600px){#contact .ct-opt b,#contact .ct-opt .qs{align-self:center!important;margin:0}#contact #ct-wa .qe{width:44px;height:44px;display:grid;place-items:center}}
/* the scrollbar's space is always reserved, so the page never shifts sideways when it appears (e.g. RO ⇄ EN on the home page) */
html{scrollbar-gutter:stable}
html:has(body.on-home),html:has(body.op-mode){background:var(--m-dark)}
@media print{html{scrollbar-gutter:auto}}
/* ---------- offer page v3: home square, title + client line + small line; "Take the next step" card and three tiles at the end ---------- */
.op-home{position:absolute;left:24px;top:24px;width:34px;height:34px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--m-white) 70%,var(--m-dark));border-radius:3px;color:var(--m-white);transition:border-color .15s,color .15s}
.op-home:hover{border-color:var(--m-bl);color:var(--m-bl)}
.op-in .op-logo{margin-top:0}
.op-in>.op-title{margin-top:64px}
.op-sub2{margin:22px auto 0;max-width:760px;font-size:17px;letter-spacing:.08em;text-transform:uppercase;line-height:1.5;color:var(--m-white)}
.op-sub2 b{font-weight:700}
.op-in>.op-meta{margin:16px 0 0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--m-white) 55%,var(--m-dark))}
.op-in>.op-meta b{color:color-mix(in srgb,var(--m-white) 80%,var(--m-dark))}
.op-go{max-width:960px;margin:44px auto 0;background:#fff;color:var(--m-dark);padding:30px 28px 28px;border-radius:3px;text-align:center}
.op-go h2{margin:0;font-weight:400;font-size:24px;letter-spacing:.08em;text-transform:uppercase}
.op-go p{margin:14px auto 22px;max-width:640px;font-size:15px;letter-spacing:.08em;text-transform:uppercase;line-height:1.6}
.op-go-b{display:block;width:100%;height:56px;border:0;border-radius:3px;background:var(--m-blue);color:#fff;font:inherit;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:filter .15s}
.op-go-b:hover{filter:brightness(1.08)}
.op-go.done .op-go-b{background:#2F9E5B;cursor:default;filter:none}
.op-tiles{max-width:960px;margin:60px auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:24px}
.op-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:140px;border:0;border-radius:3px;font:inherit;color:var(--m-dark);text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.op-tile:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.3)}
.op-tile .ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center}.op-tile .ic svg{width:24px;height:24px}
.op-tile b{font-size:15px;font-weight:400;letter-spacing:.08em;text-transform:uppercase}
.op-tile.pr{background:#fff}.op-tile.pr .ic{background:var(--m-ul);color:var(--m-blue)}
.op-tile.tel{background:var(--m-ul)}.op-tile.tel .ic{background:var(--m-blue);color:#fff}.op-tile.tel b{text-transform:none;letter-spacing:.08em}
.op-tile.wa{background:#DDF7E6}.op-tile.wa .ic{color:#25D366}.op-tile.wa .ic svg{width:38px;height:38px}
.op-in>.op-foot{margin:80px 0 0}
.op-in>.op-foot p{font-size:13px;letter-spacing:.08em}
.op-in>.op-foot .op-logo{zoom:1}
@media(max-width:700px){.op-home{left:14px;top:14px}.op-sub2{font-size:15px}.op-go{padding:24px 18px 20px}.op-go h2{font-size:17px}.op-go p{font-size:13px}.op-tiles{grid-template-columns:1fr;gap:12px;margin-top:36px}.op-tile{flex-direction:row;justify-content:flex-start;min-height:0;padding:14px 18px;gap:16px}}
@media print{.op-home,.op-go,.op-tiles{display:none}}
/* ---------- scrollbars (variant A): slim, rounded, grey-blue on the site's dark ground; lighter on hover ---------- */
html{scrollbar-color:#4A5D67 #1A2B33}body{scrollbar-color:#4A5D67 #1A2B33}
@supports not selector(::-webkit-scrollbar){html{scrollbar-width:thin}}
/* the page's own scrollbar (Chrome / Edge / Safari): drawn only between the white header and the white bottom bar,
   white beside them, so it does not run the full height of the window */
@supports selector(::-webkit-scrollbar){
  html{scrollbar-color:auto}
  html::-webkit-scrollbar{width:10px;background:#fff}
  html::-webkit-scrollbar-track{background:#1A2B33;margin-top:var(--hh);margin-bottom:var(--fh)}
  html::-webkit-scrollbar-button{display:none}
  html:has(body.on-home)::-webkit-scrollbar,html:has(body.op-mode)::-webkit-scrollbar{background:#1A2B33}
  html:has(body.on-home)::-webkit-scrollbar-track,html:has(body.op-mode)::-webkit-scrollbar-track{margin:0}
  /* loading screen: no scrollbar to see, the gutter takes the dark ground */
  html:has(body.booting)::-webkit-scrollbar,html:has(body.booting)::-webkit-scrollbar-track{background:#1A2B33;margin:0}
  html:has(body.booting)::-webkit-scrollbar-thumb{background:transparent}
}
html:has(body.booting){background:#1A2B33}
@supports not selector(::-webkit-scrollbar){html:has(body.booting){scrollbar-color:transparent #1A2B33}}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-track{background:#1A2B33}
::-webkit-scrollbar-thumb{background:#4A5D67;border-radius:10px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#8FA0A9;background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
dialog ::-webkit-scrollbar-thumb{background:#B9C4CA;background-clip:padding-box}dialog ::-webkit-scrollbar-thumb:hover{background:#8FA0A9;background-clip:padding-box}
/* ---------- architect's floor plans (C2 stairs B and C): tiles in grey, outdoor spaces darker, the open apartment in yellow ---------- */
#detail .sh-floor svg.fpl{display:block;width:100%;height:auto;overflow:visible}
.fpl .t{fill:#8C9499;transition:fill .15s}
.fpl .tz{fill:#535F66;transition:fill .15s}
.fpl text{fill:#fff;font-family:var(--ff);font-weight:700;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.fpl .fu[data-id]{cursor:pointer;outline:none}
.fpl .fu[data-id]:hover:not(.cur) .t{fill:#AEB6BA}
.fpl .fu:focus-visible .t{stroke:var(--m-bl);stroke-width:6}
.fpl .fu.na .t{fill:#46555E}.fpl .fu.na .tz{fill:#2E3E46}
.fpl .fu.cur .t{fill:var(--m-cmp)}.fpl .fu.cur .tz{fill:#B98E1E}.fpl .fu.cur text{fill:var(--m-dark)}
#detail.ofm .fpl .fu.notof{opacity:.35}
#detail.ofm .fpl .fu.inof .t{stroke:var(--m-cmp);stroke-width:6}
.ps-fg .fpl .t{fill:#C9D0D5}.ps-fg .fpl .tz{fill:#E6E9EC}.ps-fg .fpl text{fill:#1A2B33}.ps-fg .fpl .fu.na .t{fill:#E6E9EC}.ps-fg .fpl .fu.na .tz{fill:#F2F4F5}
.ps-fg .fpl .fu.cur .t{fill:var(--acc)}.ps-fg .fpl .fu.cur .tz{fill:#7FB8D6}.ps-fg .fpl .fu.cur text{fill:#fff}
/* ---------- "Show prices" tooltip: under the button, on hover / keyboard focus (desktop only) ---------- */
.pr-wrap{position:relative;display:inline-flex}
.pr-wrap:has(.pr-btn[hidden]){display:none}
.pr-tip{position:absolute;top:100%;right:0;z-index:60;padding-top:10px;width:350px;visibility:hidden;opacity:0;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility 0s .15s;pointer-events:none}
.pr-tip .pt-in{display:block;background:#fff;color:var(--m-dark);border:1px solid color-mix(in srgb,var(--m-dark) 25%,#fff);border-radius:3px;box-shadow:0 12px 30px rgba(10,20,26,.22);padding:14px 16px 14px;font-size:13px;line-height:1.5;letter-spacing:normal;text-transform:none;font-weight:400;white-space:normal}
.pr-tip .pt-in::before{content:"";position:absolute;top:5px;right:70px;width:10px;height:10px;background:#fff;border-left:1px solid color-mix(in srgb,var(--m-dark) 25%,#fff);border-top:1px solid color-mix(in srgb,var(--m-dark) 25%,#fff);transform:rotate(45deg)}
.pr-tip .pt-t{display:block}
.pr-tip .pt-b{display:block;width:100%;margin:12px 0 2px;padding:11px 12px;background:var(--m-blue);color:#fff;border:0;border-radius:2px;font:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.pr-tip .pt-b:hover{filter:brightness(1.1)}
.pr-tip .pt-w{display:block;font-size:13px;color:#4c5d66}.pr-tip .pt-w[hidden]{display:none}
@media(hover:hover) and (min-width:901px){
  .pr-wrap:hover .pr-tip,.pr-wrap:focus-within .pr-tip{visibility:visible;opacity:1;transform:none;transition-delay:.25s,.25s,.25s;pointer-events:auto}
}
@media print{.pr-tip{display:none}}
/* ---------- commercial plans with the room numbers on them ---------- */
svg.pl-fig{display:block;width:auto;height:auto;max-width:100%;max-height:100%}
#detail .sh-img svg.pl-fig{max-height:100%;max-width:100%}
.sh-img svg.pl-fig{max-height:min(470px,52vh)}
#detail .sh-img svg.pl-fig{max-height:100%}
.pl-pin circle{fill:var(--m-dark);stroke:#fff;stroke-width:3}
.pl-pin text{fill:#fff;font-family:var(--ff);font-weight:700;text-anchor:middle;dominant-baseline:central}
.pl-wrap{position:relative;display:inline-block;line-height:0}
.pl-dot{position:absolute;transform:translate(-50%,-50%);width:calc(16px * var(--pin-k,1));height:calc(16px * var(--pin-k,1));border-radius:50%;background:var(--acc,#1A2B33);color:#fff;font:700 calc(8.5px * var(--pin-k,1))/calc(16px * var(--pin-k,1)) var(--ff);text-align:center;font-style:normal}
@media(max-width:900px){#detail .sh-img svg.pl-fig{width:100%;max-height:none}}
/* shortlist / recommendations (desktop): Chrome sometimes draws the sticky bar and the right panel a few px under the header while
   scrolling, leaving a strip where the cards (or an old image of the previous screen) show through. The header carries a dark
   band under it that covers that strip; it lies over the bar's own dark padding, so nothing visible is hidden. */
@media(min-width:901px){
  body:has(.app.sl) .top::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px;background:var(--m-dark);pointer-events:none}
}
/* unit details: total of terraces and loggias, above their list */
.sh-ter li.tot{font-weight:700;padding-bottom:5px;margin-bottom:2px;border-bottom:1px solid color-mix(in srgb,currentColor 25%,transparent)}
/* ---------- final plans (WebP): duplex level switch above the plans; both levels drawn side by side at the same scale ---------- */
#sh-plTg{display:flex;justify-content:center;margin:0 0 12px}
#sh-plTg[hidden]{display:none}
.pl-tg{display:inline-flex;border:1px solid var(--m-dark);border-radius:2px;overflow:hidden}
.pl-tg button{border:0;border-left:1px solid var(--m-dark);background:#fff;color:var(--m-dark);font:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;cursor:pointer}
.pl-tg button:first-child{border-left:0}
.pl-tg button:hover:not(.on){background:var(--m-ul,#E5F6FF)}
.pl-tg button.on{background:var(--m-dark);color:#fff}
svg.pl-fig text.pl-cap{fill:var(--m-dark);font-family:var(--ff);font-weight:700;letter-spacing:.12em;text-anchor:middle}
.ps-pl.duo{gap:18px;align-items:flex-end}
.ps-pl .pl-cap{display:block;line-height:16px;font:700 10px/16px var(--ff);letter-spacing:.12em;text-transform:uppercase;text-align:center;margin:0 0 6px;font-style:normal}
@media print{#sh-plTg{display:none!important}}
#detail .sh-plan{position:relative}
#detail #sh-plTg{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:2;margin:0}
#detail .sh-plan:has(#sh-plTg:not([hidden])) .sh-img{padding-top:58px}
.pl-tg button{white-space:nowrap}
@media(max-width:1300px){.pl-tg button{padding:6px 10px;font-size:11px;letter-spacing:.08em}}
/* plan sheet v2: the plans centred in their box, the legend in columns under them, the specifications alone on the right */
.ps-mid{grid-row:2;grid-column:2;border-right:1px solid var(--ink);display:flex;flex-direction:column;min-height:0;min-width:0}
.ps-mid .ps-pl{flex:1;border-right:0;align-items:center;justify-content:center}
.ps-pl.duo{align-items:center}
.ps-row{display:flex;align-items:flex-start;justify-content:center;gap:18px;line-height:0}
.ps-lgd{border-top:1px solid var(--ink);padding:12px 22px 14px}
.ps-lgd h4{margin:0 0 8px;font-size:11px;letter-spacing:.12em;font-weight:700;text-transform:uppercase}
.ps-lgi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:22px;row-gap:3px}
.ps-lgi .lv{grid-column:1/-1;font-size:9px;font-weight:400;color:var(--mut);letter-spacing:.12em;text-transform:uppercase;margin-top:4px}
.ps-lgi .lv:first-child{margin-top:0}
.ps-lgi .it{display:flex;align-items:flex-start;gap:7px;font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;min-width:0}
.ps-lgi .it i{flex:none;width:15px;height:15px;border:1px solid;border-radius:50%;text-align:center;line-height:13px;font-size:8px;font-style:normal;letter-spacing:0}
.ps-lgi .it em{font-style:normal;flex:1;min-width:0;white-space:normal;line-height:1.3;padding-top:1px}
.ps-lgi .it small{flex:none;font-size:9.5px;color:var(--mut);padding-top:1px}
/* zoom on the plan inside the white box */
#detail .sh-img{overflow:hidden;position:relative;cursor:zoom-in;touch-action:pan-y}
#detail .sh-img.pz-on{cursor:zoom-out;touch-action:none}
#detail .sh-img svg.pl-fig{transition:transform .25s ease-out;will-change:transform}
#detail .sh-img.pz-on svg.pl-fig{transition:transform .08s linear}
/* duplex level switch: one small pill in the top-right corner of the plan box; each press goes to the next view */
#detail #sh-plTg{left:auto;right:12px;top:12px;transform:none}
#detail .sh-plan:has(#sh-plTg:not([hidden])) .sh-img{padding-top:16px}
.pl-pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px 0 12px;border:1px solid var(--m-dark);border-radius:999px;background:#fff;color:var(--m-dark);font:700 11px/1 var(--ff);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap;box-shadow:0 1px 4px rgba(26,43,51,.12)}
.pl-pill:hover{background:var(--m-dark);color:#fff}
.pl-pill svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* the zoom redraws the plan (viewBox), no CSS scaling */
#detail .sh-img svg.pl-fig{transition:none;will-change:auto}
/* comparison PDF: the pages are drawn off screen, then captured */
#pdoc.pdl{display:block;position:absolute;left:-20000px;top:0;z-index:-1;pointer-events:none}
.cmp-b.busy{opacity:.6;cursor:progress}
/* header: units in preview (opened by a code) — a third, "mysterious" badge: deep violet with a slow sheen */
.sb.pv{position:relative;overflow:hidden;color:#F3E9FF;background:linear-gradient(120deg,#2A1645 0%,#4B2A7B 45%,#6E3FA8 55%,#2A1645 100%);background-size:220% 100%;animation:pvSheen 6s ease-in-out infinite;border-radius:0 2px 2px 0}
.sb.av:not(:last-child){border-radius:0}.sb.av:first-child{border-top-left-radius:2px;border-bottom-left-radius:2px}
@keyframes pvSheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media (prefers-reduced-motion:reduce){.sb.pv{animation:none}}
.pstat .pv{color:#C9A8F2;font-weight:700}
@media(max-width:1500px){.stockb:has(.pv) .sb{font-size:11px;padding:6px 8px;letter-spacing:.08em}}
/* card with a discount: the old price small above, the final price under it — never under "Save" */
.card .c-f .c-p:has(.was){display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;white-space:nowrap;min-width:0}
.card .c-f .c-p:has(.was) .was{margin:0;font-size:13px}
.card .c-f .c-save{flex:none}

/* details list: wider side margins (24px) and airier rows */
#detail .sh-box .sh-panel{padding:16px 24px 14px}
#detail .sh-spec .sh-facts>div{padding:9px 0}

/* phone shortlist: the bar right under the header (the phone header is 56px, not --hh), cards in the middle of the screen */
@media(max-width:900px){
  .app.sl .sl-bar{top:56px;padding:14px 16px;margin-bottom:20px}
  .app.sl .grid .card{justify-self:center}
}

/* contact: the three cards alike — same 44px round icon (WhatsApp: green disc, white logo), same text size and position; the initial centred in the photo circle */
#contact .ct-opt{justify-content:flex-start;gap:12px}
#contact .ct-opt .qe,#contact #ct-wa .qe{width:44px;height:44px;margin:0;border-radius:50%;display:grid;place-items:center;flex:none}
#contact .ct-opt .qe svg,#contact #ct-wa .qe svg{width:22px;height:22px}
#contact #ct-wa .qe{background:#25D366;color:#fff}
#contact #ct-mail .qs,#contact #ct-phone .qs,#contact #ct-wa b{font-size:15px;line-height:20px;font-weight:400;letter-spacing:.08em;color:var(--m-dark);margin:0}
#contact #ct-wa b{letter-spacing:.08em}
#contact .ct-av span{line-height:1;display:block;transform:translateY(.04em)}

/* phone/tablet: the details column is not a scroll box of its own (it shows whole), so a swipe over it scrolls the unit sheet */
@media(max-width:1000px){
  #detail .sh-side,#detail .sh-main,#detail .sh-right{overscroll-behavior:auto}
  #detail .sh-right{overflow:visible;overflow-x:clip}
}

/* type scale: 9 · 11 · 13 · 15 · 17 · 24 · 28 px, weights 400 / 700, letter-spacing 0 or .08em (uppercase).
   Unit details: the values read one step above their labels. */
#detail .sh-spec .sh-facts dd{font-size:15px}
/* text that is not in capitals: no extra letter-spacing */
.bs-l,.filters fieldset output,.card .c-f .c-p,#detail .sh-price b,#detail .sh-foot span,#detail .sh-spec .sh-facts dt{letter-spacing:0}
/* contact cards: the e-mail and the phone on one line (no extra letter-spacing; long addresses end in "…") */
#contact #ct-mail .qs,#contact #ct-phone .qs{letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;overflow-wrap:normal;word-break:normal}
#contact .ct-opt{min-width:0}

/* cards: the title keeps "Apartament" but tighter, so the unit name always shows next to the status (even "Avanpremieră") */
.card .c-t{font-size:13px;letter-spacing:.04em}
.card .c-t b{font-size:15px}
.card .c-s{font-size:11px;letter-spacing:.04em;padding:4px 6px}
/* card areas: "m²" stays lower case under the capitals, values never wrap; the rooms column a bit narrower */
.card .c-box dl{letter-spacing:0}
.card .c-box dt{letter-spacing:.06em}
.card .c-box dd{text-transform:none;letter-spacing:0;white-space:nowrap}
.card .c-rooms{flex:0 0 80px}
.card .c-rooms span{letter-spacing:.06em}
/* cards of duplexes: both levels side by side, each with its floor above; a dark blue "Duplex" pill under the number of rooms */
.card .c-plan .c-duo{display:flex;gap:6px;width:100%;height:100%;align-items:stretch}
.card .c-duo figure{flex:1;min-width:0;margin:0;display:flex;flex-direction:column;align-items:center}
.card .c-duo figcaption{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--m-dark);margin:0 0 4px;line-height:16px}
.card .c-duo img{flex:1;min-height:0;width:100%;height:auto;max-width:none;max-height:none;margin:0;object-fit:contain}
.card .c-dpx{display:inline-block;margin-top:5px;padding:2px 8px;border-radius:10px;background:var(--m-dark);color:#fff;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:16px}

/* ---------- plan settings: top-right row = duplex level pill + settings pill (scale/grid/nothing · north · gear) ---------- */
#detail #sh-plTools{position:absolute;top:12px;right:12px;z-index:3;display:flex;align-items:center;gap:8px}
#detail #sh-plTools #sh-plTg{position:static;transform:none;margin:0;left:auto;right:auto;top:auto}
#detail #sh-plTools .pl-pill{height:38px;padding:0 14px 0 16px}
#sh-plSet[hidden]{display:none}
.pl-set{display:flex;align-items:center;height:38px;border:1px solid var(--m-dark);border-radius:999px;background:#fff;color:var(--m-dark);overflow:hidden}
.pl-set button{height:36px;min-width:36px;border:0;background:none;color:var(--m-dark);display:grid;place-items:center;padding:0 9px;cursor:pointer}
.pl-set button svg{width:22px;height:22px}.pl-set .pl-n{width:30px;height:30px}
.pl-set button:hover{background:var(--m-ul,#E5F6FF)}
.pl-set i{width:1px;height:20px;background:#D3D9DD}
.pl-set .pl-gear{width:36px;padding:0;border-radius:50%}
.pl-set.open .pl-gear{background:var(--m-dark);color:#fff;border-radius:0 999px 999px 0}
svg.pl-fig .pl-grid{fill:none;stroke:rgba(0,119,182,.32);stroke-width:3}
svg.pl-fig .pl-leg{fill:var(--m-dark);color:var(--m-dark);font-family:var(--ff)}
#detail .sh-plan .sh-img,#detail .sh-plan:has(#sh-plTg:not([hidden])) .sh-img{padding-top:60px}
@media print{#sh-plTools{display:none!important}}
/* the sheet: the plan without its drawn legend, and the legend under it */
.pl-clip{display:block;overflow:hidden;position:relative}
.pl-in{display:block;position:relative;line-height:0}
.ps-plc{display:flex;flex-direction:column;align-items:center;gap:10px}
.ps-leg{display:flex;align-items:center;justify-content:center;gap:22px;line-height:1;color:var(--m-dark)}
.ps-leg>b{font:700 13px var(--ff);letter-spacing:.04em}
.ps-bar{display:inline-flex;flex-direction:column}
.ps-bar-l{display:flex;height:5px;border:1.2px solid var(--m-dark);box-sizing:border-box}.ps-bar-l i{flex:1}.ps-bar-l i:nth-child(odd){background:var(--m-dark)}
.ps-bar-t{display:flex;justify-content:space-between;margin-top:3px;font:400 9px var(--ff)}.ps-bar-t em{font-style:normal;width:0;display:flex;justify-content:center;white-space:nowrap}.ps-bar-t em:first-child{justify-content:flex-start}.ps-bar-t em:last-child{justify-content:flex-end}
.ps-n{width:34px;height:34px;color:var(--m-dark)}