:root{
  --bg:#F6F0E8; --tint:#EFE5D7; --card:#FFFFFF; --ink:#2A1A10; --sub:#7A6659;
  --line:#E3D5C5; --accent:#B05F35; --accent-soft:#F5E3D5;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Montserrat',sans-serif;font-weight:400;color:var(--ink);background:var(--bg);line-height:1.7}
h1,h2,h3{font-family:'Montserrat',sans-serif;font-weight:500;line-height:1.1}
nav{display:flex;justify-content:space-between;align-items:center;padding:22px 6vw;background:var(--bg);border-bottom:1px solid var(--line);position:relative;z-index:5}
nav .logo{font-family:'Montserrat',sans-serif;font-weight:500;font-size-adjust:0.4;font-variant-numeric:tabular-nums;font-size:24px;letter-spacing:.3em;color:var(--ink)}
nav ul{display:flex;gap:38px;list-style:none;font-size:12px;letter-spacing:.22em;text-transform:uppercase}
nav a{color:var(--sub);text-decoration:none}
nav .cta{color:#fff;background:var(--accent);padding:11px 26px;letter-spacing:.18em;font-size:12px}
.hero{position:relative;min-height:78vh;display:flex;align-items:flex-end;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,12,9,.25) 0%,rgba(15,12,9,.0) 40%,rgba(15,12,9,.72) 100%)}
.hero-inner{position:relative;z-index:2;padding:0 6vw 8vh;max-width:900px;color:#fff}
.hero .eyebrow{color:#EFD9AE;letter-spacing:.4em;font-size:12px;text-transform:uppercase;margin-bottom:20px}
.hero h1{font-size:clamp(44px,6.2vw,88px);margin-bottom:20px}
.hero h1 em{font-style:italic;color:#EFD9AE}
.hero p{max-width:52ch;color:#EFEAE2;font-size:17px;margin-bottom:34px}
.btn{display:inline-block;padding:16px 42px;text-decoration:none;letter-spacing:.2em;font-size:13px;text-transform:uppercase}
.btn.primary{background:var(--accent);color:#fff}
.btn.ghost{border:1px solid #fff;color:#fff;margin-left:14px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);background:var(--bg)}
.stats div{padding:36px 20px;text-align:center;border-left:1px solid var(--line)}
.stats div:first-child{border-left:none}
.stats b{font-family:'Montserrat',sans-serif;font-weight:500;font-size-adjust:0.4;font-variant-numeric:tabular-nums;font-size:40px;color:var(--accent);display:block;font-weight:500}
.stats span{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--sub)}
section{padding:10vh 6vw}
.eyebrow{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center}
.split h2{font-size:clamp(30px,3.6vw,50px);margin-bottom:20px}
.split p{color:var(--sub);margin-bottom:16px}
.frame{background:var(--card);border:1px solid var(--line);padding:10px;box-shadow:0 14px 40px rgba(40,30,18,.08)}
.frame img{width:100%;display:block}
.frame figcaption{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sub);padding:12px 4px 4px}
.picker{background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.picker-grid{display:grid;grid-template-columns:110px 1fr 1fr;gap:4vw;align-items:start;margin-top:44px}
.floors{display:flex;flex-direction:column;gap:4px}
.floors small{font-size:10px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:10px;color:var(--sub)}
.floors a{font-family:'Montserrat',sans-serif;font-weight:500;font-size-adjust:0.4;font-variant-numeric:tabular-nums;font-size:42px;color:#B9AE9E;text-decoration:none;padding:6px 18px;border-left:2px solid transparent}
.floors a.active{color:var(--accent);border-left:2px solid var(--accent)}
.panel{background:var(--card);border:1px solid var(--line);padding:28px;box-shadow:0 14px 40px rgba(40,30,18,.07)}
.panel h3{font-size:24px;margin-bottom:18px}
.legend{display:flex;gap:22px;font-size:12px;margin-top:18px;color:var(--sub);letter-spacing:.08em}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}
table{width:100%;border-collapse:collapse;font-size:14px;background:var(--card);border:1px solid var(--line)}
th{text-align:left;padding:12px 16px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:var(--accent)}
td{padding:14px 16px;border-bottom:1px solid var(--line)}
.st{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.laisvas{color:#2E7D45}.rez{color:#B05F35}.parduota{color:#98908A}
.unit{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:start}
.plan{background:var(--card);border:1px solid var(--line);padding:24px;box-shadow:0 14px 40px rgba(40,30,18,.07)}
form{display:grid;gap:16px;background:var(--card);border:1px solid var(--accent);padding:34px;box-shadow:0 14px 40px rgba(40,30,18,.08)}
form h3{font-size:26px}
input{padding:14px 16px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-family:inherit;font-size:15px}
input::placeholder{color:#A79C8E}
form button{background:var(--accent);color:#fff;border:none;padding:16px;letter-spacing:.22em;text-transform:uppercase;font-size:12px;cursor:pointer;font-family:inherit}
form .alt{text-align:center;font-size:12px;color:var(--sub);letter-spacing:.06em}
form .alt a{color:#1B8A47;text-decoration:none;letter-spacing:.1em}
.price-tag{font-family:'Montserrat',sans-serif;font-weight:500;font-size-adjust:0.4;font-variant-numeric:tabular-nums;font-size:44px;color:var(--accent)}
.specs{display:flex;gap:28px;font-size:13px;color:var(--sub);letter-spacing:.1em;margin:16px 0 24px;text-transform:uppercase;flex-wrap:wrap}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.wa{position:fixed;bottom:22px;right:22px;z-index:99;display:flex;align-items:center;gap:10px;background:#1FA855;color:#fff;text-decoration:none;padding:14px 22px;border-radius:99px;font-size:14px;letter-spacing:.04em;box-shadow:0 8px 28px rgba(0,0,0,.3)}
.wa svg{width:20px;height:20px}
footer{background:var(--ink);color:#D8D0C4;padding:44px 6vw;font-size:12px;letter-spacing:.2em;display:flex;justify-content:space-between}
@media(max-width:880px){
  .split,.unit{grid-template-columns:1fr}
  .picker-grid{grid-template-columns:1fr}
  .floors{flex-direction:row}
  .stats{grid-template-columns:repeat(2,1fr)}
  nav ul{display:none}
  .gallery{grid-template-columns:1fr}
}
    .tl{display:grid;grid-template-columns:repeat(3,1fr);position:relative;margin-top:10px}
    .tl::before{content:"";position:absolute;top:9px;left:8%;right:8%;height:2px;background:var(--line)}
    .tl div{text-align:center;position:relative;padding:0 12px}
    .tl i{display:block;width:18px;height:18px;border-radius:50%;background:var(--accent);margin:0 auto 16px;position:relative;border:4px solid var(--bg)}
    .tl div.soon i{background:var(--bg);border:2px solid var(--accent)}
    .tl b{font-family:'Montserrat',sans-serif;font-weight:500;font-size-adjust:0.4;font-variant-numeric:tabular-nums;font-size:26px;font-weight:500;display:block;margin-bottom:6px}
    .tl span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sub)}

/* Not part of the mockup's own CSS (jazminu-FINAL.html has no container cap either) —
   added so images stop growing past their largest authored derivative (1600px) on wide
   monitors. Deviation approved by the owner 2026-08-16; hero stays full-bleed by design. */
section{max-width:1600px;margin:0 auto}

/* Bug fix, not a design change: the mockup's <img> tags have no width/height content
   attributes (they're base64-embedded), so its verbatim-copied `width:100%` rule above
   was always enough to preserve aspect ratio. Our real <img> tags carry width="1600"
   height="900" (correctly, to prevent layout shift) — but with no CSS height rule, the
   browser falls back to treating that "900" as a literal fixed pixel height once width
   is already resolved, stretching every image whose rendered width isn't 1600px. This
   restores the auto-scaling behavior the mockup got for free. */
.frame img{height:auto}

/* Phase 4 (/butai/ picker) — additive only, appends after the file's existing 100 lines.
   Building/floor selectors are <button> elements (D-02), not the mockup's <a href="#">;
   .floors button needs its own all:unset (mockup's .floors a already had none via CSS
   reset, but native <button> chrome is not reset by that) to keep the exact same visual
   result while satisfying the no-query-string / no-dead-link contract. */
.buildings{display:flex;gap:38px;margin-bottom:20px;list-style:none}
.buildings button{all:unset;cursor:pointer;font-family:'Montserrat',sans-serif;font-weight:500;font-size-adjust:0.4;font-variant-numeric:tabular-nums;font-weight:500;font-size:clamp(28px,3.2vw,44px);color:#B9AE9E}
.buildings button.active{color:var(--accent)}
.floors button{all:unset;cursor:pointer;font-family:'Montserrat',sans-serif;font-weight:500;font-size-adjust:0.4;font-variant-numeric:tabular-nums;font-size:42px;color:#B9AE9E;padding:6px 18px;border-left:2px solid transparent}
.floors button.active{color:var(--accent);border-left:2px solid var(--accent)}
.filters{display:flex;flex-direction:column;gap:22px;margin:44px 0 22px}
.plan-empty{padding:28px;text-align:center;color:var(--sub);font-size:13px;letter-spacing:.04em}
tr{cursor:pointer}
/* The plan's flats overlay lies exactly over the plan image (same box). vector-effect:non-scaling-stroke keeps
   the outlines 2px on screen whatever the 3840x2160 viewBox is scaled to. */
svg.floorplan-hot{position:absolute;inset:0;width:100%;height:100%}
/* Flats are see-through (about 35%) with a thin solid outline in the full status colour, so the real layout of the floor
   shows through; hover, keyboard focus and the matching list row raise the fill to about 55% and thicken the outline. */
svg.floorplan-hot polygon{stroke-width:1.5;vector-effect:non-scaling-stroke;cursor:pointer;fill-opacity:.35;transition:fill-opacity .15s,stroke-width .15s}
svg.floorplan-hot a:hover polygon,svg.floorplan-hot a:focus polygon,svg.floorplan-hot a.hovered polygon{fill-opacity:.55;stroke-width:2.5}
svg.floorplan-hot text{pointer-events:none}

.ribbon,.badge-soon{background:var(--card);color:var(--sub);border:1px solid var(--line);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding:10px 12px;border-radius:2px;white-space:nowrap}
.badge-soon{padding:4px 8px;margin-left:8px}
.ribbon{position:absolute}
.filters label{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--sub);font-weight:400;margin-bottom:20px}
.filter-field{display:flex;flex-direction:column}

/* Aukštas / Kambariai — multi-select toggle-button groups (owner spec, replacing the old
   floor-tabs row and the Kambariai <select>). Values are populated by picker.mjs from the live
   min/max floor/rooms actually present in Supabase — never a hardcoded 1-5 range. */
.toggle-group{display:flex;flex-wrap:wrap;gap:14px}
.toggle-group button{all:unset;box-sizing:border-box;width:40px;height:40px;border:1px solid var(--line);text-align:center;line-height:38px;font-family:'Montserrat',sans-serif;font-weight:400;font-size:14px;color:var(--ink);cursor:pointer;transition:border-color .3s ease,background-color .3s ease,color .3s ease}
.toggle-group button:hover:not(.active):not(:disabled){border-color:var(--accent)}
.toggle-group button.active{background:var(--accent);border-color:var(--accent);color:#fff}
.toggle-group button:disabled{opacity:.35;cursor:not-allowed}
@media(prefers-reduced-motion:reduce){.toggle-group button{transition:none}}

/* Plotas / Kaina — noUiSlider (CDN, pinned 15.7.1), restyled to the site's own tokens. Values
   sit outside the track in fixed-width columns so dragging never shifts the numbers, per spec. */
.range-slider{display:flex;align-items:center;gap:12px;height:40px}
.range-value{width:86px;flex:none;font-family:'Montserrat',sans-serif;font-weight:400;font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.range-value-left{text-align:right}
.range-value-right{text-align:left}
.filter-slider{width:140px;flex:none}
/* noUiSlider's own stylesheet (loaded after site.css, so it wins any equal-specificity tie) sets
   its real sizing on `.noUi-horizontal .noUi-handle` etc. — every override below is chained as
   `.filter-slider.noUi-target ...` (3 classes) specifically to out-specify that (2 classes),
   regardless of the two stylesheets' relative <link> order. */
.filter-slider.noUi-target{background:none;border:none;box-shadow:none;border-radius:0;height:1px}
.filter-slider.noUi-target .noUi-base{background:var(--line);height:1px}
.filter-slider.noUi-target .noUi-connects{border-radius:0;background:none}
.filter-slider.noUi-target .noUi-connect{background:var(--accent)}
.filter-slider.noUi-target .noUi-handle{position:absolute;width:10px;height:10px;top:-5px;right:-5px;left:auto;border:none;border-radius:50%;background:var(--accent);box-shadow:none;cursor:pointer;transition:background-color .3s ease}
.filter-slider.noUi-target .noUi-handle:before,.filter-slider.noUi-target .noUi-handle:after{display:none}
.filter-slider.noUi-target .noUi-handle:hover,.filter-slider.noUi-target .noUi-handle:focus{background:var(--ink)}
/* Invisible ~26px tap target around the visible 10px handle — the handle stays small, the
   draggable/tappable area doesn't (spec: must stay draggable with a thumb on mobile). */
.filter-slider.noUi-target .noUi-handle::before{content:'';position:absolute;top:50%;left:50%;width:26px;height:26px;transform:translate(-50%,-50%)}
@media(prefers-reduced-motion:reduce){.filter-slider.noUi-target .noUi-handle{transition:none}}

/* "Su terasa / kiemu" checkbox — hollow 20px square, tick strokes itself in rather than an
   instant icon swap (SVG path with pathLength="1" so stroke-dasharray/dashoffset don't need
   hand-measuring the path's real length). Scoped as `.filters .check-toggle` (not bare
   `.check-toggle`) to out-specify `.filters label{display:block;margin-bottom:20px}` above —
   otherwise that rule silently wins (label+class beats class alone) and check-toggle renders
   as an unflexed block with a stray 20px bottom margin, throwing off any row it sits in. */
.filters .check-toggle{display:flex;align-items:center;gap:10px;height:40px;margin-bottom:0;cursor:pointer}
.check-box-wrap{display:inline-block;position:relative;width:20px;height:20px;flex:none}
.check-box-wrap input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.check-box{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);pointer-events:none;transition:border-color .3s ease}
.check-box svg{width:14px;height:14px;overflow:visible}
.check-box path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .35s ease}
.check-box-wrap input:checked+.check-box{border-color:var(--accent)}
.check-box-wrap input:checked+.check-box path{stroke-dashoffset:0}
.check-box-wrap input:focus-visible+.check-box{outline:2px solid var(--accent);outline-offset:2px}
.check-text{font-family:'Montserrat',sans-serif;font-size:14px;color:var(--ink)}
@media(prefers-reduced-motion:reduce){.check-box,.check-box path{transition:none}}

.filters-count{font-size:12px;letter-spacing:.08em;color:var(--sub);margin:16px 0 8px}
/* Keeps the clear button glued to the Terasa checkbox as one flex item, so `.filters`'s own
   wrap never separates them onto different lines. */
.filter-field-outdoor{flex-direction:row;align-items:center;gap:20px}
.filters-clear{display:inline-flex;align-items:center;gap:6px;font-family:'Montserrat',sans-serif;font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);background:none;border:none;cursor:pointer;padding:0}
.filters-clear[hidden]{display:none}
.filters-clear-icon{width:14px;height:14px;flex:none}
.table-anchor{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--sub);text-decoration:none;display:inline-block;margin:12px 0 20px}
.filter-toggle .badge{background:var(--accent);color:#fff;border-radius:50%;font-size:11px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-style:normal}
/* Same [hidden]-vs-class-display bug found 3 times already this session (.building-tip-stat,
   #picker-grid): display:inline-flex above overrides the `hidden` attribute at equal
   specificity, so the "0 active filters" badge stayed visibly rendered instead of disappearing. */
.filter-toggle .badge[hidden]{display:none}
dialog#filter-sheet{border:none;padding:22px 16px;width:100vw;height:100vh;max-width:none;max-height:none;background:var(--bg)}
dialog#filter-sheet::backdrop{background:rgba(15,12,9,.5)}
.filter-sheet-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.filter-sheet-header h3{font-size:24px}
.filter-sheet-footer{margin-top:16px}
.picker+section{padding-top:4vh}
@media(max-width:880px){
  /* Scoped to #filters-anchor (the desktop position), not bare `.filters` — picker.mjs's
     syncFiltersLocation() re-parents the one real .filters subtree into #filter-sheet-body
     below this width (D-20, never duplicated). A bare `.filters{display:none}` here would hide
     it in BOTH locations regardless of which one it's actually sitting in — found while wiring
     the new filter row into the mobile sheet; the sheet's own filters were never actually
     visible before this fix, dialog or not. */
  #filters-anchor .filters{display:none}
  #filter-sheet-body .filters{flex-direction:column;align-items:stretch;gap:28px}
}


/* /vieta/ page + homepage #vietos-juosta band — from the owner-approved vieta.html mockup.
   Map tokens are new (jazminu-FINAL.html predates this feature); kept as their own :root
   block rather than folded into the protected :root at the top of this file, which is
   asserted byte-for-byte against jazminu-FINAL.html by site-checks.test.mjs. Everything
   below is copied verbatim from the mockup except: the standalone-only `.vieta-scope` reset
   and its own `.eyebrow` (both redundant with this file's real global rules), and the
   mockup's `.demo-sep` dividers (mockup-only, never shipped). */
:root{
  --map-land:#EDE2D2; --map-green:#DCE2C6; --map-water:#C9DAE0;
  --map-road:#FFFFFF; --map-casing:#E0CDB6; --map-mute:#C4AF98;
}

.v-wrap{max-width:1160px;margin:0 auto;padding:72px 24px 88px;}

.v-head{display:flex;flex-direction:column;gap:14px;max-width:40rem;margin-bottom:38px;}
.v-head h1,.v-head h2{font-size:clamp(2rem,4.6vw,2.9rem);line-height:1.1;}
.v-head h1 em,.v-head h2 em{font-style:italic;color:var(--accent);}
.v-head p{color:var(--sub);font-size:1.02rem;}

/* stats */
.v-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:44px;}
.v-stat{
  background:var(--card);border:1px solid var(--line);border-radius:4px;
  padding:18px 20px;display:flex;flex-direction:column;gap:2px;
}
.v-stat small{
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sub);
}
.v-stat b{
  font-family:'Montserrat',sans-serif;font-weight:500;font-size-adjust:0.4;font-variant-numeric:tabular-nums;font-size:2.15rem;font-weight:500;
  line-height:1.05;font-variant-numeric:tabular-nums;
}
.v-stat span{font-size:.85rem;color:var(--sub);}

/* controls */
.v-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:18px;}
.v-chip{
  font-family:"Montserrat",sans-serif;font-size:.8rem;font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;padding:8px 16px;border-radius:2px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--sub);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.v-chip:hover{border-color:var(--accent);color:var(--accent);}
.v-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#FFF7EF;}
.v-chip:focus-visible,.v-toggle:focus-visible,.v-row:focus-visible,.v-btn:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;
}
.v-grow{flex:1;min-width:0;}
.v-toggle{
  font-family:"Montserrat",sans-serif;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 16px;border-radius:2px;cursor:pointer;
  background:transparent;border:1px dashed var(--line);color:var(--sub);
  transition:color .18s ease,border-color .18s ease;
}
.v-toggle[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);}

/* map + list */
.v-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,320px);gap:28px;align-items:start;}
.v-mapcard{
  background:var(--map-land);border:1px solid var(--line);border-radius:4px;overflow:hidden;
  position:relative;
}
.v-map{display:block;width:100%;height:auto;}
.v-credit{
  position:absolute;right:8px;bottom:6px;font-size:.62rem;color:var(--sub);
  background:rgba(246,240,232,.82);padding:2px 7px;border-radius:2px;letter-spacing:.02em;
}

.v-list{display:flex;flex-direction:column;gap:24px;max-height:640px;overflow-y:auto;padding-right:4px;}
.v-group{display:flex;flex-direction:column;}
.v-group h3{
  font-family:"Montserrat",sans-serif;font-size:.68rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sub);margin-bottom:8px;
  padding-bottom:7px;border-bottom:1px solid var(--line);
}
.v-row{
  display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;
  font:inherit;font-family:"Montserrat",sans-serif;background:none;border:0;
  padding:8px 8px;cursor:pointer;color:var(--ink);border-radius:2px;
  transition:background .15s ease,color .15s ease;
}
.v-row:hover,.v-row.on{background:var(--accent-soft);color:var(--accent);}
.v-row-icon{width:15px;height:15px;flex:none;align-self:center;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;color:var(--sub);}
.v-row:hover .v-row-icon,.v-row.on .v-row-icon{color:var(--accent);}
.v-row .nm{flex:1;font-size:.9rem;line-height:1.35;}
.v-row .di{font-size:.8rem;color:var(--sub);font-variant-numeric:tabular-nums;white-space:nowrap;}
.v-row.on .di{color:var(--accent);}
.v-row .mn{
  font-size:.74rem;color:var(--sub);font-variant-numeric:tabular-nums;
  white-space:nowrap;min-width:3.6em;text-align:right;letter-spacing:.03em;
}
.v-row.hide,.v-group.hide{display:none;}

/* note, far, cta */
.v-note{
  margin-top:20px;font-size:.78rem;color:var(--sub);line-height:1.65;max-width:44rem;
}
.v-far{margin-top:48px;}
.v-far h3{
  font-family:"Montserrat",sans-serif;font-size:.68rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sub);margin-bottom:14px;
}
.v-fargrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;}
.v-far div{
  background:var(--card);border:1px solid var(--line);border-radius:4px;padding:14px 16px;
}
.v-far b{font-weight:400;font-size:.92rem;display:block;}
.v-far span{font-size:.8rem;color:var(--sub);font-variant-numeric:tabular-nums;}

.v-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:44px;}
.v-btn{
  font-family:"Montserrat",sans-serif;font-size:.8rem;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;padding:15px 30px;border-radius:2px;text-decoration:none;
  display:inline-block;transition:background .18s ease,color .18s ease;
}
.v-btn.primary{background:var(--accent);color:#FFF7EF;border:1px solid var(--accent);}
.v-btn.primary:hover{background:#9A4F28;}
.v-btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);}
.v-btn.ghost:hover{border-color:var(--accent);color:var(--accent);}

/* svg */
.mp-green{fill:var(--map-green);stroke:none;}
.mp-water{fill:var(--map-water);stroke:var(--map-water);stroke-width:3;}
.mp-casing{fill:none;stroke:var(--map-casing);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;}
.mp-major{fill:none;stroke:var(--map-road);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;}
.mp-trail{fill:none;stroke:var(--map-road);stroke-width:1.6;stroke-dasharray:4 3;stroke-linecap:round;opacity:.9}
.mp-street{font-family:'Montserrat',sans-serif;font-weight:400;fill:var(--sub);paint-order:stroke;stroke:var(--map-land);stroke-width:3.2px;stroke-linejoin:round;letter-spacing:.02em;pointer-events:none}
.mp-minor{fill:none;stroke:var(--map-road);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85;}

/* All of .mp-ring/.mp-link's own elements are pointer-events:none — they're informational
   overlays, never interactive targets themselves. Without this, a label popping up close to
   a pin (as the distance/time readout now does, anchored right next to the pin instead of at
   the line's midpoint) can sit under the cursor mid-click and steal the mouseup meant for the
   pin's own .hit circle — the exact click-swallow bug class documented for the /butai/
   picker's hover card (see assets/js/picker.mjs). */
.mp-ring{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-dasharray:8 7;opacity:0;transition:opacity .3s ease;pointer-events:none;}
.mp-ring.on{opacity:.6;}
.mp-ringlbl{
  font-family:"Montserrat",sans-serif;font-size:15px;fill:var(--accent);letter-spacing:.1em;
  opacity:0;transition:opacity .3s ease;text-transform:uppercase;pointer-events:none;
}
.mp-ringlbl.on{opacity:1;}

.mp-link{stroke:var(--accent);stroke-width:1.6;stroke-dasharray:5 5;opacity:0;transition:opacity .18s ease;pointer-events:none;}
.mp-link.on{opacity:.85;}
.mp-linklbl{
  font-family:"Montserrat",sans-serif;font-size:12.5px;font-weight:500;fill:var(--accent);
  opacity:0;transition:opacity .18s ease;pointer-events:none;
}
.mp-linklbl.on{opacity:1;}
.mp-linkbg{fill:var(--bg);opacity:0;transition:opacity .18s ease;pointer-events:none;}
.mp-linkbg.on{opacity:.92;}

.pin{cursor:pointer;}
.pin .hit{fill:transparent;}
.pin .dot{fill:var(--map-mute);stroke:#FFFFFF;stroke-width:1.6;transition:fill .18s ease,r .18s ease;}
.pin.sel .dot{fill:var(--accent);r:9.5;}
.pin.on .dot{fill:var(--accent);r:11;}
.pin-icon{fill:none;stroke:#FFFFFF;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;}
/* #nameLbl/#nameLblBg are a single SHARED pair (not one embedded per pin) sitting after
   #mPins in the SVG, so the name label always paints on top of every pin regardless of which
   one is hovered — a per-pin embedded label only wins against pins earlier in the array and
   renders BEHIND ones added later (confirmed live, see assets/js/vieta.mjs's show()). Selector
   has no .pin ancestor requirement for exactly that reason. */
svg .lbl{
  font-family:"Montserrat",sans-serif;font-size:12px;fill:var(--ink);
  opacity:0;transition:opacity .16s ease;pointer-events:none;
}
.lblbg{fill:var(--bg);opacity:0;transition:opacity .16s ease;pointer-events:none;}
svg .lbl.on,.lblbg.on{opacity:1;}
.lblbg.on{opacity:.95;}

.home .ring1{fill:var(--accent);opacity:.14;}
.home .core{fill:var(--accent);stroke:#FFF7EF;stroke-width:2.5;}
.home text{
  font-family:"Montserrat",sans-serif;font-weight:500;font-size:13px;fill:var(--ink);
  letter-spacing:.08em;text-transform:uppercase;
}
.home rect{fill:var(--bg);opacity:.92;}

/* homepage vietos juosta */
.vs-band{background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.vs-inner{
  max-width:1160px;margin:0 auto;padding:56px 24px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:48px;align-items:center;
}
.vs-copy{display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.vs-copy h2{font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.12;}
.vs-copy h2 em{font-style:italic;color:var(--accent);}
.vs-copy p{color:var(--sub);max-width:30rem;}
.vs-copy .v-btn{margin-top:6px;}
.vs-nums{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.vs-num{background:var(--tint);padding:18px 20px;display:flex;flex-direction:column;gap:1px;}
.vs-num b{
  font-family:'Montserrat',sans-serif;font-weight:500;font-size-adjust:0.4;font-variant-numeric:tabular-nums;font-size:2rem;font-weight:500;
  line-height:1.05;font-variant-numeric:tabular-nums;
}
.vs-num span{font-size:.84rem;color:var(--sub);}

@media (max-width:920px){
  .v-grid{grid-template-columns:1fr;}
  .v-list{max-height:none;overflow:visible;}
  .v-stats{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:820px){
  .vs-inner{grid-template-columns:1fr;gap:30px;padding:44px 16px;}
}
@media (max-width:560px){
  .v-wrap{padding:48px 16px 64px;}
  .v-controls{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;}
  .v-chip,.v-toggle{flex:none;}
  .v-grow{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .mp-ring,.mp-ringlbl,.mp-link,.mp-linklbl,.mp-linkbg,.pin .dot,.lbl,.lblbg,
  .v-chip,.v-toggle,.v-row{transition-duration:.001ms !important;}
}

/* unit page (Phase 5) — D-10 variant C */
/* Ported from .planning/sketches/002-teoremos-layout/index.html's <style> block (variant C
   only). .similar-grid-a/.sim-card (A/B-only) and the sketch's own harness rules (variant-nav,
   sketch-tools, state-preview, nav.sitenav, body{padding-top}) are intentionally not ported —
   dead weight not part of the real page. var(--shadow, ...) fallback-syntax kept literal as-is
   (site.css has no --shadow token; the sketch's own fallback already covers it). The sketch's
   var(--rez)/var(--laisvas)/var(--parduota) have no matching tokens in this file's :root, so
   they're translated to the equivalent literal values already used by this file's own
   .laisvas/.rez/.parduota rules (line 51) — --rez's value equals --accent exactly, so var(--accent)
   is used there instead of a new literal. */
.wrap{padding:5vh 6vw 10vh}
.crumb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);margin-bottom:22px}
.crumb a{color:var(--sub);text-decoration:none;border-bottom:1px solid var(--line)}
.crumb a:hover{color:var(--accent);border-color:var(--accent)}

/* ==== top area: dark info card + plan carousel + floor-position widget, teoremos structure ==== */
.unit-top{display:grid;grid-template-columns:300px 1fr 200px;gap:32px;align-items:start;margin-bottom:8vh}
@media(max-width:1100px){ .unit-top{grid-template-columns:1fr;} }

.info-card{background:var(--ink);color:#F3EBE0;padding:32px 28px;box-shadow:var(--shadow, 0 14px 40px rgba(40,30,18,.08));display:flex;flex-direction:column}
.info-card .idrow{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.info-card h1{font-size:38px;color:#fff}
.info-card .price{font-family:'Montserrat',sans-serif;font-weight:500;font-size-adjust:0.4;font-variant-numeric:tabular-nums;font-size:26px;color:#EFD9AE}
.info-card .st-pill{display:inline-block;margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.18);width:100%}
.info-card .specs-list{display:grid;gap:6px;font-size:14px;color:#D8C9B8;margin-bottom:22px}
.info-card .actions{display:grid;gap:12px;font-size:12px;letter-spacing:.06em;margin-bottom:22px}
.info-card .actions a,.info-card .actions button{color:#D8C9B8;text-decoration:none;background:none;border:none;font-family:inherit;font-size:12px;text-align:left;padding:0;cursor:pointer;display:flex;align-items:center;gap:8px;transition:color .15s ease}
.info-card .actions a:hover,.info-card .actions button:hover{color:#EFD9AE}
.info-card .ask-btn{width:100%;background:var(--accent);color:#fff;border:none;padding:16px;letter-spacing:.18em;text-transform:uppercase;font-size:12px;cursor:pointer;font-family:inherit;transition:background .15s ease;margin-top:auto}
.info-card .ask-btn:hover{background:#c96e40}

.plan-carousel{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow, 0 14px 40px rgba(40,30,18,.08))}
.plan-main{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--tint)}
.plan-slide{position:absolute;inset:0;display:none;align-items:center;justify-content:center}
.plan-slide.active{display:flex}
.plan-thumbs{display:flex;gap:10px;padding:16px;border-top:1px solid var(--line)}
.plan-thumb{width:112px;height:72px;border:2px solid var(--line);background:var(--tint);cursor:pointer;display:block;padding:4px;transition:border-color .15s ease}
.plan-thumb.active{border-color:var(--accent)}
.plan-thumb:hover{border-color:var(--accent)}
.plan-thumb img{width:100%;height:100%;object-fit:contain;display:block}



/* ==== similar units ==== */
.similar-section{margin-bottom:8vh}
.similar-section h2{font-size:30px;margin-bottom:24px}

.similar-rows-b{display:grid;gap:2px;background:var(--line)}
.sim-row{display:grid;grid-template-columns:120px 1fr 1fr 140px 90px;gap:16px;align-items:center;background:var(--ink);color:#EFEAE2;padding:24px 28px;text-decoration:none}
.sim-row.sold{opacity:.45}
.sim-row .nr{font-family:'Montserrat',sans-serif;font-weight:500;font-size-adjust:0.4;font-variant-numeric:tabular-nums;font-size:34px}
.sim-row .why{display:block;font-family:'Montserrat',sans-serif;font-weight:400;font-size:11px;line-height:1.35;letter-spacing:0;margin-top:6px;color:#EAE1D6}
.sim-row .meta{font-size:13px;color:#D8C9B8;line-height:1.5}
.sim-row .price{font-family:'Montserrat',sans-serif;font-weight:500;font-size-adjust:0.4;font-variant-numeric:tabular-nums;font-size:19px;color:#EFD9AE}
.sim-row .st{font-size:11px;letter-spacing:.1em;text-transform:uppercase}

/* ==== bottom: enquiry form / status band ==== */
/* Enquiry band — owner-picked sketch 003 variant D (2026-09-24): teoremos-style underline
   fields with floating labels on the tint background, text + pill-arrow submit, round contact
   portrait underneath. Overrides the mockup's boxed `form{}` rule (line 54) for form.enquiry. */
.enquiry-band{background:var(--tint);border-top:1px solid var(--line);padding:12vh 6vw;margin:0}
.enq-wrap{max-width:1080px;margin:0 auto}
.enquiry-band .eyebrow{margin-bottom:14px}
.enquiry-band h2{font-size:clamp(44px,5.4vw,72px);margin-bottom:44px}
form.enquiry{display:block;background:none;border:none;padding:0;box-shadow:none}
.enq-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;row-gap:14px}
.enq-grid .full{grid-column:1/-1}
.fld{position:relative;display:block}
.fld input,.fld textarea{width:100%;background:transparent;border:none;border-bottom:1px solid #D5C3AE;padding:26px 0 10px;font-family:inherit;font-weight:400;font-size:16px;color:var(--ink);outline:none;border-radius:0;transition:border-color .2s ease}
.fld textarea{resize:none;min-height:84px;display:block}
.fld > span{position:absolute;left:0;top:26px;font-size:16px;color:var(--sub);pointer-events:none;transition:all .18s ease}
.fld > span i{font-style:normal;color:var(--accent)}
.fld input:focus,.fld textarea:focus{border-bottom-color:var(--accent)}
.fld input:focus + span,.fld input:not(:placeholder-shown) + span,
.fld textarea:focus + span,.fld textarea:not(:placeholder-shown) + span{top:4px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.enq-extra{margin-top:28px;display:grid;gap:18px}
.enq-check-row{display:block}
.enq-check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:15px;line-height:1.5;color:var(--ink)}
.enq-check input{width:18px;height:18px;margin-top:3px;flex:none;accent-color:var(--accent)}
.enq-linkline{padding-left:30px;margin-top:2px;font-size:13px;line-height:1.5}
.enq-linkline a{color:var(--ink);text-decoration:none;border-bottom:1px solid #C9B49C}
.enq-linkline a:hover{color:var(--accent);border-color:var(--accent)}
.enq-part[hidden],.enq-saved[hidden]{display:none}
.enq-part{padding:14px 0 4px;border-top:1px solid var(--line);display:grid;gap:14px}
.enq-foot{display:flex;justify-content:space-between;align-items:center;gap:24px 32px;margin-top:36px;flex-wrap:wrap}
.enq-note{font-size:13px;line-height:1.5;color:var(--sub);max-width:560px}
.enq-note a{color:var(--ink);text-decoration:none;border-bottom:1px solid #C9B49C}
.enq-note a:hover{color:var(--accent);border-color:var(--accent)}
form.enquiry .send-btn{background:none;border:none;padding:0;color:var(--ink);font-family:inherit;font-weight:400;font-size:17px;letter-spacing:0;text-transform:none;display:inline-flex;align-items:center;gap:16px;cursor:pointer}
.send-btn .pill{width:56px;height:32px;border-radius:99px;background:var(--accent);display:grid;place-content:center;transition:width .2s ease,background .2s ease}
.send-btn:hover .pill{width:72px;background:#94502c}
.send-btn .pill svg{width:18px;height:18px}
.send-btn:disabled{cursor:default;opacity:.7}
.enq-done{font-family:'Montserrat',sans-serif;font-weight:500;font-size-adjust:0.4;font-variant-numeric:tabular-nums;font-size:30px;line-height:1.25;color:var(--ink)}
.lead-error{color:#C0533A;font-size:14px;margin-top:16px}
.enq-people{display:flex;justify-content:center;gap:64px;margin-top:80px;padding-top:56px;border-top:1px solid var(--line)}
.enq-person{text-align:center}
.enq-person .ph{width:132px;height:132px;border-radius:50%;margin:0 auto 18px;padding:6px;border:1px solid #D5C3AE;position:relative}
.enq-person .ph div{width:100%;height:100%;border-radius:50%;background:linear-gradient(160deg,#D9B79E,#B05F35);display:grid;place-content:center;font-family:'Montserrat',sans-serif;font-weight:500;font-size-adjust:0.4;font-variant-numeric:tabular-nums;font-size:42px;color:#fff}
.enq-person .ph img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.enq-person .ph::after{content:"";position:absolute;right:14px;bottom:10px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.enq-person h4,.enq-person .enq-name{font-family:'Montserrat',sans-serif;font-weight:500;font-size-adjust:0.4;font-variant-numeric:tabular-nums;font-size:26px;font-weight:500;margin-bottom:6px}
.enq-person a{display:block;color:var(--sub);text-decoration:none;font-size:15px;white-space:nowrap}
.enq-person a:hover{color:var(--accent)}

.status-block{background:var(--card);border:1px solid var(--line);padding:34px;box-shadow:var(--shadow, 0 14px 40px rgba(40,30,18,.08));text-align:center}
.status-block .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}
.status-block h3{font-size:24px;margin-bottom:10px}
.status-block p{color:var(--sub);font-size:14px;margin-bottom:22px}
.status-block .similar-link{display:inline-block;padding:14px 30px;background:var(--accent);color:#fff;text-decoration:none;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.status-block.rez{border-color:var(--accent)}
.status-block.parduota{border-color:#CC6B73}

.st-pill.laisvas{color:#2E7D45}
.st-pill.rez{color:var(--accent)}
.st-pill.parduota{color:#A63F4B}

/* ==== variant C refinements: lighter dark tone (--sub, not --ink), compass + repositioned location widget ==== */
.tone-sub{background:var(--sub) !important}
.tone-sub .price{color:#FBF3E7}

/* tidied info card: labels left, values/icons right-aligned in one consistent rail */
.info-card.tone-sub .status-row{width:100%;margin:14px 0 20px;padding:14px 0;border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);font-size:14px}
.info-card.tone-sub .status-row .st-pill{display:inline;margin-bottom:0;padding-bottom:0;border-bottom:none;width:auto}
.info-card.tone-sub .specs-list{display:grid;gap:0;font-size:14px;color:#EAE1D6}
.info-card.tone-sub .spec-row{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.info-card.tone-sub .spec-row .lbl{color:#D8C9B8}
.info-card.tone-sub .spec-row .val{color:#FBF3E7;text-align:right}
.info-card.tone-sub .actions{display:grid;gap:0;margin-top:6px}
.info-card.tone-sub .action-row{display:flex;justify-content:space-between;align-items:center;color:#D8C9B8;text-decoration:none;background:none;border:none;font-family:inherit;font-size:13px;letter-spacing:.02em;padding:10px 0;cursor:pointer;transition:color .15s ease;width:100%}
.info-card.tone-sub .action-row:hover{color:#fff}
.info-card.tone-sub .action-row .ic{display:flex;align-items:center;color:inherit;flex-shrink:0}
.info-card.tone-sub .action-row.is-saved .heart-ic{fill:var(--accent);stroke:var(--accent)}
.sim-row.tone-sub{color:#F8F2EA}
.sim-row.tone-sub .meta{color:#EAE1D6}
.sim-row.tone-sub.sold{opacity:.55}

/* variant C only: similar-units rows — 7 fields spread evenly across the full row + a save icon */
.sim-header{display:grid;grid-template-columns:repeat(7,1fr) 40px;gap:8px;padding:0 28px 10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
.sim-header span{text-align:center}
.sim-header span:first-child{text-align:left}
.sim-row.cols-c{grid-template-columns:repeat(7,1fr) 40px;gap:8px}
.sim-row.cols-c .val{text-align:center;font-variant-numeric:tabular-nums}
.sim-row.cols-c .nr{text-align:left;font-weight:500}
.sim-row.cols-c .st{text-align:center}
.sim-row.cols-c .price{color:#F5E3D5;font-weight:500;text-align:center}
.row-save{background:none;border:none;padding:0;width:24px;height:24px;margin:-4px auto;cursor:pointer;color:#D8C9B8;display:flex;align-items:center;justify-content:center;transition:color .15s ease}
.row-save:hover{color:#fff}
.row-save.is-saved .heart-ic{fill:var(--accent);stroke:var(--accent)}

/* variant C only: 3-box row (info card / plan carousel / location+compass) aligned to equal height */

/* variant C only: plan area has no "card" framing — real unit images will have no
   background of their own, so this area must read as bg-colored page surface, not a box */
.plan-carousel.plan-c{background:transparent;border:none;box-shadow:none}
.plan-carousel.plan-c .plan-main{background:var(--bg)}
.plan-carousel.plan-c .plan-thumbs{border-top:none;justify-content:space-between;align-items:center;padding:20px 8px 0}
.plan-thumb-group{display:flex;gap:14px}
.plan-nav-arrow{background:none;border:1px solid var(--line);color:var(--sub);width:36px;height:36px;border-radius:50%;font-size:16px;cursor:pointer;font-family:inherit;transition:all .15s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.plan-nav-arrow:hover{border-color:var(--accent);color:var(--accent)}

@media(max-width:880px){
  .sim-row{grid-template-columns:80px 1fr;grid-template-areas:"nr meta" "price st";row-gap:8px}
  .enq-grid{grid-template-columns:1fr}
  .enq-people{margin-top:56px;padding-top:40px}
  /* 8-column similar-units table is wider than a phone: scroll inside its box, not the page */
  .similar-section{overflow-x:auto}
  .similar-section .sim-header,.similar-section .similar-rows-b{min-width:640px}
}

/* Phase 6 honeypot: kept off-screen with a class, never the [hidden] attribute (see 06-RESEARCH Pitfall 3). */
.hp-field{position:absolute;left:-9999px;top:-9999px;opacity:0;pointer-events:none}

/* Homepage timeline: its 26px headings can't sit three across on narrow phones. */
@media(max-width:420px){
  .tl div{padding:0 4px}
  .tl b{font-size:20px}
  .tl span{font-size:10px;letter-spacing:.1em}
}
/* Unit-page image thumbnails (2 arrows + 2 thumbs) on 320 to 360px phones. */
@media(max-width:360px){
  .plan-thumb{width:84px;height:56px}
  .plan-thumb-group{gap:8px}
}

/* Privacy policy pages (/privatumas/, /en/…, /ru/…) */
.legal{max-width:820px;margin:0 auto;padding:10vh 6vw 14vh}
.legal h1{font-size:clamp(34px,5vw,64px);margin-bottom:28px;hyphens:auto;overflow-wrap:break-word}
.legal .lead{font-size:18px;color:var(--sub);margin-bottom:12px}
.legal h2{font-size:28px;margin:48px 0 14px}
.legal p,.legal li{color:var(--ink);margin-bottom:12px}
.legal ul{padding-left:22px;margin-bottom:12px}
.legal .updated{margin-top:48px;font-size:13px;color:var(--sub)}
.legal mark.todo{background:#F5E3D5;color:var(--accent);padding:0 4px;font-weight:400}
footer a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(216,208,196,.4)}
footer a:hover{color:#fff}

/* ---- /pirkimo-procesas/ ---- */
.pp-wrap{max-width:1160px;margin:0 auto}
.pp-hero{padding:9vh 6vw 8vh;background:var(--tint);border-bottom:1px solid var(--line)}
.pp-hero h1{font-size:clamp(40px,5.6vw,76px);margin-bottom:48px}
.pp-hero h1 em{font-style:italic;color:var(--accent)}
.pp-steps{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:0 18px;counter-reset:none}
.pp-steps li{position:relative;padding-top:0}
.pp-num{display:grid;place-content:center;width:64px;height:64px;border-radius:50%;border:1px solid var(--accent);background:var(--bg);font-family:'Montserrat',sans-serif;font-weight:500;font-size-adjust:0.4;font-variant-numeric:tabular-nums;font-size:26px;color:var(--accent);position:relative;z-index:1}
.pp-steps li:not(:last-child)::after{content:"";position:absolute;top:32px;left:72px;right:-10px;height:1px;background:var(--accent);opacity:.55}
.pp-steps h3{font-family:'Montserrat',sans-serif;font-weight:400;font-size:13px;letter-spacing:.2em;text-transform:uppercase;margin:18px 0 8px}
.pp-steps p{font-size:14.5px;line-height:1.55;color:var(--sub);max-width:22ch}
.pp-tag{margin-top:44px;font-family:'Montserrat',sans-serif;font-weight:500;font-size-adjust:0.4;font-variant-numeric:tabular-nums;font-style:italic;font-size:clamp(24px,2.6vw,34px);color:var(--ink)}
.pp-sec{padding:9vh 6vw}
.pp-tint{background:var(--tint)}
.pp-sec h2{font-size:clamp(30px,3.6vw,50px);margin-bottom:22px;max-width:22ch}
.pp-sec p{color:var(--sub);margin-bottom:16px;max-width:60ch}
.pp-split{display:grid;grid-template-columns:1.1fr .9fr;gap:6vw;align-items:center}
.pp-actions{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;margin-top:28px}
.pp-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;padding:14px 28px;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.pp-btn:hover{background:#94502c}
.pp-link{color:var(--ink);text-decoration:none;border-bottom:1px solid #C9B49C;font-size:15px}
.pp-link:hover{color:var(--accent);border-color:var(--accent)}
.pp-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:34px}
@media(max-width:700px){.pp-cards{grid-template-columns:1fr}}
.pp-card{background:var(--card);border:1px solid var(--line);padding:26px 24px 20px;display:flex;flex-direction:column}
.pp-card h3{font-size:26px;margin-bottom:10px}
.pp-card p{font-size:15.5px;line-height:1.6;margin-bottom:14px}
.pp-card small{margin-top:auto;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.pp-terms{background:var(--card);border:1px solid var(--line)}
.pp-terms > summary,.pp-q > summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px}
.pp-terms > summary::-webkit-details-marker,.pp-q > summary::-webkit-details-marker{display:none}
.pp-terms > summary{padding:26px 28px;font-family:'Montserrat',sans-serif;font-weight:500;font-size-adjust:0.4;font-variant-numeric:tabular-nums;font-weight:500;font-size:clamp(22px,2.4vw,30px)}
.pp-terms > summary::after,.pp-q > summary::after{content:"+";flex:none;font-family:'Montserrat',sans-serif;font-weight:400;font-size:28px;line-height:1;color:var(--accent)}
.pp-terms[open] > summary::after,.pp-q[open] > summary::after{content:"\2212"}
.pp-terms-body{padding:8px 28px 34px;border-top:1px solid var(--line)}
.pp-terms-body p{max-width:none}
.pp-t-title{text-align:center;margin:26px 0 8px}
.pp-t-name{font-family:'Montserrat',sans-serif;font-weight:500;font-size-adjust:0.4;font-variant-numeric:tabular-nums;font-size:22px;letter-spacing:.08em;color:var(--ink);margin:0 auto 4px;max-width:none}
.pp-t-ed{font-size:14px;color:var(--sub);margin:10px auto 0;max-width:none}
.pp-t-h{font-family:'Montserrat',sans-serif;font-weight:500;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin:30px 0 10px}
.pp-c{font-size:15.5px;line-height:1.65;color:var(--ink);margin:0 0 10px;max-width:none}
.pp-c2{padding-left:28px}
.pp-t-sign{margin-top:36px;color:var(--ink)}
.pp-t-sign p{margin:0 0 4px;color:var(--ink)}
.pp-lead{margin-bottom:30px}
.pp-q{background:var(--card);border:1px solid var(--line);margin-bottom:10px}
.pp-q > summary{padding:20px 24px;font-size:17px;color:var(--ink)}
.pp-q p{padding:0 24px 22px;margin:0;color:var(--sub);max-width:70ch}
@media (max-width:880px){
  .pp-steps{grid-template-columns:1fr;gap:0}
  .pp-steps li{display:grid;grid-template-columns:64px 1fr;column-gap:20px;padding-bottom:26px}
  .pp-steps li .pp-num{grid-row:1/3}
  .pp-steps li:not(:last-child)::after{top:64px;left:31px;right:auto;width:1px;height:calc(100% - 64px);}
  .pp-steps h3{margin:6px 0 4px}
  .pp-steps p{max-width:none}
  .pp-split{grid-template-columns:1fr}
  .pp-terms-body{padding:4px 18px 26px}
  .pp-terms > summary{padding:20px 18px}
  .pp-c2{padding-left:16px}
}

.pp-notice{margin:18px 0 0}
.pp-terms-body > .pp-notice:first-child{margin:22px 0 6px;max-width:none}
.enq-extra > .pp-notice{margin:0;max-width:none}

#vystytojas .frame img{height:auto}

.enq-newtab{font-size:12px;color:var(--sub);opacity:.8}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pp-split .frame img{height:auto}

/* ---- Contrast fixes (WCAG AA, 4.5:1 for small text). Own commit so it can be reverted alone. ----
   Minimum change per colour, hue and saturation kept. Before -> after:
   grey small text  #7A6659 -> #776457 (token --sub; the brown info card keeps its original #7A6659)
   accent small text #B05F35 -> #9C542F (eyebrows, required asterisk, filter toggle)
   light label on brown card #D8C9B8 -> #F0EAE3
   green "laisvas" on brown card #2E7D45 -> #D8F0DF
   price on brown card #F5E3D5 -> #F7E8DC
   cream text on accent buttons #FFF7EF -> #FFFBF8 */
:root{--sub:#776457}
.tone-sub{background:#7A6659 !important}
.eyebrow,.fld > span i,.v-toggle,.v-toggle[aria-pressed="true"]{color:#9C542F}
.v-chip[aria-pressed="true"],.v-btn.primary{color:#FFFBF8}
.info-card.tone-sub .lbl,.info-card.tone-sub .spec-row .lbl{color:#F0EAE3}
.tone-sub .st-pill[style*="#2E7D45"],.tone-sub .st[style*="#2E7D45"]{color:#D8F0DF !important}
/* Parduotas (soft pink-red #CC6B73) on the brown tone: a light pink, 4.2:1 against the brown. */
.tone-sub .st-pill[style*="#CC6B73"],.tone-sub .st[style*="#CC6B73"]{color:#F9DDDF !important}
.sim-row.tone-sub .val.price{color:#F7E8DC}
.enq-newtab{opacity:1}

/* Footer company line (own commit) */
footer{flex-wrap:wrap}
.foot-legal{flex-basis:100%;margin-top:18px;font-size:11px;letter-spacing:.06em;opacity:.7}

/* ---- Headings in Montserrat (owner decision 2026-10-17; own commit so it can be reverted alone) ----
   Update 2026-10-27 (owner): Montserrat 500 is the only heading and numeral font; the old display serif is gone from the site. */
.tl b,.enq-done,.enq-person h4,.enq-person .enq-name,.pp-terms > summary,.pp-t-name,.pp-tag{font-family:'Montserrat',sans-serif}
/* Montserrat has a much larger x-height and wider letters than the old display serif: scaled (font-size-adjust) so the existing heading and numeral sizes keep their layout */
h1,h2,h3,.tl b,.enq-done,.enq-person h4,.enq-person .enq-name,.pp-terms > summary,.pp-t-name,.pp-tag{font-size-adjust:0.4}
/* No italic cut is loaded for Montserrat: keep the accent colour, drop the faux italic */
.hero h1 em,.v-head h1 em,.v-head h2 em,.vs-copy h2 em,.pp-hero h1 em,h1 em,h2 em,h3 em,.pp-tag{font-style:normal}

/* Parking / storage interest group: shown to every enquirer, above the partnership tick */
.enq-interest{display:grid;gap:8px}
.enq-interest-label{font-size:13px;line-height:1.5;color:var(--sub);margin:0}

/* Jasmine mark (owner-approved; colour is Julija's green #566f30, set inside the three SVG files in assets/brand/) */
nav .logo{display:flex;align-items:center;gap:10px}
.logo-mark{flex:none;width:auto;height:40px}
.foot-legal{display:flex;align-items:center;gap:14px;opacity:1}
.foot-legal span{opacity:.7}
.foot-mark{flex:none;width:auto;height:64px}
/* The mark takes ~42px in the nav: tighten the menu gap a little on mid-size desktops so the wordmark keeps wrapping exactly where it did before */
@media (min-width:881px) and (max-width:1500px){nav ul{gap:29px}}

/* Language switcher (homepages) */
.lang-switch{flex-basis:100%;margin-top:6px}
.lang-switch [aria-current]{opacity:.7}

/* Homepage hero (wide 16:9 render, owner feedback 2026-10-21/22): on desktop the text sits top-left so it never
   covers the woman, the dog, the children or the sun; only a soft glow darkens behind the text, the rest stays bright. */
.hero{align-items:flex-start}
.hero::after{display:none}
.hero-inner{padding:4.5vh 6vw 8vh}
.hero-inner::before{content:"";position:absolute;z-index:-1;inset:-40% 5% -14% -30%;background:radial-gradient(closest-side,rgba(15,12,9,.66) 60%,rgba(15,12,9,0) 100%)}
.hero h1 em{color:#F5D49C;text-shadow:0 1px 12px rgba(15,12,9,.45)}
.hero h1{margin-bottom:34px}
/* Phones and tablets up to 880px (owner decision 2026-10-22): the whole 16:9 render, uncropped at full width,
   text and buttons below it on the page background */
@media(max-width:880px){
  .hero{display:block;min-height:0}
  .hero picture,.hero img{display:block}
  .hero img{position:static;height:auto}
  .hero-inner{padding:28px 6vw 36px;color:var(--ink)}
  .hero-inner::before{display:none}
  .hero h1 em{color:var(--accent);text-shadow:none}
}
@media(min-width:881px){.hero{min-height:clamp(560px,88vh,900px)}.hero img{object-position:50% 38%}.hero h1{max-width:7.6em}}

/* Pinned menu bar on every page + phone/tablet menu button (owner decision 2026-10-22). Desktop look
   unchanged; nav.js keeps --nav-h equal to the bar so in-page anchors land below it. */
nav{position:sticky;top:0;z-index:50}
html{scroll-padding-top:calc(var(--nav-h,88px) + 12px)}
.nav-toggle{display:none}
@media(max-width:880px){
  nav{padding:8px 4vw;gap:10px}
  nav .logo{font-size:17px;letter-spacing:.12em;white-space:nowrap;gap:7px;margin-right:auto}
  nav .logo-mark{height:30px}
  nav .cta{order:2;padding:8px 12px;font-size:11px;letter-spacing:.08em;line-height:1.3;text-align:center}
  .nav-toggle{order:3;flex:none;display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 11px;background:none;border:1px solid var(--line);color:var(--ink);cursor:pointer}
  .nav-toggle span{display:block;height:2px;background:currentColor;transition:transform .2s,opacity .2s}
  nav.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  nav.nav-open .nav-toggle span:nth-child(2){opacity:0}
  nav.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  nav.nav-open ul{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;padding:6px 0;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 14px 24px rgba(42,26,16,.08)}
  nav.nav-open ul a{display:block;padding:14px 6vw;font-size:13px}
}
@media(prefers-reduced-motion:reduce){.nav-toggle span{transition:none}}

/* Band under the hero (owner decisions 2026-10-25): four columns in the stats-band style, each a big
   headline and one short line. 2x2 up to 880px. */
.band4 b{font-size:clamp(28px,2.5vw,40px);line-height:1.15;margin-bottom:8px;text-wrap:balance}
.band4 div p{font-size:14px;line-height:1.5;color:var(--sub)}
@media(max-width:880px){
  .band4 div{padding:26px 12px}
  .band4 > div:nth-child(3){border-left:none}
  .band4 > div:nth-child(n+3){border-top:1px solid var(--line)}
  .band4 b{font-size:22px}
  .band4 div p{font-size:13px}
}

/* Homepage blocks 3-5 (Julija's copy, 2026-10-25): split/frame image + text, side by side from 761px with
   the middle block's image on the right (left / right / left); below 761px the image always comes first. */
@media(min-width:761px){#kiemas .split,#parkavimas .split,#namuose .split{grid-template-columns:1fr 1fr}.split.flip > .frame{order:2}}
#kiemas .v-btn,#parkavimas .v-btn,#namuose .v-btn{margin-top:8px}

/* Timeline: four houses by quarter (owner decision 2026-10-25); 2x2 without the connecting line on small phones. */
.tl.tl4{grid-template-columns:repeat(4,1fr)}
@media(max-width:600px){.tl.tl4{grid-template-columns:repeat(2,1fr);row-gap:30px}.tl.tl4::before{display:none}}

/* Price strip directly under the band (owner decisions 2026-10-25): one slim row in the darker accent #9C542F
   (cream small text 5.5:1): "Butai nuo" + price in Montserrat + "dalinė apdaila" on one baseline, cream button
   to #butai on the right. Phones: price line, then a full-width button. */
.price-strip{display:flex;align-items:center;justify-content:space-between;gap:10px 32px;padding:14px max(6vw,calc((100% - 1600px) / 2 + 96px));background:#9C542F;color:#FFFBF8}
.ps-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px}
.ps-from{font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.ps-amount{font-family:'Montserrat',sans-serif;font-weight:500;font-size-adjust:0.4;font-variant-numeric:tabular-nums;font-size:30px;font-weight:500;line-height:1.2}
.ps-note{font-size:13px;letter-spacing:.08em}
.ps-btn{flex:none;display:inline-block;padding:12px 30px;background:var(--bg);color:var(--ink);text-decoration:none;letter-spacing:.2em;font-size:12px;text-transform:uppercase;transition:background .18s ease}
.ps-btn:hover{background:#fff}
@media(max-width:880px){.price-strip{flex-direction:column;align-items:stretch;padding:12px 6vw}.ps-price{justify-content:center;gap:0 8px}.ps-from{font-size:11px;letter-spacing:.12em}.ps-note{font-size:12px;letter-spacing:.04em}.ps-amount{font-size:24px}.ps-btn{display:block;width:100%;text-align:center}}
@media(max-width:400px){.ps-price{gap:0 6px}.ps-from{letter-spacing:.06em}.ps-amount{font-size:22px}}
/* Phones (<=760px, owner decision 2026-10-25): stagger the three images, about 88% wide, courtyard and
   living room flush left, parking flush right; the text stays full width below each image. */
@media(max-width:760px){#kiemas .frame,#parkavimas .frame,#namuose .frame{width:88%}#parkavimas .frame{margin-left:auto}}
/* Band headlines on one line on narrow phones (360-400px), e.g. "Privatus parkingas". */
@media(max-width:400px){.band4 div{padding:26px 8px}.band4 b{font-size:21px}}
/* Picker sections on the page background: homepage (owner decision 2026-10-25) and /butai/ (2026-10-26,
   the transparent aerial cutout sits on cream on both pages). Hairlines kept from .picker. */
.home-picker,.butai-picker{background:var(--bg)}
.butai-picker{padding-top:4vh}

/* Aerial floor picker (assets/js/aerial-picker.mjs), shared by /butai/ and the homepage. */
/* Width also capped by the screen height (16:9 picture plus about 300px of menu, padding and buttons), so on
   a laptop the picture and all six buttons fit on one screen; the picture itself is never cropped. */
.aerial{max-width:min(1200px,max(320px,calc((100svh - 300px) * 1.778)));margin:0 auto}
.aerial-figure{position:relative;margin:0}
.aerial-figure img{display:block;width:100%;height:auto}
.aerial-hot{position:absolute;inset:0;width:100%;height:100%}
.aerial-hot polygon{fill:rgba(176,95,53,0);stroke:none;cursor:pointer;transition:fill .2s}
.aerial-hot polygon.on,.aerial-hot polygon.hover{fill:rgba(176,95,53,.42);stroke:#B05F35;stroke-width:1.5;vector-effect:non-scaling-stroke}
.aerial-tip{position:absolute;transform:translate(-50%,-100%);z-index:5;background:var(--ink);color:#fff;font-size:13px;letter-spacing:.04em;padding:7px 12px;border-radius:8px;white-space:nowrap;pointer-events:none}
.aerial-tip[hidden]{display:none}
.aerial-controls{margin-top:18px}
.aerial-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.aerial-btn{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:58px;padding:8px 6px;border:1px solid var(--line);background:var(--card);color:var(--ink);text-align:center;cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.aerial-btn .ab-name{font-size:15px;font-weight:500;line-height:1.3}
.aerial-btn .ab-count{font-size:12px;line-height:1.4;min-height:1.4em;color:var(--sub)}
.aerial-btn:hover,.aerial-btn.hover{border-color:var(--accent)}
.aerial-btn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.aerial-btn.on .ab-count{color:rgba(255,255,255,.85)}
.aerial-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.aerial-note{font-size:12px;line-height:18px;min-height:18px;letter-spacing:.08em;color:var(--sub);margin-top:12px;text-align:center}
/* The buttons are added by script after the first paint: hold their space until then, so the flat
   list below does not jump (Lighthouse layout shift). Heights = margin + button rows + note. */
.aerial:not(:has(.aerial-controls))::after{content:'';display:block;height:174px}
/* The live result count fills in when the data arrives; its one line is held so the list below stays put. */
#filters-count{min-height:1.7em}
@media(min-width:761px){.aerial-buttons{grid-template-columns:repeat(6,minmax(0,1fr))}.aerial:not(:has(.aerial-controls))::after{height:106px}}
@media(prefers-reduced-motion:reduce){.aerial-hot polygon,.aerial-btn{transition:none}}

/* /butai/ floor view: the chosen floor's plan for all four buildings, or the parking panel. */
.floor-hint{text-align:center;color:var(--sub);font-size:14px;letter-spacing:.08em;margin:28px 0 0}
.floor-hint[hidden]{display:none}
.soon-btn,.parking-btn{all:unset;box-sizing:border-box;display:inline-block;padding:12px 22px;border:1px solid var(--accent);color:var(--accent);font-size:12px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background-color .2s,color .2s}
.soon-btn:hover,.parking-btn:hover{background:var(--accent);color:#fff}
.soon-btn:focus-visible,.parking-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.enq-building{font-size:14px;color:var(--accent);margin:0 0 14px}
.enq-building[hidden]{display:none}

/* /butai/ picker stage: aerial render left and the chosen floor's combined plan right, the six buttons across
   below both (desktop); stacked render, buttons, plan on phones. .aerial has no box of its own here, so the
   render and the buttons become cells of this grid. The 44px caption row is held so nothing jumps on load. */
.picker-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);/* THE LEFT/RIGHT SWAP: aerial render (with the floor buttons below) on the left, the floor plan on the right. To swap them, use "plan render" / "caption ." here. */grid-template-areas:"render plan" ". caption" "controls controls";grid-template-rows:auto minmax(44px,auto) auto;column-gap:24px;max-width:1500px;margin:0 auto}
.picker-stage .aerial{display:contents}
.picker-stage .aerial-figure{grid-area:render}
.picker-stage .aerial-controls{grid-area:controls}
.plan-slot{grid-area:plan;min-width:0;position:relative}
.plan-figure{position:relative;scroll-margin-top:calc(var(--nav-h,64px) + 12px)}
.plan-img{display:block;width:100%;height:auto}
.plan-caption{grid-area:caption;display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;font-size:14px;padding-top:6px}
.plan-caption[hidden]{display:none}
.plan-caption b{font-family:'Montserrat',sans-serif;font-weight:500;font-size:16px}
.plan-caption .legend{margin:0;flex-wrap:wrap;gap:6px 18px}
.plan-note{margin:0;color:var(--sub);flex:1 1 280px}
.plan-note[hidden],.parking-btn[hidden],.plan-caption .legend[hidden]{display:none}
.plan-flats text{pointer-events:none;fill:var(--ink)}
.plan-flats .flat-label{text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:#fff;font-family:'Montserrat',sans-serif;letter-spacing:-.03em}
.plan-flats .bld-tag circle{fill:var(--bg);stroke:var(--accent)}
.plan-flats .bld-tag text{text-anchor:middle;dominant-baseline:central;font-family:'Montserrat',sans-serif;font-weight:500;fill:var(--accent)}
.plan-flats .flat-pending polygon{fill:#98908A;fill-opacity:.2;stroke:#98908A;cursor:default}
.plan-flats .flat-pending .flat-label{fill:var(--sub)}
.plan-flats .flat-soon{cursor:pointer;outline:none}
/* "Jau greitai" areas of C and D: the grey they had before (owner 2026-10-28); Parduotas is now a soft pink-red. */
:root{--soon:#98908A}
.plan-flats .flat-soon polygon{fill:var(--soon);stroke:var(--soon)}
.plan-flats .flat-soon:hover polygon,.plan-flats .flat-soon:focus-visible polygon{fill-opacity:.55;stroke-width:2.5}
.plan-flats .flat-soon:focus-visible polygon{stroke:var(--ink)}
.dot-soon{background:var(--soon)}
.plan-flats a{outline:none}
.plan-flats a:focus-visible polygon{stroke-width:3;stroke:var(--ink)}
/* Card for a flat (hover, focus or tap): status word in its colour, id, rooms and area, price. */
.plan-tip{position:absolute;z-index:6;min-width:168px;max-width:240px;background:var(--ink);color:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 16px 40px rgba(20,12,6,.35);font-size:13px}
.plan-tip[hidden]{display:none}
.tip-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-size:15px;margin-bottom:2px}
.tip-head b{font-family:'Montserrat',sans-serif;font-weight:500}
.tip-status{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;background:#fff;border-radius:999px;padding:2px 9px}
.tip-line{color:rgba(255,255,255,.82);line-height:1.5}
.tip-btn{display:block;margin-top:10px;padding:10px 12px;text-align:center;background:var(--accent);color:#fff;text-decoration:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.tip-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(min-width:901px){.floor-hint{display:none}}
@media(max-width:900px){
  .picker-stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"render" "controls" "plan" "caption";grid-template-rows:none}
  .plan-tip{max-width:210px}
  .plan-caption{padding-top:10px}
}

/* /butai/ flat list: the look-alike rows of the flat pages (brown tone, big Montserrat number, hairline dividers, small
   uppercase header) reused as one clickable row per flat; stacked cards on phones, no sideways scrolling. */
.unit-list-wrap{margin-top:10px}
.unit-list{list-style:none;margin:0;padding:0}
.unit-list>li{display:block}
/* The rows arrive with the data: hold the list's space until then, so the enquiry form below it does not jump (layout shift). */
body:not([data-loaded]) .unit-list{min-height:90vh}
.sim-header.cols-list,.sim-row.cols-list{grid-template-columns:minmax(120px,1.1fr) .9fr 1.8fr 1fr 1fr 1fr 110px;gap:8px 18px}
.sim-header.cols-list{padding:0 28px 10px}
.sim-header.cols-list span,.sim-row.cols-list .val{text-align:left}
.sim-row.cols-list{padding:26px 28px;transition:filter .15s,box-shadow .15s}
.sim-row.cols-list .nr{line-height:1}
.sim-row.cols-list .price{font-weight:500;color:#FBF3E7;text-align:left}
.sim-row.cols-list.sold .nr,.sim-row.cols-list.sold .val{opacity:.6}
.sim-row.cols-list:hover,.sim-row.cols-list:focus-visible,.sim-row.cols-list[data-unit-hover]{filter:brightness(1.1);box-shadow:inset 4px 0 0 var(--accent)}
.sim-row.cols-list:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.chip{justify-self:start;display:inline-block;padding:4px 12px;border-radius:999px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;white-space:nowrap}
.chip.laisvas{background:#2E7D45;color:#fff}
.chip.rez{background:#B05F35;color:#fff}
.chip.parduota{background:#CC6B73;color:#2A1A10}
.sim-row.cols-list .go{justify-self:end;white-space:nowrap;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#F8F2EA}
.go-arrow{display:inline-block;margin-left:8px;transition:transform .15s}
.sim-row.cols-list:hover .go-arrow{transform:translateX(4px)}
.unit-list-msg{background:var(--sub);color:#F8F2EA;padding:28px;font-size:15px}
.unit-list-msg .filters-clear{margin-left:14px;color:#F8F2EA;border-color:rgba(255,255,255,.5)}
@media(max-width:880px){
  .sim-header.cols-list{display:none}
  .sim-row.cols-list{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nr chip" "floor meta" "out price" "go go";gap:10px 14px;padding:20px 20px 16px}
  .sim-row.cols-list .nr{grid-area:nr;font-size:32px}
  .sim-row.cols-list .chip{grid-area:chip;justify-self:end}
  .sim-row.cols-list .v-floor{grid-area:floor}
  .sim-row.cols-list .v-meta{grid-area:meta;text-align:right}
  .sim-row.cols-list .v-out{grid-area:out}
  .sim-row.cols-list .v-price{grid-area:price;text-align:right;font-size:21px}
  .sim-row.cols-list .go{grid-area:go;justify-self:stretch;display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid rgba(255,255,255,.18)}
}

/* Saved flats (hearts): same heart and storage as the flat pages; 40px hit area; filled heart and a bar mark a saved row. */
.unit-list>li{position:relative}
.list-heart{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:40px;height:40px;margin:0;color:#D8C9B8}
.list-heart:hover{color:#fff}
.list-heart:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.row-save.is-saved .heart-ic{fill:#F2A07B;stroke:#F2A07B}
.unit-list>li.is-saved .sim-row{box-shadow:inset 4px 0 0 #F2A07B}
.sim-row.cols-list .go{padding-right:44px}
.plan-tip .list-heart{position:static;transform:none;width:34px;height:34px;margin:-7px -9px -7px auto;flex:none}
.plan-flats a.saved polygon{stroke-width:3}
.flat-heart{fill:#B05F35;stroke:#fff;stroke-width:1.5px;vector-effect:non-scaling-stroke;display:none;pointer-events:none}
.plan-flats a.saved .flat-heart{display:inline}
.v-out .v-view{display:block;font-size:12px;opacity:.85;margin-top:2px}
.filter-field-view{display:flex;flex-direction:column;gap:12px}
.filter-field-view[hidden]{display:none}
@media(max-width:880px){
  .list-heart{top:10px;transform:none;right:8px}
  .sim-row.cols-list .chip{margin-right:44px}
}
/* Parduotas text colour on light backgrounds (the mockup's grey above is lines 1-74 and stays byte-identical). */
.parduota{color:#A63F4B}
/* Card header: name, status word, heart (the heart is pushed to the right and never overlaps the status). */
.plan-tip{min-width:214px;max-width:270px}
.tip-head{justify-content:flex-start;align-items:center;gap:10px}
.tip-head .tip-status{flex:none}
.plan-tip .list-heart{margin-left:auto}
@media(max-width:900px){.plan-tip{max-width:240px}}
/* Reserved and sold rows: only the text columns are dimmed (the old look-alike rule dimmed the whole row, chip and heart too). */
.sim-row.cols-list.tone-sub.sold{opacity:1}
@media(max-width:880px){.sim-row.cols-list .go{padding-right:0}}

/* /butai/ filters (2026-10-27 feedback): five filters in ONE row (both sliders inline, same look, a little narrower), the
   tick boxes in one line below it, the clear button an accent outline that fills on hover (like the plan's parking button). */
.filters-main{display:flex;flex-wrap:wrap;align-items:flex-end;gap:22px 24px}
.filters-main .range-slider{gap:12px}
.filters-main .range-value{width:78px}
.filters-main .filter-slider{width:84px}
.filters-ticks{display:flex;flex-wrap:wrap;align-items:center;gap:10px 32px}
.filters-ticks .filter-field,.filters-ticks .filter-field-view{flex-direction:row;align-items:center;gap:32px}
.filters-ticks .filters-clear{margin-left:auto}
.filters-clear{display:inline-flex;align-items:center;gap:8px;font-family:'Montserrat',sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);background:none;border:1px solid var(--accent);padding:11px 20px;cursor:pointer;transition:background-color .2s,color .2s}
.filters-clear:hover{background:var(--accent);color:#fff}
.filters-clear:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.filters-clear{transition:none}}
.plan-flats .bld-tag{pointer-events:none}
/* The soon-row and the "C ir D" caption are gone: the stage keeps only the space it still uses. */
.picker-stage .aerial:not(:has(.aerial-controls))::after{height:144px}
@media(min-width:761px){.picker-stage .aerial:not(:has(.aerial-controls))::after{height:76px}}

/* Phone: one slim bar above the list (Filtrai pill with the active count + Tik laisvi), filters in a bottom sheet. */
.filter-bar{display:none}
.sheet-grabber{width:40px;height:4px;border-radius:2px;background:var(--line);margin:10px auto 0;flex:none}
dialog#filter-sheet{padding:0;width:100%;max-width:none;height:auto;max-height:88vh;margin:auto 0 0;border-radius:20px 20px 0 0;overflow:hidden}
dialog#filter-sheet[open]{display:flex;flex-direction:column}
dialog#filter-sheet .filter-sheet-header{padding:8px 20px 6px;margin:0}
dialog#filter-sheet .filter-sheet-header h3{font-size:22px}
#filter-sheet-close{all:unset;cursor:pointer;width:32px;height:32px;text-align:center;line-height:32px;color:var(--sub)}
.filter-sheet-body{flex:1;overflow-y:auto;padding:8px 20px 16px;overscroll-behavior:contain}
dialog#filter-sheet .filter-sheet-footer{margin:0;padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--bg);display:flex;align-items:center;gap:18px}
.filter-sheet-footer .btn{flex:1}
.sheet-clear{all:unset;cursor:pointer;font-size:14px;color:var(--accent);text-decoration:underline;text-underline-offset:3px;padding:8px 4px}
.sheet-clear[hidden]{display:none}
.sheet-clear:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:880px){
  .filter-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 2px}
  /* The Filtrai pill is the site's own outlined button (class parking-btn: Montserrat 12px, .16em, uppercase, 1px accent border, square corners, fills on hover); only its inner layout is set here. */
  .filter-toggle{display:inline-flex;align-items:center;gap:10px;padding:10px 16px}
  .filter-toggle-icon{width:14px;height:14px;flex:none}
  .filter-toggle .badge{width:18px;height:18px;font-size:11px;letter-spacing:0;transition:background-color .2s,color .2s}
  .filter-toggle:hover .badge{background:#fff;color:var(--accent)}
  .filter-bar .check-toggle{display:flex;align-items:center;gap:10px;height:40px;margin:0;cursor:pointer;text-transform:uppercase}
  .filter-bar .check-text{font-size:12px;letter-spacing:.12em}
  .filter-bar .filter-field{flex-direction:row}
  #filter-sheet-body .filters{gap:26px;margin:0}
  #filter-sheet-body .filters-main,#filter-sheet-body .filters-ticks{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:26px}
  #filter-sheet-body .filters-ticks .filter-field,#filter-sheet-body .filters-ticks .filter-field-view{flex-direction:column;align-items:stretch;gap:6px}
  #filter-sheet-body .filters-main .range-value{width:84px}
  #filter-sheet-body .filters-main .filter-slider{flex:1;width:auto;min-width:0}
  #filter-sheet-body .filters-clear{display:none}
}
/* A tick with no flat left under the other filters stays visible but dimmed (disabled, not hidden). */
.check-toggle:has(input:disabled){opacity:.4;cursor:not-allowed}
.check-box-wrap input:disabled{cursor:not-allowed}
/* Phone: the "Jau greitai" legend entry is not shown (the grey C and D areas stay and still lead to the enquiry form). */
@media(max-width:880px){.plan-caption .legend span:has(.dot-soon){display:none}}
/* The sheet's apply button: the site's primary button (accent fill, white text) in Montserrat like the header CTA and the plan's outlined button, no native button border. */
#filter-sheet-apply{font-family:'Montserrat',sans-serif;font-size:12px;letter-spacing:.18em;border:0;padding:15px 24px;cursor:pointer;transition:background-color .2s}
#filter-sheet-apply:hover{background:#94502c}
#filter-sheet-apply:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Native form controls and buttons inherit the site font (browsers otherwise set Arial / system-ui on them). */
button,input,select,textarea{font-family:inherit}
.loc-side h4{font-weight:500}
strong,b{font-weight:500}

/* Arrows, the close cross and the status dot are drawn (masks and borders) instead of typed as symbols: Montserrat has no arrow glyphs, so a typed arrow came from a system font. */
.arr{display:inline-block;width:1.1em;height:.75em;vertical-align:-.04em;background:currentColor;-webkit-mask:var(--arr) center/contain no-repeat;mask:var(--arr) center/contain no-repeat}
.arr-r{--arr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 8h21M16 2l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E")}
.arr-l{--arr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M23 8H2M8 2L2 8l6 6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E")}
.arr-x{width:.75em;--arr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2l12 12M14 2L2 14' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E")}
.st-dot{display:inline-block;width:.62em;height:.62em;border-radius:50%;background:currentColor;margin-right:.5em;vertical-align:.04em}
/* Montserrat is wider than the old body font: on the narrowest phones keep the header button on one line (Lithuanian) */
@media(max-width:400px){nav .logo{letter-spacing:.08em}nav .cta{padding:8px 9px;letter-spacing:.03em}}

/* Flat page: three columns copied from the reference structure and proportions: dark info card 28 / ONE large image of this flat 53 /
   "Vieta aukšte" 18, all the same height; stacked on tablet and phone (card, image + thumbnails, Vieta aukšte, Panašūs butai). */
.unit-top.stretch-c{grid-template-columns:minmax(280px,28fr) minmax(0,53fr) minmax(190px,18fr);gap:24px;align-items:stretch}
@media(max-width:1100px){.unit-top.stretch-c{grid-template-columns:minmax(0,1fr);gap:28px}}
.info-card h1{font-size:46px;line-height:1}
.info-card .price{font-size:28px;white-space:nowrap}
.info-card.tone-sub .status-row{margin:10px 0 18px;padding:0 0 18px;border-top:none}
.info-card .ask-btn{display:block;text-align:center;text-decoration:none;padding:24px 16px;font-size:14px}
.plan-carousel.plan-c{display:flex;flex-direction:column;min-width:0}
.plan-carousel.plan-c .plan-main{flex:1 1 auto;min-height:420px;aspect-ratio:auto;overflow:hidden}
.plan-slide{display:none}
.plan-slide.active{display:block}
.flat-zoom{all:unset;box-sizing:border-box;position:absolute;inset:0;display:block;cursor:zoom-in}
.flat-zoom:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.flat-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.plan-thumb-group{align-items:center;margin:0 auto}
.plan-thumb{font:inherit}
.loc-side.loc-c{display:flex;flex-direction:column;align-items:center;gap:14px;padding:6px 0 0;background:none;border:none;box-shadow:none}
.loc-side h2{font-size:18px;line-height:1.2;margin:0;text-align:center}
.loc-side .compass{width:88px;display:block}
.loc-side .floor-map{width:100%;height:auto;display:block}
.floor-map .flat-here{fill:var(--accent);fill-opacity:.92;stroke:var(--accent);stroke-width:14;stroke-linejoin:round}
.floor-map .street{font-family:'Montserrat',sans-serif;font-weight:400;font-size:130px;letter-spacing:.05em;fill:var(--sub);text-anchor:middle;dominant-baseline:central}
.floor-map .bld-tag circle{fill:var(--bg);stroke:var(--accent);stroke-width:10}
.floor-map .bld-tag text{text-anchor:middle;dominant-baseline:central;font-family:'Montserrat',sans-serif;font-weight:500;fill:var(--accent)}
@media(max-width:1100px){
  .plan-carousel.plan-c .plan-main{flex:none;min-height:0;aspect-ratio:auto;overflow:visible}
  .plan-slide.active{display:block;position:relative}
  .flat-zoom{position:static}
  .flat-img{position:static;height:auto;max-height:80vh}
  .loc-side.loc-c{padding-top:0}
  .loc-side .floor-map{max-width:560px}
  .info-card{padding:22px 20px}
  .info-card h1{font-size:36px}
  .info-card .price{font-size:22px}
  .info-card.tone-sub .status-row{margin:8px 0 12px;padding-bottom:12px}
  .info-card.tone-sub .spec-row{padding:6px 0}
  .info-card.tone-sub .actions{margin-top:2px}
  .info-card .ask-btn{padding:16px;font-size:13px}
}
.flat-viewer{border:none;padding:0;margin:0;max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh;background:var(--bg);color:var(--ink);overflow:hidden}
.flat-viewer::backdrop{background:rgba(30,20,12,.82)}
.fv-bar{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:8px 14px;background:rgba(30,20,12,.88);color:#fff}
.fv-title{font-family:'Montserrat',sans-serif;font-weight:500;font-size:16px;letter-spacing:.06em}
.fv-tools{display:flex;gap:8px}
.fv-tools button{all:unset;box-sizing:border-box;min-width:40px;height:40px;padding:0 10px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid rgba(255,255,255,.35);color:#fff;font-size:18px;font-family:'Montserrat',sans-serif}
.fv-tools button:hover{background:rgba(255,255,255,.14)}
.fv-tools button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fv-scroll{position:absolute;inset:0;overflow:auto;padding:64px 16px 16px;display:flex;touch-action:pan-x pan-y pinch-zoom}
.fv-scroll.is-zoomed{cursor:grab}
.fv-scroll:focus-visible{outline:none}
.fv-img{display:block;margin:auto;flex:none;max-width:none;height:auto;user-select:none;-webkit-user-drag:none}