/* ============================================================
   DREAM GARDEN — Redesign mockup 2026
   Tokens: paper / ink / slate / navy / sand / sage
   Type:   Prata (display) + Manrope (UI/body)
   ============================================================ */

:root {
  --paper: #F2F1ED;
  --linen: #E9E6DE;
  --ink: #1C242D;
  --ink-60: rgba(28, 36, 45, 0.6);
  --ink-40: rgba(28, 36, 45, 0.4);
  --slate: #3C556E;
  --slate-deep: #2E4054;   /* тъмната степен на синьото от бутоните — футър */
  --navy: #273847;
  --navy-deep: #1E2C38;
  --sand: #D1AE8D;
  --sand-soft: rgba(209, 174, 141, 0.16);
  --sand-deep: #B0834F;
  --sage: #6F8B68;
  --clay: #A8695C;
  --white: #FFFFFF;
  --hairline: rgba(28, 36, 45, 0.12);
  --hairline-light: rgba(242, 241, 237, 0.18);

  --font-display: 'Prata', 'Georgia', serif;
  --font-body: 'Manrope', 'Helvetica Neue', sans-serif;

  --container: min(1520px, 92vw);
  --radius: 18px;
  --radius-sm: 12px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

.container { width: var(--container); margin-inline: auto; }

::selection { background: var(--sand); color: var(--ink); }

/* ---------- Type ---------- */

.display-xl, .display-lg, .display-md {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.display-xl { font-size: clamp(42px, 6vw, 92px); }
.display-lg { font-size: clamp(32px, 4vw, 58px); }
.display-md { font-size: clamp(24px, 2.6vw, 36px); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--sand);
}
.eyebrow--light { color: rgba(242,241,237,0.65); }

.lead { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.6; color: var(--ink-60); }

/* Tabular numbers for all data */
.num { font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 500px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  will-change: transform;
}
.btn svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }

/* liquid fill: цветна завеса (--btn-fill) се вдига отдолу на hover —
   синьо → златно; същият език като CTA лентата на картите */
.btn {
  --btn-fill: var(--sand);
  background-image: linear-gradient(var(--btn-fill), var(--btn-fill));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0%;
}
.btn:hover { background-size: 100% 100%; transform: translateY(-2px); }

/* върху златен фон текстът е винаги бял */
.btn--primary { background-color: var(--slate); color: var(--paper); }
.btn--primary:hover { color: var(--white); }

.btn--ghost { border: 1px solid var(--hairline); color: var(--ink); }
.btn--ghost:hover { border-color: var(--sand); color: var(--white); }

.btn--light { background-color: var(--paper); color: var(--ink); }
.btn--light:hover { color: var(--white); }

.btn--sand { --btn-fill: var(--paper); background-color: var(--sand); color: var(--white); }
.btn--sand:hover { color: var(--ink); }

/* ---------- Header (single type, all pages) ---------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  transition: transform 0.45s var(--ease-out), background 0.45s var(--ease-out),
              border-color 0.45s var(--ease-out), backdrop-filter 0.45s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.header__inner {
  width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 18px;
}

.header.is-hidden { transform: translateY(-100%); }

/* frosted state after scroll; отвореното mega също оцветява header-а —
   прозрачна лента + отворен панел върху hero изглежда счупено (ревизия 3) */
.header.is-frosted,
.header.mega-open {
  background: rgba(242, 241, 237, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--hairline);
}

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 14px; }
.logo__mark {
  width: 44px;
  height: 22px;
  background: var(--sand);
  -webkit-mask: url('/assets/img/dg-logo.png') no-repeat center / contain;
  mask: url('/assets/img/dg-logo.png') no-repeat center / contain;
  transition: background var(--dur) var(--ease-out);
}
/* Official Dream Garden lockup, theme-colorable via mask.
   Header uses dg-logo-header.svg (no bottom rule / PLOVDIV) so the mark can sit larger;
   the footer brandmark keeps the full lockup (dg-logo-blk.svg). */
.logo__full {
  width: 190px;
  height: 62px;
  background: var(--ink);
  -webkit-mask: url('/assets/img/portal/dg-logo-header.svg') no-repeat center / contain;
  mask: url('/assets/img/portal/dg-logo-header.svg') no-repeat center / contain;
  transition: background var(--dur) var(--ease-out);
}
body[data-header="overlay"] .header:not(.is-frosted):not(.mega-open) .logo__full { background: var(--paper); }
.logo__word {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.06em;
  color: var(--ink);
  transition: color var(--dur) var(--ease-out);
}
.logo__word span { display: block; font-family: var(--font-body); font-size: 9.5px; font-weight: 700; letter-spacing: 0.42em; text-transform: uppercase; color: var(--ink-60); transition: color var(--dur) var(--ease-out); }

.nav { display: flex; align-items: center; gap: 34px; }
.nav__link {
  position: relative;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  padding-block: 6px;
  transition: color var(--dur) var(--ease-out);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--sand);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }

.header .btn { padding: 12px 24px; font-size: 14px; }

/* Header over hero (transparent) — body[data-header="overlay"] until frosted */
body[data-header="overlay"] .header:not(.is-frosted):not(.mega-open) .logo__word,
body[data-header="overlay"] .header:not(.is-frosted):not(.mega-open) .nav__link { color: var(--paper); }
body[data-header="overlay"] .header:not(.is-frosted):not(.mega-open) .logo__word span { color: rgba(242,241,237,0.6); }
body[data-header="overlay"] .header:not(.is-frosted):not(.mega-open) .nav__link::after { background: var(--sand); }
/* overlay header: the Apartments button keeps its solid slate look everywhere
   (client rev 2026-07-19 — glass variant retired on /about/ and /belashtitsa/) */
.btn--header { background-color: var(--slate); color: var(--paper); }
.btn--header:hover { color: var(--white); }

.burger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.burger span { width: 24px; height: 2px; background: currentColor; transition: transform .3s var(--ease-out), opacity .3s; color: var(--ink); }
body[data-header="overlay"] .header:not(.is-frosted):not(.mega-open) .burger span { color: var(--paper); }

/* ---------- Page transitions (Swup) ---------- */

.swup-transition-main {
  transition: opacity 0.35s ease, transform 0.35s ease;
}
html.is-animating .swup-transition-main {
  opacity: 0;
  transform: translateY(14px);
}
html.is-changing { cursor: progress; }

/* boot guard: header-ът се крие ОТ ПЪРВИЯ paint (класът идва от inline
   скрипта в <head>), иначе на бавна връзка се вижда за части от секундата,
   после JS го скрива и анимира наново — „появи се→скрий→анимирай" flash.
   main.js маха класа щом playHeaderIntro поеме. Failsafe: ако JS не се
   зареди, header-ът се показва сам след 3s. */
html.dg-boot .header__inner {
  opacity: 0;
  animation: dg-boot-bail 0.4s ease 3s forwards;
}
@keyframes dg-boot-bail { to { opacity: 1; } }

/* униформен вертикален ритъм: страници, чийто main завършва с гол .container
   (каталог, секционните), пазят стандартното section отстояние преди футъра.
   Full-bleed ленти/hero-та имат собствен ритъм и не минават оттук. */
#swup main > .container:last-child { padding-bottom: clamp(56px, 6vw, 96px); }

/* ---------- Reveal animations ---------- */

[data-reveal] { opacity: 0; will-change: transform; }
[data-reveal-img] { overflow: hidden; }
[data-reveal-img] img { clip-path: inset(100% 0% 0% 0%); will-change: clip-path, transform; }

/* ---------- HERO (portal) ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--paper);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20, 28, 36, 0.78) 0%, rgba(20, 28, 36, 0.25) 45%, rgba(20, 28, 36, 0.18) 100%);
}
.hero__content {
  position: relative;
  width: var(--container);
  margin-inline: auto;
  padding-block: 0 56px;
}
.hero__title { max-width: 13ch; margin-top: 18px; }
.hero__sub { max-width: 52ch; margin-top: 22px; font-size: 18px; color: rgba(242,241,237,0.82); }
.hero__cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

/* /about/: само заглавието, залепено в дъното. Клиентска бележка 2026-07-08:
   без тежък fade върху рендера; бележка 2026-07-18 (ревизия 10): текстът пак
   се слива → ПЛЪТНА многослойна сянка на самия текст (тясна за контур + средна
   + широка ambient) и само дискретно повдигнат градиент в текстовата зона. */
.about-hero .hero__media::after {
  background: linear-gradient(to top, rgba(20, 28, 36, 0.58) 0%, rgba(20, 28, 36, 0.22) 32%, rgba(20, 28, 36, 0) 52%);
}
.about-hero .hero__content { padding-bottom: 40px; }
.about-hero .hero__title {
  max-width: 16ch;
  margin-top: 0;
  text-shadow:
    0 2px 4px rgba(20, 28, 36, 0.75),
    0 8px 22px rgba(20, 28, 36, 0.6),
    0 20px 60px rgba(20, 28, 36, 0.55);
}

.hero__stats {
  display: flex;
  gap: clamp(28px, 5vw, 84px);
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline-light);
}
.stat__value { font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 40px); line-height: 1; }
.stat__value em { font-style: normal; color: var(--sand); }
.stat__label { margin-top: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(242,241,237,0.6); }

.hero__scroll {
  position: absolute;
  right: calc((100vw - var(--container)) / 2);
  bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(242,241,237,0.65);
  writing-mode: vertical-rl;
}
.hero__scroll::after {
  content: '';
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--sand), transparent);
  animation: scrollPulse 2.2s var(--ease-out) infinite;
}
@keyframes scrollPulse {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Sections ---------- */

.section { padding-block: clamp(56px, 6vw, 96px); }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: clamp(40px, 5vw, 72px); }
.section__head .display-lg { max-width: 18ch; margin-top: 16px; }

/* ---------- Portal: complexes grid (2-up) ---------- */

.page-portal main { padding-top: 148px; }
@media (max-width: 700px) { .page-portal main { padding-top: 120px; } }

.complexes__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 44px);
}

.complex-card { position: relative; display: block; }
.complex-card__media {
  position: relative;
  aspect-ratio: 16 / 10.5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--linen);
  transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out);
}
.complex-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
/* hover only on linked (clickable) cards: lift + slow zoom + "Разгледай" pill */
a.complex-card:hover .complex-card__media {
  transform: translateY(-6px);
  box-shadow: 0 34px 64px -26px rgba(28, 36, 45, 0.32);
}
a.complex-card:hover .complex-card__media img { transform: scale(1.06); }

/* sand underline sweep on the name */
a.complex-card .complex-card__name {
  display: inline;
  background-image: linear-gradient(var(--sand), var(--sand));
  background-repeat: no-repeat;
  background-position: 0 96%;
  background-size: 0% 2px;
  transition: background-size 0.55s var(--ease-out);
}
a.complex-card:hover .complex-card__name { background-size: 100% 2px; }

a.complex-card .complex-card__media::after {
  content: 'Разгледай  →';
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 11px 20px;
  border-radius: 500px;
  background: rgba(242, 241, 237, 0.94);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  pointer-events: none;
}
a.complex-card:hover .complex-card__media::after { opacity: 1; transform: none; }

.complex-card__phase {
  position: absolute;
  top: 18px; left: 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--paper);
  background: rgba(28, 36, 45, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 7px 14px;
  border-radius: 500px;
}
.complex-card__status {
  position: absolute;
  top: 18px; right: 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 7px 14px;
  border-radius: 500px;
}
.status--selling { background: var(--sand); color: var(--white); }
.status--soldout { background: #A0524A; color: var(--white); }   /* матирано червено (клиентска бележка), без cold ефекти по изображенията */
.status--soon { background: rgba(242,241,237,0.85); color: var(--slate); }

.complex-card__body { padding: 22px 6px 0; }
.complex-card__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.complex-card__desc {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.68;
  color: var(--ink-60);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.complex-card__name { font-family: var(--font-display); font-size: clamp(22px, 1.8vw, 28px); line-height: 1.2; }
.complex-card__meta { margin-top: 6px; font-size: 14.5px; color: var(--ink-60); }
.complex-card__meta .dot { margin-inline: 8px; color: var(--sand); }
.complex-card__avail { font-weight: 700; color: var(--slate); }

.complex-card__arrow {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background 0.5s var(--ease-out), border-color 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.complex-card__arrow svg { width: 16px; height: 16px; transition: transform 0.5s var(--ease-out); }
.complex-card:hover .complex-card__arrow { background: var(--slate); border-color: var(--slate); color: var(--paper); }
.complex-card:hover .complex-card__arrow svg { transform: rotate(-45deg); }

/* ---------- Portal: philosophy band (navy) ---------- */

.philosophy {
  background: var(--navy);
  color: var(--paper);
  border-radius: calc(var(--radius) * 2);
  margin-inline: max(calc((100vw - var(--container)) / 2 - 24px), 12px);
  overflow: hidden;
}
.philosophy__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 5vw, 88px);
  padding: clamp(56px, 6vw, 110px) clamp(28px, 5vw, 96px);
  align-items: center;
}
.philosophy .display-lg { max-width: 15ch; margin-top: 18px; }
.philosophy__text { margin-top: 24px; max-width: 46ch; color: rgba(242,241,237,0.72); }
.philosophy__points { margin-top: 40px; display: grid; gap: 0; }
.philosophy__point {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-block: 18px;
  border-top: 1px solid var(--hairline-light);
}
.philosophy__point strong { font-family: var(--font-display); font-weight: 400; font-size: 24px; color: var(--sand); min-width: 74px; }
.philosophy__point span { font-size: 15px; color: rgba(242,241,237,0.75); }
.philosophy__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 4.6; }
.philosophy__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- CTA band ---------- */

.cta-band { text-align: center; }
.cta-band .display-lg { max-width: 20ch; margin-inline: auto; margin-top: 16px; }
.cta-band .btn { margin-top: 36px; }

/* ---------- Footer ---------- */

.footer {
  background: #28384A;   /* затъмнена степен на синьото (slate hue, без зелен тон) */
  color: var(--paper);
  overflow: hidden;
  padding: clamp(44px, 5vw, 72px) 0 24px;
  margin-top: clamp(48px, 6vw, 96px);
}
body.page-astoria .footer { margin-top: 0; }
/* desktop: футърът изпълва viewport-а; съдържанието се разпределя вертикално */
@media (min-width: 900px) {
  .footer { min-height: 100vh; }
  .footer > .container {
    min-height: calc(100vh - clamp(44px, 5vw, 72px) - 24px);  /* 100vh минус паддинга */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  /* Reveal по модела thayon.com (JS добавя класа): футърът е фиксиран ЗАД
     страницата и не мърда; страницата (main = плътна завеса) се плъзга
     нагоре и го разкрива. .footer-spacer (100vh) отваря скрол-прозореца. */
  .footer--fixed {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    margin-top: 0;
    z-index: 0;   /* под завесата (main) */
  }
  .footer-spacer { height: 100vh; }
  /* min-height: страници с async съдържание (каталога чака PB) не бива да са
     по-къси от viewport-а — иначе фиксираният footer прозира зад празния main
     за части от секундата, преди картите да дойдат */
  #swup main { position: relative; z-index: 1; background: var(--paper); min-height: 100vh; }
}

.footer__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding-bottom: clamp(28px, 3vw, 40px);
}
.footer__cta .display-lg { max-width: 16ch; }
.footer__cta .eyebrow { margin-bottom: 14px; }

.footer__cols {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr 1fr;
  gap: clamp(32px, 4vw, 72px);
  padding-block: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--hairline-light);
  border-bottom: 1px solid var(--hairline-light);
}
.footer__col h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 16px;
}
.footer__col li { margin-bottom: 10px; }
.footer__col a, .footer__col span {
  font-size: 15px;
  color: var(--white);
  transition: color .3s;
}
.footer__col a:hover { color: var(--sand); }
.footer__col .muted { color: rgba(242,241,237,0.45); font-size: 13px; margin-left: 8px; }
/* footer refresh (ревизия 11): Facebook иконка в „Контакти" колоната */
.footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-top: 6px;
  border: 1px solid var(--hairline-light);
  border-radius: 50%;
  color: rgba(242, 241, 237, 0.8);
  transition: color .3s, border-color .3s;
}
.footer__social svg { width: 15px; height: 15px; fill: currentColor; }
.footer__social:hover { border-color: var(--sand); color: var(--sand); }
/* ревизия 13: локация иконка (Google Maps навигация) до комплекс с
   координати — отделен линк след името, само DG1-4 */
.footer__col .footer__geo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 28px;
  height: 28px;
  margin-left: 4px;
  color: rgba(242, 241, 237, 0.55);
}
.footer__col .footer__geo svg { width: 18px; height: 18px; fill: currentColor; }
.footer__col .footer__geo:hover { color: var(--sand); }
.footer__list--complexes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(24px, 3vw, 48px);
}
@media (max-width: 1100px) { .footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  /* мобилен footer: изявление → бранд → линкове (2 колони) → © ;
     CTA бутонът е излишен на телефон (контактите са ред по-долу) */
  .footer > .container { display: flex; flex-direction: column; }
  .footer__cta { order: 0; padding-bottom: 6px; }
  .footer__cta .btn { display: none; }
  .footer__brand { order: 1; padding: 10px 0 26px; }
  .footer__brandmark { width: min(280px, 72vw); margin-inline: 0; }
  /* логото носи собствена долна черта в графиката + bottom-ът има border-top —
     линиите на .footer__cols само дублират */
  .footer__cols { order: 2; grid-template-columns: 1fr 1fr; gap: 28px 18px; border-top: 0; border-bottom: 0; padding-bottom: 8px; }
  .footer__cols .footer__col:last-child { grid-column: 1 / -1; }
  .footer__list--complexes { grid-template-columns: 1fr; }
  .footer__bottom { order: 3; }
}

/* Giant brand sign-off */
.footer__brand { padding: clamp(30px, 4vw, 52px) 0 clamp(20px, 3vw, 34px); }
.footer__brandmark {
  display: block;
  width: min(460px, 72vw);
  aspect-ratio: 494.6 / 181.6;
  margin-inline: auto;
  background: var(--sand);
  -webkit-mask: url('/assets/img/portal/dg-logo-blk.svg') no-repeat center / contain;
  mask: url('/assets/img/portal/dg-logo-blk.svg') no-repeat center / contain;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--hairline-light);
  font-size: 13.5px;
  color: rgba(255,255,255,0.72);
}

/* ---------- APARTMENTS PAGE ---------- */

.page-apartments main { padding-top: 148px; }

.apt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.apt-head__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.apt-head__count { font-size: 15px; color: var(--ink-60); }
.apt-head__count strong { color: var(--slate); font-size: 17px; }

/* Layout: filters left, grid right */
.apt-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(36px, 4vw, 72px);
  align-items: start;
}

.apt-sidebar {
  display: grid;
  gap: 30px;
  align-self: start;
}
.filter-group h4 {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-40);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 16px;
  border-radius: 500px;
  border: 1px solid var(--hairline);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-60);
  transition: all 0.3s var(--ease-out);
  white-space: nowrap;
}
.chip:hover { border-color: var(--sand); color: var(--ink); }
.chip.is-active { background: var(--slate); border-color: var(--slate); color: var(--paper); }
.chip.is-disabled { opacity: 0.32; pointer-events: none; }
.filterbar__clear {
  justify-self: start;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-60);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--sand);
  transition: color .3s;
}
.filterbar__clear:hover { color: var(--ink); }

/* Mobile filters toggle */
.apt-filter-toggle { display: none; }
@media (max-width: 1100px) {
  .apt-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 20px;
    border: 1px solid var(--hairline);
    border-radius: 500px;
    font-size: 14.5px;
    font-weight: 700;
  }
  .apt-filter-toggle svg { width: 12px; height: 12px; transition: transform 0.3s var(--ease-out); }
  .apt-layout.filters-open .apt-filter-toggle svg { transform: rotate(180deg); }
  .apt-layout .apt-sidebar { display: none; }
  .apt-layout.filters-open .apt-sidebar { display: grid; }
}

/* Grid: 2-up by default (13" friendly), 3-up on wide screens */
.apt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  min-height: 70vh;   /* скелетна височина, докато PB картите пристигнат — без layout скок и без прозиращ footer */
  align-content: start;   /* ревизия 15: иначе при 1-2 резултата редът се разтяга до 70vh и картите зейват */
}
@media (min-width: 1600px) { .apt-grid { grid-template-columns: repeat(3, 1fr); } }

/* Card "Монолит" — 3D план герой, hover: 2D crossfade + CTA лента отдолу нагоре */
.apt-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.5s var(--ease-out), opacity 0.4s;
}
.apt-card:hover { border-color: rgba(28, 36, 45, 0.26); }

.apt-card__plan {
  position: relative;
  aspect-ratio: 16 / 11;
  background: var(--white);
  overflow: hidden;
}
.apt-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: clamp(26px, 2.6vw, 44px);
  object-fit: contain;
  transition: opacity 0.55s var(--ease-out), transform 0.8s var(--ease-out);
}
.apt-card__img--2d { opacity: 0; transform: scale(1.035); }
.apt-card:hover .apt-card__img--3d { opacity: 0; }
.apt-card:hover .apt-card__img--2d { opacity: 1; transform: scale(1); }

/* single-plan property (no 3D render): one image, gentle zoom on hover */
.apt-card--single:hover .apt-card__img { transform: scale(1.045); }

.apt-card__body { display: flex; flex-direction: column; flex: 1; padding: 4px 24px 20px; }
.apt-card__toprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.apt-card__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand-deep);
  white-space: nowrap;
}
.apt-card__name { font-family: var(--font-display); font-size: 23px; font-weight: 400; margin-bottom: 15px; }

.apt-card__specs { display: flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--ink-60); }
.apt-card__specs span { white-space: nowrap; }
.apt-card__specs span + span { border-left: 1px solid var(--hairline); margin-left: 13px; padding-left: 13px; }

/* CTA лента по цялата ширина; slate завеса се вдига отдолу на hover */
.apt-card__ctaband {
  position: relative;
  overflow: hidden;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 24px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sand-deep);   /* златният акцент */
}
.apt-card__ctaband::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--slate);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s var(--ease-out);
}
.apt-card__ctatext, .apt-card__ctaarr { position: relative; z-index: 1; transition: color 0.35s var(--ease-out); }
.apt-card__ctaarr { display: grid; place-items: center; }
.apt-card__ctaarr svg { width: 15px; height: 15px; transition: transform 0.45s var(--ease-out); }
.apt-card:hover .apt-card__ctaband::before { transform: scaleY(1); }
.apt-card:hover .apt-card__ctatext, .apt-card:hover .apt-card__ctaarr { color: var(--paper); }
.apt-card:hover .apt-card__ctaarr svg { transform: translateX(5px); }

/* sold: ЦЯЛАТА карта grayed out — много лек сив фон + monochrome, без opacity */
.apt-card.is-sold { cursor: default; filter: grayscale(1); background: #F2F3F4; }
.apt-card.is-sold .apt-card__plan { background: transparent; }
.apt-card.is-sold .apt-card__img { transition: none; mix-blend-mode: multiply; }
.apt-card.is-sold:hover { border-color: var(--hairline); }
.apt-card.is-sold .apt-card__ctaband { color: var(--ink-40); }
.apt-card.is-sold:hover .apt-card__ctaband::before { transform: scaleY(0); }
.apt-card.is-sold:hover .apt-card__ctatext { color: var(--ink-40); }

/* status dot — карти + sheet */
.apt-card__status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.apt-card__status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-available { color: #5F7B58; }
.st-reserved { color: var(--sand-deep); }
.st-sold { color: var(--ink-40); }

.apt-empty { padding: 80px 0; text-align: center; color: var(--ink-60); display: none; }
.apt-empty .display-md { color: var(--ink); margin-bottom: 10px; }

/* ---------- Active filters bar — floating, центриран долу във viewport-а ---------- */
.afbar {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 80;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: min(780px, calc(100vw - 32px));
  padding: 10px 16px;
  background: rgba(242, 241, 237, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--hairline);
  border-radius: 26px;
  box-shadow: 0 22px 48px -20px rgba(20, 28, 36, 0.38);
  transform: translate(-50%, 18px);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.45s var(--ease-out), opacity 0.35s var(--ease-out), visibility 0s linear 0.45s;
}
.afbar.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  transition: transform 0.45s var(--ease-out), opacity 0.35s var(--ease-out), visibility 0s;
}
.afbar__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-right: 2px;
}
.afbar__chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.afbar__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 15px;
  border-radius: 500px;
  background: var(--white);
  border: 1px solid var(--hairline);
  font-size: 13px;
  font-weight: 700;
  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.afbar__chip svg { width: 11px; height: 11px; opacity: 0.45; transition: opacity 0.3s; }
.afbar__chip:hover { border-color: var(--clay); color: var(--clay); }
.afbar__chip:hover svg { opacity: 1; }
.afbar__clear {
  font-size: 13px;
  font-weight: 700;
  color: var(--slate);
  padding: 8px 10px;
  white-space: nowrap;
  transition: color 0.3s var(--ease-out);
}
.afbar__clear:hover { color: var(--sand-deep); }

/* ---------- PROPERTY SHEET v2 — full-viewport takeover, two tabs ----------
   Rises from the bottom edge over the page; header bar carries the tabs
   („Детайли" / the complex name) + unit prev/next + ✕. Tab 1: plan hero left,
   info column right. Tab 2: photo slider left, complex info right. */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20, 28, 36, 0.55);
  /* NO backdrop-filter here, ever: Chrome's implementation (unlike
     Safari's native CA one) is expensive both per-frame and on add/remove —
     dropping the blur at close start forced a full-screen re-composite on
     the slide's first frame (Chrome-only jank, Safari was clean). The
     slightly deeper veil keeps the dimming contrast instead. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.sheet {
  position: fixed;
  inset: 0;
  z-index: 101;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  /* FLAT on purpose (2026-07-19): a border-radius clip on this layer forces
     Chrome into a masked render surface — the sheet contains composited
     scrollers, so every animation frame re-composites a viewport-sized
     masked texture (Safari clips natively, hence Safari was smooth and
     Chrome janky on every Mac tested). Rounded crest sacrificed for a
     compositor-direct slide. */
  border-radius: 0;
  transform: translateY(100%);
  visibility: hidden;
  overflow: hidden;
  outline: none;
  will-change: transform;
  /* close curve: gentle acceleration, soft landing at the bottom edge —
     the old ease-in (0.6,0,0.7,0.3) peaked its velocity in the very last,
     most visible moment, so a single dropped frame there read as a snap */
  transition: transform 0.6s cubic-bezier(0.55, 0.06, 0.35, 1), visibility 0s linear 0.6s;
}
body.sheet-open .sheet {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.8s var(--ease-out), visibility 0s;
}
body.sheet-open .sheet-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* NB (2026-07-19): the close is deliberately an OPAQUE slide for both tabs.
   A fade exit was tried for the heavy complex tab and scrapped: group
   opacity makes the whole viewport translucent, so the GPU must blend
   page × veil × sheet at Retina size every frame AND rasterize the entire
   occluded page on frame one — chokes integrated GPUs. An opaque slide
   blends nothing and reveals the page progressively. */

/* --- header bar --- */
.sheet__bar {
  flex: none;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  height: calc(64px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) clamp(18px, 2.6vw, 40px) 0;
  border-bottom: 1px solid var(--hairline);
}
.sheet__tabs { display: flex; gap: clamp(18px, 2.4vw, 34px); }
.sheet__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
  transition: color 0.3s var(--ease-out);
}
.sheet__tab::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--sand-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
.sheet__tab:hover, .sheet__tab.is-active { color: var(--ink); }
.sheet__tab.is-active::after { transform: scaleX(1); }
/* dynamic complex-name label: never wraps, truncates as a last resort */
.sheet__tab { white-space: nowrap; min-width: 0; }
.sheet__tab-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42vw;
}

.sheet__bar-end { display: flex; align-items: center; gap: 10px; }
.sheet__bar-sep { width: 1px; height: 24px; background: var(--hairline); }
.sheet__nav { display: flex; align-items: center; gap: 6px; }
.sheet__counter { font-size: 13.5px; color: var(--ink-60); min-width: 54px; text-align: center; }
.sheet__navbtn, .sheet__close {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  display: grid;
  place-items: center;
  flex: none;
  transition: all .3s var(--ease-out);
}
.sheet__navbtn:hover, .sheet__close:hover { background: var(--slate); border-color: var(--slate); color: var(--paper); }
.sheet__navbtn:disabled { opacity: 0.3; pointer-events: none; }
.sheet__navbtn svg, .sheet__close svg { width: 15px; height: 15px; }

/* --- stage: two stacked full-size panels, soft crossfade on switch --- */
.sheet__stage { position: relative; flex: 1; min-height: 0; }
.sheet__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.28s var(--ease-out), transform 0.32s var(--ease-out), visibility 0s linear 0.32s;
}
.sheet__panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 0.38s var(--ease-out) 0.06s, transform 0.44s var(--ease-out) 0.06s, visibility 0s;
}

/* --- tab 1: the apartment — the plan is the hero of the layout --- */
.sheet__panel--unit { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(400px, 34vw); }

.sheet__plan {
  position: relative;
  background: var(--white);
  min-height: 0;
}
/* absolute fill (grid auto-track makes % heights unreliable); the padding
   lives ON the img — object-fit positions the drawing inside its content box */
.sheet__plan img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: clamp(28px, 4.6vw, 88px);
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.sheet__plan img.is-loaded { opacity: 1; }
.sheet__plan-tools {
  position: absolute;
  top: 18px; left: 18px;
  display: flex;
  gap: 8px;
  z-index: 2;
}
.plan-toggle {
  display: flex;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 500px;
  padding: 3px;
}
.plan-toggle button {
  padding: 7px 16px;
  border-radius: 500px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-60);
  transition: all .25s;
}
.plan-toggle button.is-active { background: var(--slate); color: var(--paper); }

.sheet__info {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-left: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  padding: clamp(30px, 4.5vh, 56px) clamp(26px, 2.6vw, 54px) clamp(22px, 3vh, 40px);
}
.sheet__complex.eyebrow { color: var(--ink-40); }
.sheet__name { font-family: var(--font-display); font-size: clamp(34px, 3vw, 50px); line-height: 1.08; margin-top: 14px; }
.sheet__status { margin-top: 14px; align-self: flex-start; }

.sheet__specs { margin-top: clamp(20px, 3.4vh, 36px); }
.spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 13px;
  border-bottom: 1px solid var(--hairline);
  font-size: 15px;
}
.spec-row dt { color: var(--ink-60); }
.spec-row dd { font-weight: 700; }

/* CTA row pinned to the column bottom on tall screens (flex column + auto) */
.sheet__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: clamp(22px, 3vh, 34px);
}
.sheet__foot .btn {
  flex: 1 1 auto;
  justify-content: center;
  padding: 13px 22px;
  font-size: 13.5px;
  gap: 8px;
}
.sheet__foot .btn svg { width: 14px; height: 14px; }

/* --- tab 2: the complex — scrolling editorial mini-page (cxp) --- */
.sheet__panel--cx { overflow-y: auto; overscroll-behavior: contain; }
.cxp { min-height: 100%; }
.cxp__wrap { width: min(1180px, 90%); margin-inline: auto; }
.cxp__sec { padding-top: clamp(40px, 6vh, 72px); }
.cxp__sec--cta {
  text-align: center;
  padding-bottom: clamp(48px, 7vh, 88px);
}
.cxp__sec--cta .btn { padding: 16px 34px; font-size: 14.5px; }

/* heading block ABOVE the photos — text never sits on the image */
.cxp__head { padding-top: clamp(36px, 5.5vh, 64px); padding-bottom: clamp(26px, 4vh, 44px); }
.cxp__title--lead { font-size: clamp(30px, 3vw, 50px); max-width: 22ch; }
.cxp__meta {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-60);
}

/* clean full-bleed photo band (slider only: arrows + counter) */
.cxp__band {
  position: relative;
  height: clamp(340px, 48vh, 540px);
  background: var(--linen);
  overflow: hidden;
}

/* lead description under the band */
.cxp__lead { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.7; color: var(--ink-60); max-width: 72ch; }

/* editorial split: display tagline left, body copy right */
.cxp__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}
.cxp__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 40px);
  line-height: 1.14;
  margin-top: 14px;
}
.cxp__body { font-size: 16.5px; line-height: 1.7; color: var(--ink-60); padding-top: 6px; }

/* key facts strip */
.cxp__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(30px, 4.5vh, 52px);
  padding-top: clamp(22px, 3vh, 32px);
  border-top: 1px solid var(--hairline);
}
.cxp__stat-v { display: block; font-family: var(--font-display); font-size: clamp(30px, 2.6vw, 44px); line-height: 1; color: var(--slate); }
.cxp__stat-l {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-60);
}

/* numbered feature grid */
.cxp__features { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.4vw, 40px); }
.cxp__feature { border-top: 1px solid var(--hairline); padding-top: 18px; }
.cxp__idx { font-family: var(--font-display); font-size: 15px; color: var(--sand-deep); }
.cxp__feature h5 { font-family: var(--font-display); font-weight: 400; font-size: 19px; margin-top: 10px; }
.cxp__feature p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--ink-60); }

/* static location map: whole surface links to the complex page; the inner
   frame keeps the SVG's exact aspect so the % pins stay aligned */
.cxp__map {
  position: relative;
  display: block;
  margin-top: clamp(24px, 3.6vh, 40px);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.cxp__map-scroll { display: block; overflow-x: auto; }
.cxp__map-frame {
  display: block;
  position: relative;
  aspect-ratio: 2971 / 1671;
  background: #E5E2DA;   /* the SVG's own ground tone — no flash while it loads */
}
.cxp__map-frame img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cxp__map-hint {
  position: absolute;
  right: 14px; bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 500px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.cxp__map-hint svg { width: 13px; height: 13px; }
.cxp__map:hover .cxp__map-hint { background: var(--slate); color: var(--paper); }
.cxp__pin {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--poi, var(--slate));
  border: 2px solid var(--white);
  box-shadow: 0 2px 8px rgba(20, 28, 36, 0.35);
}
/* halo ring highlighting the open complex's own (SVG-drawn) pin */
.cxp__pin-self {
  position: absolute;
  width: 46px; height: 46px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid var(--sand-deep);
  background: rgba(209, 174, 141, 0.22);
  animation: cxp-halo 2.4s ease-in-out infinite;
}
@keyframes cxp-halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(176, 131, 79, 0.35); }
  50% { box-shadow: 0 0 0 10px rgba(176, 131, 79, 0); }
}
.cxp__pin--shop, .cxp__poi--shop { --poi: var(--sand-deep); }
.cxp__pin--edu, .cxp__poi--edu { --poi: var(--slate); }
.cxp__pin--health, .cxp__poi--health { --poi: var(--clay); }
.cxp__pin--road, .cxp__poi--road { --poi: var(--sage); }

/* amenity chips (double as the pin color legend) */
.cxp__pois { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 16px; }
.cxp__poi {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  border-radius: 500px;
  background: var(--white);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-60);
}
.cxp__poi span { width: 8px; height: 8px; border-radius: 50%; background: var(--poi, var(--slate)); }

/* auto-drifting filmstrip: uniform cells side by side, seamless loop;
   drag scrubs, hover pauses; static scroll strip under reduced motion */
.cxfs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}
.cxfs.is-drag { cursor: grabbing; }
.cxfs--static {
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: auto;
  cursor: default;
}
.cxfs__track {
  display: flex;
  gap: 6px;
  height: 100%;
  width: max-content;
  will-change: transform;
}
.cxfs__item {
  flex: none;
  height: 100%;
  aspect-ratio: 3 / 2;
  margin: 0;
  background: var(--linen);
  overflow: hidden;
}
.cxfs__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  user-select: none;
  -webkit-user-drag: none;
}
.cxfs__item img.is-loaded { opacity: 1; }
.cxfs__nav {
  position: absolute;
  right: 18px; bottom: 18px;
  display: flex;
  gap: 8px;
  z-index: 3;
}
.cxfs__btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(20, 28, 36, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--paper);
  display: grid;
  place-items: center;
  transition: all 0.3s var(--ease-out);
}
.cxfs__btn:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.cxfs__btn svg { width: 15px; height: 15px; }

/* skeleton (Tab 2 while its data loads) + PB-down fallback */
.cxp--skel .cxp__band { height: clamp(280px, 42vh, 480px); }
.cxp--skel .cxp__wrap { padding-top: clamp(24px, 4vh, 44px); }
.cxp--skel .skel {
  display: block;
  height: 14px;
  border-radius: 6px;
  background: var(--linen);
  margin-top: 16px;
  animation: cx-skel 1.2s ease-in-out infinite;
}
.cxp--skel .skel--eyebrow { width: 120px; }
.cxp--skel .skel--title { width: 70%; height: 34px; margin-top: 20px; }
.cxp--skel .skel--short { width: 45%; }
@keyframes cx-skel { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.cx-fallback {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 40px;
  color: var(--ink-60);
  text-align: center;
}

/* --- sheet v2 on small screens: stacked takeover, floating nav pill --- */
@media (max-width: 900px) {
  .sheet__bar { height: calc(58px + env(safe-area-inset-top, 0px)); padding-inline: 16px; }
  .sheet__bar-sep { display: none; }
  /* unit nav → floating pill bottom-center (thumb reach); ✕ stays in the bar */
  .sheet__nav {
    position: absolute;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 6;
    padding: 5px;
    gap: 2px;
    border-radius: 500px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--hairline);
    box-shadow: 0 14px 40px -14px rgba(20, 28, 36, 0.4);
  }
  .sheet__navbtn { border: 0; width: 42px; height: 42px; }

  .sheet__panel--unit {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* fixed-height plan pane with native pinch-zoom (v1 mobile pattern) */
  .sheet__plan {
    flex: none;
    height: 46svh;
    display: grid;
    place-items: center;
    padding: 20px;
    overflow: auto;
    touch-action: pan-x pan-y pinch-zoom;
  }
  /* static natural-size img again — pinch-zoom pans within the scroll pane */
  .sheet__plan img {
    position: static;
    inset: auto;
    padding: 0;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(46svh - 40px);
    margin: auto;
    touch-action: pinch-zoom;
  }
  .sheet__plan-tools { top: 12px; left: 12px; }
  .sheet__info {
    overflow: visible;
    border-left: 0;
    border-top: 1px solid var(--hairline);
    padding: 26px 20px calc(92px + env(safe-area-inset-bottom, 0px));
  }
  .sheet__name { font-size: clamp(30px, 8vw, 38px); }

  /* tab 2 mini-page stacks; last section clears the floating nav pill */
  .cxp__head { padding-top: 30px; padding-bottom: 24px; }
  .cxp__band { height: clamp(240px, 36vh, 380px); }
  .cxfs__item { aspect-ratio: 4 / 3; }
  .cxp__sec { padding-top: 38px; }
  .cxp__sec--cta { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  .cxp__sec--cta .btn { width: 100%; justify-content: center; }
  .cxp__grid { grid-template-columns: 1fr; gap: 16px; }
  .cxp__stats { gap: 22px 34px; }
  .cxp__features { grid-template-columns: 1fr 1fr; }
  /* map: horizontal pan strip (the wide SVG stays readable) */
  .cxp__map-frame { width: 185vw; }
  .cxp--skel .cxp__band { height: clamp(200px, 28vh, 300px); }
}

/* narrow phones: both tabs + ✕ share the bar — tighten, truncate as last resort */
@media (max-width: 560px) {
  .sheet__tabs { gap: 14px; }
  .sheet__tab { font-size: 11.5px; letter-spacing: 0.07em; }
  .sheet__tab-text { max-width: calc(100vw - 175px); }
}

/* ---------- ASTORIA PAGE ---------- */

.a-hero {
  position: relative;
  height: 100svh;
  overflow: hidden;
  color: var(--paper);
  background: var(--navy-deep);
}
.a-hero__canvas { position: absolute; inset: 0; }
.a-hero__canvas img { width: 100%; height: 100%; object-fit: cover; }
.a-hero__canvas::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,28,36,0.72) 0%, transparent 38%);
  pointer-events: none;
}

/* SVG overlay */
.im-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.im-svg g { pointer-events: all; cursor: pointer; }
.im-svg g polygon, .im-svg g path {
  fill: rgba(209, 174, 141, 0);
  stroke: rgba(209, 174, 141, 0);
  stroke-width: 2.5;
  transition: fill 0.35s ease, stroke 0.35s ease;
}
.im-svg g:hover polygon, .im-svg g:hover path,
.im-svg g.is-lit polygon, .im-svg g.is-lit path {
  fill: rgba(209, 174, 141, 0.46);
  stroke: rgba(209, 174, 141, 0.95);
}
.im-svg g.is-muted { cursor: default; }
.im-svg g.is-muted:hover polygon, .im-svg g.is-muted:hover path {
  fill: rgba(242, 241, 237, 0.12);
  stroke: rgba(242, 241, 237, 0.4);
}

/* Floor tooltip */
.floor-tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: rgba(242, 241, 237, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--ink);
  border-radius: 14px;
  padding: 14px 20px;
  min-width: 190px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  box-shadow: 0 18px 44px -16px rgba(20, 28, 36, 0.4);
}
.floor-tip.is-visible { opacity: 1; transform: translateY(0); }
.floor-tip__floor { font-family: var(--font-display); font-size: 20px; }
.floor-tip__row { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-60); }
.floor-tip__row .dot-a { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); }
.floor-tip__row .dot-r { width: 8px; height: 8px; border-radius: 50%; background: var(--sand); }
.floor-tip__hint { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }

.a-hero__title {
  position: absolute;
  left: calc((100vw - var(--container)) / 2);
  bottom: 52px;
  z-index: 4;
  pointer-events: none;
}
.a-hero__title .eyebrow { color: rgba(242,241,237,0.7); }
.a-hero__title h1 { margin-top: 14px; }
.a-hero__title p { margin-top: 12px; max-width: 44ch; color: rgba(242,241,237,0.78); font-size: 16.5px; }

.a-hero__legend {
  position: absolute;
  right: calc((100vw - var(--container)) / 2);
  bottom: 56px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(242,241,237,0.85);
  background: rgba(28, 36, 45, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--hairline-light);
  padding: 12px 20px;
  border-radius: 500px;
}
.a-hero__legend .pulse {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--sand);
  animation: legendPulse 2s ease-out infinite;
}
@keyframes legendPulse {
  0% { box-shadow: 0 0 0 0 rgba(209, 174, 141, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(209, 174, 141, 0); }
  100% { box-shadow: 0 0 0 0 rgba(209, 174, 141, 0); }
}

/* Astoria intro */
.a-intro__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.a-intro__grid .display-lg { margin-top: 16px; max-width: 16ch; }
.a-intro__text p + p { margin-top: 18px; }
.a-intro__text { color: var(--ink-60); }
.a-intro__stats {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: clamp(24px, 3vw, 56px);
  justify-content: start;
}
.a-intro__stats .stat__value { color: var(--slate); }
.a-intro__stats .stat__label { color: var(--ink-40); }

/* Gallery strip */
.gallery-strip {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: calc((100vw - var(--container)) / 2);
  scrollbar-width: none;
}
.gallery-strip::-webkit-scrollbar { display: none; }
.gallery-strip figure {
  flex: 0 0 min(640px, 78vw);
  scroll-snap-align: center;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 10.5;
}
.gallery-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.gallery-strip figure:hover img { transform: scale(1.03); }

/* Types switcher */
.types { background: var(--linen); }
.types__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 5vw, 90px); align-items: center; }
.types__list { margin-top: 30px; }
.type-item {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 22px;
  border-bottom: 1px solid var(--hairline);
  transition: padding-left 0.4s var(--ease-out);
}
.type-item:first-child { border-top: 1px solid var(--hairline); }
.type-item h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 2vw, 27px); color: var(--ink-40); transition: color 0.4s; }
.type-item span { font-size: 14px; font-weight: 700; color: var(--ink-40); transition: color 0.4s; }
.type-item.is-active { padding-left: 14px; }
.type-item.is-active h3 { color: var(--ink); }
.type-item.is-active span { color: var(--slate); }
.types__media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3.4; }
.types__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s var(--ease-out);
}
.types__media img.is-active { opacity: 1; }

/* Astoria CTA */
.a-cta {
  background: var(--navy);
  color: var(--paper);
  border-radius: calc(var(--radius) * 2);
  margin-inline: max(calc((100vw - var(--container)) / 2 - 24px), 12px);
  padding: clamp(56px, 6vw, 100px) clamp(28px, 5vw, 96px);
  text-align: center;
}
.a-cta .display-lg { max-width: 22ch; margin-inline: auto; margin-top: 16px; }
.a-cta .btn { margin-top: 36px; }


/* ---------- Header mega menu (Комплекси) ---------- */

.nav__link--mega { display: inline-flex; align-items: center; gap: 7px; }
.nav__link--mega svg { width: 11px; height: 11px; transition: transform 0.3s var(--ease-out); }
.header.mega-open .nav__link--mega svg { transform: rotate(180deg); }

.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(242, 241, 237, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.header.mega-open .mega {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.mega__inner {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 0.85fr 2.15fr;
  gap: clamp(28px, 4vw, 72px);
  padding-block: clamp(28px, 3vw, 44px);
}
.mega__aside .display-md { margin-top: 12px; color: var(--ink); }
.mega__aside-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--slate);
}
.mega__aside-link svg { width: 13px; height: 13px; transition: transform 0.3s var(--ease-out); }
.mega__aside-link:hover svg { transform: translateX(4px); }

.mega__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 24px;
}
.mega__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px;
  margin: -8px;
  border-radius: var(--radius);
  opacity: 0;
  transform: translateY(10px);
  transition: background 0.3s var(--ease-out), opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.header.mega-open .mega__item { opacity: 1; transform: none; }
.header.mega-open .mega__item:nth-child(1) { transition-delay: 0.05s; }
.header.mega-open .mega__item:nth-child(2) { transition-delay: 0.10s; }
.header.mega-open .mega__item:nth-child(3) { transition-delay: 0.15s; }
.header.mega-open .mega__item:nth-child(4) { transition-delay: 0.20s; }
.header.mega-open .mega__item:nth-child(5) { transition-delay: 0.25s; }
.header.mega-open .mega__item:nth-child(6) { transition-delay: 0.30s; }
.mega__item:hover { background: rgba(28, 36, 45, 0.05); }
.mega__thumb {
  flex: 0 0 86px;
  aspect-ratio: 16 / 11;
  border-radius: 8px;
  overflow: hidden;
  background: var(--linen);
}
.mega__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.mega__item:hover .mega__thumb img { transform: scale(1.06); }
.mega__name { display: block; font-family: var(--font-display); font-size: 16.5px; color: var(--ink); line-height: 1.25; }
.mega__meta { display: block; font-size: 12.5px; color: var(--ink-60); margin-top: 3px; }
.mega__meta .avail { color: var(--slate); font-weight: 700; }
/* разпродаден = само червен badge/текст; никакъв filter върху изображението (клиентска бележка 2026-07-08) */
.mega__item.is-soldout .mega__meta { color: #A0524A; }

/* header needs to anchor the panel */
.header { will-change: transform; }

@media (max-width: 900px) { .mega { display: none; } }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .philosophy__inner, .a-intro__grid, .types__grid { grid-template-columns: 1fr; }
  .philosophy__media { aspect-ratio: 16 / 10; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: flex; }
  .apt-layout { grid-template-columns: 1fr; }
  .apt-sidebar { grid-template-columns: 1fr 1fr; }
  .a-hero__legend { display: none; }
}

@media (max-width: 700px) {
  .complexes__grid { grid-template-columns: 1fr; }
  .apt-grid { grid-template-columns: 1fr; }
  .apt-sidebar { grid-template-columns: 1fr; }
  .hero__stats { flex-wrap: wrap; gap: 24px; }
  .hero__scroll { display: none; }
  .section__head { flex-direction: column; align-items: flex-start; }
  .page-apartments main { padding-top: 120px; }
  .footer__grid { grid-template-columns: 1fr; }
  .a-hero { height: 88svh; }
  .a-hero__title h1 { font-size: 38px; }
}

/* Mobile nav panel — full-screen navy; top ред (лого + кръгъл ✕),
   плоски линкове с hairline-и, контактна лента долу. Елементите
   влизат със stagger само при отваряне (delay-ите живеят под
   body.mnav-open); при затваряне панелът просто избледнява. */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--navy-deep);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  padding: 20px 7vw calc(24px + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
body.mnav-open .mnav { opacity: 1; pointer-events: auto; }
body.mnav-open { overflow: hidden; }

.mnav__top { display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.mnav__logo {
  display: block;
  width: 112px;
  aspect-ratio: 494.6 / 181.6;
  background: var(--sand);
  -webkit-mask: url('/assets/img/portal/dg-logo-blk.svg') no-repeat center / contain;
  mask: url('/assets/img/portal/dg-logo-blk.svg') no-repeat center / contain;
}
.mnav__close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--hairline-light);
  color: var(--paper);
  background: transparent;
  display: grid;
  place-items: center;
  transition: border-color 0.3s, color 0.3s;
}
.mnav__close svg { width: 14px; height: 14px; display: block; }
.mnav__close:hover { border-color: var(--sand); color: var(--sand); }

.mnav__links { display: flex; flex-direction: column; margin-block: auto; overflow-y: auto; }
.mnav__links a {
  font-family: var(--font-display);
  font-size: clamp(27px, 7.2vw, 36px);
  line-height: 1.15;
  padding-block: 13px;
  border-bottom: 1px solid rgba(242, 241, 237, 0.08);
  transition: color 0.3s;
}
.mnav__links a:last-child { border-bottom: 0; }
.mnav__links a:hover { color: var(--sand); }

/* ревизия 14: „Комплекси" акордеон — toggle в стила на главните пунктове,
   подточките по-малки (body шрифт) със статус отметка; плавно разгъване
   през grid-template-rows */
.mnav__subtoggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid rgba(242, 241, 237, 0.08);
  background: none;
  font-family: var(--font-display);
  font-size: clamp(27px, 7.2vw, 36px);
  line-height: 1.15;
  color: var(--paper);
  text-align: left;
  transition: color 0.3s;
}
.mnav__subtoggle svg { width: 17px; height: 17px; flex: none; transition: transform 0.35s var(--ease-out); }
.mnav__subtoggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mnav__subtoggle:hover { color: var(--sand); }
.mnav__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease-out);
}
.mnav__sub.is-open { grid-template-rows: 1fr; }
.mnav__sub-inner { overflow: hidden; min-height: 0; }
.mnav__links .mnav__sub-inner a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  padding: 11px 0 11px 14px;
  border-bottom: 0;
}
.mnav__links .mnav__sub-inner a:first-child { padding-top: 6px; }
.mnav__sub-meta {
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(242, 241, 237, 0.45);
}
.mnav__sub-meta--avail { color: var(--sand); }

.mnav__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline-light);
}
.mnav__meta a { font-size: 15px; font-weight: 600; color: rgba(242, 241, 237, 0.85); transition: color 0.3s; }
.mnav__meta a:hover { color: var(--sand); }

/* stagger: скрити по подразбиране, влизат отдолу при mnav-open.
   Ревизия 14: децата на .mnav__links вече са a/button/div (акордеонът) —
   stagger-ът е по ДИРЕКТНИ деца, подточките в акордеона пътуват със
   своя wrapper (без собствен stagger). */
.mnav__top, .mnav__links > *, .mnav__meta {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1);
}
body.mnav-open .mnav__top, body.mnav-open .mnav__links > *, body.mnav-open .mnav__meta {
  opacity: 1;
  transform: none;
}
/* .mnav__sub комбинира transform stagger-а с grid анимацията си — на
   transition property-тата не си пречат (grid-template-rows е отделно) */
.mnav__sub {
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1),
              grid-template-rows 0.45s var(--ease-out);
}
body.mnav-open .mnav__links > :nth-child(1) { transition-delay: 0.07s; }
body.mnav-open .mnav__links > :nth-child(2) { transition-delay: 0.12s; }
body.mnav-open .mnav__links > :nth-child(3) { transition-delay: 0.17s; }
/* sub панелът: delay само за opacity/transform — grid анимацията при
   toggle не бива да чака stagger delay-а */
body.mnav-open .mnav__links > .mnav__sub { transition-delay: 0.17s, 0.17s, 0s; }
body.mnav-open .mnav__links > :nth-child(5) { transition-delay: 0.22s; }
body.mnav-open .mnav__links > :nth-child(6) { transition-delay: 0.27s; }
body.mnav-open .mnav__links > :nth-child(7) { transition-delay: 0.32s; }
body.mnav-open .mnav__links > :nth-child(8) { transition-delay: 0.37s; }
body.mnav-open .mnav__meta { transition-delay: 0.44s; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  [data-reveal] { opacity: 1; transform: none; }
  [data-reveal-img] img { clip-path: none; }
  .mega__item { opacity: 1; transform: none; }
}

/* Focus visibility */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--slate);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   DG4 — LIVE COMPLEX PAGES (PocketBase)
   /dg4/ hero + availability table, /dg4seca|b|v/ + /dg4parking/
   floor viewers. Added 2026-07-06.
   ============================================================ */

body.page-dg4 .footer { margin-top: 0; }

/* ---------- availability table (section pages, below the plan) ---------- */

/* «Само свободни» switch — sage track, no text on the fill */
.dg4-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-60);
  transition: color 0.3s var(--ease-out);
}
.dg4-toggle__track {
  width: 40px;
  height: 22px;
  border-radius: 500px;
  background: rgba(28, 36, 45, 0.18);
  position: relative;
  transition: background 0.3s var(--ease-out);
}
.dg4-toggle__track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(20, 28, 36, 0.25);
  transition: transform 0.3s var(--ease-out);
}
.dg4-toggle.is-on { color: var(--ink); }
.dg4-toggle.is-on .dg4-toggle__track { background: #5F7B58; }
.dg4-toggle.is-on .dg4-toggle__track::after { transform: translateX(18px); }

/* editorial table: hairline rows, Prata names, tabular numbers */
.dg4-thead, .dg4-row {
  display: grid;
  grid-template-columns: 1.5fr 0.7fr 0.55fr 1fr 0.95fr 1fr 36px;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
}
.dg4-thead {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
  border-bottom: 1px solid var(--hairline);
}
.dg4-row {
  border-bottom: 1px solid var(--hairline);
  font-size: 14.5px;
  color: var(--ink-60);
  transition: background 0.3s var(--ease-out);
}
a.dg4-row:hover, .dg4-row.is-hovered { background: var(--white); }
.dg4-row__name { font-family: var(--font-display); font-size: 18px; color: var(--ink); }
.dg4-row__arr { display: grid; place-items: center; }
.dg4-row__arr svg {
  width: 15px; height: 15px;
  opacity: 0.3;
  transition: transform 0.35s var(--ease-out), opacity 0.35s var(--ease-out), color 0.35s;
}
a.dg4-row:hover .dg4-row__arr svg { transform: translateX(4px); opacity: 1; color: var(--sand-deep); }

/* sold rows: muted, non-interactive */
.dg4-row.is-sold { cursor: default; }
.dg4-row.is-sold .dg4-row__name { color: var(--ink-40); }
.dg4-row.is-sold .dg4-row__arr { visibility: hidden; }
/* reserved rows keep the live (non-muted) look — the amber st-reserved chip
   carries the state; a reserved apartment is a link (opens the sheet), but a
   reserved garage/parking is inert (not cart-addable) so it drops its arrow */
.dg4-row.is-reserved:not(a) { cursor: default; }
.dg4-row.is-reserved:not(a) .dg4-row__arr { visibility: hidden; }

.dg4-loading, .dg4-empty {
  padding: 44px 18px;
  text-align: center;
  font-size: 14.5px;
  color: var(--ink-40);
}

.dg4-error {
  padding: 48px 24px;
  text-align: center;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius);
  color: var(--ink-60);
}
.dg4-error p { font-size: 16px; }
.dg4-error .btn { margin-top: 20px; }

/* ---------- section pages (/dg4seca|b|v/, /dg4parking/) ---------- */

body.page-dg4sec main { padding-top: 148px; }

/* the eyebrow doubles as the back button (single «Dream Garden 4» on the page) */
.dg4s-back { gap: 9px; transition: color 0.3s var(--ease-out); }
.dg4s-back::before { content: none; }
.dg4s-back svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease-out); }
.dg4s-back:hover { color: var(--ink); }
.dg4s-back:hover svg { transform: translateX(-4px); }

.dg4s-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}
.dg4s-head .display-lg { margin-top: 14px; }

/* controls row: section tabs left, floor buttons right */
.dg4s-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

/* section render — floor bands over the building shot; full container
   width, square corners — same treatment as the floor plans */
.dg4s-render {
  position: relative;
  width: 100%;
  margin: 0 0 36px;
  aspect-ratio: 2500 / 1563;
}
.dg4s-render img, .dg4s-render svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.dg4s-render img { object-fit: contain; }
.dg4s-render g { cursor: pointer; pointer-events: all; }
.dg4s-render polygon {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2;
  transition: fill 0.3s ease, stroke 0.3s ease;
}
.dg4s-render g:hover polygon {
  fill: rgba(209, 174, 141, 0.54);
  stroke: var(--sand-deep);
}
.dg4s-render g.is-active polygon {
  fill: rgba(209, 174, 141, 0.24);
  stroke: rgba(178, 137, 96, 0.8);
}

/* floor switcher — active floor is sand with WHITE text */
.dg4s-floors {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dg4s-floors__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-right: 8px;
}
.dg4s-floorbtn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-60);
  transition: all 0.3s var(--ease-out);
}
.dg4s-floorbtn:hover { border-color: var(--sand); color: var(--sand-deep); }
.dg4s-floorbtn.is-active {
  background: var(--sand);
  border-color: var(--sand);
  color: var(--white);
}

/* plan canvas — no box: the plan sits directly on the page background.
   Own paper bg + isolation keep the multiply blend stable even if the
   container ever gets opacity/transform animations (no white flash). */
.dg4s-plan {
  position: relative;
  min-height: 260px;   /* placeholder само докато планът се зареди; JS го нулира
                          след decode — иначе aspect-ratio го „прехвърля" в
                          ширина (260 × 2500/1284 ≈ 506px) и планът излиза
                          извън екрана на мобилно */
  max-width: 100%;
  background: var(--paper);
  isolation: isolate;
}
.dg4s-plan__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;   /* the baked-in white of the drawings dissolves into the paper bg */
}
.dg4s-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.dg4s-svg g { pointer-events: all; }
.dg4s-svg g polygon, .dg4s-svg g path, .dg4s-svg g rect {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2;
  transition: fill 0.3s ease, stroke 0.3s ease;
}
/* available units: invisible until hover — the plan stays clean */
.dg4s-svg g.is-available { cursor: pointer; }
.dg4s-svg g.is-available:hover polygon, .dg4s-svg g.is-available.is-hovered polygon,
.dg4s-svg g.is-available:hover path, .dg4s-svg g.is-available.is-hovered path,
.dg4s-svg g.is-available:hover rect, .dg4s-svg g.is-available.is-hovered rect {
  fill: rgba(209, 174, 141, 0.58);
  stroke: var(--sand-deep);
}
/* reserved units: dense amber — „taken, not sold". A definite painted state
   (visible like sold, not a hover-preview), warm not red because it stays
   purchase-adjacent; harmonized with the DG sand palette. Visual only on the
   plan — the table row drives the sheet — but responds to hover (denser) */
.dg4s-svg g.is-reserved polygon, .dg4s-svg g.is-reserved path, .dg4s-svg g.is-reserved rect {
  fill: rgba(198, 148, 52, 0.88);
  stroke: rgba(140, 100, 30, 0.92);
}
.dg4s-svg g.is-reserved:hover polygon, .dg4s-svg g.is-reserved.is-hovered polygon,
.dg4s-svg g.is-reserved:hover path, .dg4s-svg g.is-reserved.is-hovered path,
.dg4s-svg g.is-reserved:hover rect, .dg4s-svg g.is-reserved.is-hovered rect {
  fill: rgba(198, 148, 52, 0.96);
  stroke: rgba(140, 100, 30, 0.98);
}
/* sold units: near-opaque red — the drawing underneath barely shows */
.dg4s-svg g.is-sold { pointer-events: none; }
.dg4s-svg g.is-sold polygon, .dg4s-svg g.is-sold path, .dg4s-svg g.is-sold rect {
  fill: rgba(166, 58, 48, 0.94);
  stroke: rgba(122, 36, 28, 0.95);
}
.dg4s-svg g.is-unmapped { pointer-events: none; }
.dg4s-svg g.is-unmapped polygon, .dg4s-svg g.is-unmapped path, .dg4s-svg g.is-unmapped rect {
  fill: rgba(28, 36, 45, 0.04);
  stroke: transparent;
}

.floor-tip--sm { padding: 12px 16px; min-width: 168px; }
.floor-tip--sm .floor-tip__floor { font-size: 17px; }

/* availability table head, below the plan */
.dg4s-tablehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 52px 0 10px;
}

/* ---------- responsive ---------- */

@media (max-width: 800px) {
  /* compact table: name + type + area + status */
  .dg4-thead, .dg4-row { grid-template-columns: 1.3fr 1fr 0.9fr auto; gap: 10px; padding: 13px 8px; }
  .dg4-cell--sec, .dg4-cell--floor, .dg4-row__arr, .dg4-thead span:last-child { display: none; }
  .dg4-row__name { font-size: 16px; }
  .dg4s-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .dg4s-tablehead { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 40px; }
  .dg4s-render { margin-bottom: 24px; }
}

@media (max-width: 700px) {
  body.page-dg4sec main { padding-top: 120px; }
  /* табовете на един ред с хоризонтален swipe вместо пренос на 2 реда */
  .dg4s-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -17px;
    padding-inline: 17px;
  }
  .dg4s-tabs::-webkit-scrollbar { display: none; }
  .dg4s-tabs .chip { white-space: nowrap; flex-shrink: 0; }
}

/* ---------- DG4 hero: header sits ABOVE the map; the WHOLE render fits the viewport
   (container box == image aspect 2560/1600, capped by viewport width AND height — no cropping) ---------- */
.page-dg4 main { padding-top: 98px; }
.page-dg4 .a-hero {
  width: 100%;
  height: auto;
  aspect-ratio: 2560 / 1600;   /* пълна ширина; височината следва изображението */
  background: var(--paper);
}
.page-dg4 .a-hero__canvas::after { content: none; }
.page-dg4 .a-hero__title {
  left: clamp(24px, 3vw, 48px);
  bottom: 24px;
}
.page-dg4 .a-hero__title h1 {
  margin-top: 0;
  text-shadow: 0 8px 52px rgba(15, 22, 29, 0.9), 0 3px 14px rgba(15, 22, 29, 0.7), 0 1px 3px rgba(15, 22, 29, 0.65);
}
@media (max-width: 700px) {
  .page-dg4 main { padding-top: 80px; }
}

/* ============================================================
   INQUIRY („запитване") — floating tab, panel, toast
   Injected outside #swup by inquiry.js
   ============================================================ */

/* ---------- floating tab ---------- */

.dg-inq-tab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 105;   /* above the property sheet (101) + backdrop (100); the
                     cart panel/overlay/toast (110–112) still cover it when open */
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--slate);
  color: var(--paper);
  display: grid;
  place-items: center;
  box-shadow: 0 14px 34px -10px rgba(20, 28, 36, 0.45);
  opacity: 0;
  transform: translateY(16px) scale(0.8);
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), background 0.3s var(--ease-out);
}
.dg-inq-tab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.dg-inq-tab:hover { background: var(--slate-deep); transform: translateY(-2px); }
.dg-inq-tab svg { width: 24px; height: 24px; }
/* full-viewport sheet open: dock the cart tab bottom-left (over the white
   plan/photo field) so it never covers the info column CTA bottom-right */
body.sheet-open .dg-inq-tab { right: auto; left: 24px; }
.dg-inq-tab__count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--sand);
  color: var(--white);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

/* ---------- overlay + panel ---------- */

.dg-inq-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(20, 28, 36, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.dg-inq-overlay.is-open { opacity: 1; pointer-events: auto; }

.dg-inq-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 111;
  width: min(460px, 100vw);
  background: var(--paper);
  border-left: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  visibility: hidden;
  transition: transform 0.5s var(--ease-out), visibility 0s linear 0.5s;
}
.dg-inq-panel.is-open {
  transform: none;
  visibility: visible;
  transition: transform 0.5s var(--ease-out), visibility 0s;
}

.dg-inq-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 32px;
  border-bottom: 1px solid var(--hairline);
  flex: none;
}
.dg-inq-panel__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.01em;
}
.dg-inq-panel__close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  display: grid;
  place-items: center;
  transition: all 0.3s var(--ease-out);
}
.dg-inq-panel__close:hover { background: var(--slate); border-color: var(--slate); color: var(--paper); }
.dg-inq-panel__close svg { width: 14px; height: 14px; }

.dg-inq-panel__scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 32px 40px;
}

.dg-inq-empty { padding: 28px 0; color: var(--ink-60); font-size: 15px; }
.dg-inq-empty p + p { margin-top: 8px; }

/* ---------- items ---------- */

.dg-inq-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
}
.dg-inq-item__name { font-family: var(--font-display); font-size: 17px; line-height: 1.3; }
.dg-inq-item__meta { font-size: 13.5px; color: var(--ink-60); margin-top: 3px; }
.dg-inq-item__remove {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  display: grid;
  place-items: center;
  margin-left: auto;
  flex: none;
  transition: all 0.3s var(--ease-out);
}
.dg-inq-item__remove:hover { background: var(--clay); border-color: var(--clay); color: var(--white); }
.dg-inq-item__remove svg { width: 11px; height: 11px; }

/* ---------- form ---------- */

.dg-inq-form { margin-top: 28px; }
.dg-inq-form__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 18px;
}
.dg-inq-field { margin-bottom: 16px; }
.dg-inq-field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.dg-inq-field label small { font-weight: 500; color: var(--ink-60); }
.dg-inq-field input,
.dg-inq-field textarea {
  width: 100%;
  padding: 13px 16px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  transition: border-color 0.3s var(--ease-out);
}
.dg-inq-field input:focus,
.dg-inq-field textarea:focus { outline: none; border-color: var(--sand-deep); }
.dg-inq-field input::placeholder,
.dg-inq-field textarea::placeholder { color: var(--ink-40); }
.dg-inq-field textarea { min-height: 90px; resize: vertical; }

.dg-inq-error { color: var(--clay); font-size: 13.5px; margin: 0 0 14px; }

.dg-inq-submit { width: 100%; justify-content: center; margin-top: 6px; }
.dg-inq-submit:disabled { opacity: 0.6; pointer-events: none; }

/* ---------- success state ---------- */

.dg-inq-success {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
}
.dg-inq-success[hidden] { display: none; }
.dg-inq-success__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--white);
  display: grid;
  place-items: center;
  margin-bottom: 22px;
}
.dg-inq-success__icon svg { width: 28px; height: 28px; }
.dg-inq-success__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  margin-bottom: 10px;
}
.dg-inq-success__text { color: var(--ink-60); font-size: 15px; }

/* ---------- toast ---------- */

.dg-inq-toast {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 112;
  max-width: min(380px, calc(100vw - 48px));
  padding: 13px 20px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--paper);
  font-size: 14.5px;
  box-shadow: 0 16px 40px -12px rgba(20, 28, 36, 0.5);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.dg-inq-toast.is-visible { opacity: 1; transform: none; }

/* ---------- sheet button state ---------- */

#sh-inquiry.is-in-list, #prop-inquiry.is-in-list { background-color: var(--sand-deep); }

/* ---------- section table: inquiry rows ---------- */

.dg4-row--inq { cursor: pointer; }
.dg4-row--inq:hover { background: var(--white); }
.dg4-row--inq:hover .dg4-row__arr svg { opacity: 1; color: var(--sand-deep); }
.dg4-row.is-in-inquiry {
  background: var(--sand-soft);
  box-shadow: inset 3px 0 0 var(--sand);
}
.dg4-row.is-in-inquiry .dg4-row__name::after {
  content: 'в запитването';
  display: inline-block;
  vertical-align: 2px;
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 500px;
  background: var(--sand);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.dg4-row.is-in-inquiry .dg4-row__arr svg {
  transform: rotate(45deg);
  opacity: 1;
  color: var(--sand-deep);
}
.dg4-row.is-pulse { animation: dg4RowPulse 1.2s ease-out; }
@keyframes dg4RowPulse {
  0% { background-color: rgba(209, 174, 141, 0.5); }
  100% { background-color: rgba(209, 174, 141, 0); }
}

/* ---------- mobile: bottom sheet ---------- */

@media (max-width: 700px) {
  .dg-inq-panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 88svh;
    border-left: 0;
    border-top: 1px solid var(--hairline);
    border-radius: 20px 20px 0 0;
    transform: translateY(105%);
  }
  .dg-inq-panel.is-open { transform: none; }
  .dg-inq-panel__header { padding: 20px 22px; }
  .dg-inq-panel__scroll { padding: 16px 22px 34px; }
  .dg-inq-tab { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .dg-inq-toast { left: 16px; bottom: 84px; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .dg-inq-tab, .dg-inq-overlay, .dg-inq-panel, .dg-inq-toast { transition: none; }
  .dg4-row.is-pulse { animation: none; }
}

/* ============================================================
   DG4 — MOBILE IMAGE MAPS (ASB mechanism, DG skin). 2026-07-06.
   Chrome elements (.dg4m-*) are injected by dg4.js only when
   isMobileMQ() is true at bind time; CSS keeps them hidden by
   default, shows them under 767px and force-hides them at ≥768px
   (ASB pairing pattern — resize after load degrades gracefully).
   ============================================================ */

/* hidden by default (desktop-first safety) */
.dg4m-bar, .dg4m-hint, .dg4m-progress, .dg4m-stats { display: none; }

/* tapped highlight (mobile two-tap) — same visual as hover/is-lit */
.im-svg g.is-tapped polygon, .im-svg g.is-tapped path {
  fill: rgba(209, 174, 141, 0.46);
  stroke: rgba(209, 174, 141, 0.95);
}
.dg4s-render g.is-tapped polygon {
  fill: rgba(209, 174, 141, 0.54);
  stroke: var(--sand-deep);
}

@media (max-width: 767px) {

  /* -- cursor tooltips make no sense on touch: bottom bars replace them -- */
  .floor-tip { display: none !important; }

  /* -- /dg4/ hero: horizontally scrollable strip -- */
  .page-dg4 .a-hero {
    aspect-ratio: auto;
    /* inner strip is 200vw wide; image is 2560/1600 → full height = 125vw */
    height: min(125vw, 72svh);
    min-height: 320px;
    overflow: hidden;
  }
  .dg4m-scroll {
    position: absolute;
    inset: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .dg4m-scroll::-webkit-scrollbar { display: none; }
  .dg4m-scroll__inner { position: relative; width: 200vw; height: 100%; }
  .dg4m-scroll__inner img,
  .dg4m-scroll__inner .im-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .dg4m-scroll__inner img { object-fit: cover; }

  .page-dg4 .a-hero__title { left: 20px; right: 20px; bottom: 18px; }
  .page-dg4 .a-hero__title h1 { font-size: 30px; }

  /* -- slide-up bottom bar (hero: absolute; sections: fixed) -- */
  .dg4m-bar {
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 20;
    background: rgba(60, 85, 110, 0.94);   /* slate glass */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(209, 174, 141, 0.28);
    color: var(--paper);
    transform: translateY(102%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
  }
  .dg4m-bar.is-visible { transform: none; pointer-events: auto; }
  .dg4m-bar--fixed { position: fixed; z-index: 97; }

  .dg4m-bar__close {
    position: absolute;
    top: -40px; right: 14px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(28, 36, 45, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(242, 241, 237, 0.2);
    color: rgba(242, 241, 237, 0.85);
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .dg4m-bar.is-visible .dg4m-bar__close { opacity: 1; }
  .dg4m-bar__close svg { width: 12px; height: 12px; }

  .dg4m-bar__content {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px calc(13px + env(safe-area-inset-bottom, 0px));
  }
  .dg4m-bar__chip {
    width: 48px; height: 48px;
    flex: none;
    display: grid;
    place-items: center;
    background: rgba(209, 174, 141, 0.16);
    border: 1px solid rgba(209, 174, 141, 0.45);
    border-radius: 12px;
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1;
    color: var(--sand);
  }
  .dg4m-bar__info { flex: 1; min-width: 0; }
  .dg4m-bar__name { font-size: 14.5px; font-weight: 700; color: var(--white); }
  .dg4m-bar__avail { margin-top: 2px; font-size: 12.5px; color: rgba(242, 241, 237, 0.72); }
  .dg4m-bar__avail strong { color: var(--sand); }
  .dg4m-bar__btn {
    flex: none;
    padding: 11px 18px;
    border-radius: 500px;
    background: var(--sand);
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
  }

  /* -- thin scroll progress bar (sand thumb on light track) -- */
  .dg4m-progress {
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: rgba(242, 241, 237, 0.22);
    z-index: 15;
  }
  .dg4m-progress__bar {
    height: 100%;
    width: 50%;
    background: var(--sand);
    transition: width 0.1s linear;
  }

  /* -- centered „Плъзни" hint, fades after 4s -- */
  .dg4m-hint {
    display: flex;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 25;
    align-items: center;
    gap: 9px;
    padding: 12px 22px;
    background: rgba(28, 36, 45, 0.58);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(242, 241, 237, 0.16);
    border-radius: 500px;
    color: rgba(242, 241, 237, 0.9);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
    transition: opacity 0.6s ease;
  }
  .dg4m-hint.is-hidden { opacity: 0; }
  .dg4m-hint svg { width: 18px; height: 18px; fill: currentColor; }

  /* -- section pages: floor selector = horizontal touch bar -- */
  .dg4s-controls { gap: 14px; }
  .dg4s-floors {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .dg4s-floors::-webkit-scrollbar { display: none; }
  .dg4s-floorbtn { width: 46px; height: 46px; flex: none; }

  /* -- dark stats strip under the plan (slate glass) -- */
  .dg4m-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 11px 16px;
    border-radius: var(--radius-sm);
    background: rgba(60, 85, 110, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--paper);
    font-size: 13px;
    font-weight: 600;
  }
  .dg4m-stats.is-off { display: none; }
  .dg4m-stats__floor {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 15.5px;
  }
  .dg4m-stats__dot {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: rgba(242, 241, 237, 0.4);
    flex: none;
  }
  .dg4m-stats__avail { font-weight: 800; color: #A8C79E; }
}

/* force-hide mobile chrome on desktop + neutralize the scroll strip so a
   mobile-initialized hero still renders correctly after a resize up */
@media (min-width: 768px) {
  .dg4m-bar, .dg4m-hint, .dg4m-progress, .dg4m-stats { display: none !important; }
  .dg4m-scroll, .dg4m-scroll__inner { position: absolute; inset: 0; overflow: visible; }
}

/* ---------- availability table → vertical cards (mobile) ---------- */

@media (max-width: 700px) {
  .dg4-thead { display: none; }
  .dg4-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 7px;
    column-gap: 8px;
    padding: 14px 16px;
    margin-bottom: 10px;
    background: var(--white);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
  }
  .dg4-row__name { order: 0; flex: 1 1 auto; font-size: 17px; min-width: 0; }
  .dg4-row .apt-card__status { order: 1; flex: none; }
  /* full-width break between the title line and the meta line */
  .dg4-row::before { content: ''; order: 2; flex-basis: 100%; height: 0; }
  /* meta line: этаж · тип · площ */
  .dg4-cell--floor,
  .dg4-row > span:nth-child(4),
  .dg4-row > span:nth-child(5) {
    display: inline-flex;
    align-items: center;
    order: 3;
    font-size: 13px;
    color: var(--ink-60);
  }
  .dg4-cell--floor::before { content: 'Етаж '; white-space: pre; }
  .dg4-row > span:nth-child(4)::before,
  .dg4-row > span:nth-child(5)::before {
    content: '';
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--ink-40);
    margin-right: 8px;
  }
  .dg4-cell--sec, .dg4-row__arr { display: none; }
  .dg4-row.is-in-inquiry { box-shadow: inset 0 0 0 1px var(--sand); }
  .dg4-row.is-in-inquiry .dg4-row__name::after { vertical-align: 1px; }
}

/* ============================================================
   ===== About pages (#29) =====
   /about/ „За комплексите“ + /about-us/ „За нас“ — editorial
   layer over the existing tokens. Additive block only.
   ============================================================ */

/* ---------- /about/ hero — one strong render, no slider ---------- */

.about-hero { min-height: 88svh; }
.about-hero .hero__title { max-width: 17ch; font-size: clamp(40px, 5.4vw, 84px); }
.about-hero .hero__sub { max-width: 56ch; }

/* ---------- the four themes — editorial 2×2 ---------- */

.about-themes__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(44px, 6vw, 120px);
}
.about-theme {
  display: grid;
  grid-template-columns: clamp(56px, 5vw, 84px) 1fr;
  align-items: baseline;
  padding: clamp(28px, 3vw, 44px) 0 clamp(32px, 3.2vw, 50px);
  border-top: 1px solid var(--hairline);
}
.about-theme__idx {
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--sand-deep);
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}
.about-theme__title {
  grid-column: 2;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.2;
}
.about-theme p {
  grid-column: 2;
  margin-top: 12px;
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-60);
}

/* ---------- full-bleed render band ---------- */

.about-band {
  position: relative;
  overflow: hidden;
}
.about-band__media {
  position: relative;
  overflow: hidden;
  height: clamp(520px, 88vh, 920px);   /* беше 340/64vh/680 — стоеше тясна спрямо останалото */
}
/* taller than the frame so the parallax travel never exposes edges */
.about-band__media img {
  position: absolute;
  left: 0;
  top: -15%;
  width: 100%;
  height: 130%;
  object-fit: cover;
}
.about-band__caption {
  position: absolute;
  left: max(calc((100vw - var(--container)) / 2), 20px);
  bottom: 26px;
  padding: 10px 18px;
  border-radius: 500px;
  background: rgba(28, 36, 45, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(242, 241, 237, 0.92);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ---------- quality — spec table on a navy band ---------- */

.about-quality {
  background: var(--navy);
  color: var(--paper);
  border-radius: calc(var(--radius) * 2);
  margin-inline: max(calc((100vw - var(--container)) / 2 - 24px), 12px);
  overflow: hidden;
}
.about-quality__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 5vw, 100px);
  padding: clamp(56px, 6vw, 110px) clamp(28px, 5vw, 96px);
  align-items: start;
}
.about-quality .display-lg { margin-top: 16px; max-width: 13ch; }
.about-quality__lead {
  margin-top: 22px;
  max-width: 40ch;
  font-size: 16.5px;
  color: rgba(242, 241, 237, 0.72);
}
.about-quality__partners {
  margin-top: clamp(30px, 4vw, 60px);
  padding-top: 20px;
  border-top: 1px solid var(--hairline-light);
  max-width: 44ch;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: rgba(242, 241, 237, 0.55);
}
.about-quality__partners span {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242, 241, 237, 0.45);
}
.about-spec > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 48px);
  padding-block: 17px;
  border-bottom: 1px solid var(--hairline-light);
}
.about-spec > div:first-child { border-top: 1px solid var(--hairline-light); }
.about-spec dt {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242, 241, 237, 0.55);
}
.about-spec dd {
  text-align: right;
  font-family: var(--font-display);
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--paper);
}

/* ---------- партньори: лого лента (ревизия 8, 2026-07-18) ----------
   19-те лога от стария сайт (монохромни, slate тон) — тих infinite
   marquee; hover = пауза + пълна плътност; reduced-motion → статичен
   центриран grid (дубликатният сет се скрива). */
.about-partners__label { display: block; text-align: center; }
.about-partners__belt {
  margin-top: clamp(28px, 4vw, 48px);
  padding-block: clamp(22px, 3vw, 36px);
  border-block: 1px solid var(--hairline);
  overflow: hidden;
}
.about-partners__track {
  display: flex;
  width: max-content;
  animation: aboutPartnersDrift 46s linear infinite;
}
.about-partners__belt:hover .about-partners__track { animation-play-state: paused; }
.about-partners__set {
  display: flex;
  align-items: center;
  gap: clamp(44px, 5vw, 80px);
  padding-right: clamp(44px, 5vw, 80px);
}
.about-partners__set img {
  width: auto;
  height: auto;
  max-height: 44px;
  max-width: 140px;
  opacity: 0.6;
  transition: opacity 0.35s var(--ease-out);
}
.about-partners__set img:hover { opacity: 1; }
@keyframes aboutPartnersDrift { to { transform: translateX(-50%); } }
@media (max-width: 700px) {
  .about-partners__set { gap: 36px; padding-right: 36px; }
  .about-partners__set img { max-height: 34px; max-width: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .about-partners__track { animation: none; width: auto; }
  .about-partners__set { flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .about-partners__set[aria-hidden="true"] { display: none; }
}

/* ---------- top location: text + counters | render ---------- */

.about-location__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.about-location .display-lg { margin-top: 16px; max-width: 14ch; }
.about-location__text { margin-top: 22px; max-width: 52ch; color: var(--ink-60); }
.about-location__stats {
  display: flex;
  gap: clamp(32px, 4vw, 72px);
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
}
.about-stat__value {
  font-family: var(--font-display);
  font-size: clamp(42px, 4.4vw, 66px);
  line-height: 1;
  color: var(--slate);
}
.about-stat__value em { font-style: normal; font-size: 0.4em; color: var(--sand-deep); margin-left: 7px; }
.about-stat__label {
  margin-top: 10px;
  max-width: 24ch;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-60);
}
.about-location__media {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3.3;
}
.about-location__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- our complexes — compact live cards (3-up) ---------- */

.about-complexes__intro { max-width: 52ch; font-size: 16px; color: var(--ink-60); }
.about-complexes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 36px);
}
.complex-card--mini .complex-card__media { aspect-ratio: 16 / 10; }
.complex-card--mini .complex-card__status { top: 14px; right: 14px; font-size: 11px; padding: 6px 12px; }
.complex-card--mini .complex-card__body { padding: 16px 2px 0; }
.complex-card--mini .complex-card__name { font-size: clamp(19px, 1.5vw, 23px); }
.complex-card--mini .complex-card__meta { font-size: 13.5px; }
/* is-soldout mini: без filter — статусът се показва само чрез badge-а */

/* ---------- Belashtica teaser — offset collage ---------- */

.about-teaser { padding-bottom: clamp(120px, 13vw, 220px); }
.about-teaser__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 5vw, 90px);
  align-items: center;
}
.about-teaser__copy .display-lg { margin-top: 16px; max-width: 13ch; }
.about-teaser__copy > p:not(.eyebrow):not(.about-teaser__soon) {
  margin-top: 20px;
  max-width: 44ch;
  color: var(--ink-60);
}
.about-teaser__soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate);
}
.about-teaser__soon .pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sand);
  animation: legendPulse 2s ease-out infinite;
}
.about-teaser__collage { position: relative; }
.about-teaser__main {
  width: 88%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
}
.about-teaser__main img { width: 100%; height: 100%; object-fit: cover; }
.about-teaser__second {
  position: absolute;
  right: -2%;
  bottom: -21%;
  width: 50%;
  aspect-ratio: 4 / 3;
  border: 8px solid var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(28, 36, 45, 0.38);
}
.about-teaser__second img { width: 100%; height: 100%; object-fit: cover; }

/* /about-us/ стиловете са пренаписани — виж блока „About-us redesign“
   в края на файла. */

/* ---------- about pages: responsive ---------- */

@media (max-width: 1100px) {
  .about-location__grid { grid-template-columns: 1fr; }
  .about-complexes__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .about-themes__grid { grid-template-columns: 1fr; gap: 0; }
  .about-quality__inner { grid-template-columns: 1fr; }
  .about-teaser__grid { grid-template-columns: 1fr; }
  .about-teaser { padding-bottom: clamp(72px, 9vw, 140px); }
  .about-teaser__main { width: 100%; }
  .about-teaser__second {
    position: static;
    width: 62%;
    margin: -16% 4% 0 auto;
    border-width: 6px;
  }
}

@media (max-width: 700px) {
  .about-complexes__grid { grid-template-columns: 1fr; }
  .about-location__stats { flex-wrap: wrap; gap: 28px; }
  .about-spec dd { font-size: 15px; }
  .about-band__caption { left: 16px; bottom: 16px; }
}

/* ============================================================
   ===== Contacts + DG4 redesign (#49/#50) =====
   /contacts/ page + enriched /dg4/ (features grid, location POI
   map, „Нов начин на живот“). Additive block only.
   ============================================================ */

/* ---------- /dg4/: six feature blocks (3×2 editorial grid) ---------- */

.dg4-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(36px, 4vw, 72px);
}
.dg4-features__grid .about-theme p { max-width: none; }

@media (max-width: 1100px) { .dg4-features__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .dg4-features__grid { grid-template-columns: 1fr; } }

/* ---------- /dg4/: „Нов начин на живот“ — linen band ---------- */

.dg4-life {
  background: var(--linen);
  /* band със собствен фон: симетричен, умерен вътрешен паддинг */
  padding-block: clamp(48px, 5vw, 72px);
}
.dg4-life .mega__aside-link { margin-top: 26px; }

/* ---------- /dg4/: location POI map ---------- */

.dg4-poi { margin-top: clamp(44px, 5vw, 72px); }

/* layout: страничен панел с обектите + картата (desktop);
   на мобилно панелът става chip лента над картата */
.dg4-poi__layout {
  display: grid;
  grid-template-columns: 296px 1fr;
  gap: 16px;
}
.dg4-poi__panelwrap { position: relative; min-height: 0; }
.dg4-poi__panel {
  position: absolute;   /* височината я диктува картата, панелът скролва вътре */
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 8px 8px 14px;
}
.dg4-poi__group {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
  padding: 16px 14px 7px;
}
.dg4-poi__item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  --poi: var(--slate);
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.dg4-poi__item--shop { --poi: var(--sand-deep); }
.dg4-poi__item--edu { --poi: var(--slate); }
.dg4-poi__item--health { --poi: var(--clay); }
.dg4-poi__item--road { --poi: var(--sage); }
.dg4-poi__item:hover { background: var(--linen); }
.dg4-poi__item.is-active { background: var(--slate); color: var(--white); }
.dg4-poi__idot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--poi);
  flex: none;
}
.dg4-poi__item.is-active .dg4-poi__idot { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55); }

.dg4-poi__scroll { border-radius: var(--radius); overflow: hidden; }
.dg4-poi__frame {
  position: relative;
  aspect-ratio: 2971 / 1671;
  background: #E5E2DA;   /* the SVG's own ground tone — no flash while it loads */
}
.dg4-poi__frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* pin: 44px touch target, colored 26px dot with a „+“ */
.dg4-poi__pin {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  --poi: var(--slate);
}
.dg4-poi__pin--shop { --poi: var(--sand-deep); }
.dg4-poi__pin--edu { --poi: var(--slate); }
.dg4-poi__pin--health { --poi: var(--clay); }
.dg4-poi__pin--road { --poi: var(--sage); }
/* комплексите: пинът е нарисуван в SVG-то — hit-маркерът е невидим,
   само tooltip + пулсиращият ореол при избор го „осветяват" */
.dg4-poi__pin--dg .dg4-poi__dot {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
/* избран отнякъде (панел/карта): pop на точката */
.dg4-poi__pin.is-focus .dg4-poi__dot { animation: dg4PoiPop 0.5s var(--ease-out); }
@keyframes dg4PoiPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.5); }
  100% { transform: scale(1.18); }
}

.dg4-poi__dot {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--poi);
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 14px -3px rgba(28, 36, 45, 0.45);
  display: grid;
  place-items: center;
  transition: transform 0.35s var(--ease-out);
}
.dg4-poi__dot svg { width: 11px; height: 11px; transition: transform 0.35s var(--ease-out); }
.dg4-poi__pin:hover .dg4-poi__dot,
.dg4-poi__pin:focus-visible .dg4-poi__dot,
.dg4-poi__pin.is-open .dg4-poi__dot { transform: scale(1.18); }
.dg4-poi__pin.is-open .dg4-poi__dot svg { transform: rotate(45deg); }
/* discreet pulse halo while engaged */
.dg4-poi__dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  pointer-events: none;
}
.dg4-poi__pin:hover .dg4-poi__dot::after,
.dg4-poi__pin:focus-visible .dg4-poi__dot::after,
.dg4-poi__pin.is-open .dg4-poi__dot::after {
  animation: dg4PoiPulse 1.8s var(--ease-out) infinite;
}
@keyframes dg4PoiPulse {
  0% { box-shadow: 0 0 0 0 rgba(242, 241, 237, 0.65); }
  70% { box-shadow: 0 0 0 12px rgba(242, 241, 237, 0); }
  100% { box-shadow: 0 0 0 0 rgba(242, 241, 237, 0); }
}

/* tooltip (name label); placement variants keep it inside the frame */
.dg4-poi__tip {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translate(-50%, 5px);
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(28, 36, 45, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--paper);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  z-index: 3;
}
.dg4-poi__pin:hover .dg4-poi__tip,
.dg4-poi__pin:focus-visible .dg4-poi__tip,
.dg4-poi__pin.is-open .dg4-poi__tip { opacity: 1; transform: translate(-50%, 0); }
.dg4-poi__pin:hover, .dg4-poi__pin.is-open { z-index: 4; }

.dg4-poi__tip--bottom { bottom: auto; top: calc(100% + 2px); transform: translate(-50%, -5px); }
.dg4-poi__pin:hover .dg4-poi__tip--bottom,
.dg4-poi__pin:focus-visible .dg4-poi__tip--bottom,
.dg4-poi__pin.is-open .dg4-poi__tip--bottom { transform: translate(-50%, 0); }

.dg4-poi__tip--left { left: -8px; transform: translate(0, 5px); }
.dg4-poi__pin:hover .dg4-poi__tip--left,
.dg4-poi__pin:focus-visible .dg4-poi__tip--left,
.dg4-poi__pin.is-open .dg4-poi__tip--left { transform: translate(0, 0); }

.dg4-poi__tip--right { left: auto; right: -8px; transform: translate(0, 5px); }
.dg4-poi__pin:hover .dg4-poi__tip--right,
.dg4-poi__pin:focus-visible .dg4-poi__tip--right,
.dg4-poi__pin.is-open .dg4-poi__tip--right { transform: translate(0, 0); }

/* legend + hint row under the map */
.dg4-poi__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.dg4-poi__legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-60);
}
.dg4-poi__legend li { display: inline-flex; align-items: center; gap: 8px; }
.dg4-poi__key {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.dg4-poi__key--shop { background: var(--sand-deep); }
.dg4-poi__key--edu { background: var(--slate); }
.dg4-poi__key--health { background: var(--clay); }
.dg4-poi__key--road { background: var(--sage); }

.dg4-poi__hint { font-size: 12.5px; color: var(--ink-40); }
.dg4-poi__hint--touch { display: none; }

/* mobile: horizontally scrollable map strip (the hero pattern);
   панелът с обектите става хоризонтална chip лента НАД картата —
   tap на chip центрира лентата на картата върху маркера */
@media (max-width: 767px) {
  .dg4-poi__layout { display: flex; flex-direction: column; gap: 12px; }
  .dg4-poi__panelwrap { position: static; }
  .dg4-poi__panel {
    position: static;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 2px 17px;
    margin-inline: -17px;
  }
  .dg4-poi__panel::-webkit-scrollbar { display: none; }
  .dg4-poi__group { display: none; }
  .dg4-poi__item {
    flex: none;
    width: auto;
    white-space: nowrap;
    font-size: 13px;
    padding: 9px 14px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--white);
  }
  .dg4-poi__item.is-active { border-color: var(--slate); }
  .dg4-poi__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .dg4-poi__scroll::-webkit-scrollbar { display: none; }
  .dg4-poi__frame { width: 210vw; }
  .dg4-poi__hint--desktop { display: none; }
  .dg4-poi__hint--touch { display: inline; }
}

/* ---------- /contacts/ ---------- */

.page-contacts main { padding-top: 148px; }

.c-head { margin-bottom: clamp(40px, 5vw, 64px); }
.c-head .display-lg { margin-top: 16px; max-width: 18ch; }

.c-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(44px, 6vw, 110px);
  align-items: start;
}

.c-info__lead { max-width: 44ch; font-size: 16.5px; color: var(--ink-60); }

.c-rows { margin-top: clamp(28px, 3vw, 44px); }
.c-row {
  display: flex;
  align-items: baseline;
  gap: clamp(20px, 3vw, 44px);
  padding-block: 20px;
  border-bottom: 1px solid var(--hairline);
}
.c-row:first-child { border-top: 1px solid var(--hairline); }
.c-row dt {
  flex: 0 0 96px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.c-row dd { min-width: 0; }
.c-row__value {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.35;
  color: var(--ink);
  background-image: linear-gradient(var(--sand), var(--sand));
  background-repeat: no-repeat;
  background-position: 0 96%;
  background-size: 0% 2px;
  transition: background-size 0.55s var(--ease-out);
}
.c-row__value:hover { background-size: 100% 2px; }
.c-row__value--sm { font-size: clamp(17px, 1.4vw, 21px); }
.c-ext { width: 11px; height: 11px; margin-left: 6px; opacity: 0.55; }

.c-info > .mega__aside-link { margin-top: 30px; }

/* form card */
.c-form {
  position: relative;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(24px, 2.6vw, 40px);
  overflow: hidden;
}
.c-form__submit { width: 100%; justify-content: center; margin-top: 6px; }
.c-form__submit:disabled { opacity: 0.6; pointer-events: none; }

/* honeypot — visually removed, still in the form for bots */
.c-form__hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

/* success state covers the card in place */
.c-form__success {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
}
.c-form__success[hidden] { display: none; }

/* decorative neighbourhood map band → Google Maps */
.c-map {
  position: relative;
  display: block;
  height: clamp(300px, 42vw, 520px);
  border-radius: calc(var(--radius) * 2);
  margin-inline: max(calc((100vw - var(--container)) / 2 - 24px), 12px);
  overflow: hidden;
  background: #E5E2DA;
}
.c-map > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 68%;
  transition: transform 1.4s var(--ease-out);
}
.c-map:hover > img { transform: scale(1.04); }
.c-map__badge {
  position: absolute;
  left: 22px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  padding: 11px 20px;
  border-radius: 500px;
  background: rgba(28, 36, 45, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(242, 241, 237, 0.94);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background 0.4s var(--ease-out);
}
.c-map:hover .c-map__badge { background: rgba(28, 36, 45, 0.75); }
.c-map__badge .c-ext { opacity: 0.8; }

/* ---------- реална карта /contacts/ (ревизия 9, 2026-07-18) ----------
   MapLibre GL canvas в стария c-map breakout отпечатък; SVG fallback-ът
   лежи отдолу и се скрива с fade чак когато стилът е зареден (.is-live);
   .is-failed (offline) го оставя видим. Пиновете са DOM markers — dot в
   slate + име-pill в езика на сайта, линк към /dgN/. */
.c-realmap {
  position: relative;
  height: clamp(340px, 46vw, 560px);
  border-radius: calc(var(--radius) * 2);
  margin-inline: max(calc((100vw - var(--container)) / 2 - 24px), 12px);
  overflow: hidden;
  background: #E5E2DA;
  border: 1px solid var(--hairline);
}
/* по-висока специфичност от vendor .maplibregl-map (position: relative),
   който се зарежда СЛЕД main.css */
.c-realmap > .c-realmap__canvas {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}
.c-realmap.is-live .c-realmap__canvas { opacity: 1; }
.c-realmap__fallback { position: absolute; inset: 0; display: block; }
.c-realmap__fallback img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 68%; }
.c-realmap.is-live .c-realmap__fallback { display: none; }
.c-realmap__pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.c-realmap__name {
  padding: 7px 14px;
  border-radius: 500px;
  background: rgba(242, 241, 237, 0.92);
  border: 1px solid var(--hairline);
  box-shadow: 0 8px 22px -10px rgba(20, 28, 36, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink);
  white-space: nowrap;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.c-realmap__pin:hover .c-realmap__name { background: var(--slate); color: var(--paper); }
.c-realmap__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--slate);
  border: 2.5px solid var(--white);
  box-shadow: 0 2px 8px rgba(20, 28, 36, 0.4);
}
/* пиновете са <button> (адендум към ревизия 9: клик → popup с действия) */
.c-realmap__pin { border: 0; background: none; padding: 0; font: inherit; }
/* петият пин — офисът: sand отличаване; column-reverse = dot горе, име
   отдолу (виси ПОД координатата — DG2 е на ~70м и с общия layout
   pill-овете се застъпваха) */
.c-realmap__pin--office { flex-direction: column-reverse; }
/* далечен zoom (.is-far от dg4.js): pill-овете се прибират до точки */
.c-realmap__name { transition: opacity 0.3s var(--ease-out), background 0.3s var(--ease-out), color 0.3s var(--ease-out); }
.c-realmap.is-far .c-realmap__name { opacity: 0; pointer-events: none; }
.c-realmap__pin--office .c-realmap__dot { background: var(--sand-deep); }
.c-realmap__pin--office .c-realmap__name {
  background: var(--sand);
  border-color: var(--sand-deep);
  color: var(--white);
}
.c-realmap__pin--office:hover .c-realmap__name { background: var(--sand-deep); color: var(--white); }
/* popup в езика на сайта (vendor CSS-ът се зарежда след main.css →
   печелим специфичност през .c-realmap контекста) */
.c-realmap .maplibregl-popup-content {
  padding: 16px 18px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  box-shadow: 0 18px 44px -16px rgba(20, 28, 36, 0.4);
  background: var(--paper);
  font-family: inherit;
}
.c-realmap .maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--paper); }
.c-realmap .maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--paper); }
.c-realmap .maplibregl-popup-close-button {
  font-size: 18px;
  padding: 2px 8px;
  color: var(--ink-40);
}
.c-realmap__pop-title {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink);
}
.c-realmap__pop-addr { margin-top: 4px; font-size: 12.5px; color: var(--ink-60); }
.c-realmap__pop-actions { display: flex; gap: 8px; margin-top: 12px; }
.c-realmap__pop-btn {
  padding: 8px 14px;
  border-radius: 500px;
  border: 1px solid var(--hairline);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.c-realmap__pop-btn:hover { border-color: var(--slate); }
.c-realmap__pop-btn--nav { background: var(--slate); border-color: var(--slate); color: var(--paper); }
.c-realmap__pop-btn--nav:hover { background: var(--navy-deep); color: var(--paper); }
/* дискретна атрибуция (законово задължителна — остава четима) */
.c-realmap .maplibregl-ctrl-attrib { font-size: 10.5px; opacity: 0.75; }
@media (max-width: 700px) {
  .c-realmap { height: clamp(360px, 105vw, 480px); margin-inline: 12px; }
  .c-realmap__name { font-size: 11.5px; padding: 6px 11px; }
  /* тесен екран: DG2 pill-ът на горен ред с водеща линия към точката —
     DG1/DG2/DG4 иначе се застъпват в един хоризонтален ред */
  .c-realmap__pin--raised .c-realmap__name { position: relative; margin-bottom: 30px; }
  /* офис pill-ът малко по-ниско — при +1 zoom ъглово опираше в DG4 pill-а */
  .c-realmap__pin--office .c-realmap__name { margin-top: 8px; }
  .c-realmap__pin--raised .c-realmap__name::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 1px;
    height: 27px;
    background: rgba(28, 36, 45, 0.35);
  }
}

/* contacts responsive */
@media (max-width: 900px) {
  .c-grid { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 700px) {
  .page-contacts main { padding-top: 120px; }
  .c-row { flex-direction: column; gap: 6px; padding-block: 16px; }
  .c-row dt { flex: none; }
  .c-map { height: clamp(240px, 60vw, 340px); margin-inline: 12px; }
  .c-map__badge { left: 14px; bottom: 14px; padding: 9px 16px; font-size: 12px; }
}

/* dg4 imagery (#50 feedback v3): дворът голям между интрото и характеристиките */
.dg4-court__media { margin: 0; }
.dg4-court__media img {
  display: block;
  width: 100%;
  height: auto;               /* целият кадър, без изрязване */
  border-radius: var(--radius);
}
.dg4-court__media figcaption {
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(28, 36, 45, 0.55);
}

/* галерия секция — текст + scroll-snap слайдер */
.dg4-gallery__grid {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.dg4-gallery__text {
  margin-top: 18px;
  max-width: 42ch;
  color: rgba(28, 36, 45, 0.72);
}
.dg4-gallery__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}
.dg4-gallery__btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(28, 36, 45, 0.25);
  background: transparent;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.dg4-gallery__btn svg { width: 16px; height: 16px; }
.dg4-gallery__btn:hover { background: var(--slate); border-color: var(--slate); color: var(--paper); }
.dg4-gallery__btn:disabled { opacity: 0.35; pointer-events: none; }
.dg4-gallery__count {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(28, 36, 45, 0.55);
}
.dg4-gallery__viewport { overflow: hidden; border-radius: var(--radius); }
.dg4-gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.dg4-gallery__track::-webkit-scrollbar { display: none; }
.dg4-gallery__track:focus-visible { outline: 2px solid var(--slate); outline-offset: 3px; }
.dg4-gallery__slide {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
  position: relative;
}
.dg4-gallery__slide img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.dg4-gallery__slide figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 8px 16px;
  border-radius: 100px;
  background: rgba(28, 36, 45, 0.62);
  color: rgba(242, 241, 237, 0.94);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  backdrop-filter: blur(6px);
}
@media (max-width: 900px) {
  .dg4-gallery__grid { grid-template-columns: 1fr; gap: 24px; }
  .dg4-gallery__copy { order: 1; }
  .dg4-gallery__viewport { order: 0; }
  .dg4-gallery__nav { margin-top: 20px; }
}

/* ============================================================
   РЕАЛНИ СНИМКИ — /dg4/ collage секция + /gallery/ страница + lightbox
   (данни от PB complex_photos; рендер от assets/js/gallery.js)
   ============================================================ */

/* tile — бутон с photo fill; fade-in при зареждане, тих zoom на hover */
.ph-tile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: #E5E2DA;
  cursor: zoom-in;
}
.ph-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out), transform 1.4s var(--ease-out);
}
.ph-tile img.is-loaded { opacity: 1; }
.ph-tile:hover img { transform: scale(1.045); }
.ph-tile:focus-visible { outline: 2px solid var(--slate); outline-offset: 3px; }

/* /dg4/ — editorial collage: hero + стек → тройка → широка двойка */
.dg4-photos { --ph-gap: clamp(10px, 1.3vw, 18px); }
.dg4-photos .a-intro__grid { margin-bottom: clamp(32px, 4vw, 56px); }
.dg4-photos .a-intro__text .mega__aside-link { margin-top: 22px; }
.dg4-photos__collage { display: grid; gap: var(--ph-gap); }
.dg4-photos__band { display: grid; gap: var(--ph-gap); }
.dg4-photos__band--lead { grid-template-columns: 1.6fr 1fr; }
.dg4-photos__band--lead .ph-tile--hero { aspect-ratio: 4 / 3; }
.dg4-photos__stack { display: grid; grid-template-rows: 1fr 1fr; gap: var(--ph-gap); min-height: 0; }
.dg4-photos__band--trio { grid-template-columns: repeat(3, 1fr); }
.dg4-photos__band--trio .ph-tile { aspect-ratio: 4 / 3; }
.dg4-photos__band--duo { grid-template-columns: 1fr 1fr; }
.dg4-photos__band--duo .ph-tile { aspect-ratio: 16 / 9; }
@media (max-width: 700px) {
  .dg4-photos__band--lead { grid-template-columns: 1fr; }
  .dg4-photos__stack { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .dg4-photos__stack .ph-tile { aspect-ratio: 4 / 3; }
  .dg4-photos__band--trio { grid-template-columns: 1fr 1fr; }
  .dg4-photos__band--trio .ph-tile:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .dg4-photos__band--duo { grid-template-columns: 1fr; }
}

/* /gallery/ — заглавие, под-навигация, групи по комплекс */
.page-gallery main { padding-top: 148px; }
.gal-head .display-lg { margin-top: 14px; }
.gal-head__text { margin-top: 18px; max-width: 52ch; color: rgba(28, 36, 45, 0.72); }
.gal-subnav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(26px, 3vw, 40px); }
.gal-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border: 1px solid var(--hairline);
  border-radius: 500px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: border-color 0.35s var(--ease-out), background 0.35s var(--ease-out);
}
.gal-pill .num { color: var(--ink-40); font-weight: 600; }
.gal-pill:hover { border-color: var(--sand); background: var(--sand-soft); }
.gal-group { --ph-gap: clamp(10px, 1.3vw, 18px); margin-top: clamp(56px, 7vw, 100px); scroll-margin-top: 110px; }
.gal-group .section__head { margin-bottom: clamp(24px, 3vw, 40px); }
.gal-group__count {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-40);
  white-space: nowrap;
}
.gal-empty { margin-top: 48px; color: var(--ink-60); }
/* мозайка: 2 колони на мобилно; ≥900px — 6-колонен растер с dense flow,
   lead тайл 4×4, портретни акценти на всеки ~9-ти (ритъм без дупки —
   базов тайл 2×2 → всички span-ове са четни) */
.gal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ph-gap); }
.gal-grid .ph-tile { aspect-ratio: 4 / 3; }
.gal-grid .ph-tile:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
@media (min-width: 900px) {
  .gal-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(120px, 11vw, 170px); grid-auto-flow: dense; }
  .gal-grid .ph-tile { aspect-ratio: auto; grid-column: span 2; grid-row: span 2; }
  .gal-grid .ph-tile:first-child { grid-column: span 4; grid-row: span 4; }
  .gal-grid .ph-tile:nth-child(9n+6) { grid-row: span 4; }
}
@media (max-width: 700px) {
  .page-gallery main { padding-top: 120px; }
  .gal-group { scroll-margin-top: 90px; }
}

/* lightbox — тъмен overlay, брояч, стрелки, caption; живее извън #swup */
.plb {
  position: fixed;
  inset: 0;
  z-index: 120;   /* над mnav (112) и sheet слоевете */
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s var(--ease-out), visibility 0s linear 0.35s;
}
.plb.is-open { visibility: visible; opacity: 1; transition: opacity 0.35s var(--ease-out); }
.plb__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(19, 25, 32, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.plb__top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(16px, 2.5vw, 34px);
  color: rgba(242, 241, 237, 0.85);
}
.plb__counter { font-size: 13.5px; font-weight: 600; letter-spacing: 0.08em; }
.plb__close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--hairline-light);
  color: rgba(242, 241, 237, 0.9);
  display: grid;
  place-items: center;
  transition: background 0.35s var(--ease-out);
}
.plb__close:hover { background: rgba(242, 241, 237, 0.14); }
.plb__close svg { width: 15px; height: 15px; }
.plb__stage {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(64px, 8vw, 120px);
}
.plb__img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-sm);
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.4s var(--ease-out), transform 0.6s var(--ease-out);
}
.plb__img.is-loaded { opacity: 1; transform: none; }
.plb__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--hairline-light);
  background: rgba(28, 36, 45, 0.35);
  color: rgba(242, 241, 237, 0.9);
  display: grid;
  place-items: center;
  transition: background 0.35s var(--ease-out);
}
.plb__arrow[hidden] { display: none; }
.plb__arrow:hover { background: rgba(242, 241, 237, 0.16); }
.plb__arrow svg { width: 18px; height: 18px; }
.plb__arrow--prev { left: clamp(14px, 2.5vw, 34px); }
.plb__arrow--next { right: clamp(14px, 2.5vw, 34px); }
.plb__caption {
  position: relative;
  z-index: 2;
  min-height: 48px;
  padding: 12px 20px 20px;
  text-align: center;
  font-size: 13px;
  color: rgba(242, 241, 237, 0.6);
}
@media (max-width: 700px) {
  .plb__stage { padding: 0 12px; }
  .plb__img { border-radius: 8px; }
  .plb__arrow { top: auto; bottom: 16px; transform: none; width: 48px; height: 48px; }
  .plb__arrow--prev { left: calc(50% - 58px); }
  .plb__arrow--next { right: calc(50% - 58px); left: auto; }
  .plb__caption { padding-bottom: 78px; }
}
@media (prefers-reduced-motion: reduce) {
  .plb, .plb.is-open, .plb__img, .ph-tile img { transition: none; }
  .ph-tile:hover img, .plb__img { transform: none; }
}

/* ============================================================
   ===== CXH: complex homepage (shared) =====
   Section system for the DG1/DG2/DG3 (and future) complex
   homepages. Additive layer over the dg4 design system — reuses
   .a-hero, .a-intro__grid, .about-theme, .stat, the .cxp__ map/pin
   classes and the gallery.js hydration (see its header for the
   data- hooks). Frozen vocabulary — the sibling pages build from it.
   ============================================================ */

/* hero v2 (ревизия 4, клиентско искане): центрирана монументална
   композиция — само името + „Всичко разпродадено" като изявление.
   Радиален scrim в центъра пази четимостта върху трите различни снимки. */
.cxh-hero--statement .a-hero__title {
  left: 24px;
  right: 24px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  text-align: center;
}
.cxh-hero--statement .a-hero__canvas::after {
  background:
    radial-gradient(ellipse 74% 60% at 50% 50%, rgba(20, 28, 36, 0.54) 0%, rgba(20, 28, 36, 0.24) 55%, transparent 80%),
    linear-gradient(to top, rgba(20, 28, 36, 0.45) 0%, transparent 28%);
}
.cxh-hero--statement .a-hero__title h1 {
  margin-top: 0;
  text-shadow: 0 6px 34px rgba(15, 22, 29, 0.6), 0 2px 8px rgba(15, 22, 29, 0.35);
}
/* ревизия 6: по-голям и по-присъстващ — frosted glass pill (blur-ът
   хомогенизира фона → сигурен контраст върху всяка от трите снимки);
   hairline кантът на пила поема ролята на падналите странични линии */
.cxh-hero--statement .cxh-hero__soldout {
  display: inline-block;
  margin-top: clamp(22px, 3vw, 38px);
  padding: clamp(12px, 1.4vw, 17px) clamp(24px, 2.6vw, 38px);
  padding-right: calc(clamp(24px, 2.6vw, 38px) - 0.3em); /* компенсира trailing tracking-а */
  max-width: none;
  font-size: clamp(15px, 1.6vw, 23px);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 2px 12px rgba(15, 22, 29, 0.5);
  background: rgba(20, 28, 36, 0.3);
  border: 1px solid rgba(242, 241, 237, 0.3);
  border-radius: 500px;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
@media (max-width: 480px) {
  /* тесен екран: по-стегнат tracking, да остане на един ред */
  .cxh-hero--statement .cxh-hero__soldout {
    font-size: 13px;
    letter-spacing: 0.22em;
    padding: 11px 20px;
    padding-right: calc(20px - 0.22em);
  }
}

/* hero: full-bleed photo inside the .a-hero shell; the meta row
   carries the sold-out badge under the h1 */
.cxh-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}
.cxh-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 500px;
}
.cxh-hero__note {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(242, 241, 237, 0.75);
}
@media (max-width: 480px) {
  .cxh-hero__meta { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* facts strip: .stat blocks in an aligned 3-per-row grid (5 → 3+2) */
.cxh-stats {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: clamp(22px, 2.6vw, 32px) clamp(24px, 3vw, 56px);
}
.cxh-stats .stat__value { color: var(--slate); }
.cxh-stats .stat__label { color: var(--ink-40); }

/* full-container figure with an uppercase caption (dg4-court pattern) */
.cxh-figure { margin: 0; }
.cxh-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.cxh-figure figcaption {
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(28, 36, 45, 0.55);
}

/* features: 2×2 editorial grid of .about-theme cards (the /about/ rhythm) */
.cxh-features__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(44px, 6vw, 120px);
}
.cxh-features__grid .about-theme p { max-width: none; }
@media (max-width: 800px) { .cxh-features__grid { grid-template-columns: 1fr; } }

/* photo story: curated static tiles in editorial bands; tiles are
   plain <img> (visible without JS) — gallery.js arms the lightbox */
.cxh-story {
  --story-gap: clamp(14px, 1.8vw, 26px);
  display: grid;
  gap: var(--story-gap);
}
.cxh-tile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: #E5E2DA;
  cursor: zoom-in;
}
.cxh-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.4s var(--ease-out);
}
.cxh-tile:hover img { transform: scale(1.045); }
.cxh-tile:focus-visible { outline: 2px solid var(--slate); outline-offset: 3px; }
.cxh-story__band { display: grid; gap: var(--story-gap); }
.cxh-story__band--lead { grid-template-columns: 1.55fr 1fr; }
.cxh-story__band--lead .cxh-tile:first-child { aspect-ratio: 4 / 3; }
.cxh-story__stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--story-gap);
  min-height: 0;
}
.cxh-story__band--full .cxh-tile { aspect-ratio: 21 / 9; }
.cxh-story__band--trio { grid-template-columns: repeat(3, 1fr); }
.cxh-story__band--trio .cxh-tile { aspect-ratio: 1 / 1; }
.cxh-story__band--duo { grid-template-columns: 1fr 1fr; }
.cxh-story__band--duo .cxh-tile { aspect-ratio: 3 / 2; }
/* serif pull-line between bands — editorial breath */
.cxh-story__note {
  max-width: 52ch;
  margin: clamp(16px, 2.6vw, 34px) auto;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 26px);
  line-height: 1.5;
  color: var(--slate);
}
.cxh-story__cap {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(28, 36, 45, 0.55);
}
@media (max-width: 900px) {
  .cxh-story__band--lead { grid-template-columns: 1fr; }
  .cxh-story__stack { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .cxh-story__stack .cxh-tile { aspect-ratio: 4 / 3; }
  .cxh-story__band--full .cxh-tile { aspect-ratio: 16 / 9; }
  .cxh-story__band--trio { grid-template-columns: 1fr 1fr; }
  .cxh-story__band--trio .cxh-tile:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .cxh-story__band--duo { grid-template-columns: 1fr; }
}

/* PB collage section wrapper (renderer emits dg4-photos__band markup) */
.cxh-photos { --ph-gap: clamp(10px, 1.3vw, 18px); }
.cxh-photos .a-intro__grid { margin-bottom: clamp(32px, 4vw, 56px); }
.cxh-photos .a-intro__text .mega__aside-link { margin-top: 22px; }

/* visualization ↔ reality duo (pill captions, dg4-gallery language) */
.cxh-vsreal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.8vw, 26px);
}
.cxh-vsreal figure { margin: 0; position: relative; }
.cxh-vsreal img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}
.cxh-vsreal figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 8px 16px;
  border-radius: 100px;
  background: rgba(28, 36, 45, 0.62);
  color: rgba(242, 241, 237, 0.94);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@media (max-width: 700px) { .cxh-vsreal { grid-template-columns: 1fr; } }

/* static location map: sheet tab-2 pattern on the page (halo on the own
   complex + colored amenity pins; .cxp__pois chips double as the legend).
   ≤900px the frame becomes a 185vw pan strip (rule shared with the sheet) —
   gallery.js starts it centered on data-self-x. */
.cxh-map {
  position: relative;
  margin-top: clamp(28px, 4vw, 48px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.cxh-map .cxp__map-scroll { scrollbar-width: none; }
.cxh-map .cxp__map-scroll::-webkit-scrollbar { display: none; }
.cxh-map + .cxp__pois { margin-top: 18px; }

/* closing band: light full-width statement + single CTA (ревизия 3,
   2026-07-17). Linen вместо navy: „завесата" (main) свършва светла и
   тъмният footer се разкрива с ясен контраст под нея — една тъмна
   закриваща зона (footer CTA-то), не две слепени. */
.cxh-band {
  background: var(--linen);
  padding-block: clamp(72px, 9vw, 130px);
}
.cxh-band__inner {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
.cxh-band .display-lg { margin-top: 18px; }
.cxh-band__text {
  margin: 22px auto 0;
  max-width: 56ch;
  color: var(--ink-60);
}
.cxh-band__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 38px;
}
@media (max-width: 700px) {
  .cxh-band__ctas { flex-direction: column; align-items: stretch; }
  .cxh-band__ctas .btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cxh-map .cxp__pin-self { animation: none; }
  .cxh-tile img, .cxh-tile:hover img { transition: none; transform: none; }
}

/* CXH: interactive POI map on the dgN homepages (ревизия 2026-07-17) —
   own-complex emphasis, injected by dg4.js (data-poi-self hook);
   /dg4/ carries no attribute and is unaffected */
.dg4-poi__self {
  position: absolute;
  width: 46px; height: 46px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid var(--sand-deep);
  background: rgba(209, 174, 141, 0.22);
  pointer-events: none;
  animation: cxp-halo 2.4s ease-in-out infinite;
}
.dg4-poi__item.is-self { font-weight: 700; }
.dg4-poi__item.is-self .dg4-poi__idot { box-shadow: 0 0 0 2px var(--sand-deep); }
@media (max-width: 767px) {
  .dg4-poi__item.is-self { border-color: var(--sand-deep); }
  /* точен full-bleed на chip лентата: наследеният -17px е по-широк от
     container gutter-а (~15.6px @390) и даваше 1px хоризонтален scroll */
  .page-dg1 .dg4-poi__panel, .page-dg2 .dg4-poi__panel, .page-dg3 .dg4-poi__panel {
    margin-inline: calc((100vw - 100%) / -2);
    padding: 2px calc((100vw - 100%) / 2);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dg4-poi__self { animation: none; }
}

/* CXH: dg1 accents */
/* hero crop keeps both sections + the lawn in the portrait crop */
.page-dg1 .a-hero__canvas img { object-position: 42% 38%; }

/* ============================================================
   CXH: /dg5/ pre-sales placeholder + /belashtitsa/ concept page
   (2026-07-19) — additive block; nothing above is modified.
   ============================================================ */

/* dg5: typographic statement page — no imagery exists for DG5 yet,
   so the announcement itself is the hero, centered on paper */
.dg5-hero {
  min-height: 92svh;
  display: grid;
  place-items: center;
  padding-top: 120px;
  padding-bottom: clamp(70px, 9vw, 130px);
}
.dg5-hero__inner {
  max-width: 900px;
  text-align: center;
}
/* the client announcement line: tracked uppercase between sand hairlines
   (the statement language of the dgN heroes, translated to a light page) */
.dg5-hero__state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 22px);
  margin-top: clamp(26px, 3.4vw, 44px);
  font-size: clamp(13px, 1.5vw, 17px);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sand-deep);
}
.dg5-hero__state::before,
.dg5-hero__state::after {
  content: "";
  height: 1px;
  flex: 0 0 clamp(30px, 6vw, 84px);
  background: var(--sand-deep);
  opacity: 0.55;
}
.dg5-hero__lead {
  margin: clamp(30px, 4vw, 52px) auto 0;
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: clamp(21px, 2.3vw, 32px);
  line-height: 1.5;
  color: var(--slate);
}
.dg5-hero__follow {
  margin: clamp(18px, 2.4vw, 28px) auto 0;
  max-width: 46ch;
  color: var(--ink-60);
}
.dg5-hero__ctas { margin-top: clamp(34px, 4.4vw, 54px); }
@media (max-width: 560px) {
  /* narrow screens: the sentence wraps — drop the flanking hairlines */
  .dg5-hero__state { letter-spacing: 0.16em; font-size: 12px; }
  .dg5-hero__state::before, .dg5-hero__state::after { display: none; }
}

/* belashtitsa accents */
/* hero crop favors the houses + lawn over the sky in portrait crops */
.page-belashtitsa .a-hero__canvas img { object-position: 50% 62%; }
/* discreet honesty pill on the hero: the image is a concept render */
.cxh-hero__viz {
  position: absolute;
  right: clamp(14px, 2vw, 28px);
  bottom: clamp(14px, 2vw, 24px);
  z-index: 2;
  padding: 7px 15px;
  border-radius: 100px;
  background: rgba(28, 36, 45, 0.5);
  color: rgba(242, 241, 237, 0.85);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}

/* Section/parking pages (body.page-dg4sec), DESKTOP ONLY: header scrolls away
   with the page; the section+floor controls bar pins to the viewport instead
   (client rev 2026-07-19). Mobile keeps the global fixed header untouched. */
@media (min-width: 901px) {
  body.page-dg4sec .header { position: absolute; }
  body.page-dg4sec .header.is-hidden { transform: none; }
  body.page-dg4sec .dg4s-controls {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--paper);
    padding-block: 12px;
    margin-block: -12px;
    border-bottom: 1px solid transparent;
    transition: box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
  }
  body.page-dg4sec .dg4s-controls.is-stuck {
    border-bottom-color: rgba(28,36,45,0.08);
    box-shadow: 0 10px 24px -18px rgba(28,36,45,0.35);
  }
}

/* /belashtitsa/ visualizations header: right column baseline sits with the
   heading bottom, not with the eyebrow (client rev 2026-07-19) */
.a-intro__grid--end { align-items: end; }

/* Numbered feature cards (.about-theme): pack rows to the top — in multi-column
   grids the stretched sibling rows were vertically centering the paragraphs
   (client rev 2026-07-19, site-wide) */
.about-theme { align-content: start; }

/* ============================================================
   ===== About-us redesign (2026-07-19) =====
   /about-us/ „За нас" — recomposed: hero (heading vs. free-standing
   investor logo) grounded by an activities index strip; editorial
   lead-left/body-right story; real-photo band (reuses .about-band);
   closing .cxh-band. Shared classes are reused, never modified —
   page-scoped overrides only. Additive block.
   ============================================================ */

.page-about-us main { padding-top: 148px; }

/* ---------- hero: heading left, logo right, activities strip below ---------- */

.au-hero { padding-top: clamp(8px, 2vw, 32px); }
.au-hero__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.au-hero .display-lg { margin-top: 18px; max-width: 17ch; }
/* логото стои свободно срещу заглавието — без бокс (клиентска бележка 2026-07-08) */
.au-hero__logo { display: grid; place-items: center; }
.au-hero__logo img { width: min(380px, 74%); height: auto; }

/* activities: full-width numbered index strip — the hero's ground line */
.au-activities { margin-top: clamp(48px, 6vw, 96px); }
.au-activities__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 14px;
}
.au-activities__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(28px, 4vw, 64px);
}
.au-activity {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-block: 20px 26px;
  border-top: 1px solid var(--hairline);
}
.au-activity__idx {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--sand-deep);
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}
.au-activity__name {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.7vw, 26px);
  color: var(--ink);
}

/* ---------- story: eyebrow row, then lead paragraph left / narrative right ---------- */

.au-story .eyebrow { margin-bottom: clamp(24px, 3vw, 40px); }
.au-story__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}
.au-story__intro {
  font-family: var(--font-display);
  font-size: clamp(21px, 1.9vw, 28px);
  line-height: 1.5;
  color: var(--ink);
}
.au-story__text { max-width: 58ch; padding-top: 8px; }
.au-story__text p { color: var(--ink-60); }
.au-story__text p + p { margin-top: 22px; }

/* ---------- real-photo band: page-scoped sizing over .about-band ---------- */


/* ---------- closing band: balanced two-line wrap for the short headline ---------- */

.page-about-us .cxh-band .display-lg { max-width: 18ch; margin-inline: auto; }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  /* stacked: the logo's own padding is the separation — kill the grid gap */
  .au-hero__grid { grid-template-columns: 1fr; gap: 0; }
  .au-hero__logo { padding: clamp(20px, 5vw, 40px) 0; }
  .au-hero__logo img { width: min(320px, 64%); }
}

@media (max-width: 900px) {
  .au-story__grid { grid-template-columns: 1fr; gap: 32px; }
  .au-story__text { padding-top: 0; }
}

@media (max-width: 700px) {
  .page-about-us main { padding-top: 120px; }
  .au-activities__grid { grid-template-columns: 1fr; gap: 0; }
  .au-activity { padding-block: 16px; }
  .au-band .about-band__media { height: clamp(320px, 52vh, 480px); }
}

/* ---------- 2026-07-19: property sheet таб 2 — интерактивна POI карта ----------
   Клиентска ревизия: статичната карта-линк в таба „Комплексът" става живата
   dg4-poi карта от страниците на комплексите (пинове + групиран списък,
   двупосочен sync — dgInitPoiMap), а „Виж на страницата" остава като
   самостоятелен pill линк, закотвен върху видимия прозорец на картата. */
.cxp .dg4-poi { margin-top: clamp(24px, 3.6vh, 40px); }
.cxp__map-holder { position: relative; min-width: 0; }
.cxp__map-cta {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 500px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.cxp__map-cta svg { width: 13px; height: 13px; }
.cxp__map-cta:hover { background: var(--slate); color: var(--paper); }

/* 2026-07-19: while the sheet is NOT open (closing or closed) every
   animation inside it pauses — the sheet's content must be a static texture
   during the exit animation. The infinite halo pulse on the map
   (.dg4-poi__self / dg4PoiPulse box-shadow) kept invalidating the layer
   every frame, which janked the close exactly when scrolled to the map. */
body:not(.sheet-open) .sheet *,
body:not(.sheet-open) .sheet *::before,
body:not(.sheet-open) .sheet *::after {
  animation-play-state: paused !important;
}

/* 2026-07-19: opaque paper veil inside the sheet — the tab2 → details swap
   (prev/next arrows) happens fully covered, then the veil lifts. Covers the
   bar too, so the active-tab flip is also hidden. */
.sheet__swapveil {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
}