/* ═══════════════════════════════════════════════════════════
   ASTRIS — brand site
   Palette derives from astris.bg's own ground (#07031A), a
   night-violet black. The brand name is astrum; the tagline is
   "дом под звездите". So: a night sky, warm metal for starlight,
   and nothing else competing.
   ═══════════════════════════════════════════════════════════ */

:root{
  --pill:     rgba(244,239,230,.08);
  --night:    #07031A;
  --night-2:  #0C0722;
  --night-3:  #120C2E;
  --star:     #F4EFE6;
  --brass:    #C8A265;
  --brass-dk: #A8834A;
  --haze:     #8F8AAB;
  --line:     rgba(244,239,230,.13);
  --line-str: rgba(244,239,230,.28);

  /* themed chrome — every one of these is redefined for light below */
  --lede:       #CFC8D8;
  --nav-ink:    #C9C2D6;
  --hdr-bg:     rgba(7,3,26,.82);
  --tag-bg:     rgba(7,3,26,.72);
  --cell-bg:    linear-gradient(180deg, rgba(244,239,230,.045), rgba(244,239,230,.015));
  --cell-hover: rgba(244,239,230,.09);
  --cell-on:    rgba(200,162,101,.16);
  --field-bg:   rgba(244,239,230,.05);
  --shadow:     0 18px 40px rgba(0,0,0,.35);

  --free:     #7BC49B;
  --reserved: #E0B15C;
  --sold:     #6A6480;

  --display: "Cormorant Garamond", "Times New Roman", serif;
  --body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  --pad: clamp(20px, 5vw, 88px);
  --rail: 1560px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--night); color:var(--star);
  font-family:var(--body); font-weight:300; font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }
::selection{ background:var(--brass); color:var(--night); }

/* ── type ────────────────────────────────────────────── */
h1,h2,h3,h4{
  font-family:var(--display); font-weight:300; margin:0;
  line-height:1.04; letter-spacing:-.015em; text-wrap:balance;
}
.d1{ font-size:clamp(44px, 8.2vw, 132px); }
.d2{ font-size:clamp(34px, 5.4vw, 84px); }
.d3{ font-size:clamp(26px, 3.2vw, 46px); }
.lede{ font-size:clamp(16px,1.35vw,20px); color:var(--lede); max-width:56ch; font-weight:300; }

.eyebrow{
  font-family:var(--body); font-size:11px; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; color:var(--brass);
}
.muted{ color:var(--haze); }

/* Двустранно подравняване на целия текст — at every width and in every
   column, including the hero copy, the "Как избираме" cards, the footer and
   the scheme's panel. Note that justification only affects blocks that run to
   more than one line; single-line labels, buttons and values are unchanged by
   it either way.
   Two things stay as they were because justifying them would break the
   layout rather than the rhythm: the right-aligned figures in the spec and
   summary lists, and the centred empty state — both are defined further down
   this file and still win on source order.
   Bulgarian has no browser hyphenation dictionary, so on a phone (a 30-40
   character measure) the word gaps get wide. That is inherent to justified
   text at that width, not something the CSS can tune away. */
p, li, dd, .lede, .muted, .hero-sub, blockquote{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}
/* tracked-out label type: justification would stretch the letter-spacing
   run to the full column on the rare two-line one */
.eyebrow, .stat .k, .s-count, .tag{ text-align:left; }
.num{ font-variant-numeric:tabular-nums; }

/* ── layout ──────────────────────────────────────────── */
.wrap{ max-width:var(--rail); margin:0 auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(72px, 11vw, 172px); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ── header ──────────────────────────────────────────── */
.hdr{
  position:fixed; inset:0 0 auto; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:20px var(--pad);
  transition:background .5s var(--ease), backdrop-filter .5s var(--ease), padding .5s var(--ease);
}
.hdr.solid{
  background:var(--hdr-bg); backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line); padding-block:14px;
}
.brand{ display:flex; align-items:center; gap:12px; letter-spacing:.3em;
  font-size:15px; font-weight:400; text-transform:uppercase; }
.brand .glyph{ width:26px; height:26px; flex:none; }
/* the logo keeps its proportions — let the nav give way, never the wordmark */
.hdr .brand, .brand img{ flex:none; }
.nav{ display:flex; gap:34px; align-items:center; }
.nav a{
  font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--nav-ink); position:relative; padding-block:6px; transition:color .3s;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--brass); transition:width .45s var(--ease);
}
.nav a:hover{ color:var(--star); } .nav a:hover::after{ width:100%; }
.nav a.on{ color:var(--star); } .nav a.on::after{ width:100%; }
.burger{ display:none; width:30px; height:18px; position:relative; }
.burger span{ position:absolute; left:0; width:100%; height:1px; background:var(--star); transition:.4s var(--ease); }
.burger span:nth-child(1){ top:0 } .burger span:nth-child(2){ top:8px } .burger span:nth-child(3){ top:16px }
body.menu-open .burger span:nth-child(1){ top:8px; transform:rotate(45deg) }
body.menu-open .burger span:nth-child(2){ opacity:0 }
body.menu-open .burger span:nth-child(3){ top:8px; transform:rotate(-45deg) }

/* ── buttons ─────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 30px; border:1px solid var(--line-str);
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  position:relative; overflow:hidden; transition:color .45s var(--ease), border-color .45s;
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--brass);
  transform:translateY(101%); transition:transform .5s var(--ease); z-index:-1;
}
.btn>*{ position:relative; z-index:1; }
.btn:hover{ color:var(--night); border-color:var(--brass); }
.btn:hover::before{ transform:translateY(0); }
.btn.solid{ background:var(--brass); border-color:var(--brass); color:var(--night); }
.btn.solid::before{ background:var(--star); }

.arrow-link{
  display:inline-flex; align-items:center; gap:14px;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--brass);
}
.arrow-link .ln{ width:38px; height:1px; background:var(--brass); transition:width .45s var(--ease); }
.arrow-link:hover .ln{ width:64px; }

/* ── hero ────────────────────────────────────────────── */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-bottom:clamp(48px,7vw,104px); overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:-2; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,3,26,.68) 0%, rgba(7,3,26,.25) 38%, rgba(7,3,26,.92) 100%);
}
.hero-inner{ width:100%; }
.hero h1{ margin:18px 0 22px; }

/* ── scroll reveal ───────────────────────────────────── */
.rv{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in{ opacity:1; transform:none; }
/* delays are dl*, NOT d* — d1/d2/d3 are the display type sizes and an
   element is routinely both (a revealed heading). */
.rv.dl1{ transition-delay:.09s } .rv.dl2{ transition-delay:.18s }
.rv.dl3{ transition-delay:.27s } .rv.dl4{ transition-delay:.36s }

/* ── project cards (home) ────────────────────────────── */
.projects{ display:grid; gap:2px; }
.pcard{
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  min-height:clamp(340px, 46vw, 560px); background:var(--night-2); overflow:hidden;
}
.pcard:nth-child(even){ direction:rtl; }
.pcard:nth-child(even)>*{ direction:ltr; }
.pcard-img{ position:relative; overflow:hidden; }
.pcard-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.pcard:hover .pcard-img img{ transform:scale(1.05); }
.pcard-body{ display:flex; flex-direction:column; justify-content:center;
  gap:20px; padding:clamp(28px,4vw,66px); }
.pcard .meta{ display:flex; flex-wrap:wrap; gap:10px 26px; font-size:12.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--haze); }
.tag{
  position:absolute; top:20px; left:20px; z-index:2;
  padding:7px 14px; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  background:var(--tag-bg); backdrop-filter:blur(8px); border:1px solid var(--line-str);
}
.tag.live{ color:var(--brass); border-color:rgba(200,162,101,.5); }

/* ── stat row ────────────────────────────────────────── */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px;
  /* 190 not 160: the longest value ("Завършена") is 140px at the small-screen
     32px size and the cell keeps 22px of padding each side, so a 160px track
     overflowed it at ~700px wide */
  background:var(--line); border-block:1px solid var(--line); }
.stat{ background:var(--night); padding:clamp(22px,2.6vw,38px); }
.stat .v{ font-family:var(--display); font-size:clamp(32px,3.6vw,54px); line-height:1; }
.stat .k{ font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--haze); margin-top:12px; }

/* ── feature grid ────────────────────────────────────── */
.feat{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:var(--line); }
.feat > div{ background:var(--night); padding:clamp(24px,3vw,44px); }
.feat h4{ font-size:22px; margin-bottom:10px; }
.feat p{ color:var(--haze); font-size:14.5px; margin:0; }
.feat .ix{ font-size:11px; letter-spacing:.2em; color:var(--brass); margin-bottom:18px; display:block; }

/* ═══ INTERACTIVE BUILDING SCHEME ═══════════════════════ */
.scheme{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(20px,3vw,52px); align-items:start; }
.scheme-stage{ border:1px solid var(--line); background:var(--night-2); padding:clamp(16px,2.2vw,30px); }
.legend{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-bottom:22px; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--haze); }
.legend i{ width:10px; height:10px; display:inline-block; margin-right:8px; vertical-align:-1px; }
.sw-free{ background:var(--free) } .sw-reserved{ background:var(--reserved) } .sw-sold{ background:var(--sold) }

.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.chip{
  padding:8px 15px; border:1px solid var(--line); font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--haze);
  transition:.3s var(--ease);
}
.chip:hover{ color:var(--star); border-color:var(--line-str); }
.chip.on{ background:var(--brass); border-color:var(--brass); color:var(--night); }

.floors{ display:flex; flex-direction:column-reverse; gap:6px; }
.floor{ display:grid; grid-template-columns:52px 1fr; align-items:stretch; gap:12px; }
.floor-n{ display:flex; align-items:center; justify-content:flex-end;
  font-family:var(--display); font-size:24px; color:var(--star); opacity:.55; }
.floor-units{ display:flex; gap:6px; flex-wrap:wrap; }
.unit{
  --c:var(--free);
  position:relative; flex:1 1 104px; min-width:96px; max-width:168px;
  padding:11px 10px; text-align:left;
  border:1px solid var(--line);
  background:var(--cell-bg);
  transition:.32s var(--ease); overflow:hidden;
}
.unit::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c); }
.unit .u-code{ font-size:13px; letter-spacing:.06em; display:block; white-space:nowrap; }
.unit .u-area{ font-size:11px; color:var(--haze); margin-top:3px; display:block; white-space:nowrap; }
.unit[data-status=reserved]{ --c:var(--reserved) }
.unit[data-status=sold]{ --c:var(--sold) }
.unit:hover{ border-color:var(--c); background:var(--cell-hover); transform:translateY(-2px); }
.unit.on{ border-color:var(--brass); background:var(--cell-on); }
.unit.dim{ opacity:.2; pointer-events:none; }
.unit[data-status=sold]{ opacity:.55; filter:grayscale(1); pointer-events:none; cursor:default; }
.unit[data-status=sold] .u-code{ color:var(--haze); }

.detail{ border:1px solid var(--line); background:var(--night-2); position:sticky; top:96px; }
.detail-empty{ padding:clamp(26px,3vw,44px); color:var(--haze); font-size:14.5px; }
.detail-plan{ background:#fff; padding:14px; }
.detail-plan img{ width:100%; }
.detail-body{ padding:clamp(20px,2.4vw,32px); }
.detail-body h3{ font-size:34px; margin-bottom:4px; }
.spec{ display:grid; grid-template-columns:1fr auto; gap:9px 16px; margin:22px 0;
  font-size:13.5px; border-top:1px solid var(--line); padding-top:18px; }
.spec dt{ color:var(--haze); }
.spec dd{ margin:0; text-align:right; }
.price{ font-family:var(--display); font-size:38px; color:var(--brass); line-height:1; }
.badge{ display:inline-block; padding:5px 12px; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; border:1px solid; }
.badge.free{ color:var(--free); border-color:rgba(123,196,155,.45) }
.badge.reserved{ color:var(--reserved); border-color:rgba(224,177,92,.45) }
.badge.sold{ color:var(--sold); border-color:rgba(106,100,128,.5) }

/* ═══ CINEMATIC SCROLL SEQUENCE (Pirin) ════════════════ */
.cine{ position:relative; }
.cine-sticky{ position:sticky; top:0; height:100svh; overflow:hidden; }
.cine-frame{
  position:absolute; inset:0; opacity:0;
  transition:opacity 1.1s var(--ease);
  will-change:opacity;
}
.cine-frame.on{ opacity:1; }
.cine-frame img{ width:100%; height:100%; object-fit:cover; transform:scale(1.08);
  transition:transform 7s linear; }
.cine-frame.on img{ transform:scale(1); }
.cine-sticky::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(7,3,26,.58) 0%, rgba(7,3,26,.12) 40%, rgba(7,3,26,.74) 78%, rgba(7,3,26,.95) 100%),
    linear-gradient(98deg, rgba(7,3,26,.78) 0%, rgba(7,3,26,.34) 46%, rgba(7,3,26,0) 76%);
}
.cine-cap{
  position:absolute; z-index:3; left:var(--pad); right:var(--pad);
  bottom:clamp(56px,9vw,120px); pointer-events:none;
}
.cine-cap .slot{ opacity:0; transform:translateY(20px);
  transition:opacity .8s var(--ease), transform .8s var(--ease); position:absolute; bottom:0; }
.cine-cap .slot.on{ opacity:1; transform:none; position:relative; }
.cine-bar{
  position:absolute; z-index:3; left:var(--pad); bottom:clamp(28px,4vw,54px);
  display:flex; gap:7px; align-items:center;
}
.cine-bar i{ width:34px; height:2px; background:rgba(244,239,230,.22); display:block; transition:.5s var(--ease); }
.cine-bar i.on{ background:var(--brass); width:56px; }
.cine-spacer{ height:100svh; }

/* ── gallery ─────────────────────────────────────────── */
.gal{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2px; }
.gal a{ position:relative; overflow:hidden; aspect-ratio:4/3; display:block; }
.gal img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.gal a:hover img{ transform:scale(1.06); }
.gal a.tall{ grid-row:span 2; aspect-ratio:auto; }

/* gallery tabs — same pills as the scheme's building/floor switcher
   (.imap-tab), sitting between the section head and the full-bleed grid */
.gal-tabs{ margin-bottom:clamp(18px,2.4vw,30px); }

/* ── lightbox ────────────────────────────────────────── */
.lb{ position:fixed; inset:0; z-index:200; background:rgba(4,2,14,.96);
  display:none; align-items:center; justify-content:center; padding:5vmin;
  backdrop-filter:blur(6px); }
.lb.on{ display:flex; }
.lb img{ max-width:100%; max-height:90vh; object-fit:contain; }
.lb-x{ position:absolute; top:22px; right:26px; font-size:30px; line-height:1; color:var(--star); }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); font-size:34px;
  padding:14px 20px; color:var(--star); opacity:.65; transition:.3s; }
.lb-nav:hover{ opacity:1; }
.lb-prev{ left:8px } .lb-next{ right:8px }

/* ── form ────────────────────────────────────────────── */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:9px; }
.field.full{ grid-column:1/-1; }
label{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--haze); }
input,textarea,select{
  font:inherit; font-size:15px; color:var(--star); background:transparent;
  border:0; border-bottom:1px solid var(--line-str); padding:11px 2px;
  transition:border-color .35s;
}
input:focus,textarea:focus,select:focus{ outline:0; border-bottom-color:var(--brass); }
textarea{ resize:vertical; min-height:96px; }
select option{ background:var(--night-2); color:var(--star); }
.form-note{ font-size:12.5px; color:var(--haze); }

/* ── footer ──────────────────────────────────────────── */
.ftr{ border-top:1px solid var(--line); padding-block:clamp(48px,6vw,86px) 34px; }
.ftr-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(24px,3vw,52px); }
.ftr h5{ font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brass); margin:0 0 18px; font-weight:500; font-family:var(--body); }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.ftr a{ color:var(--haze); font-size:14px; transition:color .3s; }
.ftr a:hover{ color:var(--star); }
.ftr-btm{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-top:clamp(36px,4vw,64px); padding-top:26px; border-top:1px solid var(--line);
  font-size:12px; color:var(--haze); }

/* ── responsive ──────────────────────────────────────── */
@media (max-width:1080px){
  .scheme{ grid-template-columns:1fr; }
  .detail{ position:static; }
  .ftr-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:820px){
  .nav{
    position:fixed; inset:0; background:var(--night); flex-direction:column;
    justify-content:center; gap:26px; transform:translateX(100%);
    transition:transform .55s var(--ease); z-index:55;
  }
  body.menu-open .nav{ transform:none; }
  .nav a{ font-size:19px; letter-spacing:.14em; }
  .burger{ display:block; z-index:60; position:relative; }
  .pcard, .pcard:nth-child(even){ grid-template-columns:1fr; direction:ltr; }
  .pcard-img{ aspect-ratio:16/10; }
  .form{ grid-template-columns:1fr; }
  .ftr-grid{ grid-template-columns:1fr; }
  .floor{ grid-template-columns:38px 1fr; gap:8px; }
  .unit{ flex:1 1 84px; min-width:84px; max-width:none; padding:10px 9px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; }
  .cine-frame{ transition:none; } .cine-frame img{ transition:none; transform:none; }
}

/* ═══════════════════════════════════════════════════════
   LARAVEL BUILD — slider, layout helpers, form states
   ═══════════════════════════════════════════════════════ */

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brass); color:var(--night); padding:12px 20px; font-size:13px;
}
.skip:focus{ left:12px; top:12px; }

/* ── hero slider ─────────────────────────────────────── */
.hero-slider{ position:relative; }
.slides{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.4s var(--ease); }
.slide.on{ opacity:1; }
.slide img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.12); transition:transform 9s linear;
}
.slide.on img{ transform:scale(1); }
/* Scrim. Same idea as `.hero-open` below and tuned the same way — by
   compositing every slide against candidate gradients and sampling the
   contrast ratio at the real glyph positions (headlines, sub-copy, eyebrow,
   CTA, slider counter and the floating header nav), then taking the lightest
   gradient that still clears the standard the home hero sets. The weight
   pools where the copy sits instead of washing the whole frame, so the
   renders read; the shallow 12% floor through the middle is what the
   brighter project renders (Camellia's snow, Omnia's facade) need and the
   home frames do not. Measured worst cases, headlines / small text:

     Residence 5.20 / 3.94   Omnia    5.18 / 4.84
     Camellia  5.57 / 4.43   Hills    8.25 / 3.98

   against 4.15 / 3.67 on the home hero. Ink over the frame 0.666 -> 0.544. */
.slides::after{
  content:""; position:absolute; inset:0; z-index:2;
  transition:opacity 1s var(--ease);
  background:
    radial-gradient(145% 40% at 0% 62%,
      rgba(7,3,26,.74) 0%, rgba(7,3,26,.66) 45%, rgba(7,3,26,.25) 86%, rgba(7,3,26,0) 100%),
    linear-gradient(180deg,
      rgba(7,3,26,.72) 0%, rgba(7,3,26,.12) 22%, rgba(7,3,26,.12) 66%, rgba(7,3,26,.65) 100%);
}

/* `.hero-open` — the home hero. Its scrim was tuned by measuring composited
   contrast at the real glyph positions across all four slides rather than by
   eye: the shared wash above darkens the whole frame to carry copy that only
   occupies the lower-left, so here the weight pools where the copy actually
   sits (a wide, shallow ellipse anchored left at 58% height) and the rest of
   the render is left alone. Worst-case legibility comes out slightly ahead of
   the shared scrim (headlines 3.68 -> 4.15, small text 3.56 -> 3.67) for about
   30% less ink over the frame. The thin top band belongs to the floating
   header, which has no background of its own over a hero.

   It stays a separate variant rather than the shared default: the home
   renders are dark enough to carry copy with no mid floor at all, which the
   project renders are not (dropping the floor there costs Camellia's small
   text 4.43 -> 2.56). Any other page wanting it needs the same measurement.

   Hero text stays on the night palette in both themes (section A below), so
   this has to hold in light mode too. */
.hero-open .slides::after{
  background:
    radial-gradient(145% 40% at 0% 58%,
      rgba(7,3,26,.70) 0%, rgba(7,3,26,.62) 45%, rgba(7,3,26,.24) 86%, rgba(7,3,26,0) 100%),
    linear-gradient(180deg,
      rgba(7,3,26,.72) 0%, rgba(7,3,26,0) 22%, rgba(7,3,26,0) 66%, rgba(7,3,26,.55) 100%);
}

/* Narrow: the copy runs the full width and sits lower, so the pool widens
   and drops with it and the vertical layer takes more of the load. */
@media (max-width:820px){
  .hero-open .slides::after{
    background:
      radial-gradient(160% 42% at 30% 68%,
        rgba(7,3,26,.62) 0%, rgba(7,3,26,.53) 50%, rgba(7,3,26,.17) 88%, rgba(7,3,26,0) 100%),
      linear-gradient(180deg,
        rgba(7,3,26,.62) 0%, rgba(7,3,26,0) 14%, rgba(7,3,26,0) 52%, rgba(7,3,26,.45) 100%);
  }
}

/* headline: each line rises out of a mask */
.hero-heads, .hero-subs{ position:relative; }
.hero-head, .hero-sub{
  position:absolute; inset:auto auto 0 0; width:100%;
  opacity:0; pointer-events:none; transition:opacity .5s var(--ease);
}
.hero-head.on, .hero-sub.on{ position:relative; opacity:1; pointer-events:auto; }
.hero-head{ margin:18px 0 22px; }
.hero-head .line{ display:block; overflow:hidden; }
.hero-head .line > span{
  display:block; transform:translateY(102%);
  transition:transform 1.05s cubic-bezier(.16,.84,.28,1);
}
.hero-head.on .line > span{ transform:translateY(0); }
.hero-head.on .line:nth-child(2) > span{ transition-delay:.11s }
.hero-head.on .line:nth-child(3) > span{ transition-delay:.22s }
.hero-sub{ transition:opacity .6s var(--ease) .25s, transform .6s var(--ease) .25s; transform:translateY(14px); }
.hero-sub.on{ transform:none; }

.hero-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-top:38px;
}
.slider-ui{ display:flex; align-items:center; gap:16px; }
.s-arrow{
  width:44px; height:44px; border:1px solid var(--line-str); font-size:22px; line-height:1;
  display:grid; place-items:center; transition:.35s var(--ease);
}
.s-arrow:hover{ border-color:var(--brass); color:var(--brass); }
.s-dots{ display:flex; gap:8px; }
.s-dot{ width:34px; height:14px; display:grid; place-items:center; }
.s-dot i{ display:block; width:100%; height:2px; background:rgba(244,239,230,.24); transition:.4s var(--ease); }
.s-dot.on i{ background:var(--brass); }
.s-count{ font-size:12px; letter-spacing:.18em; color:var(--haze); }
.s-count b{ color:var(--star); font-weight:400; }

.scroll-hint{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  width:1px; height:52px; background:linear-gradient(180deg,transparent,var(--line-str)); overflow:hidden;
}
.scroll-hint span{
  position:absolute; inset:0; background:var(--brass);
  animation:drop 2.4s var(--ease) infinite;
}
@keyframes drop{ 0%{ transform:translateY(-100%) } 60%,100%{ transform:translateY(100%) } }

/* ── layout helpers ──────────────────────────────────── */
.split{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(28px,5vw,88px); }
.band{ background:var(--night-2); border-block:1px solid var(--line); }
.cta-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(24px,4vw,70px); align-items:center; }
.media-frame{ overflow:hidden; border:1px solid var(--line); }
.media-frame img{ width:100%; transition:transform 1.4s var(--ease); }
.media-frame:hover img{ transform:scale(1.03); }

/* ── cine progress ───────────────────────────────────── */
.cine-bar i{ position:relative; overflow:hidden; }
.cine-bar i b{
  position:absolute; inset:0; background:var(--brass);
  transform:scaleX(0); transform-origin:left; display:block;
}
.cine-bar i.on b{ transform:scaleX(1); transition:transform .6s var(--ease); }

/* ── forms ───────────────────────────────────────────── */
.contact-grid{ display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(28px,5vw,80px); }
.notice{
  padding:16px 20px; border:1px solid rgba(123,196,155,.4);
  background:rgba(123,196,155,.08); color:#B9E3CC; font-size:14.5px;
}
.err{ color:#E5836F; font-size:12px; letter-spacing:.02em; }
.consent{
  display:flex; gap:11px; align-items:flex-start;
  text-transform:none; letter-spacing:0; font-size:13px; color:var(--haze);
}
.consent input{ width:16px; height:16px; flex:none; margin-top:3px; accent-color:var(--brass); border-bottom:0; }
.aside-h{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--brass);
  margin:0 0 18px; font-weight:500; font-family:var(--body); }
.aside-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }

@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
  .hero-foot{ flex-direction:column; align-items:flex-start; gap:26px; }
  .s-count{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .slide img{ transform:none; transition:none; }
  .hero-head .line > span{ transform:none; }
  .scroll-hint{ display:none; }
}


/* ═══════════════════════════════════════════════════════
   HERO PEEK
   Click the hero and everything laid over the render fades
   out — copy, controls, scrim — so the visualisation can be
   read on its own. Click again, or Esc, to bring it back.
   Buyers want to look at the building; the words are ours.
   ═══════════════════════════════════════════════════════ */

.hero-slider{ cursor:zoom-in; }
.hero-slider.peek{ cursor:zoom-out; }

.hero-slider .hero-inner,
.hero-slider .scroll-hint{
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.hero-slider.peek .hero-inner{
  opacity:0; transform:translateY(14px); pointer-events:none;
}
.hero-slider.peek .scroll-hint{ opacity:0; }

/* the scrim is what really hides the render — lift most of it */
.hero-slider.peek .slides::after{ opacity:.14; }

/* and let the frame settle to its true scale while peeking */
.hero-slider.peek .slide.on img{ transform:scale(1.02); transition:transform 1.4s var(--ease); }

/* affordance — a quiet line that says the image is clickable */
.peek-hint{
  position:absolute; z-index:4; right:var(--pad); bottom:clamp(28px,4vw,54px);
  display:flex; align-items:center; gap:10px;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--haze); pointer-events:none;
  transition:opacity .5s var(--ease), color .3s;
}
.peek-hint .box{
  width:15px; height:15px; border:1px solid currentColor; position:relative; flex:none;
}
.peek-hint .box::before,
.peek-hint .box::after{
  content:""; position:absolute; background:currentColor; transition:.35s var(--ease);
}
.peek-hint .box::before{ left:3px; right:3px; top:7px; height:1px; }
.peek-hint .box::after{ top:3px; bottom:3px; left:7px; width:1px; }
.hero-slider:hover .peek-hint{ color:var(--brass); }

/* while peeking the hint is the only thing left, and it becomes "close" */
.hero-slider.peek .peek-hint{ color:var(--star); opacity:.85; }
.hero-slider.peek .peek-hint .box::after{ transform:scaleY(0); }
.hero-slider.peek .peek-hint .box::before{ transform:rotate(45deg); }
.hero-slider.peek .peek-hint .box{ transform:rotate(45deg); }

@media (max-width:820px){
  .peek-hint{ display:none; }        /* tap still works; the label would crowd */
}
@media (prefers-reduced-motion:reduce){
  .hero-slider.peek .slide.on img{ transform:none; }
}

/* ═══════════════════════════════════════════════════════
   LIGHT MODE
   The brand is a night sky, so dark stays the default —
   light is an explicit choice, not a system guess. Only
   TOKENS are redefined here; components never learn which
   theme they are in. Hero scrims deliberately stay dark:
   they sit over photographs, where white text is right in
   either theme.
   ════════════════════════════════════════════════
═══════ */
:root[data-theme="light"]{
  --pill:     rgba(7,3,26,.06);
  --night:    #FBFAF7;
  --night-2:  #FFFFFF;
  --night-3:  #F2EFE9;
  --star:     #14102E;
  --brass:    #7F5E30;
  --brass-dk: #66491F;
  --haze:     #635E78;
  --line:     rgba(20,16,46,.12);
  --line-str: rgba(20,16,46,.26);

  --free:     #2F7D53;
  --reserved: #A9761B;
  --sold:     #8A8598;

  --lede:       #3A3552;
  --nav-ink:    #46415E;
  --hdr-bg:     rgba(251,250,247,.86);
  --tag-bg:     rgba(251,250,247,.82);
  --cell-bg:    #FFFFFF;
  --cell-hover: #F6F2EA;
  --cell-on:    rgba(150,112,58,.12);
  --field-bg:   #FFFFFF;
  --shadow:     0 14px 34px rgba(20,16,46,.10);
}
:root[data-theme="light"] .btn.solid{ color:#FFF; }
:root[data-theme="light"] .btn:hover{ color:#FFF; }
:root[data-theme="light"] .hp-chip{ background:#FFF; }
:root[data-theme="light"] .detail-plan{ border-bottom:1px solid var(--line); }
:root[data-theme="light"] .cine-frame img,
:root[data-theme="light"] .slide img{ filter:none; }

/* ── theme toggle ─────────────────────────────────────── */
.theme-t{
  width:38px; height:38px; display:grid; place-items:center; flex:none;
  border:1px solid var(--line-str); border-radius:50%;
  color:var(--star); transition:.3s var(--ease);
}
.theme-t:hover{ border-color:var(--brass); color:var(--brass); }
.theme-t svg{ width:17px; height:17px; }
.theme-t .sun{ display:none; }
:root[data-theme="light"] .theme-t .sun{ display:block; }
:root[data-theme="light"] .theme-t .moon{ display:none; }

/* ═══════════════════════════════════════════════════════
   PROPERTY FINDER — rebuilt
   The old version showed a code and an area and hid the
   price behind a click. Price is the first thing a buyer
   filters on, so it belongs on the card.
   ═══════════════════════════════════════════════════════ */

.finder{ border:1px solid var(--line); background:var(--night-2); }

/* ── toolbar ── */
.fnd-bar{ padding:clamp(16px,2vw,24px); border-bottom:1px solid var(--line); }
.fnd-top{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }

.fnd-search{
  flex:1 1 220px; display:flex; align-items:center; gap:10px;
  padding:11px 15px; border:1px solid var(--line-str); background:var(--field-bg);
  border-radius:999px; transition:border-color .3s;
}
.fnd-search:focus-within{ border-color:var(--brass); }
.fnd-search svg{ width:15px; height:15px; flex:none; color:var(--haze); }
.fnd-search input{
  border:0; background:none; padding:0; flex:1; min-width:0;
  font-size:14px; color:var(--star);
}
.fnd-search input::placeholder{ color:var(--haze); }
.fnd-clear{ color:var(--haze); font-size:17px; line-height:1; padding:0 2px; display:none; }
.fnd-search.has .fnd-clear{ display:block; }
.fnd-clear:hover{ color:var(--star); }

.fnd-views{ display:flex; border:1px solid var(--line-str); border-radius:999px; overflow:hidden; }
.fnd-views button{
  padding:10px 18px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--haze); transition:.25s var(--ease);
}
.fnd-views button.on{ background:var(--brass); color:var(--night); }

.fnd-sort{
  padding:11px 15px; border:1px solid var(--line-str); background:var(--field-bg);
  border-radius:999px; font-size:12.5px; color:var(--star); cursor:pointer;
}

/* ── filter groups ── */
.fnd-groups{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px 22px; }
.fnd-g > span{
  display:block; font-size:10px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--haze); margin-bottom:9px;
}
.fnd-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.fchip{
  padding:7px 13px; font-size:12px; border:1px solid var(--line);
  border-radius:999px; color:var(--haze); background:var(--field-bg);
  transition:.25s var(--ease); white-space:nowrap;
}
.fchip:hover{ border-color:var(--line-str); color:var(--star); }
.fchip.on{ background:var(--brass); border-color:var(--brass); color:var(--night); }

/* range: two numbers, because a dual slider is worse on a phone */
.fnd-range{ display:flex; align-items:center; gap:8px; }
.fnd-range input{
  width:100%; min-width:0; padding:9px 11px; font-size:13px;
  color:var(--star); background:var(--field-bg);
  border:1px solid var(--line); border-radius:8px;
  font-variant-numeric:tabular-nums;
}
.fnd-range input:focus{ outline:0; border-color:var(--brass); }
.fnd-range span{ color:var(--haze); font-size:12px; flex:none; }

.fnd-foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
}
.fnd-count{ font-size:13px; color:var(--haze); }
.fnd-count b{ color:var(--star); font-weight:500; font-variant-numeric:tabular-nums; }
.fnd-reset{
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--haze); border-bottom:1px solid transparent; transition:.25s;
}
.fnd-reset:hover{ color:var(--brass); border-bottom-color:var(--brass); }

.fnd-legend{ display:flex; gap:16px; flex-wrap:wrap; font-size:11.5px; color:var(--haze); }
.fnd-legend i{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:7px; }

/* ── the building ── */
.fnd-body{ padding:clamp(16px,2vw,24px); }
.bld{ display:flex; flex-direction:column-reverse; gap:8px; }
.bld-floor{ display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:center; }
.bld-n{
  font-family:var(--display); font-size:22px; color:var(--star); opacity:.4;
  text-align:right; font-variant-numeric:tabular-nums;
}
/* one shared column count, so floors line up like a real elevation */
.bld-units{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }

.uc{
  --c:var(--free);
  position:relative; padding:12px 12px 11px; text-align:left; overflow:hidden;
  border:1px solid var(--line); background:var(--cell-bg);
  transition:.28s var(--ease);
}
.uc::before{ content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--c); }
.uc[data-status=reserved]{ --c:var(--reserved) }
.uc[data-status=sold]{ --c:var(--sold) }
.uc:hover{ border-color:var(--c); background:var(--cell-hover); transform:translateY(-2px); }
.uc.on{ border-color:var(--brass); background:var(--cell-on); }
.uc.dim{ opacity:.16; pointer-events:none; }
.uc-code{ display:block; font-size:13.5px; letter-spacing:.04em; color:var(--star); }
.uc-meta{ display:block; font-size:11px; color:var(--haze); margin-top:2px;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.uc-price{ display:block; font-size:12.5px; color:var(--brass); margin-top:6px;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.uc[data-status=sold]{ opacity:.55; filter:grayscale(1); pointer-events:none; cursor:default; }
.uc[data-status=sold]:hover{ transform:none; border-color:var(--line); background:var(--cell-bg); }
.uc[data-status=sold] .uc-code, .uc[data-status=sold] .uc-price{ color:var(--haze); }
.uc.dim{ opacity:.16; }
.uc-kind{
  position:absolute; top:8px; right:8px; font-size:8.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--haze); opacity:.8;
}

/* ── list view ── */
.fnd-list{ width:100%; border-collapse:collapse; font-size:13.5px; }
.fnd-list th{
  text-align:left; padding:0 12px 11px 0; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--haze); font-weight:700;
  border-bottom:1px solid var(--line-str); white-space:nowrap;
}
.fnd-list td{ padding:13px 12px 13px 0; border-bottom:1px solid var(--line); vertical-align:middle; }
.fnd-list tr{ cursor:pointer; transition:background .2s; }
.fnd-list tbody tr:hover{ background:var(--cell-hover); }
.fnd-list tr.on{ background:var(--cell-on); }
.fnd-list tr.dim{ display:none; }
.fnd-list .n{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.fnd-list .price{ font-family:var(--body); font-size:13.5px; color:var(--brass); }
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:8px; vertical-align:0; }

.fnd-empty{ padding:44px 20px; text-align:center; color:var(--haze); font-size:14px; }

/* ── summary, shown until something is picked ── */
.sum{ padding:clamp(20px,2.4vw,30px); }
.sum h4{ font-family:var(--display); font-size:24px; margin-bottom:6px; }
.sum p{ color:var(--haze); font-size:13.5px; margin-bottom:22px; }
.sum-rows{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.sum-rows > div{
  background:var(--night-2); padding:13px 15px;
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
}
.sum-rows dt{ font-size:12.5px; color:var(--haze); }
.sum-rows dd{ margin:0; font-size:14px; color:var(--star); font-variant-numeric:tabular-nums; }
.sum-rows dd.big{ font-family:var(--display); font-size:20px; color:var(--brass); }

@media (max-width:1080px){
  .bld-units{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:820px){
  .bld-units{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bld-floor{ grid-template-columns:30px 1fr; gap:10px; }
  .fnd-top{ flex-direction:column; align-items:stretch; }
  .fnd-views, .fnd-sort{ width:100%; }
  .fnd-views button{ flex:1; }
  .fnd-list thead{ display:none; }
  .fnd-list tr{ display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:12px 0;
    border-bottom:1px solid var(--line); }
  .fnd-list td{ padding:0; border:0; }
  .fnd-list td:nth-child(n+3){ font-size:12px; color:var(--haze); }
}

/* ── floors split by entrance ─────────────────────────── */
.bld-wings{ display:flex; gap:18px; align-items:stretch; }
.bld-wing{ flex:1 1 0; min-width:0; display:flex; align-items:center; gap:10px; }
.bld-wing + .bld-wing{ border-left:1px dashed var(--line); padding-left:18px; }
.bld-wing-n{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--haze); opacity:.7; flex:none; width:12px;
}
.bld-wing .bld-units{ flex:1; grid-template-columns:repeat(4,minmax(0,1fr)); }
/* "on request" is not a price — it must not wear the price colour */
.uc-price.is-ask{ color:var(--haze); font-style:italic; }

@media (max-width:1080px){
  .bld-wings{ flex-direction:column; gap:10px; }
  .bld-wing + .bld-wing{ border-left:0; padding-left:0; border-top:1px dashed var(--line); padding-top:10px; }
  .bld-wing .bld-units{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:820px){
  .bld-wing .bld-units{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ── logo swaps with the theme ────────────────────────── */
.logo-l{ display:none; }
:root[data-theme="light"] .logo-d{ display:none; }
:root[data-theme="light"] .logo-l{ display:block; }

/* ── cards must never clip a price ────────────────────── */
.bld-wing .bld-units{ grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); }
.uc-code{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.uc-meta, .uc-price{ overflow:visible; }
.uc-price{ font-size:12px; letter-spacing:-.01em; }
@media (max-width:1080px){
  .bld-wing .bld-units{ grid-template-columns:repeat(auto-fill,minmax(126px,1fr)); }
}
@media (max-width:820px){
  .bld-wing .bld-units{ grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); }
}

/* ── phone: the finder toolbar ────────────────────────── */
.fnd-toggle{ display:none; }

@media (max-width:820px){
  /* flex-basis is a HEIGHT once the row becomes a column — without this the
     search field inherits a 220px basis and renders as an ellipse. */
  .fnd-search{ flex:none; }

  .fnd-toggle{
    display:flex; align-items:center; justify-content:center; gap:9px;
    width:100%; padding:11px 15px; border:1px solid var(--line-str);
    border-radius:999px; background:var(--field-bg); color:var(--star);
    font-size:12.5px; letter-spacing:.04em;
  }
  .fnd-toggle svg{ width:15px; height:15px; }
  .fnd-toggle.has{ border-color:var(--brass); color:var(--brass); }
  .fnd-toggle b{
    min-width:18px; height:18px; padding:0 5px; border-radius:999px;
    background:var(--brass); color:var(--night);
    font-size:11px; font-weight:700; display:grid; place-items:center;
  }

  .fnd-groups{ display:none; }
  .fnd-bar.filters-open .fnd-groups{ display:grid; margin-top:16px; }
  .fnd-bar.filters-open .fnd-toggle{ border-color:var(--brass); }

  .fnd-foot{ margin-top:14px; }
  /* the auto-scroll lands the card under the fixed header otherwise */
  .detail{ scroll-margin-top:88px; }
}

/* the badge sets display:grid, which outranks the UA's [hidden] rule */
.fnd-toggle b[hidden]{ display:none; }
@media (max-width:820px){
  /* Филтри sits directly above the groups it opens */
  .fnd-toggle{ order:9; }
  .fnd-sort{ order:8; }
}

/* .34em tracking is a desktop measure — on a phone it wraps a two-word
   eyebrow mid-phrase. Tighten it rather than let it break. */
@media (max-width:520px){
  .eyebrow{ font-size:10px; letter-spacing:.2em; }
}

/* ── 2 Sep: type fixes ────────────────────────────────────
   Cormorant Garamond ships Bulgarian-form Cyrillic (д→q, т→m,
   б→6) and Chrome switches it on for lang="bg". Nobody chose
   that; it reads as broken. Keep the standard forms everywhere. */
html{ font-feature-settings:"locl" 0; }

/* The line-reveal clips each line with overflow:hidden, and at
   line-height 1.04 Cormorant's descenders (р, у, д) and the top
   of Д get cut. Give the clip box room and pull it back. */
.hero-head .line{ padding:.08em 0 .18em; margin:-.08em 0 -.18em; }

/* …and slide the hidden line far enough that it cannot peek
   through that padding before the reveal starts. */
.hero-head .line > span{ transform:translateY(calc(102% + .2em)); }

/* ═══════════════════════════════════════════════════════
   2 Sep — audit fixes
   ═══════════════════════════════════════════════════════ */

/* A. Light theme on photo-backed surfaces. The hero, the cinematic
   sequence and the lightbox keep their night renders and dark scrims
   in every theme, so everything drawn on top of them stays on the
   night palette. Scoped token re-declaration; nothing else changes. */
:root[data-theme="light"] .hero,
:root[data-theme="light"] .cine,
:root[data-theme="light"] .lb{
  --star:     #F4EFE6;
  --lede:     #CFC8D8;
  --haze:     #8F8AAB;
  --brass:    #C8A265;
  --brass-dk: #A8834A;
  --line:     rgba(244,239,230,.13);
  --line-str: rgba(244,239,230,.28);
  color:var(--star);
}
/* The header is transparent until you scroll (.solid). While it floats
   over a hero it takes the night chrome and the light logo; once solid
   its own light background is back and the normal rules apply. Pages
   without a hero (Контакти) are untouched. */
:root[data-theme="light"] body:has(.hero):not(.menu-open) .hdr:not(.solid):not(.mega-open):not(.dd-open){
  --star:     #F4EFE6;
  --nav-ink:  #C9C2D6;
  --brass:    #C8A265;
  --line-str: rgba(244,239,230,.28);
  color:var(--star);
}
:root[data-theme="light"] body:has(.hero):not(.menu-open) .hdr:not(.solid):not(.mega-open):not(.dd-open) .logo-d{ display:block; }
:root[data-theme="light"] body:has(.hero):not(.menu-open) .hdr:not(.solid):not(.mega-open):not(.dd-open) .logo-l{ display:none; }

/* B. `hidden` must win over author display rules — the building grid,
   its floors and the list table are toggled with the attribute. */
[hidden]{ display:none !important; }

/* D. Form feedback on the light ground (was mint/salmon picked for night). */
:root[data-theme="light"] .notice{ color:#2F7D53; border-color:rgba(47,125,83,.45); background:rgba(47,125,83,.06); }
:root[data-theme="light"] .err{ color:#B5432B; }

/* F. iOS zooms the viewport on focus below 16px. */
@media (max-width:820px){ input,textarea,select{ font-size:16px; } }

/* G. Tap targets: the burger keeps its 30×18 drawing inside a 44×44 hit
   area; the theme toggle grows to 42. */
.burger{ padding:13px 7px; margin:-13px -7px; box-sizing:content-box; }
.theme-t{ width:42px; height:42px; }

/* H. In-page anchors (#proekti, #shema, #tehnologii…) land under the
   fixed header without this. */
html{ scroll-padding-top:90px; }

/* I. Grids that leave holes. Six feature cards in an auto-fit grid go
   4+2 at desktop and expose the hairline backdrop as a grey block;
   nine (or six) gallery tiles go 5+4 / 5+1. Fix the column count. */
@media (min-width:1000px){ .feat{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:640px) and (max-width:999px){ .feat{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .gal{ grid-template-columns:repeat(3,1fr); } }

/* J. Finder. */
/* Cormorant's old-style figures turn floor 1 into a small-cap I and
   A07 into "Ao7" — identifiers a buyer quotes, so lining figures. */
.bld-n, .detail-body h3, .sum h4, .price, .sum-rows dd.big, .stat .v{ font-variant-numeric:lining-nums tabular-nums; }
/* A sticky aside taller than the viewport pins its top and hides the
   price and the enquiry button; let it scroll inside itself instead. */
@media (min-width:1081px){ .detail{ max-height:calc(100vh - 112px); overflow:auto; } }
/* Phone list rows: price keeps its colour, floor/entrance get labels. */
@media (max-width:820px){
  .fnd-list td.price{ color:var(--brass); }
  .fnd-list td:nth-child(2)::before{ content:"Вход "; color:var(--haze); }
  .fnd-list td:nth-child(3)::before{ content:"Етаж "; color:var(--haze); }
}
/* Phone elevation: the floor number was vertically centred on the
   dashed А/Б divider and floors ran together. Top-align the number and
   rule off each floor. */
@media (max-width:1080px){
  .bld{ gap:22px; }
  .bld-floor{ align-items:flex-start; }
  .bld-floor + .bld-floor{ border-top:1px solid var(--line); padding-top:16px; }
}

/* C. The phone menu is position:fixed but lives inside the header, and
   the solid header's backdrop-filter makes the header its containing
   block — so once you have scrolled, the open menu collapses into a
   66px strip. Paint the blur on a pseudo-element instead; the header
   itself carries no filter, so fixed children use the viewport again. */
.hdr.solid{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
.hdr::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--hdr-bg); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line); opacity:0; transition:opacity .5s var(--ease);
}
.hdr.solid::before{ opacity:1; }
.hdr.solid{ border-bottom:0; }
/* Logo and theme toggle stay above the open menu; the page behind it
   stops scrolling. */
.brand, .theme-t{ position:relative; z-index:60; }
body.menu-open{ overflow:hidden; }

/* Verification pass — three corrections to the block above. */
/* B. Four feature cards (home) go 4-wide, not 3+1. */
@media (min-width:1000px){ .feat:has(> :nth-child(4):last-child){ grid-template-columns:repeat(4,1fr); } }
/* C. The burger's lines are absolutely positioned, so padding moved
   them; give the hit area to a pseudo-element instead. */
.burger{ padding:0; margin:0; box-sizing:border-box; }
.burger::after{ content:""; position:absolute; inset:-13px -7px; }
/* D. The elevation is column-reverse, so "every floor but the DOM-last"
   is the set that needs a rule above it. */
@media (max-width:1080px){
  .bld-floor + .bld-floor{ border-top:0; padding-top:0; }
  .bld-floor:not(:last-child){ border-top:1px solid var(--line); padding-top:16px; }
}



/* ═══════════════════════════════════════════════════════
   K. Header, 2026-09 — the murite.bg structure: a sticky glass bar,
   soft pill hover on the links, a filled pill CTA, a language
   dropdown, a shadow once scrolled — plus a full-width mega panel
   under every item except Home. Same tokens, same type. On the phone
   the mega panels fold into accordions inside the sheet.
   ═══════════════════════════════════════════════════════ */
.hdr{ display:block; padding:0; }
.hdr.solid{ padding:0; }
.hdr-in{
  display:flex; align-items:center; justify-content:space-between; gap:22px;
  padding:18px var(--pad); transition:padding .5s var(--ease);
}
.hdr.solid .hdr-in{ padding-block:11px; }
.hdr.solid::before, .hdr.mega-open::before, .hdr.dd-open::before{ opacity:1; }
.hdr.solid::before{ box-shadow:0 10px 40px -22px rgba(0,0,0,.45); }
.hdr.mega-open::before{ border-bottom-color:transparent; }

.nav{ gap:4px; }
.nav .nav-link{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  color:var(--nav-ink); padding:9px 13px; border-radius:999px;
  transition:color .3s, background .3s;
}
.nav .nav-link::after{ display:none; }
.nav .nav-link:hover, .nav-item.open > .nav-link, .nav .nav-link.on, .nav-item.on > .nav-link{ color:var(--star); background:var(--pill); }
.nav .nav-link.on, .nav-item.on > .nav-link{ color:var(--brass); }
.nav .caret{ width:13px; height:13px; opacity:.55; transition:transform .35s var(--ease), opacity .3s; }
.nav-item.open > .nav-link .caret{ transform:rotate(180deg); opacity:1; }
.nav-tg{ display:none; }
.nav-item{ position:static; }

/* the panel */
.mega{
  position:absolute; left:0; right:0; top:100%; z-index:-2;
  background:var(--hdr-bg); backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .35s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
}
.nav-item.open > .mega{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.mega-in{
  max-width:var(--rail); margin:0 auto; padding:34px var(--pad) 38px;
  display:grid; grid-template-columns:1.15fr .85fr 1fr; gap:clamp(28px,4vw,64px); align-items:start;
}
.mega-title{ font-family:var(--display); font-size:clamp(26px,2.4vw,36px); line-height:1.08; margin:12px 0 10px; color:var(--star); }
.mega-sum{ font-size:14px; line-height:1.6; max-width:44ch; margin:0; }
.mega-facts{ display:flex; gap:26px; flex-wrap:wrap; margin-top:20px; }
.mega-facts span{ display:grid; gap:2px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--haze); }
.mega-facts b{ font-family:var(--display); font-weight:300; font-size:26px; line-height:1; color:var(--brass); font-variant-numeric:lining-nums tabular-nums; }
.mega-mail{ display:inline-block; margin-top:18px; font-size:16px; color:var(--brass); }
.mega-links{ list-style:none; margin:0; padding:0; }
.mega-links .hd{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--brass); padding-bottom:10px; }
.nav .mega-links a{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 0; border-bottom:1px solid var(--line); border-radius:0; background:none;
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--nav-ink);
  transition:color .3s, padding-left .35s var(--ease);
}
.nav .mega-links a::after{ display:none; }
.nav .mega-links a .ln{ width:22px; height:1px; background:var(--brass); flex:none; transition:width .4s var(--ease); }
.nav .mega-links a:hover{ color:var(--star); background:none; }
.nav .mega-links a:hover .ln{ width:38px; }
.nav .mega-links .all a{ color:var(--brass); border-bottom:0; padding-top:16px; }
.mega-img{ display:block; position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--night-2); }
.mega-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s var(--ease); }
.mega-img:hover img{ transform:scale(1.04); }
.mega-img .tag{ position:absolute; left:14px; top:14px; }
.nav .mega-img::after{ display:none; }

/* tools: language, theme, cta */
.hdr-tools{ display:flex; align-items:center; gap:10px; position:relative; z-index:60; }
.lang-dd{ position:relative; }
.lang-btn{
  display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px;
  border:1px solid var(--line-str); font-size:11.5px; letter-spacing:.18em; color:var(--nav-ink);
  transition:color .3s, background .3s, border-color .3s;
}
.lang-btn svg{ width:12px; height:12px; opacity:.6; transition:transform .35s var(--ease); }
.lang-btn:hover, .lang-dd.open .lang-btn{ color:var(--star); background:var(--pill); border-color:var(--brass); }
.lang-dd.open .lang-btn svg{ transform:rotate(180deg); }
.lang-menu{
  position:absolute; right:0; top:calc(100% + 10px); min-width:190px; padding:8px;
  background:var(--hdr-bg); backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid var(--line); box-shadow:0 30px 60px -30px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .3s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
}
.lang-dd.open .lang-menu{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.lang-menu a{ display:flex; align-items:center; gap:12px; padding:10px 12px; font-size:13px; color:var(--nav-ink); border-radius:999px; transition:background .3s, color .3s; }
.lang-menu a b{ font-weight:500; font-size:11px; letter-spacing:.18em; color:var(--brass); width:22px; }
.lang-menu a:hover{ background:var(--pill); color:var(--star); }
.lang-menu a.on{ color:var(--star); }
.nav-cta{
  display:inline-flex; align-items:center; padding:10px 20px; border-radius:999px;
  background:var(--brass); color:var(--night); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  transition:background .3s, transform .3s var(--ease);
}
.nav-cta:hover{ background:var(--brass-dk); transform:translateY(-1px); }
:root[data-theme="light"] .nav-cta{ color:#FFF; }
.nav-foot{ display:none; }

/* the ASTRIS ESTATES lockup is wider than the old mark: the enquiry button only fits from ~1340px (BG nav) */
@media (max-width:1340px){ .hdr-cta{ display:none; } .nav{ gap:0; } .nav .nav-link{ padding-inline:10px; letter-spacing:.1em; } }

/* phone: the sheet + accordions */
@media (max-width:820px){
  .nav{ justify-content:flex-start; align-items:stretch; gap:0; padding:104px var(--pad) 40px; overflow:auto; -webkit-overflow-scrolling:touch; }
  .nav > .nav-link, .nav-item{ display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); flex-wrap:wrap; }
  .nav .nav-link{ font-size:17px; letter-spacing:.12em; padding:18px 0; border-radius:0; background:none !important; flex:1; }
  .nav .nav-link .caret{ display:none; }
  .nav-tg{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; color:var(--haze); }
  .nav-tg svg{ width:18px; height:18px; transition:transform .35s var(--ease); }
  .nav-item.open .nav-tg svg{ transform:rotate(180deg); }
  .nav-item.open .nav-tg{ color:var(--brass); }
  .mega{ position:static; display:none; width:100%; opacity:1; visibility:visible; transform:none; z-index:auto;
    background:none; backdrop-filter:none; -webkit-backdrop-filter:none; border:0; box-shadow:none; transition:none; }
  .nav-item.open > .mega{ display:block; }
  .mega-in{ display:block; padding:0 0 14px; }
  .mega-intro, .mega-img{ display:none; }
  .nav .mega-links a{ padding:11px 0 11px 14px; font-size:13px; border-bottom:0; }
  .mega-links .hd{ padding:8px 0 4px 14px; }
  .nav-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:28px; }
  .nav-langs{ display:flex; gap:4px; }
  .nav-langs a{ padding:8px 12px; border-radius:999px; border:1px solid var(--line-str); font-size:11.5px; letter-spacing:.18em; color:var(--nav-ink); }
  .nav-langs a.on{ color:var(--night); background:var(--brass); border-color:var(--brass); }
  .lang-dd, .hdr-cta{ display:none; }
}

/* L. English: the two phone-list labels that live in CSS. */
html[lang="en"] .fnd-list td:nth-child(2)::before{ content:"Entr. "; }
html[lang="en"] .fnd-list td:nth-child(3)::before{ content:"Floor "; }

/* M. Document galleries (Omnia floor plans and price lists): show the
   whole sheet, never a crop. */
.gal.docs img{ object-fit:contain; background:var(--night-2); padding:6px; box-sizing:border-box; }
/* N. Phone sheet: the CTA pill stays on one line. */
@media (max-width:820px){ .nav-foot .nav-cta{ white-space:nowrap; padding:12px 18px; } }

/* ── O. September 2026 — MA-4 additions ─────────────────────────────── */
/* header phone: text on desktop, hidden on the phone (the sheet has its own) */
.hdr-phone{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; letter-spacing:.02em; color:var(--star); white-space:nowrap; padding:8px 4px; font-variant-numeric:tabular-nums; }
.hdr-phone svg{ width:15px; height:15px; color:var(--brass); flex:none; }
.hdr-phone:hover{ color:var(--brass); }
@media (max-width:1180px){ .hdr-phone span{ display:none } }
@media (max-width:900px){ .hdr-phone{ display:none } }
.nav-phone{ display:block; font-size:16px; color:var(--star); padding:10px 0; font-variant-numeric:tabular-nums; }
/* CTA band contact line */
.cta-contacts{ margin-top:16px; display:flex; flex-wrap:wrap; gap:10px; font-size:15px; font-variant-numeric:tabular-nums; }
.cta-contacts a{ color:var(--star); border-bottom:1px solid var(--line-str); }
.cta-contacts a:hover{ color:var(--brass); border-bottom-color:var(--brass); }
.cta-contacts span{ color:var(--haze); }
/* feature grids that are not 3 or 6 wide */
.feat.feat-5{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
@media (min-width:1100px){ .feat.feat-5{ grid-template-columns:repeat(5,1fr); } }
.feat.feat-2{ grid-template-columns:1fr; gap:18px; }
@media (min-width:640px){ .feat.feat-2{ grid-template-columns:1fr 1fr; } }
/* partners */
.brands{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; }
.brand-tile{ border:1px solid var(--line); background:var(--night-2); padding:18px 18px 20px; display:flex; flex-direction:column; gap:10px; min-height:112px; justify-content:space-between; }
.brand-tile strong{ font-family:var(--serif, inherit); font-weight:400; font-size:clamp(17px,1.5vw,21px); letter-spacing:.01em; color:var(--star); line-height:1.15; }
/* partner logos sit on a white plate in both themes, so brand colours read true */
.brand-logo{ display:flex; align-items:center; justify-content:center; background:#FFF; height:76px; padding:12px 10px; }
.brand-logo img{ display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
/* maps */
.maps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.map{ margin:0; border:1px solid var(--line); background:var(--night-2); }
.map iframe{ display:block; width:100%; aspect-ratio:4/3; border:0; filter:saturate(.85); }
.map figcaption{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:2px; font-size:13.5px; }
.map figcaption strong{ font-weight:500; color:var(--star); }
/* custom select (the project field) */
.sel{ position:relative; }
.sel-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; font:inherit; font-size:15.5px; color:var(--star); background:transparent; border:0; border-bottom:1px solid var(--line-str); padding:12px 0; cursor:pointer; transition:border-color .2s; }
.sel-btn.is-empty{ color:var(--haze); }
.sel-btn:focus-visible, .sel[data-open] .sel-btn{ outline:0; border-bottom-color:var(--brass); }
.sel-btn svg{ width:16px; height:16px; color:var(--haze); flex:none; transition:transform .2s; }
.sel[data-open] .sel-btn svg{ transform:rotate(180deg); }
.sel-menu{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:30; margin:0; padding:6px; list-style:none; background:var(--night-2); border:1px solid var(--line-str); box-shadow:0 18px 40px rgba(0,0,0,.28); max-height:280px; overflow:auto; }
.sel-menu li{ padding:10px 12px; cursor:pointer; font-size:14.5px; color:var(--star); }
.sel-menu li:hover, .sel-menu li.is-active{ background:var(--cell-hover); color:var(--brass); }
.sel-menu li[aria-selected=true]{ color:var(--brass); }
/* legal pages */
.legal h3{ font-size:19px; font-weight:500; margin:28px 0 8px; color:var(--star); }
.legal p{ color:var(--haze); font-size:15.5px; line-height:1.65; max-width:70ch; }
.ftr-legal a{ color:inherit; }
.ftr-legal a:hover{ color:var(--brass); }
/* scheme: plots and size bands need a label wider than a floor number;
   garages and cellars are many and small, so they pack tighter */
.bld-floor--wide{ grid-template-columns:auto 1fr; }
.bld-floor.is-lit .bld-n{ color:var(--brass); box-shadow:0 0 0 2px var(--brass); transition:box-shadow .3s, color .3s; }
.bld-n--wide{ width:auto; min-width:44px; padding:0 12px; font-size:12px; letter-spacing:.06em; white-space:nowrap; }
.bld--dense{ margin-top:8px; }
.bld-units--dense{ grid-template-columns:repeat(6,minmax(0,1fr)); }
.bld-units--dense .uc-kind{ display:none; }
.bld-units--dense .uc{ padding:8px 8px 9px; }
.bld-units--dense .uc-meta{ display:none; }
@media (max-width:900px){ .bld-units--dense{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
[data-block][hidden]{ display:none !important; }
/* image maps: the photos and plans with a hotspot per unit */
.imap{ position:relative; }
.imap-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.imap-tab{ font:inherit; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; padding:8px 14px; border:1px solid var(--line-str); border-radius:999px; background:transparent; color:var(--haze); cursor:pointer; transition:all .18s; }
.imap-tab:hover{ color:var(--star); border-color:var(--star); }
.imap-tab.on{ background:var(--brass); color:var(--night); border-color:var(--brass); }
.imap-stage{ position:relative; border:1px solid var(--line); overflow:hidden; background:var(--night-2); }
.imap-stage--plan{ background:#fff; }
.imap-stage img{ width:100%; display:block; }
.imap-stage svg{ position:absolute; inset:0; width:100%; height:100%; }
/* Nothing is drawn over the render at rest, and on hover nothing but the unit
   under the cursor: it fills green when it is free, amber when reserved, red
   when it is gone — the read esteti.bg gives, and not one outline more. */
.imap-stage polygon{ fill:transparent; stroke:transparent; stroke-width:0; cursor:pointer;
  transition:fill .15s, stroke .15s, opacity .18s; }
.imap-stage polygon[data-status=sold]{ cursor:not-allowed; }
.imap-stage polygon:hover, .imap-stage polygon.on{ fill:color-mix(in srgb, var(--free) 62%, transparent);
  stroke:rgba(255,255,255,.8); stroke-width:1.2; }
.imap-stage polygon[data-status=reserved]:hover, .imap-stage polygon[data-status=reserved].on{ fill:color-mix(in srgb, var(--reserved) 66%, transparent); }
.imap-stage polygon[data-status=sold]:hover{ fill:rgba(217,83,79,.62); }
.imap-stage polygon.dim{ opacity:0; pointer-events:none; }

/* ── floor bands: a building mapped by floor, not by unit (Camellia) ── */
.imap-floor polygon{ fill:transparent; stroke:transparent; stroke-width:0; cursor:pointer;
  transition:fill .15s, stroke .15s; }
.imap-floor.on polygon{ fill:color-mix(in srgb, var(--free) 52%, transparent);
  stroke:rgba(255,255,255,.8); stroke-width:1.2; }
.imap-floor.on[data-free="0"] polygon{ fill:rgba(217,83,79,.52); }
.imap-floor.dim{ opacity:0; pointer-events:none; }
.imap-back{ border-style:dashed; opacity:.85; }
.imap-back:hover{ opacity:1; }

/* Compact enough to read the unit without hiding the unit. The old panel was
   wider than the building and landed straight on top of what you hovered. */
/* Token-driven, because the site has a light theme in which --star is a DARK
   navy — hardcoding a dark panel here made the unit code invisible. */
.imap-tip{ position:absolute; z-index:6; pointer-events:none; background:var(--night-2);
  border:1px solid var(--line-str); color:var(--star); font-size:12px; line-height:1.4;
  padding:9px 12px 10px; box-shadow:0 12px 30px rgba(0,0,0,.28);
  border-radius:3px; max-width:190px; }
.imap-tip b{ display:block; font-weight:600; font-size:14px; letter-spacing:.02em;
  color:var(--star); margin-bottom:3px; }
.imap-tip .t-meta{ display:block; color:var(--haze); font-size:11.5px; line-height:1.35; }
.imap-tip .t-price{ display:block; color:var(--brass); font-size:13px; font-weight:500; margin-top:3px; }
.imap-tip .badge{ display:inline-block; margin-top:7px; font-size:9px; padding:4px 9px; letter-spacing:.16em; }
.imap[hidden]{ display:none !important; }
/* No hover on a phone, so the free units keep a thin outline there — otherwise
   there is nothing on the render to tap. */
@media (hover:none){ .imap-stage polygon[data-status=free], .imap-floor polygon{ stroke:rgba(255,255,255,.55); stroke-width:1.2; } }

/* ── floor peek: the hovered / pinned floor's plan, in the detail column ── */
.fpk{ display:grid; gap:12px; padding:clamp(14px,1.8vw,20px); }
.fpk-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.fpk-head b{ font-family:var(--display); font-size:24px; font-weight:500; color:var(--star); }
.fpk-meta{ font-size:12.5px; color:var(--haze); }
.fpk-hint{ font-size:12.5px; color:var(--haze); margin:0; }
/* A pinned floor keeps a quiet fill so you can see which plan is open; the
   hover fill (.on) still sits on top of it. */
.imap-floor.pin polygon{ fill:color-mix(in srgb, var(--free) 30%, transparent); stroke:rgba(255,255,255,.5); stroke-width:1; }
.imap-floor.pin[data-free="0"] polygon{ fill:rgba(217,83,79,.3); }
.detail-back{ font:inherit; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; background:transparent;
  border:0; padding:0; margin-bottom:14px; color:var(--haze); cursor:pointer; display:block; transition:color .2s; }
.detail-back:hover{ color:var(--star); }
[data-summary][hidden], [data-peek][hidden], [data-unit-box][hidden]{ display:none !important; }

/* sold units in the list view: grey and inert */
[data-list] tbody tr[data-status=sold]{ opacity:.55; filter:grayscale(1); pointer-events:none; cursor:default; }

/* ---- MA-25: банер за бисквитки ---- */
.consent-bar{
  position:fixed; left:clamp(12px,3vw,32px); bottom:clamp(12px,3vw,32px); z-index:70;
  width:min(440px, calc(100vw - 24px)); padding:22px 22px 20px;
  background:var(--night-2); color:var(--star); border:1px solid var(--line-str); box-shadow:var(--shadow);
  font-size:14px; line-height:1.6;
}
.consent-bar[hidden]{ display:none; }
.consent-bar p{ margin:0 0 16px; color:var(--lede); text-align:left; hyphens:none; }
.consent-bar a{ color:var(--brass); text-decoration:underline; text-underline-offset:3px; }
.consent-actions{ display:flex; gap:10px; }
.consent-actions .btn{ flex:1 1 0; justify-content:center; background:transparent; color:inherit; font:inherit; font-size:12px; cursor:pointer; padding:14px 16px; }
.consent-actions .btn.solid{ background:var(--brass); color:var(--night); }
:root[data-theme="light"] .consent-actions .btn.solid{ color:#FFF; }
.ftr-legal button{ background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; text-decoration:inherit; }