/* Концепция А2 (24.10.2026) — началната страница по брандбука на „Липите“ (home_a2.tpl).
   Източник: 13_Lipite_Web/08_redesign/2026-10-22_проучване_нов_сайт/концепция_А2/style.css + частите на сайта отдолу. */
/* Концепция А, втори опит (24.10.2026) — план в ПЛАН.md. Брандбук „Липите“: Montserrat; #094fa3 / #febc31 / #8dc73f / #efefef.
   Едно запомнящо се нещо: мозайката от снимки и четвъртинки. Всичко друго — тихо. */
:root {
	--blue: #094fa3; --blue-d: #063873;
	--sun: #febc31; --sun-d: #fbaa01;
	--leaf: #8dc73f; --leaf-t: #4b6b1f;
	--grey: #efefef; --grey-2: #dcdcdc;
	--ink: #1f2a3a; --mute: #55606f; --white: #fff;
	--f1: #ece4d6; --f2: #d9c9b0; --f3: #a9b59a; --f4: #8fa3b4; --f5: #4f6478;
	--gut: clamp(18px, 4.5vw, 64px); --max: var(--a2-max, 1320px);
	--t89: clamp(52px, 7.2vw, 89px); --t67: clamp(40px, 5.2vw, 67px); --t50: clamp(32px, 3.8vw, 50px); --t38: clamp(28px, 2.9vw, 38px); --t28: clamp(22px, 2.1vw, 28px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 16px/1.6 Montserrat, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; color: var(--blue); font-weight: 800; letter-spacing: -.02em; line-height: 1.04; }
p { margin: 0; }
/* 05.11.2026: --max е ширината на съдържанието (като горната лента), отстъпът е отделно — преди беше вътре и съдържанието оставаше 1192 px */
.wrap { max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.dark :focus-visible { outline-color: var(--sun); }

.btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border: 0; background: var(--sun); color: var(--blue-d); font: 800 16px/1 Montserrat, sans-serif; text-decoration: none; cursor: pointer; transition: background .2s; }
.btn:hover { background: var(--sun-d); }
.btn.line { background: transparent; box-shadow: inset 0 0 0 2px var(--blue); color: var(--blue); }
.btn.line:hover { background: var(--blue); color: #fff; }
.tl { font-weight: 700; color: var(--blue); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--sun); }
.tl:hover { text-decoration-color: var(--blue); }
.vis { position: absolute; left: 0; bottom: 0; z-index: 2; background: rgba(255,255,255,.92); color: var(--blue-d); font-size: 12px; font-weight: 600; padding: 4px 9px; }

/* хедър */
.top { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--grey-2); }
.top .wrap { display: flex; align-items: center; gap: 36px; height: 80px; }
.top .logo img { height: 50px; width: auto; }
.top nav { display: flex; gap: 30px; margin-left: auto; font-weight: 600; font-size: 15px; }
.top nav a { text-decoration: none; color: var(--ink); }
.top nav a:hover, .top nav a[aria-current] { color: var(--blue); }
.top .btn { min-height: 46px; padding: 0 20px; font-size: 15px; }
.burger { display: none; width: 46px; height: 46px; border: 0; background: var(--grey); cursor: pointer; }
.burger i { display: block; width: 20px; height: 2px; background: var(--blue); margin: 4px auto; }

/* ── 1. мозайката ── */
.hero { padding: clamp(28px, 4vw, 64px) 0 clamp(40px, 5vw, 80px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero h1 { font-size: var(--t89); line-height: .98; }
.hero p { margin: 24px 0 32px; font-size: 21px; line-height: 1.5; color: var(--mute); max-width: 24em; }
.hero .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mosaic > * { position: relative; aspect-ratio: 1; overflow: hidden; margin: 0; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.mosaic .big { grid-column: span 2; grid-row: span 2; }
.m-q1 { border-radius: 100% 0 0 0; } .m-q2 { border-radius: 0 100% 0 0; } .m-q3 { border-radius: 0 0 100% 0; } .m-q4 { border-radius: 0 0 0 100%; } .m-ci { border-radius: 50%; }
.c-b { background: var(--blue); } .c-s { background: var(--sun); } .c-l { background: var(--leaf); } .c-g { background: var(--grey); }
.mosaic .big .vis { left: auto; right: 0; top: 0; bottom: auto; }
@media (prefers-reduced-motion: no-preference) {
	.mosaic > * { animation: tile .7s cubic-bezier(.2, .7, .2, 1) both; }
	.mosaic > :nth-child(2) { animation-delay: .08s; } .mosaic > :nth-child(3) { animation-delay: .16s; } .mosaic > :nth-child(4) { animation-delay: .24s; }
	.mosaic > :nth-child(5) { animation-delay: .32s; } .mosaic > :nth-child(6) { animation-delay: .4s; } .mosaic > :nth-child(7) { animation-delay: .48s; }
	.mosaic > :nth-child(8) { animation-delay: .56s; } .mosaic > :nth-child(9) { animation-delay: .64s; }
	@keyframes tile { from { opacity: 0; transform: scale(.86); } }
}

/* ── 2. търсачката-изречение ── */
.find { background: var(--grey); padding: 34px 0; }
.find form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; font-size: var(--t28); font-weight: 800; color: var(--blue); }
.find select { appearance: none; -webkit-appearance: none; min-height: 52px; padding: 0 44px 0 16px; border: 0; border-bottom: 3px solid var(--sun); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23094fa3' stroke-width='2.4'/%3E%3C/svg%3E") right 12px center / 20px no-repeat; font: 800 var(--t28) Montserrat, sans-serif; color: var(--blue); cursor: pointer; }
.find .btn { margin-left: auto; }
.find .all { width: 100%; font-size: 15px; font-weight: 400; color: var(--mute); }

/* ── 3. етаж по етаж ── */
.sec { padding: clamp(64px, 8vw, 120px) 0; }
.floors-g { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.sec h2 { font-size: var(--t50); max-width: 14em; }
.sec .lead { margin-top: 18px; font-size: 18px; color: var(--mute); max-width: 34em; }
.stack { list-style: none; margin: 36px 0 0; padding: 0; }
.stack a { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; min-height: 64px; text-decoration: none; border-bottom: 2px solid #fff; transition: padding-left .2s; }
.stack a:hover, .stack a:focus-visible { padding-left: 12px; }
.stack b { font-size: var(--t28); color: #031f42; text-align: center; }
.stack span { font-size: 15px; font-weight: 600; color: #031f42; }
.stack em { font-style: normal; font-weight: 800; color: #031f42; padding-right: 22px; }
.stack .f5 b, .stack .f5 span, .stack .f5 em { color: #fff; }
.stack .fg { background: var(--grey); }
.floors-pic { margin: 0; position: relative; }
.floors-pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0 160px 0 0; }
/* 29.10.2026: етажът на картинката — в цвета си, повдигнат, при посочване на реда (a2-home.js) */
/* 03.11.2026 (Петьо: „виж ефекта върху сградата“ — плътният цвят скриваше балконите, а 5 етаж изглеждаше отрязан):
   цветът се умножава върху снимката — етажът се оцветява, а архитектурата остава видима през него. */
.floors-pic .fl-ov { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; border-radius: 0 160px 0 0; overflow: hidden; pointer-events: none; mix-blend-mode: multiply; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.floors-pic.go:hover .fl-ov, .floors-pic.go:focus-within .fl-ov { transform: scale(1.04); } /* заедно с увеличението на снимката (.go:hover > img) */
.floors-pic .fl-ov path { pointer-events: all; cursor: pointer; opacity: 0; stroke: var(--blue-d); stroke-width: 4; stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1); }
.floors-pic .fl-ov path.on { opacity: .8; stroke-width: 6; transform: translateY(-1.2%); }
.floors-pic img { transition: filter .3s ease; }
/* 03.11.2026: площадката пред асансьора на посочения етаж (a2-home.js) — горе вляво, над сградата; на допир не се показва */
.floors-pic .fl-lobby { position: absolute; left: 14px; top: 14px; z-index: 5; width: min(46%, 270px); margin: 0; background: #fff; box-shadow: 0 16px 34px -14px rgba(3, 31, 66, .55); opacity: 0; transform: translateY(-8px) scale(.96); transform-origin: 0 0; transition: opacity .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
.floors-pic .fl-lobby.on { opacity: 1; transform: none; }
.floors-pic .fl-lobby img { display: block; width: 100%; height: auto; aspect-ratio: auto; border-radius: 0; filter: none; }
.floors-pic .fl-lobby figcaption { padding: 7px 10px; font-size: 12px; font-weight: 700; color: var(--blue-d); }
@media (hover: none) { .floors-pic .fl-lobby { display: none; } }
@media (prefers-reduced-motion: reduce) { .floors-pic .fl-lobby { transition: opacity .2s; transform: none; } }
.floors-pic.fl-lit > img { filter: saturate(.75) brightness(.92); }
.stack a.is-lit { padding-left: 12px; } /* не .hl — това е класът на първия екран (03.11.2026: редът наследяваше отстъпите му и бутеше снимката) */
@media (prefers-reduced-motion: reduce) { .floors-pic .fl-ov path { transition: opacity .2s; } .floors-pic .fl-ov path.on { transform: none; } }
.note { margin-top: 14px; font-size: 13px; color: var(--mute); }

/* ── 4. Фаза 1 ── */
.life { background: var(--grey); }
.life-g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.life-pic { margin: 0; position: relative; }
.life-pic img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0 0 0 180px; }
.life-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 10px; }
.life-row figure { margin: 0; position: relative; aspect-ratio: 1; overflow: hidden; }
.life-row img { width: 100%; height: 100%; object-fit: cover; }
.quote { margin: 30px 0 26px; padding-left: 22px; border-left: 4px solid var(--leaf); }
.quote p { font-size: 21px; font-weight: 600; line-height: 1.45; color: var(--blue-d); }
.quote small { display: block; margin-top: 8px; font-size: 14px; color: var(--mute); }

/* 26.10.2026 (Петьо): 360° разходките във „Фаза 1 вече е дом“ — същите сцени като на живия сайт; Panoee се зарежда едва след клик (lipite.js, т. 6) */
.tour3 { margin: 30px 0 26px; }
.tour3 h3 { margin: 0 0 6px; font-size: 21px; font-weight: 700; color: var(--blue); }
.tour3 > p { margin: 0 0 14px; color: var(--mute); }
.tour3-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tour3-c { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: center; padding: 8px 14px 8px 8px; background: var(--white); color: var(--ink); text-decoration: none; border-left: 4px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; }
.tour3-c:hover, .tour3-c:focus-visible { border-left-color: var(--sun); box-shadow: 0 8px 22px rgba(6, 56, 115, .12); }
.tour3-c:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tour3-i { position: relative; display: block; overflow: hidden; }
.tour3-i img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.tour3-c:hover .tour3-i img, .tour3-c:focus-visible .tour3-i img { transform: scale(1.08); }
.tour3-i b { position: absolute; left: 0; bottom: 0; padding: 3px 8px; background: var(--sun); color: var(--blue-d); font-size: 13px; font-weight: 800; }
.tour3-t { display: grid; gap: 2px; min-width: 0; }
.tour3-t strong { font-size: 16px; color: var(--blue-d); }
.tour3-t small { font-size: 14px; color: var(--mute); }
@media (max-width: 480px) { .tour3-c { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .tour3-i img { transition: none; } }

/* 26.10.2026: прозорецът на 360° разходката (lipite.js, т. 6) — на А2 страниците lipite.css не се зарежда; същите размери като там, цветовете от брандбука */
.dlg { width: min(960px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-top: 4px solid var(--leaf); background: var(--white); color: var(--ink); }
.dlg::backdrop { background: rgba(6, 56, 115, .78); }
.dlg-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px clamp(16px, 3vw, 28px); border-bottom: 1px solid var(--grey-2); background: var(--white); }
.dlg-head .h3 { margin: 0; color: var(--blue); font-size: clamp(20px, 2vw, 26px); font-weight: 700; }
.dlg .xbtn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: var(--sun); color: var(--blue-d); font-size: 28px; line-height: 1; cursor: pointer; }
.dlg .xbtn:hover { background: var(--blue); color: var(--white); }
.dlg .xbtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.dlg--tour { width: min(1200px, calc(100vw - 32px)); height: min(800px, calc(100vh - 48px)); }
.dlg--tour[open] { display: flex; flex-direction: column; }
.dlg--tour iframe { flex: 1; width: 100%; border: 0; background: var(--blue-d); }
@media (max-width: 767px) { .dlg--tour { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; margin: 0; } }

/* 26.10.2026 (Петьо): промо видеото (js/a2-film.js). Бутоните — горе вдясно: долната третина на кадъра е за надписите във видеото */
.film-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: 28px; }
.film-head h2 { margin: 0; }
.film-head .lead { margin: 0; }
.film { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--blue-d); border-radius: 140px 0 0 0; }
.film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--blue-d); }
.film-big { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--sun); color: var(--blue-d); cursor: pointer; box-shadow: 0 10px 30px rgba(6, 56, 115, .35); transition: transform .2s ease; }
.film-big:hover { transform: scale(1.06); }
.film-big svg { width: 38px; height: 38px; fill: currentColor; margin-left: 5px; }
.film-big[hidden] { display: none; }
.film-bar { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; }
.film-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; background: rgba(6, 56, 115, .82); color: var(--white); font: 600 14px/1 inherit; font-family: inherit; cursor: pointer; }
.film-btn:hover { background: var(--blue); }
.film-btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.film-big:focus-visible, .film-btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.film .i-on, .film[data-sound="on"] .i-off, .film .i-play, .film[data-playing="0"] .i-pause { display: none; }
.film[data-sound="on"] .i-on, .film[data-playing="0"] .i-play { display: block; }
.film[data-native] .film-bar, .film[data-native] .film-big { display: none; }
.film-s .note { margin: 12px 0 0; font-size: 14px; color: var(--mute); }
@media (max-width: 900px) { .film-head { grid-template-columns: minmax(0, 1fr); gap: 10px; } .film { border-radius: 70px 0 0 0; } }
@media (max-width: 480px) { .film-bar { top: 10px; right: 10px; } .film-btn { padding: 0 11px; } .film-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .film-big { width: 68px; height: 68px; } }

/* ── 5. пеша ── */
.walk-g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.walk { list-style: none; margin: 30px 0 28px; padding: 0; }
.walk li { display: grid; grid-template-columns: 44px 104px 1fr; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--grey-2); font-size: 17px; }
.walk svg { width: 34px; height: 34px; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.walk svg .s { stroke: var(--sun-d); } .walk svg .l { stroke: var(--leaf-t); }
.walk b { font-size: 26px; color: var(--blue); white-space: nowrap; }
.walk small { font-size: 14px; font-weight: 600; color: var(--mute); }
.walk-pic { margin: 0; position: relative; }
.walk-pic img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 50% 50% 0 0 / 40% 40% 0 0; }

/* ── 6. среща ── */
.meet { background: var(--blue); color: #fff; }
.meet-g { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.meet h2 { color: #fff; }
.meet .lead { color: rgba(255,255,255,.88); }
.meet .acts { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin: 32px 0 24px; }
.meet .tel { font-size: var(--t28); font-weight: 800; color: #fff; text-decoration: none; }
.meet address { font-style: normal; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.88); }
.meet-pic { margin: 0; position: relative; }
.meet-pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0 160px 0 0; }
.facts { margin-top: 26px; font-size: 14px; color: rgba(255,255,255,.8); max-width: 38em; }
.facts a { color: #fff; }

.foot { padding: 30px 0; font-size: 14px; color: var(--mute); }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; }
.foot img { height: 42px; width: auto; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--ink); }

/* ── страница на апартамента ── */
.apt-top { padding: 26px 0 36px; }
.crumbs { font-size: 14px; color: var(--mute); }
.crumbs a { color: var(--blue); }
.apt-h { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 30px; margin-top: 14px; }
.apt-h h1 { font-size: var(--t67); white-space: nowrap; }
.apt-h p { margin-top: 10px; font-size: 18px; color: var(--mute); }
.apt-h p b { color: var(--leaf-t); }
.floorband { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; background: var(--f3); color: var(--blue-d); font-weight: 700; font-size: 15px; }
.floorband i { width: 36px; height: 36px; display: grid; place-items: center; background: #fff; font-style: normal; font-weight: 800; color: var(--blue-d); }
.apt { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; padding-bottom: 90px; }
.plan { display: grid; grid-template-columns: minmax(0, 1fr) 260px; background: #fff; border: 1px solid var(--grey-2); }
.plan .pl { position: relative; padding: 26px; }
.plan .pl img.pos { position: absolute; right: 16px; bottom: 16px; width: 112px; border: 1px solid var(--grey-2); background: #fff; padding: 5px; }
.rooms { padding: 24px 24px 24px 0; }
.rooms h2 { font-size: 17px; letter-spacing: 0; margin-bottom: 6px; color: var(--ink); }
.rooms ol { margin: 0; padding: 0; list-style: none; counter-reset: r; }
.rooms li { counter-increment: r; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--grey-2); font-size: 15px; }
.rooms li::before { content: counter(r); width: 26px; height: 26px; border-radius: 50%; background: var(--grey); display: grid; place-items: center; font-weight: 800; font-size: 12px; color: var(--blue); }
.rooms li b { color: var(--blue); }
.views { display: flex; gap: 22px; padding: 14px 26px; border-top: 1px solid var(--grey-2); font-size: 15px; flex-wrap: wrap; }
dl.kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 28px 0 0; border-top: 2px solid var(--blue); }
dl.kv div { padding: 16px 16px 16px 0; }
dl.kv dt { font-size: 14px; color: var(--mute); }
dl.kv dd { margin: 2px 0 0; font-size: var(--t28); font-weight: 800; color: var(--blue); line-height: 1.2; }
dl.kv dd small { display: block; font-size: 13px; font-weight: 400; color: var(--mute); }
/* 28.10.2026: изложение — роза + слънцето за всяка посока */
.kv-sun .sun { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; }
.kv-sun .sun small { margin: 0; }
.sun-rose { flex: none; width: 38px; height: 38px; }
.sun-rose path { fill: var(--grey); stroke: #fff; stroke-width: 1.5; }
.sun-rose path.on { fill: var(--sun); }
.sun-rose .ring { fill: none; stroke: var(--grey-2); stroke-width: 1; }
.sun-rose text { font: 700 15px Montserrat, sans-serif; fill: var(--mute); text-anchor: middle; }
.blk { margin-top: 64px; }
.blk h2 { font-size: var(--t38); margin-bottom: 18px; }
/* 28.10.2026: „Паркомясто и склад“ на страницата на апартамента */
.park-g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px; align-items: start; }
.park-pic { position: relative; display: block; background: #fff; border: 1px solid var(--grey-2); padding: 10px; }
.park-pic img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: contain; }
.park-pic .cap { position: absolute; left: 0; bottom: 0; padding: 5px 10px; background: #fff; color: var(--blue-d); font: 700 12px/1.2 Montserrat, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.park-t p { margin: 0 0 14px; }
.park-l { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 8px; }
.park-l li { position: relative; padding-left: 22px; }
.park-l li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; border-radius: 0 10px 0 0; background: var(--leaf); }
@media (max-width: 760px) { .park-g { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.yourfloor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--f3); }
.yourfloor figure { margin: 0; position: relative; }
.yourfloor img { width: 100%; height: 100%; object-fit: cover; }
.yourfloor .txt { padding: 30px; color: var(--blue-d); }
.yourfloor .txt p { font-size: 17px; line-height: 1.6; }
.chips { display: flex; gap: 6px; margin: 18px 0 12px; }
.chips span { width: 40px; height: 40px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: var(--blue-d); box-shadow: inset 0 0 0 1px rgba(6,56,115,.15); }
.chips span[aria-current] { box-shadow: inset 0 0 0 3px var(--blue-d); }
.pay { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pay div { background: var(--grey); padding: 22px; }
.pay b { display: block; font-size: var(--t50); color: var(--blue); line-height: 1; }
.pay span { display: block; margin-top: 8px; font-size: 15px; color: var(--ink); }
.small { margin-top: 14px; font-size: 15px; color: var(--mute); max-width: 46em; }
.aside { position: sticky; top: 100px; display: grid; gap: 14px; }
.offer { padding: 28px; background: var(--grey); }
.offer h2 { font-size: var(--t28); }
.offer .sub { margin: 6px 0 18px; font-size: 15px; color: var(--mute); }
.fld { margin-bottom: 12px; }
.fld label { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 600; color: var(--ink); }
.fld label small { font-weight: 400; color: var(--mute); }
.fld input { width: 100%; height: 50px; padding: 0 14px; border: 0; border-bottom: 2px solid var(--blue); background: #fff; font: 16px Montserrat, sans-serif; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chk { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 18px; font-size: 14px; color: var(--ink); }
.chk input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--blue); }
.offer .btn { width: 100%; justify-content: center; }
.reply { margin-top: 12px; font-size: 14px; color: var(--leaf-t); font-weight: 600; }
.call { padding: 24px 28px; background: var(--blue); color: #fff; }
.call p { font-size: 15px; color: rgba(255,255,255,.85); }
.call a.tel { display: block; margin: 6px 0 14px; font-size: 26px; font-weight: 800; color: #fff; text-decoration: none; }
.mbar { display: none; }

/* ── телефон ── */
@media (max-width: 1080px) {
	.top nav { display: none; }
	.top .btn { margin-left: auto; }
	.burger { display: block; }
	.apt { grid-template-columns: minmax(0, 1fr); }
	.aside { position: static; }
}
@media (max-width: 760px) {
	.top .wrap { height: 66px; gap: 10px; }
	.top .logo img { height: 40px; }
	.top .btn { padding: 0 14px; font-size: 14px; }
	.hero .wrap, .floors-g, .life-g, .walk-g, .meet-g { grid-template-columns: minmax(0, 1fr); }
	.hero p { font-size: 18px; margin: 18px 0 24px; }
	.mosaic { gap: 6px; order: -1; }
	.find form { font-size: 22px; }
	.find select { font-size: 22px; flex: 1 1 40%; }
	.find .btn { width: 100%; margin: 0; justify-content: center; }
	.floors-pic img, .life-pic img, .meet-pic img, .floors-pic .fl-ov { border-radius: 0 90px 0 0; }
	.life-pic img { border-radius: 0 0 0 90px; }
	.walk li { grid-template-columns: 36px 88px 1fr; font-size: 15px; }
	.walk b { font-size: 22px; }
	.plan { grid-template-columns: minmax(0, 1fr); }
	.rooms { padding: 0 20px 18px; }
	.plan .pl { padding: 16px; }
	.plan .pl img.pos { width: 80px; }
	dl.kv { grid-template-columns: 1fr 1fr; }
	.yourfloor { grid-template-columns: minmax(0, 1fr); }
	.pay { grid-template-columns: minmax(0, 1fr); }
	.two { grid-template-columns: minmax(0, 1fr); }
	.apt-h h1 { font-size: 42px; white-space: normal; }
	.mbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); /* 12.11.2026: minmax(0) — иначе при 320 px колоните не се свиваха (369 px) */ position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #fff; border-top: 1px solid var(--grey-2); }
	.mbar a { display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 4px; min-height: 60px; font-weight: 800; font-size: 14px; color: var(--blue); text-decoration: none; }
	.mbar a.y { background: var(--sun); color: var(--blue-d); }
	body { padding-bottom: 60px; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}

/* ── съдържателните раздели (24.10.2026, Петьо: „по-съдържателна и информативна първа страница“) ── */
.kompl-g { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.kompl-pic { margin: 0; position: relative; }
.kompl-pic img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.facts-dl { margin: 28px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.facts-dl div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--grey-2); }
.facts-dl dt { font-size: 15px; color: var(--mute); }
.facts-dl dd { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); }
.phases { background: var(--grey); }
.ph-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.ph { background: #fff; display: flex; flex-direction: column; }
.ph figure { margin: 0; position: relative; }
.ph figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ph figure .vis { left: auto; right: 0; top: 0; bottom: auto; }
.ph-b { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.ph h3 { font-size: var(--t38); }
.ph-s { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); }
.dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.dot-s { background: var(--sun); } .dot-l { background: var(--leaf); }
.ph dl { margin: 0; flex: 1; }
.ph dl div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--grey-2); }
.ph dt { font-size: 14px; color: var(--mute); }
.ph dd { margin: 0; font-size: 15px; font-weight: 600; }
.ph .btn { align-self: flex-start; }
.types-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.type { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); }
.type figure { margin: 0 0 10px; background: #fff; border: 1px solid var(--grey-2); aspect-ratio: 4 / 3; padding: 14px; overflow: hidden; transition: border-color .2s; }
.type figure img { display: block; width: 100%; height: 100%; object-fit: contain; }
.type:hover figure { border-color: var(--blue); }
.type h3 { font-size: var(--t28); }
.type p { font-size: 15px; color: var(--mute); }
.type .t-n { font-size: 19px; font-weight: 800; color: var(--blue); }
.type .t-n span { font-size: 14px; font-weight: 700; color: var(--leaf-t); margin-left: 8px; }
.type .t-e { font-size: 13px; }
.stages { background: var(--grey); }
.stages-g { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.tl-list { list-style: none; margin: 30px 0 18px; padding: 0 0 0 26px; border-left: 3px solid var(--blue); }
.tl-list li { position: relative; padding: 0 0 22px; display: grid; gap: 2px; }
.tl-list li::before { content: ""; position: absolute; left: -35px; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--blue); }
.tl-list li:last-child::before { background: var(--sun); box-shadow: none; }
.tl-list b { font-size: 21px; color: var(--blue); }
.tl-list span { font-size: 16px; }
.stages-pic { margin: 0; position: relative; }
.stages-pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0 0 160px 0; }
.faq-g { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq details { border-bottom: 1px solid var(--grey-2); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 64px; padding: 14px 0; font-size: 18px; font-weight: 700; color: var(--blue-d); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 36px; height: 36px; display: grid; place-items: center; background: var(--grey); font-size: 22px; font-weight: 600; color: var(--blue); }
.faq details[open] summary::after { content: "−"; background: var(--sun); }
.faq details p { padding: 0 0 20px; font-size: 16px; color: var(--ink); max-width: 46em; }
@media (max-width: 1080px) { .types-g { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 760px) {
	.kompl-g, .ph-g, .stages-g, .faq-g, .types-g { grid-template-columns: minmax(0, 1fr); }
	.kompl-pic img { border-radius: 0 0 0 120px; aspect-ratio: 4 / 3; }
	.facts-dl div, .ph dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.stages-pic img { border-radius: 0 0 90px 0; }
	.ph-b { padding: 22px 20px 24px; }
}

/* ── „Къде какво се продава“: комплекс → сграда → етаж (24.10.2026) ── */
.where-head { max-width: 760px; }
/* 28.10.2026 (Петьо): стъпките са път, не бутони — текущата: жълто кръгче; минатите: синьо кръгче и подчертан текст (връщат назад); бъдещите: сиви, не се натискат */
.where-steps { scroll-margin-top: 90px; list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; }
.where-steps li { display: flex; align-items: center; }
.where-steps li + li::before { content: ""; width: 44px; height: 2px; margin: 0 14px; background: var(--grey-2); }
.where-steps li.done + li::before { background: var(--blue); }
.where-steps button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--mute); font: 600 15px/1.2 Montserrat, sans-serif; cursor: default; }
.where-steps b { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--grey-2); background: #fff; color: var(--mute); font-size: 14px; font-weight: 800; }
.where-steps button[aria-current] { color: var(--blue-d); font-weight: 800; }
.where-steps button[aria-current] b { border-color: var(--sun); background: var(--sun); color: var(--blue-d); }
.where-steps button:not(:disabled):not([aria-current]) { color: var(--blue); cursor: pointer; }
.where-steps button:not(:disabled):not([aria-current]) b { border-color: var(--blue); background: var(--blue); color: #fff; }
.where-steps button:not(:disabled):not([aria-current]) span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.where-steps button:not(:disabled):not([aria-current]):hover span { text-decoration-thickness: 2px; }
.where-g { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 3vw, 44px); margin-top: 20px; align-items: start; }
.where-pic { margin: 0; position: relative; background: var(--grey); }
.where-pic svg { display: block; width: 100%; height: auto; }
.where-pic .vis { left: auto; right: 0; top: 0; bottom: auto; }
.pz { cursor: pointer; stroke: #fff; stroke-width: 4; transition: fill-opacity .2s; fill-opacity: .42; }
.pz.p4 { fill: var(--sun); } .pz.p3 { fill: var(--leaf); } .pz.p1 { fill: #fff; fill-opacity: .25; cursor: default; }
.pz.on { fill-opacity: .72; stroke-width: 8; }
/* 14.11.2026 (Петьо: „има бели черти … да не се виждат“): контурите на етажите върху сградата са невидими, докато етажът не е посочен;
   посоченият етаж (с мишка, клавиатура или от списъка) светва в жълто с контур. Етаж без свободни остава леко затъмнен. */
.fz { cursor: pointer; fill: #fff; fill-opacity: 0; stroke: #fff; stroke-opacity: 0; stroke-width: 3; transition: fill-opacity .2s, stroke-opacity .2s; }
.fz.none { fill: var(--ink); fill-opacity: .22; }
.fz.on { fill: var(--sun); fill-opacity: .6; stroke-opacity: 1; }
.flab circle { fill: var(--blue); stroke: #fff; stroke-width: 4; }
.flab text { fill: #fff; font-family: Montserrat, sans-serif; font-weight: 800; text-anchor: middle; pointer-events: none; }
.flab.none circle { fill: var(--mute); }
.flab.on circle { fill: var(--sun); } .flab.on text { fill: var(--blue-d); }
.where-pic image.plan { filter: grayscale(1) contrast(.85) brightness(1.08); }
/* 28.10.2026: „Подземно ниво“ в списъка на етажите — отделено с линия, с „P“ вместо цвят на етаж */
.pick li:has(> .gar) { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--grey-2); }
.pick .sw-g { display: grid; place-items: center; background: var(--blue-d); color: #fff; font: 800 12px/1 Montserrat, sans-serif; font-style: normal; }
/* 28.10.2026: повдигнатият апартамент — същите стойности като на страницата на етажа (lipite.css, .fl-*; в А2 не се зарежда); изрезът е в цвят */
.where-pic .fl-dim { fill: #fff; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.where-pic .fl-lift { pointer-events: none; opacity: 0; transform-box: fill-box; transform-origin: 50% 60%; transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; }
.where-pic .fl-edge { fill: none; stroke: var(--sun); stroke-width: 6; }
.where-pic svg.is-lift .fl-dim { opacity: .5; }
.where-pic svg.is-lift .fl-lift { opacity: 1; transform: translateY(-1.2%) scale(1.07); }
@media (prefers-reduced-motion: reduce) { .where-pic .fl-lift, .where-pic .fl-dim { transition: opacity .2s; } .where-pic svg.is-lift .fl-lift { transform: none; } }
/* 02.11.2026: една палитра за статусите с етажа (a2-skin.css .fplan-*); продаден (d) ≠ не се предлага (x); всеки апартамент казва статуса си при натискане */
.az { stroke: #fff; stroke-width: 3; transition: fill-opacity .2s; cursor: pointer; }
.az:focus { outline: none; }
.az.s { fill: rgb(141, 199, 63); fill-opacity: .6; }
.az.r { fill: rgb(254, 188, 49); fill-opacity: .75; }
.az.d { fill: rgb(80, 92, 108); fill-opacity: .5; }
.az.x { fill: #fff; fill-opacity: .62; stroke: rgba(80, 92, 108, .75); stroke-dasharray: 22 14; }
.az-tag rect { fill: #fff; stroke: var(--blue-d); }
.az-tag text { fill: var(--blue-d); font-family: Montserrat, sans-serif; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.az-tag { pointer-events: none; }
.az.s.on { fill: var(--blue); fill-opacity: .45; }
.where-panel h3 { font-size: var(--t28); outline: none; }
.where-panel > p { margin-top: 10px; font-size: 16px; color: var(--ink); }
.where-panel .hint { font-size: 14px; color: var(--mute); }
.pick { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.pick button, .pick .done { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; border: 0; background: var(--grey); color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: background .2s; }
.pick .done { background: #fff; box-shadow: inset 0 0 0 1px var(--grey-2); cursor: default; }
.pick button.on, .pick button:hover { background: var(--sun); }
.pick.fl button { min-height: 52px; }
.pick button.none em { color: var(--mute); font-weight: 600; }
.pick b { display: block; font-size: 17px; color: var(--blue-d); }
.pick small { display: block; font-size: 14px; color: var(--mute); }
.pick em { font-style: normal; font-weight: 800; font-size: 15px; color: var(--blue); white-space: nowrap; }
.sw { width: 22px; height: 22px; border-radius: 50%; background: var(--grey-2); }
.sw.p4 { background: var(--sun); } .sw.p3 { background: var(--leaf); } .sw.p1 { background: #fff; box-shadow: inset 0 0 0 2px var(--grey-2); }
.pick button.on .sw.p4 { box-shadow: inset 0 0 0 2px var(--blue-d); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 14px; }
.lg { display: inline-flex; align-items: center; gap: 7px; }
.lg::before { content: ""; width: 16px; height: 16px; }
.lg.s::before { background: rgba(141, 199, 63, .6); } .lg.r::before { background: rgba(254, 188, 49, .75); } .lg.d::before { background: rgba(80, 92, 108, .5); }
.lg.x::before { box-sizing: border-box; background: rgba(255, 255, 255, .9); border: 2px dashed rgba(80, 92, 108, .8); }
.apts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.apts a { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; background: var(--grey); color: var(--ink); text-decoration: none; transition: background .2s; }
.apts a.on, .apts a:hover { background: var(--leaf); }
.apts b { color: var(--blue-d); font-size: 16px; }
.apts span { font-size: 15px; }
.fnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fnav button { min-height: 44px; padding: 0 14px; border: 1px solid var(--grey-2); background: #fff; color: var(--blue-d); font: 700 14px/1.2 Montserrat, sans-serif; cursor: pointer; }
.fnav button:hover { border-color: var(--blue); }
.where-panel .back { display: inline-block; margin-top: 18px; border: 0; background: none; padding: 6px 0; font: 700 15px/1.3 Montserrat, sans-serif; cursor: pointer; }
.where .note { margin-top: 14px; }
@media (max-width: 1080px) { .where-g { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
	.flab { display: none; }
	.where-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.where-steps li { position: relative; justify-content: center; }
	.where-steps li + li::before { position: absolute; top: 15px; right: calc(50% + 24px); width: calc(100% - 48px); margin: 0; }
	.where-steps button { flex-direction: column; justify-content: flex-start; gap: 6px; width: 100%; min-height: 64px; padding: 0 4px; font-size: 13px; text-align: center; }
	.where-steps span { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) { .pz, .fz, .az, .pick button, .apts a { transition: none; } }

/* ── частите на сайта (24.10.2026): прескачане, език, меню на телефон, долна част, бисквитки ── */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--sun); color: var(--blue-d); padding: 12px 18px; font-weight: 800; }
.skip:focus { left: 12px; top: 12px; }
.top .wrap { position: relative; }
.top .logo img { height: 46px; }
.top .lang { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-weight: 700; font-size: 14px; color: var(--mute); text-decoration: none; }
.top .lang:hover { color: var(--blue); }
.mnav { display: none; }
.mnav summary { list-style: none; width: 46px; height: 46px; display: grid; align-content: center; background: var(--grey); cursor: pointer; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary i { display: block; width: 20px; height: 2px; background: var(--blue); margin: 3px auto; }
.mnav[open] summary { background: var(--sun); }
.mnav nav { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; background: #fff; border-bottom: 1px solid var(--grey-2); padding-block: 6px 16px; padding-left: max(var(--gut), env(safe-area-inset-left, 0px)); padding-right: max(var(--gut), env(safe-area-inset-right, 0px)); box-shadow: 0 18px 30px -24px rgba(31, 42, 58, .5); }
.mnav nav a { display: flex; align-items: center; min-height: 54px; border-bottom: 1px solid var(--grey); font-weight: 700; font-size: 17px; color: var(--ink); text-decoration: none; }
@media (max-width: 1080px) { .mnav { display: block; } .top .lang { margin-left: auto; } .top .lang + .btn { margin-left: 0; } }
.foot { padding-block: 48px 28px; background: var(--grey); color: var(--ink); }
.foot .wrap { display: block; }
.foot-g { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px 40px; }
.foot .f-brand img { height: 50px; width: auto; }
.foot .fh { margin: 0 0 10px; font-weight: 800; font-size: 15px; color: var(--blue-d); }
.foot p { font-size: 14px; line-height: 1.7; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li a, .foot p a { color: var(--ink); text-decoration: none; }
.foot li a { display: inline-flex; align-items: center; min-height: 36px; font-size: 14px; }
.foot a:hover { color: var(--blue); text-decoration: underline; }
.foot .ftel { font-weight: 800; font-size: 17px; color: var(--blue); }
.foot .cbtn { margin-top: 6px; min-height: 40px; padding: 0; border: 0; background: none; font: 700 14px/1.3 Montserrat, sans-serif; color: var(--blue); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.foot .f-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--grey-2); color: var(--mute); font-size: 13px; }
.apts .apts-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; background: var(--grey); }
.apts .apts-row.on { background: var(--leaf); }
@media (max-width: 1080px) { .foot-g { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 760px) { .foot { padding-bottom: 90px; } .foot-g { grid-template-columns: minmax(0, 1fr); } }

.foot-g nav { display: block; }

/* ── страница на апартамент (24.10.2026, estates-details_a2.tpl): формите offer.tpl и visit.tpl, споделяне, материали ── */
.a2-apt .arr { display: none; }
.apt-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.apt-h p b.st-sell { color: var(--leaf-t); } .apt-h p b.st-reserved { color: #8a5a00; } .apt-h p b.st-sold { color: var(--mute); }
.ibtn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border: 0; background: var(--grey); color: var(--blue-d); font: 700 14px/1 Montserrat, sans-serif; cursor: pointer; list-style: none; }
.ibtn::-webkit-details-marker { display: none; }
.ibtn svg { width: 20px; height: 20px; }
.ibtn[aria-pressed="true"] { background: var(--sun); }
.ibtn[aria-pressed="true"] svg path { fill: currentColor; }
.share { position: relative; }
.share-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; min-width: 230px; padding: 8px; background: #fff; box-shadow: 0 0 0 1px var(--grey-2), 0 16px 30px -18px rgba(31, 42, 58, .5); }
.share-menu a, .share-menu button { display: flex; align-items: center; min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--ink); font: 600 14px/1.2 Montserrat, sans-serif; text-align: left; text-decoration: none; cursor: pointer; }
.share-menu a:hover, .share-menu button:hover { background: var(--grey); }
.share-menu p { font-size: 13px; color: var(--leaf-t); padding: 0 10px; }
.plan.no-rooms { grid-template-columns: minmax(0, 1fr); }
.plan .pl img { display: block; width: 100%; height: auto; }
.plan .pl img.compass { position: absolute; left: 16px; top: 16px; width: 52px; }
.plan .lvl { font-weight: 800; color: var(--blue-d); margin: 4px 0 8px; }
.kv-more { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 1px solid var(--grey-2); }
.kv-more div { padding: 12px 16px 12px 0; }
.kv-more dt { font-size: 13px; color: var(--mute); }
.kv-more dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; }
.yourfloor .note { color: var(--blue-d); }
.yourfloor.on-dark .txt, .yourfloor.on-dark .note { color: #fff; }
.pay.pay2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sims { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sims a { display: grid; gap: 2px; padding: 18px 20px; background: var(--grey); color: var(--ink); text-decoration: none; transition: background .2s; }
.sims a:hover { background: var(--sun); }
.sims b { font-size: 22px; color: var(--blue); }
.sims span { font-size: 15px; }
/* 28.10.2026: „Наскоро разгледани“ — същите карти като „Още апартаменти“ */
.sec.seen { padding-top: 0; }
.seen .sims { margin-top: 18px; }
.seen-x { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
.a2-apt .faq { margin-top: 4px; }
/* ценова оферта и оглед (класовете на offer.tpl и visit.tpl) */
.panel { padding: 28px; background: var(--grey); }
.panel header { margin-bottom: 16px; }
.panel-h { font-size: var(--t28); }
.panel-sub { margin-top: 6px; font-size: 15px; color: var(--mute); }
/* 28.10.2026: малките заявки отстрани на апартамента — сгънати; съобщението от сървъра */
.lead { padding: 0; }
.lead summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; font-weight: 800; color: var(--blue-d); }
.lead summary::-webkit-details-marker { display: none; }
.lead summary::after { content: "+"; flex: none; width: 30px; height: 30px; display: grid; place-items: center; background: #fff; font-size: 20px; }
.lead[open] summary::after { content: "−"; background: var(--sun); }
.lead .lead-f { padding: 0 22px 20px; }
.lead select { width: 100%; height: 50px; padding: 0 12px; border: 0; border-bottom: 2px solid var(--blue); background: #fff; font: 16px Montserrat, sans-serif; }
.lead-what { margin: 0 0 6px; padding: 0; border: 0; }
.lead-what .chk { margin: 6px 0; }
.lead-msg { margin: 10px 0 0; font-size: 14px; font-weight: 600; }
.lead-msg.ok { color: var(--leaf-t); }
.lead-msg.err { color: #b3261e; }
.panel .fld input { box-sizing: border-box; }
.panel .err { margin-top: 4px; font-size: 13px; color: #b3261e; min-height: 0; }
.panel .err:empty { display: none; }
.panel input[aria-invalid="true"] { border-bottom-color: #b3261e; }
.panel .chks { display: grid; gap: 0; margin: 6px 0 4px; }
.panel .chk { margin: 6px 0; }
.panel .chk a { color: var(--blue); }
.panel .btn, .panel .btn--primary, .panel .btn--navy { width: 100%; justify-content: center; margin-top: 10px; }
.btn--navy { background: var(--blue); color: #fff; }
.btn--navy:hover { background: var(--blue-d); }
.panel .offer-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 13px; color: var(--mute); }
.panel .offer-note svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.panel .form-msg { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--leaf-t); }
.panel .form-msg:empty { display: none; }
.panel .form-msg.is-err { color: #b3261e; }
/* 02.11.2026: след формата за оферта — съобщението и панелът „готова“ се забелязват (жълта рамка, светва два пъти) */
.panel .form-msg.is-ok { padding: 12px 14px; background: var(--white); border-left: 4px solid var(--sun); color: var(--ink); font-size: 15px; }
@keyframes offer-flash { from { box-shadow: 0 0 0 0 rgba(254, 188, 49, .9); } to { box-shadow: 0 0 0 16px rgba(254, 188, 49, 0); } }
.panel.offer.is-flash, .panel .form-msg.is-flash { outline: 3px solid var(--sun); outline-offset: 2px; animation: offer-flash 1.1s ease-out 2; }
@media (prefers-reduced-motion: reduce) { .panel.offer.is-flash, .panel .form-msg.is-flash { animation: none; } }
.panel .form-msg[data-visit-ok] { margin-bottom: 20px; } /* 14.11.2026: потвърждението на формата за оглед — да не опира в „Предпочитан ден“ */
.panel.visit { background: #fff; box-shadow: inset 0 0 0 2px var(--grey); }
.panel.visit fieldset { border: 0; margin: 0 0 14px; padding: 0; }
.panel.visit legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.panel.visit legend small { font-weight: 400; color: var(--mute); }
.rch { display: flex; flex-wrap: wrap; gap: 6px; }
.rc { position: relative; }
.rc input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rc span { display: grid; place-items: center; min-width: 64px; min-height: 48px; padding: 4px 10px; background: var(--grey); font-weight: 700; font-size: 15px; color: var(--blue-d); cursor: pointer; text-align: center; line-height: 1.2; }
.rc span small { display: block; font-weight: 400; font-size: 12px; color: var(--mute); }
.rc input:checked + span { background: var(--blue); color: #fff; }
.rc input:checked + span small { color: rgba(255, 255, 255, .85); }
.rc input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.visit-note, .panel .where { margin-top: 8px; font-size: 13px; color: var(--mute); }
.panel.visit .fld { margin-bottom: 12px; }
@media (min-width: 900px) { .panel.visit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 14px; align-items: end; } .panel.visit > :not(.fld) { grid-column: 1 / -1; } .panel.visit .btn { justify-self: start; width: auto; min-width: 260px; } }
/* материали (specs.tpl, bare) */
.mat2 { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: start; }
.ecls { display: grid; place-items: center; gap: 4px; padding: 16px 8px; background: var(--leaf); color: var(--blue-d); text-align: center; border-radius: 0 0 40px 0; }
.ecls b { font-size: 46px; line-height: 1; }
.ecls span { font-size: 12px; font-weight: 700; }
.mlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.mlist li { padding: 10px 0; border-bottom: 1px solid var(--grey-2); font-size: 15px; }
.mlist small { display: block; font-size: 13px; color: var(--mute); }
.expand { margin-top: 14px; border-top: 2px solid var(--blue); }
.expand summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 56px; font-weight: 700; color: var(--blue-d); }
.expand summary::-webkit-details-marker { display: none; }
.expand summary::after { content: "+"; width: 32px; height: 32px; display: grid; place-items: center; background: var(--grey); color: var(--blue); font-size: 20px; }
.expand[open] summary::after { content: "−"; background: var(--sun); }
.expand-in h3 { margin: 18px 0 6px; font-size: 17px; }
.expand-in ul { margin: 0; padding-left: 20px; font-size: 15px; }
.expand-in li { margin: 4px 0; }
.expand-in .src { margin-top: 14px; font-size: 13px; color: var(--mute); }
@media (max-width: 1080px) { .sims { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
	.mat2, .mlist { grid-template-columns: minmax(0, 1fr); }
	.ecls { justify-self: start; padding: 12px 24px; }
	.pay.pay2 { grid-template-columns: minmax(0, 1fr); }
	.apt-act .floorband { order: -1; }
}
@media (prefers-reduced-motion: reduce) { .sims a { transition: none; } }
/* лента „Преглед А2“ (base.tpl, само в прегледа) */
.a2bar { position: relative; z-index: 60; background: var(--blue-d); color: #fff; font: 600 13px/1.4 Montserrat, system-ui, sans-serif; text-align: center; padding-block: 7px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.a2bar a { color: var(--sun); margin-left: 8px; }

/* ── „За комплекса“ (25.10.2026, complex_a2.tpl, js/a2-complex.js) ── */
.cx-hero { padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 5vw, 72px); }
.cx-hero-g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.cx-hero h1 { margin-top: 18px; font-size: var(--t67); }
.cx-hero .lead { margin-top: 18px; font-size: 19px; color: var(--mute); max-width: 32em; }
.cx-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 34px 0 0; border-top: 2px solid var(--blue); }
.cx-facts div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; padding: 14px 14px 0 0; }
.cx-facts dd { margin: 0; font-size: var(--t38); font-weight: 800; color: var(--blue); line-height: 1.1; }
.cx-facts dt { font-size: 14px; color: var(--mute); }
.cx-hero-pic { margin: 0; position: relative; }
.cx-hero-pic img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.grow { background: var(--grey); }
.years { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.years button { min-height: 52px; min-width: 96px; padding: 0 20px; border: 0; background: #fff; color: var(--blue-d); font: 800 20px/1 Montserrat, system-ui, sans-serif; cursor: pointer; transition: background .2s; }
.years button:hover { background: var(--sun); }
.years button[aria-selected="true"] { background: var(--blue); color: #fff; }
.grow-g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 40px); margin-top: 18px; align-items: start; }
.grow-map { margin: 0; position: relative; background: #fff; }
.grow-map svg { display: block; width: 100%; height: auto; }
.grow-map .vis { left: auto; right: 0; top: 0; bottom: auto; }
.gz { fill: #fff; fill-opacity: 0; stroke: #fff; stroke-opacity: 0; stroke-width: 4; transition: fill-opacity .35s, stroke-opacity .35s; }
.gz.done { fill: var(--leaf); fill-opacity: .55; stroke-opacity: 1; }
.gz.build { fill: var(--sun); fill-opacity: .6; stroke-opacity: 1; }
.gz.res { fill: #fff; fill-opacity: .45; stroke: var(--sun); stroke-opacity: 1; stroke-width: 8; stroke-dasharray: 22 14; }
/* 05.11.2026: кадрите по години (a2-complex.js) — преливат се; сграда, която още я няма, не се натиска */
.grow-map .gf { opacity: 0; transition: opacity .7s ease; }
.grow-map .gf.on { opacity: 1; }
.gz.off { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .grow-map .gf { transition: none; } }
.grow-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 12px 16px; font-size: 14px; color: var(--ink); }
.grow-legend .lg::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 7px; vertical-align: -3px; }
.grow-legend .done::before { background: rgba(141, 199, 63, .8); }
.grow-legend .build::before { background: rgba(254, 188, 49, .85); }
.grow-legend .res::before { background: #fff; box-shadow: inset 0 0 0 2px var(--sun); }
.grow-card { background: #fff; padding: 26px 26px 22px; outline: none; }
.grow-card:focus-visible { outline: 3px solid var(--blue); }
.grow-card .gy { font-size: 15px; font-weight: 800; color: var(--leaf-t); }
.grow-card h3 { margin-top: 4px; font-size: var(--t28); }
.grow-card dl { margin: 16px 0 0; }
.grow-card dl div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--grey-2); }
.grow-card dt { font-size: 14px; color: var(--mute); }
.grow-card dd { margin: 0; font-size: 16px; font-weight: 700; }
.grow-card figure { margin: 16px 0 0; position: relative; }
.grow-card figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.grow-card .gn { margin-top: 12px; font-size: 14px; color: var(--mute); }
.grow-nav { display: flex; gap: 8px; margin-top: 16px; }
.grow-nav button { min-height: 44px; padding: 0 16px; border: 1px solid var(--grey-2); background: #fff; color: var(--blue-d); font: 700 14px/1 Montserrat, system-ui, sans-serif; cursor: pointer; }
.grow-nav button:disabled { opacity: .4; cursor: default; }
.show-g { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 44px); margin-top: 28px; align-items: start; }
.show-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.show-list button { width: 100%; display: flex; align-items: center; min-height: 48px; padding: 8px 18px; border: 0; background: var(--grey); color: var(--ink); text-align: left; font: 700 16px/1.3 Montserrat, system-ui, sans-serif; cursor: pointer; transition: background .2s; }
.show-list button:hover { background: #e4e4e4; }
.show-list button[aria-pressed="true"] { background: var(--blue); color: #fff; }
/* 28.10.2026 (Петьо): снимката стои в екрана, докато се минава по списъка, и никога не е по-висока от екрана */
.show-pics { position: sticky; top: 96px; }
.show-pics figure { margin: 0; position: relative; max-width: calc((100vh - 190px) * 4 / 3); }
.show-pics img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0 0 0 120px; }
.show-pics .vis { left: auto; right: 0; top: 0; bottom: auto; }
.show-pics figcaption { margin-top: 10px; font-weight: 800; color: var(--blue-d); }
/* 28.10.2026: „Сградите накратко“ — визуализация + текст горе, 6 отворени карти с линейни икони отдолу */
.cxm-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.cxm-pic { margin: 0; position: relative; }
.cxm-pic img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 650; object-fit: cover; border-radius: 0 0 0 120px; }
.cxm-pic .vis { left: auto; right: 0; top: 0; bottom: auto; }
.cxm-intro h2 { margin-bottom: 14px; }
.cxm-intro h3, .cxm-cards h3 { margin: 0 0 8px; font-size: 19px; color: var(--blue-d); }
.cxm-intro p, .cxm-cards p { margin: 0; font-size: 16px; color: var(--ink); }
.cxm-cards { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cxm-cards li { padding: 24px 24px 26px; background: var(--grey); border-radius: 0 0 0 40px; }
.cxm-ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 0 26px 0 0; background: #fff; color: var(--blue); }
.cxm-ic svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1080px) { .cxm-top { grid-template-columns: minmax(0, 1fr); } .cxm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
	.cxm-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.cxm-cards li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 16px 18px 18px; }
	.cxm-ic { width: 40px; height: 40px; margin: 0; border-radius: 0 20px 0 0; }
	.cxm-ic svg { width: 24px; height: 24px; }
	.cxm-cards h3 { margin: 0; font-size: 17px; }
	.cxm-cards p { grid-column: 1 / -1; margin-top: 10px; font-size: 15px; }
	.cxm-pic img { border-radius: 0 0 0 70px; }
}
.cx-more-in { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 18px; padding: 0 0 20px; align-items: start; }
.cx-more-in img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cx-more-in p { font-size: 16px; }
.cx-more-in:not(:has(img)) { grid-template-columns: minmax(0, 1fr); }
.meet .btn.ghost { background: transparent; box-shadow: inset 0 0 0 2px #fff; color: #fff; }
.meet .btn.ghost:hover { background: rgba(255, 255, 255, .12); }
@media (max-width: 1080px) { .grow-g { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .show-g { grid-template-columns: minmax(0, 1fr); } }
/* средна ширина: списъкът и снимката една до друга, по-малки редове */
@media (min-width: 761px) and (max-width: 1080px) {
	.show-g { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; }
	.show-list button { min-height: 42px; padding: 6px 12px; font-size: 14px; }
}
@media (max-width: 760px) {
	.cx-hero-g { grid-template-columns: minmax(0, 1fr); }
	.cx-hero-pic img { border-radius: 0 0 0 120px; aspect-ratio: 4 / 3; }
	.cx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.years { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.years button { min-width: 0; padding: 0 6px; font-size: 17px; }
	.grow-card { padding: 20px 18px; }
	.grow-card dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.show-list { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 6px; scroll-snap-type: x mandatory; }
	.show-list li { flex: none; scroll-snap-align: start; }
	.show-list button { width: auto; white-space: nowrap; min-height: 48px; }
	.show-pics img { border-radius: 0 0 0 80px; }
	.show-pics { position: static; }
	.cx-more-in { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .gz, .years button, .show-list button { transition: none; } }

/* ── активни снимки и ефекти (26.10.2026, Петьо: „размърдайте картинките; където има фази — клик към избора“) ── */
/* активна снимка: цялата е линк (.go-a върху нея), етикетът в ъгъла казва къде води */
.go { position: relative; overflow: hidden; }
.go > img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.go-a { position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end; justify-content: flex-end; padding: 14px; text-decoration: none; }
.go-a span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; background: var(--sun); color: var(--blue-d); font: 800 14px/1.2 Montserrat, system-ui, sans-serif; box-shadow: 0 6px 18px -8px rgba(6, 56, 115, .55); transition: background .2s, transform .3s; }
.go:hover > img, .go:focus-within > img { transform: scale(1.04); }
.go:hover .go-a span, .go-a:focus-visible span { background: #fff; transform: translateY(-3px); }
.go-a:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
/* кръглите снимки — етикетът в долния център, вътре в кръга */
.kompl-pic.go .go-a, .cx-hero-pic.go .go-a { justify-content: center; padding-bottom: 12%; }
.mosaic .big .go-a { padding: 12px; }
/* 27.10.2026: малките снимки в мозайката — кратък етикет, мястото му следва формата (кръг, четвъртинки) */
.mosaic .go-s .go-a { padding: 10px; justify-content: center; align-items: flex-end; }
.mosaic .go-s .go-a span { min-height: 32px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
.mosaic .m-ci.go-s .go-a { align-items: center; }
.mosaic .m-q3.go-s .go-a { justify-content: flex-start; align-items: center; }
.mosaic .m-q3.go-s .vis { left: 0; right: auto; top: 0; bottom: auto; }
.mosaic .m-q2.go-s .go-a { align-items: center; }
.mosaic .m-q2.go-s .vis { left: 0; right: auto; top: auto; bottom: 0; }
.mosaic .go-s:hover .go-a span, .mosaic .go-s .go-a:focus-visible span { background: var(--white); }
@media (max-width: 760px) { .mosaic .go-s .go-a { padding: 6px; } .mosaic .go-s .go-a span { min-height: 26px; padding: 0 8px; font-size: 11px; } .mosaic .go-s .vis { font-size: 9px; padding: 2px 5px; } }
@media (max-width: 380px) { .mosaic .go-s .go-a span { min-height: 24px; padding: 0 6px; font-size: 10px; } }
.grow-go { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 12px 16px 0; font-size: 15px; }
.gz { cursor: pointer; }
.plan .pl .pos-a { display: block; }
.plan .pl .pos-a:hover img.pos { border-color: var(--blue); }

@media (prefers-reduced-motion: no-preference) {
	/* 1. голямата снимка горе — бавно приближаване веднъж, след появата на мозайката */
	.mosaic .big.kb > img { animation: kb 16s cubic-bezier(.25, .1, .25, 1) .8s both; }
	@keyframes kb { from { transform: scale(1); } to { transform: scale(1.06); } }
	.mosaic .big.kb:hover > img { animation-play-state: paused; }
	/* 2. големите снимки — разтварят се от долния ляв ъгъл с четвърт-кръг при първото влизане в екрана (js/a2-motion.js) */
	.rv-on .rv:not(.rv-in) { clip-path: circle(0 at 0 100%); }
	.rv-on .rv.rv-in:not(.rv-now) { animation: rv .8s cubic-bezier(.25, .7, .2, 1) both; }
	@keyframes rv { from { clip-path: circle(0 at 0 100%); } to { clip-path: circle(150% at 0 100%); } }
	/* 4. сградите в продажба „дишат“ три пъти, докато картата не бъде докосната */
	.hint .pz.p4, .hint .pz.p3 { animation: breathe 1.6s ease-in-out .9s 3; }
	.hint .gz.build, .hint .gz.res { animation: breathe 1.6s ease-in-out .9s 3; }
	@keyframes breathe { 50% { fill-opacity: .85; stroke-width: 10; } }
}
@media (max-width: 760px) {
	.go-a { padding: 10px; }
	.go-a span { min-height: 36px; padding: 0 12px; font-size: 13px; }
}

/* „Две сгради в продажба“ — етажите се избират с мишката (26.10.2026) */
.bld-card .cf-svg { display: block; width: 100%; aspect-ratio: 16 / 9; }
.bld-card .go-a { inset: auto 0 0 auto; }
.cf { fill: #fff; fill-opacity: 0; stroke: #fff; stroke-opacity: .55; stroke-width: 5; cursor: pointer; transition: fill-opacity .2s; outline: none; }
.cf.on, .cf:focus-visible { fill: var(--sun); fill-opacity: .6; stroke-opacity: 1; }
.cf.none.on, .cf.none:focus-visible { fill: var(--ink); fill-opacity: .35; }
.cf-tip { position: absolute; z-index: 4; transform: translate(-50%, -100%); padding: 7px 12px; background: var(--blue-d); color: #fff; font: 700 14px/1.2 Montserrat, system-ui, sans-serif; white-space: nowrap; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
	.rv-on .bld-card.rv-in .cf { animation: cfhint 1.2s ease-in-out 1.2s 1; }
	@keyframes cfhint { 50% { fill-opacity: .28; } }
}

/* ── „Галерия“ (26.10.2026, gallery_a2.tpl, js/a2-gallery.js) ── */
.gal-hero { padding: clamp(28px, 4vw, 56px) 0 clamp(10px, 2vw, 24px); }
.gal-hero h1 { margin-top: 18px; font-size: var(--t67); }
.gal-hero .lead { margin-top: 14px; font-size: 19px; color: var(--mute); max-width: 36em; }
.col-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 24px; }
.col-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.col-f { display: flex; flex-wrap: wrap; gap: 6px; }
.col-f button, .col-shuffle { min-height: 44px; padding: 0 16px; border: 0; background: var(--grey); color: var(--blue-d); font: 700 14px/1 Montserrat, system-ui, sans-serif; cursor: pointer; transition: background .2s; }
.col-f button:hover { background: #e2e2e2; }
.col-f button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.col-shuffle { background: var(--sun); }
.col-shuffle:hover { background: var(--sun-d); }
.collage { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: dense; gap: 10px; margin-top: 22px; }
.ct { position: relative; aspect-ratio: 1; overflow: hidden; margin: 0; }
.ct-big { grid-column: span 2; grid-row: span 2; }
.ct button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--grey); cursor: zoom-in; }
.ct img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.ct button:hover img, .ct button:focus-visible img { transform: scale(1.06); }
.ct button:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.ct-k { position: absolute; left: 0; bottom: 0; max-width: 100%; padding: 4px 9px; background: rgba(255, 255, 255, .92); color: var(--blue-d); font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .2s; }
.ct button:hover .ct-k, .ct button:focus-visible .ct-k, .ct-big .ct-k { opacity: 1; }
.ct.m-q1 .ct-k, .ct.m-q4 .ct-k, .ct.m-ci .ct-k { left: 50%; transform: translateX(-50%); bottom: 10%; }
.gal-flip { background: var(--grey); }
.flip-g { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(20px, 3vw, 40px); margin-top: 24px; align-items: center; }
/* 27.10.2026: time-lapse — два слоя, които преливат; приближаване; лента за напредъка; месецът върху снимката */
.flip-open { position: relative; overflow: hidden; aspect-ratio: 7 / 5; }
.flip-open img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.flip-open img.on { opacity: 1; }
.flip-g.quick .flip-open img { transition-duration: .25s; }
.flip-open img.kb { animation: flipKB 3.6s ease-out forwards; }
@keyframes flipKB { from { transform: scale(1); } to { transform: scale(1.06); } }
.flip-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255, 255, 255, .35); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.flip-prog i { display: block; height: 100%; background: var(--sun); transform-origin: 0 50%; transform: scaleX(0); }
@keyframes flipProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.flip-badge { position: absolute; left: 0; bottom: 5px; padding: 10px 18px; background: var(--blue); color: var(--white); font-size: clamp(16px, 1.6vw, 22px); font-weight: 800; opacity: 0; pointer-events: none; }
.flip-g.playing .flip-prog, .flip-g.playing .flip-badge { opacity: 1; }
.flip-g.playing .flip-badge.in { animation: flipBadge .5s cubic-bezier(.2, .7, .2, 1); }
@keyframes flipBadge { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.flip-pic { margin: 0; position: relative; background: #dcdcdc; }
.flip-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.flip-pic img { display: block; width: 100%; aspect-ratio: 7 / 5; object-fit: cover; }
.flip-pic .vis { left: auto; right: 0; top: 0; bottom: auto; }
.flip-m { font-size: var(--t38); font-weight: 800; color: var(--blue); line-height: 1.2; height: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flip-sub { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--mute); height: 3em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.flip-side input[type=range] { width: 100%; margin: 20px 0 0; accent-color: var(--blue); height: 32px; cursor: pointer; }
.flip-years { position: relative; height: 22px; margin: 2px 10px 0; font-size: 12px; font-weight: 700; color: var(--mute); }
.flip-years span { position: absolute; top: 0; transform: translateX(-50%); }
.flip-years .y0 { transform: none; } .flip-years .y1 { transform: translateX(-100%); }
.flip-act [data-flip-n] { margin-left: .35em; }
.flip-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
/* 27.10.2026: фазата на месеца — над месеца, върху снимката и като лента под плъзгача (Фаза 1 — зелено, завършена; Фаза 3 — жълто, строи се) */
.flip-ph { display: inline-block; height: 28px; margin: 0 0 8px; padding: 0 10px; font-size: 13px; font-weight: 800; line-height: 28px; white-space: nowrap; background: var(--grey-2); color: var(--ink); }
.flip-ph[data-ph^="p1"] { background: var(--leaf); color: #12340a; }
.flip-ph[data-ph="p3"] { background: var(--sun); color: var(--blue-d); }
.flip-ph:empty { visibility: hidden; }
.flip-badge small { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; opacity: .85; }
.flip-phs { position: relative; height: 26px; margin: 6px 10px 0; }
.flip-phs button { position: absolute; top: 0; height: 26px; padding: 0 2px; border: 0; border-left: 2px solid var(--grey); background: #cfe6b0; color: #23410f; font: 700 11px/26px inherit; font-family: inherit; cursor: pointer; overflow: hidden; }
.flip-phs button[data-ph="p1s2"] { background: #b3d98a; }
.flip-phs button[data-ph="p3"] { background: #ffe0a0; color: var(--blue-d); }
.flip-phs button[data-ph="p4"] { background: #cfe0f5; color: var(--blue-d); } /* 12.11.2026: строежът на Фаза 4 (албум с „Фаза 4“ / „кв. 23“ в CMS) */
.flip-phs button:first-child { border-left: 0; }
.flip-phs button span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flip-phs button[aria-current="true"] { box-shadow: inset 0 -3px 0 var(--blue); color: var(--blue-d); }
.flip-phs button:hover { filter: brightness(.95); }
.flip-phs button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; z-index: 1; }
.fans { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 30px; }
.fan { display: grid; gap: 4px; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: zoom-in; color: var(--ink); }
.fan-p { position: relative; display: block; aspect-ratio: 4 / 3; margin: 14px 18px 18px; }
.fan-p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 6px solid #fff; box-shadow: 0 14px 30px -18px rgba(6, 56, 115, .6); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.fan-p img:nth-child(1) { transform: rotate(-6deg); } .fan-p img:nth-child(2) { transform: rotate(4deg); } .fan-p img:nth-child(3) { transform: rotate(0); }
.fan:hover .fan-p img:nth-child(1), .fan:focus-visible .fan-p img:nth-child(1) { transform: rotate(-12deg) translate(-12%, 2%); }
.fan:hover .fan-p img:nth-child(2), .fan:focus-visible .fan-p img:nth-child(2) { transform: rotate(10deg) translate(12%, 2%); }
.fan:hover .fan-p img:nth-child(3), .fan:focus-visible .fan-p img:nth-child(3) { transform: scale(1.03); }
.fan:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.fan-t { font-size: var(--t28); font-weight: 800; color: var(--blue); }
/* 03.11.2026: фазата и кварталът над името на албума (Петьо: „не се ориентирам коя от кой квартал е“) */
.fan-q { justify-self: start; padding: 4px 10px; background: var(--blue-d); color: #fff; font-size: 13px; font-weight: 800; }
.fan-n { font-size: 14px; color: var(--mute); }
.gal-360 { background: var(--grey); }
.t360 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.t360-c { position: relative; display: block; overflow: hidden; color: #fff; text-decoration: none; }
.t360-c img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.t360-c:hover img, .t360-c:focus-visible img { transform: scale(1.05); }
.t360-c span { position: absolute; inset: auto 0 0 0; display: grid; padding: 40px 18px 16px; background: linear-gradient(0deg, rgba(6, 56, 115, .9), rgba(6, 56, 115, 0)); font-weight: 700; }
.t360-c b { font-size: 26px; color: var(--sun); }
/* преглед на цял екран */
.gv-on, .gv-on body { overflow: hidden; }
.gv { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: rgba(10, 22, 40, .96); color: #fff; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.gv[hidden] { display: none; }
.gv-top { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 22px; }
.gv-t { flex: 1; min-width: 0; font-size: 15px; }
.gv-t b { margin-right: 10px; }
.gv-t span { color: rgba(255, 255, 255, .78); }
.gv-k { padding: 4px 9px; background: var(--sun); color: var(--blue-d); font-size: 12px; font-weight: 800; white-space: nowrap; }
.gv-n { font-size: 14px; color: rgba(255, 255, 255, .78); white-space: nowrap; }
.gv button { display: grid; place-items: center; border: 0; cursor: pointer; }
.gv svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gv-x { width: 48px; height: 48px; background: rgba(255, 255, 255, .12); color: #fff; }
.gv-x:hover { background: rgba(255, 255, 255, .22); }
/* 27.10.2026: снимката винаги се побира — и вертикалните (1200×1600 и по-тесни) не преливат под лентата */
.gv-stage { position: relative; min-height: 0; overflow: hidden; }
.gv-img { position: absolute; top: 0; bottom: 0; left: 70px; right: 70px; width: calc(100% - 140px); height: 100%; object-fit: contain; opacity: 0; transition: opacity .25s; user-select: none; touch-action: pan-y; }
.gv-img.in { opacity: 1; }
.gv-nav { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; background: rgba(255, 255, 255, .14); color: #fff; }
.gv-nav:hover { background: var(--sun); color: var(--blue-d); }
.gv-p { left: 10px; } .gv-nx { right: 10px; }
.gv button:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.gv-th { display: flex; gap: 6px; overflow-x: auto; padding: 12px 16px 16px; scrollbar-width: thin; }
.gv-th button { flex: none; width: 84px; height: 60px; padding: 0; background: none; opacity: .5; transition: opacity .2s; }
.gv-th button[aria-current="true"], .gv-th button:hover { opacity: 1; box-shadow: 0 0 0 3px var(--sun); }
.gv-th img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
	.ct.ct-in { animation: ctin .55s cubic-bezier(.2, .7, .2, 1) both; }
	@keyframes ctin { from { opacity: 0; transform: scale(.88); } }
}
@media (max-width: 1080px) { .flip-g { grid-template-columns: minmax(0, 1fr); } .t360 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 760px) {
	.collage { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
	.col-ctl { width: 100%; }
	.col-f { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 4px; }
	.col-f button { flex: none; }
	.t360 { grid-template-columns: minmax(0, 1fr); }
	.gv-img { left: 0; right: 0; width: 100%; }
	.gv-nav { display: none; }
	.gv-top { padding: 8px 8px 8px 14px; flex-wrap: wrap; }
	.gv-t { flex-basis: calc(100% - 60px); order: 1; }
	.gv-x { order: 2; }
	.gv-k, .gv-n { order: 3; }
}
@media (prefers-reduced-motion: reduce) { .ct img, .fan-p img, .t360-c img, .gv-img, .col-f button { transition: none; } .flip-open img { transition-duration: .3s; } .flip-open img.kb, .flip-g.playing .flip-badge.in { animation: none; } }

/* ── 30.10.2026 — първият екран „Живата сграда“ (home_a2.tpl, js/a2-hero.js). Светлината се движи от променливите на секцията:
   --n (нощ 0…1), --w (топлина на изгрев/залез), --l0…--l5 (светнатите прозорци по етажи), --lg (сиянието), --hbg (фонът).
   Една и съща визуализация; привечер и вечер — тон върху нея и слоят със светнатите прозорци. ── */
.hl { --n: 0; --w: 0; --e: 0; --d: 0; --hbg: #fff;
	background: var(--hbg); padding: clamp(18px, 2.6vw, 36px) 0 clamp(30px, 3.4vw, 56px); overflow-x: clip; transition: background-color .18s linear; }
.hero.hl .wrap.hl-g { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: clamp(24px, 3.2vw, 52px); }
.hl h1 { font-size: clamp(46px, 5vw, 76px); }
.hero.hl .hl-txt > p { font-size: clamp(17px, 1.3vw, 19px); max-width: 26em; }
.hl h1, .hl-txt > p, .hl .tl { transition: color .18s linear; }
.hl-back { margin: 26px 0 0 !important; font-size: 15px !important; line-height: 1.5; }
.hl.hl-dark h1 { color: #fff; }
.hl.hl-dark .hl-txt > p { color: #c6d3e6; }
.hl.hl-dark .tl { color: #fff; }
.hl-vis { position: relative; margin-right: calc(-1 * max(var(--gut), (100vw - var(--max)) / 2)); }
.hl-st { position: relative; margin: 0; width: 100%; aspect-ratio: 3 / 2; max-height: calc(100svh - 250px); min-height: 380px; overflow: hidden; background: #c9d6e4;
	border-radius: 0 0 0 clamp(120px, 15vw, 250px); }
.hl-st > img, .hl-st > i, .hl-st > svg, .hl-st > canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hl-img { filter: brightness(calc(1 - .2 * var(--n))) saturate(calc(1 + .12 * var(--w))); }
.hl-night { background: linear-gradient(180deg, #06183a 0%, #102756 50%, #1b2c52 100%); mix-blend-mode: multiply; opacity: calc(var(--n) * .3); }
.hl-warm { background: linear-gradient(180deg, #ff8a45 0%, #ffa865 50%, #ffc690 100%); mix-blend-mode: soft-light; opacity: calc(var(--w) * (1 - .6 * var(--n)) * .95); }
/* вечерната визуализация — <canvas> (не се брои за LCP); същият кадър като дневната (14.11.2026) — около залеза дневната преминава в нея на място */
/* 14.11.2026, 21:36 (Петьо, от телефона: „тъмна е, няма контраст“): късно вечер картината вече не се затъмнява с 32% и не губи цвят;
   вместо това получава контраст — небето и зеленината потъмняват, прозорците и лампите остават ярки. До час след залеза е без обработка. */
.hl-eve { visibility: hidden; opacity: var(--e);
	filter: brightness(calc(1 - .05 * var(--d))) contrast(calc(1 + .25 * var(--d))) saturate(calc(1 + .08 * var(--d))); }
.hl-eve-on .hl-eve { visibility: visible; }
.hl-fl { transition: opacity .3s, visibility .3s; }
.hl-time[data-off] { visibility: hidden; }
.hl-fl path { cursor: pointer; opacity: 0; stroke: #fff; stroke-width: 4; stroke-linejoin: round; outline: none; transform-box: fill-box; transform-origin: 50% 100%;
	transition: opacity .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1); }
.hl-fl path.on { opacity: .82; transform: translateY(-3%) scale(1.015); filter: drop-shadow(0 12px 14px rgba(2, 30, 70, .45)); }
.hl-fl path:focus-visible { opacity: .9; stroke: var(--sun); stroke-width: 8; }
.hl-st .vis { left: auto; right: 0; top: 0; bottom: auto; }
.hl-hint { position: absolute; left: 20px; top: 20px; z-index: 3; max-width: min(340px, 70%); margin: 0; padding: 9px 14px; background: rgba(255, 255, 255, .94); color: var(--blue-d);
	font-size: 14px; line-height: 1.4; transition: opacity .25s; }
.hl-hint b { color: var(--blue); }
.hl-hint a { white-space: nowrap; }
/* 30.10.2026 (пилот) — „Къде е в сградата.“ на страницата на апартамента: апартаментът по фасадата, оцветен, с табелка (като bld.bg) */
.bldpos { position: relative; margin: 0; overflow: hidden; border-radius: 0 0 0 120px; }
.bldpos img { width: 100%; }
.bldpos .vis { left: auto; right: 0; top: 0; bottom: auto; }
.bldpos svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bldpos .fl { fill: rgba(255, 255, 255, .16); stroke: #fff; stroke-width: 3; stroke-dasharray: 10 8; }
.bldpos .ap { fill: rgba(141, 199, 63, .62); stroke: #fff; stroke-width: 5; stroke-linejoin: round; }
.bldpos line { stroke: #fff; stroke-width: 4; }
.bldpos circle { fill: var(--leaf); stroke: #fff; stroke-width: 4; }
.bldpos-tag { position: absolute; z-index: 2; transform: translate(-50%, -100%); display: grid; padding: 10px 14px; background: #fff; color: var(--blue-d); font-size: 13px; line-height: 1.4; white-space: nowrap; box-shadow: 0 8px 24px rgba(2, 30, 70, .25); }
.bldpos-tag b { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; color: var(--blue); }
.bldpos-tag i { width: 10px; height: 10px; border-radius: 50%; background: var(--leaf); }
.bldpos-tag i.st-reserved { background: var(--sun); }
.bldpos-tag i.st-sold { background: #c0392b; }
@media (max-width: 760px) { .bldpos { border-radius: 0 0 0 70px; } .bldpos-tag { padding: 7px 10px; font-size: 11px; } .bldpos-tag b { font-size: 15px; } }
.hl.hl-dark .hl-hint .tl { color: var(--blue); }
@media (min-width: 761px) { .hl-hint { max-width: calc(100% - 40px); padding: 7px 14px; } }
.hl-st.fl-lit .hl-hint { opacity: 0; }
.hl-tip { position: absolute; z-index: 4; transform: translate(-50%, -100%); display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center;
	padding: 10px 16px 11px 12px; background: var(--blue-d); color: #fff; font-size: 14px; line-height: 1.35; white-space: nowrap; pointer-events: none;
	box-shadow: 0 10px 28px rgba(2, 30, 70, .35); }
.hl-tip::after { content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: var(--blue-d); }
.hl-tip i { grid-row: span 3; width: 14px; height: 40px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.hl-tip b { font-weight: 800; }
.hl-tip span { color: #c6d3e6; }
.hl-tip u { color: var(--sun); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (hover: hover) { .hl-tip u { display: none; } .hl-tip i { height: 30px; } }
@media (hover: none) { .hl-tip { pointer-events: auto; cursor: pointer; } }
/* часът: лента под визуализацията, подравнена след четвъртинката */
.hl-time { width: min(620px, calc(100% - clamp(120px, 15vw, 250px) * .5 - var(--gut))); margin: 14px 0 0 calc(clamp(120px, 15vw, 250px) * .5); color: var(--blue-d); transition: color .18s linear; }
.hl.hl-dark .hl-time { color: #fff; }
.hl-tr { display: flex; align-items: baseline; gap: 12px; min-height: 30px; }
.hl-tr b { font-size: 26px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; min-width: 3.1em; }
.hl-tr span { font-size: 14px; font-weight: 600; opacity: .85; }
.hl-now { margin-left: auto; min-height: 30px; padding: 0 12px; border: 0; background: var(--sun); color: var(--blue-d); font: 800 13px/1 Montserrat, sans-serif; cursor: pointer; }
.hl-rng { display: grid; grid-template-columns: 22px minmax(0, 1fr) 22px; align-items: center; gap: 12px; margin-top: 6px; }
.hl-rng svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hl-trk { position: relative; }
.hl-trk input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer; }
.hl-trk input::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: var(--trk, var(--grey)); }
.hl-trk input::-moz-range-track { height: 8px; border-radius: 4px; background: var(--trk, var(--grey)); }
.hl-trk input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: var(--sun); border: 3px solid #fff; box-shadow: 0 2px 10px rgba(2, 30, 70, .4); }
.hl-trk input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--sun); border: 3px solid #fff; box-shadow: 0 2px 10px rgba(2, 30, 70, .4); }
.hl.hl-dark .hl-trk input::-webkit-slider-runnable-track { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.hl.hl-dark .hl-trk input::-moz-range-track { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.hl.hl-dark .hl-trk input::-webkit-slider-thumb { background: #f3f0e6; border-color: var(--sun); }
.hl.hl-dark .hl-trk input::-moz-range-thumb { background: #f3f0e6; border-color: var(--sun); }
.hl-trk input:focus-visible { outline: 3px solid var(--sun); outline-offset: 4px; }
.hl-mk { position: absolute; top: 28px; transform: translateX(-50%); font-size: 11px; font-style: normal; font-weight: 600; white-space: nowrap; opacity: .75; pointer-events: none; }
.hl-mk::before { content: ""; position: absolute; left: 50%; top: -15px; width: 2px; height: 8px; margin-left: -1px; background: currentColor; opacity: .5; }
@media (max-width: 1080px) {
	.hero.hl .wrap.hl-g { grid-template-columns: minmax(0, 1fr); }
	.hl-vis { order: -1; margin: 0 calc(-1 * var(--gut)); }
	.hl-st { aspect-ratio: 16 / 10; max-height: none; border-radius: 0 0 0 clamp(90px, 18vw, 180px); }
	.hl-time { width: auto; margin: 12px var(--gut) 0; padding-bottom: 18px; }
}
@media (max-width: 760px) {
	.hl { padding-top: 0; }
	.hl-st { aspect-ratio: 1 / 1; min-height: 0; border-radius: 0 0 0 110px; }
	.hl-hint { left: 12px; top: 12px; right: 12px; max-width: none; font-size: 13px; padding: 7px 11px; }
	.hl-st .vis { top: auto; bottom: 0; font-size: 11px; }
	.hl-tr b { font-size: 22px; }
	.hl-tr span { font-size: 13px; }
	.hl-tip { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
	.hl, .hl h1, .hl-txt > p, .hl .tl, .hl-time { transition: none; }
	.hl-fl path { transition: opacity .2s; } .hl-fl path.on { transform: none; }
}
/* 31.10.2026 (Петьо, телефон, A-63): мезонетите — надписът на първото ниво отстъпва от компаса, схемата на етажа слиза под плановете (иначе покриваха „Партер“ и второто ниво) */
.plan .pl.has-lvl > .lvl:first-child { margin-left: 64px; min-height: 44px; display: flex; align-items: center; }
.plan .pl.has-lvl .pos-a { display: flex; justify-content: flex-end; margin-top: 12px; }
.plan .pl.has-lvl img.pos { position: static; }
/* 31.10.2026 (преглед на всички 132 апартамента след A-63): компасът и схемата на етажа покриваха стаи и стени в чертежа и при обикновените апартаменти — слизат в ред под плана: компасът вляво, схемата вдясно */
.plan .pl:not(.has-lvl) { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 16px; }
.plan .pl:not(.has-lvl) > img:first-child { grid-column: 1 / -1; }
.plan .pl:not(.has-lvl) img.compass { position: static; grid-row: 2; grid-column: 1; margin-top: 12px; }
.plan .pl:not(.has-lvl) .pos-a { grid-row: 2; grid-column: 2; justify-self: end; margin-top: 12px; }
.plan .pl:not(.has-lvl) img.pos { position: static; }
@media (max-width: 760px) { .plan .pl:not(.has-lvl) img.compass { width: 44px; } }

/* 02.11.2026 (Петьо: „заглавието се показва, а част от съдържанието е изрязана … на екран не е цялостна информация“).
   На компютър: (1) отстъпите и заглавията зависят и от височината на екрана; (2) снимките до текста не са по-високи
   от екрана (--fit) и остават закрепени, докато се чете текстът до тях — снимката не се реже, заглавието не изчезва без нея.
   На телефон разделите са един под друг — там нищо не се променя. */
@media (min-width: 761px) {
	:root {
		--fit: max(360px, calc(100svh - 150px));
		--t50: clamp(30px, min(3.8vw, 6.4svh), 50px);
		--t28: clamp(20px, min(2.1vw, 3.6svh), 28px);
	}
	.sec { padding-top: clamp(40px, min(8vw, 9svh), 120px); padding-bottom: clamp(40px, min(8vw, 9svh), 120px); }
	.sec h2 { max-width: 18em; }
	.kompl-pic, .floors-pic, .life-pic, .walk-pic, .stages-pic, .meet-pic { position: sticky; top: max(24px, calc((100svh - var(--fit)) / 2 + 20px)); }
	/* 03.11.2026 (Петьо: „много празни пространства в ширина … бели петна“): колоната на снимката е широка колкото
	   снимката при височина --fit, а текстът взима останалото — без празно място до снимката и без рязане. */
	.kompl-g { grid-template-columns: min(var(--fit), 46%) minmax(0, 1fr); }
	/* етажите се избират върху снимката — по-широк кадър (5:4 вместо 4:5), за да се вижда цялата сграда */
	.floors-g { grid-template-columns: minmax(0, 1fr) min(calc(var(--fit) * 1.25), 50%); }
	.floors-pic img { aspect-ratio: 5 / 4; }
	.life-g { grid-template-columns: min(calc(var(--fit) - 20px), 55%) minmax(0, 1fr); }
	.walk-g { grid-template-columns: minmax(0, 1fr) min(calc(var(--fit) * 1.25), 55%); }
	.meet-g, .stages-g { grid-template-columns: minmax(0, 1fr) min(calc(var(--fit) * 4 / 3), 45%); }
	/* списъкът е тесен, снимката взима останалото и се изрязва по височина, вместо да се свива */
	.show-g { grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); }
	.show-pics figure { max-width: none; }
	.show-pics img { max-height: calc(100svh - 190px); }
	/* по-гъсто там, където текстът е дълъг: картите на фазите, етажите, строежът */
	.sec .lead { margin-top: clamp(10px, 2svh, 18px); }
	.ph-g, .types-g { margin-top: clamp(18px, 3.5svh, 36px); }
	.ph-b { padding: clamp(16px, 3svh, 26px) 28px clamp(18px, 3.4svh, 30px); gap: clamp(8px, 1.6svh, 14px); }
	.ph dl div { padding-block: clamp(6px, 1.2svh, 10px); }
	.stack { margin-top: clamp(18px, 3.5svh, 36px); }
	.stack a { min-height: clamp(42px, 7.4svh, 64px); }
	.tl-list { margin-top: clamp(16px, 3.5svh, 30px); }
	.tl-list li { padding-bottom: clamp(10px, 2.4svh, 22px); }
	/* картинките на фазите (с етажите за избор) и плановете на типовете остават в пълен размер — те са информацията,
	   по-добре картата да не се побере цялата, отколкото планът да е дребен (03.11.2026) */
}
@media (min-width: 1081px) {
	/* картата е за избор — тя взима ширината; списъкът вдясно е тесен (03.11.2026, Петьо: „много е малка картинката … а вдясно разтегнато“) */
	.where-g { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
	.grow-g { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); }
	/* картата с годината е по-висока от плана — планът я следва, вместо под него да зее празно */
	.grow-map { position: sticky; top: max(24px, calc((100svh - var(--fit)) / 2 + 20px)); }
	.grow-card dl div { padding-block: clamp(6px, 1.2svh, 9px); }
	.grow-card figure img { aspect-ratio: auto; height: clamp(140px, calc(100svh - 480px), 275px); }
}
/* видеото: на цял ред не се побира в екран, а смалено оставя празно отстрани — затова заглавието вляво, видеото вдясно */
@media (min-width: 901px) {
	.film-s .wrap { display: grid; grid-template-columns: minmax(0, 1fr) min(calc((var(--fit) - 20px) * 16 / 9), 64%); column-gap: clamp(32px, 5vw, 80px); align-items: center; }
	.film-s .film-head { grid-column: 1; grid-row: 1; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; align-self: end; }
	.film-s .film { grid-column: 2; grid-row: 1 / span 2; }
	.film-s .note { grid-column: 1; grid-row: 2; align-self: start; }
}
/* 05.11.2026 (Петьо: празни полета на широк екран, стъпка 3): над 1440 px заглавията, въвеждащият текст и отстоянията между секциите
   растат заедно с рамката (--a2-max, a2-chrome.css) — от същия размер при 1600 px до +15 % при ~1840 px. Под 1440 px нищо не се променя. */
@media (min-width: 1440px) {
	:root { --t89: clamp(89px, 5.5625vw, 102px); --t67: clamp(67px, 4.1875vw, 77px); --t50: clamp(50px, 3.125vw, 58px); --t38: clamp(38px, 2.375vw, 44px); --t28: clamp(28px, 1.75vw, 32px); }
	body { font-size: clamp(16px, 1vw, 18px); }
	.sec { padding-block: clamp(120px, 7.5vw, 138px); }
	.sec .lead { font-size: clamp(18px, 1.125vw, 21px); }
	.hero p { font-size: clamp(21px, 1.3125vw, 24px); }
	.hl h1 { font-size: clamp(76px, 4.75vw, 87px); }
}
/* 12.11.2026 — страница на апартамент: етапи по ЗУТ (завършените — плътна точка), снимки и „Акценти“ от CMS */
.tl-list.zut { margin-top: 8px; }
.tl-list li.done::before { background: var(--blue); }
.tl-list.zut li:last-child::before { background: #fff; box-shadow: inset 0 0 0 3px var(--blue); }
.apics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.apics a { display: block; }
.apics img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.accents { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 10px; }
.accents li { background: var(--grey); display: grid; align-content: start; }
.accents img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.accents div { padding: 18px 20px; }
.accents h3 { font-size: 19px; color: var(--blue); margin: 0 0 6px; }
.accents p { font-size: 15px; margin: 0; }
/* 12.11.2026 — начална: последните новини от CMS */
.hnews { padding-bottom: 0; }
.hn-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.hn-list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hn-list a { display: grid; gap: 8px; align-content: start; height: 100%; padding-bottom: 20px; color: var(--ink); text-decoration: none; background: var(--grey); transition: background .2s; }
.hn-list a:hover { background: var(--sun); }
.hn-pic { display: block; aspect-ratio: 16 / 9; background: var(--grey); overflow: hidden; }
.hn-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hn-list time { padding: 6px 20px 0; font-size: 14px; color: var(--mute); }
.hn-list b { padding: 0 20px; font-size: 18px; line-height: 1.35; color: var(--blue); text-wrap: balance; }
.hn-list a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (max-width: 900px) { .hn-list { grid-template-columns: minmax(0, 1fr); } .hn-list a { grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; padding: 0; } .hn-pic { grid-row: 1 / 3; aspect-ratio: 1; } .hn-list time { padding: 12px 14px 0 0; } .hn-list b { padding: 0 14px 12px 0; font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .hn-list a { transition: none; } }
/* 13.11.2026 — 320 px (етап 6): най-дългата дума в заглавието не се побираше („апартаментите.“ 316 px, „neighbourhood.“ 332 px,
   „Апартамент“ 315 px при 284 px място) и страницата ставаше 333–350 px. При ≤ 340 px заглавията са с една стъпка по-малки;
   overflow-wrap пази от бъдеща дълга дума, въведена в CMS. */
@media (max-width: 340px) {
	:root { --t67: 33px; --t50: 28px; }
	.apt-h h1 { font-size: 36px; }
	.where-steps button { padding: 0; font-size: 12px; } /* 14.11.2026: „Комплексът“ (90 px при 13 px) не се побираше в 87 px и се чупеше по буква */
}
.a2 h1, .a2 h2 { overflow-wrap: break-word; }