/* ============================================================
   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; }
/* the display rule above outranks the UA [hidden] { display: none }, so the
   „Помещения" tab needs this to actually disappear for units without rooms */
.sheet__tab[hidden] { display: none; }
.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; }

/* --- inner switch „Детайли" / „Стаи" (клиентска ревизия 2026-07-28) ---
   Sits between the unit heading and the areas, so the room breakdown reads as
   part of the apartment rather than a separate view. Hidden entirely for
   units without a `rooms` breakdown in PB — DG1-DG4 sheets are unchanged. */
.sheet__seg {
  display: flex;
  gap: clamp(20px, 2vw, 30px);
  margin-top: clamp(20px, 3.4vh, 36px);
  border-bottom: 1px solid var(--hairline);
}
/* the display rule above outranks the UA [hidden] { display: none } */
.sheet__seg[hidden] { display: none; }
.sheet__segbtn {
  position: relative;
  padding-bottom: 11px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
  transition: color 0.3s var(--ease-out);
}
.sheet__segbtn::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__segbtn:hover, .sheet__segbtn.is-active { color: var(--ink); }
.sheet__segbtn.is-active::after { transform: scaleX(1); }
/* the strip carries the gap above the lists — neither list adds its own */
.sheet__seg:not([hidden]) + .sheet__specs { margin-top: 0; }
.sheet__specs-rooms .sheet__specs { margin-top: 0; }
.sheet__specs-rooms[hidden] { display: none; }
.sheet__rooms-note {
  margin-top: clamp(18px, 2.6vh, 28px);
  color: var(--ink-40);
  font-size: 13px;
  line-height: 1.55;
}

/* --- 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;
}

/* ============================================================
   DG5 — Floor Explorer (.fx)
   A stage, not a scrolling page: floor stack · plan · unit list, all in one
   viewport on desktop. Plan and list share one focus, and the plan dims the
   units that are not focused so the hovered one reads instantly.
   Namespaced `fx` so nothing collides with DG4's `dg4s-`.
   ============================================================ */

/* Intro gating: the head and the stage start invisible and are played in by
   dg5-floors.js. Both classes are also set on the error path, so a failed
   fetch never leaves a blank page. */
.fx .fx__back, .fx .fx__title, .fx .fx__head-right { opacity: 0; }
.fx.is-in .fx__back, .fx.is-in .fx__title, .fx.is-in .fx__head-right { opacity: 1; }
.fx .fx__stage { opacity: 0; }
.fx.is-stage-in .fx__stage { opacity: 1; }

.fx {
  padding: 118px 0 40px;
  /* a definite height, not min-height: the plan sizes itself from the stage
     downwards (height:100% all the way to the raster), and that chain only
     resolves if the top of it is definite */
  height: 100vh;
  height: 100svh;
  min-height: 660px;
  display: flex;
  flex-direction: column;
}
.fx__inner { width: var(--container); margin-inline: auto; display: contents; }

/* ---------- masthead ---------- */

.fx__head {
  width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding-bottom: 22px;
}
.fx__back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-60);
  transition: color 0.25s var(--ease-out);
}
.fx__back:hover { color: var(--ink); }
.fx__back svg { width: 15px; height: 15px; }
/* gold — the same accent the DG5 hero uses for its announcement line */
.fx__title { margin-top: 10px; color: var(--sand-deep); }
.fx__head-right { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

.fx__hint { font-size: 13px; color: var(--ink-40); }

.fx__total { font-size: 14px; color: var(--ink-60); }
.fx__total b { font-size: 26px; font-weight: 700; color: var(--ink); margin-right: 6px; }

/* ---------- stage ---------- */

.fx__stage {
  width: var(--container);
  margin-inline: auto;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr) minmax(300px, 358px);
  grid-template-rows: minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

/* ---------- floors (left rail) ----------
   A plain index, not a control: rules and type only. The boxed version read
   like DG4's section tabs, and DG5 has no sections to begin with. */

.fx__rail {
  display: flex;
  flex-direction: column;
  align-content: start;
}
.fx-rail__head {
  padding-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.fx-floor {
  position: relative;
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 0;
  border-top: 1px solid var(--hairline);
  color: var(--ink-40);
  transition: color 0.3s var(--ease-out);
}
.fx-floor:last-child { border-bottom: 1px solid var(--hairline); }
.fx-floor:hover { color: var(--ink-60); }
.fx-floor.is-active { color: var(--ink); }

.fx-floor__label { font-size: 14px; font-weight: 600; white-space: nowrap; }
.fx-floor.is-active .fx-floor__label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
}
.fx-floor__n { font-size: 12px; opacity: 0.75; }

/* the only ornament: a sand rule that slides in under the active floor */
.fx-floor::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 0;
  background: var(--sand);
  transition: width 0.4s var(--ease-out);
}
.fx-floor.is-active::after { width: 100%; }

/* ---------- plan ---------- */

/* The rasters carry alpha, so the plan lives on paper directly — a white card
   under a white-ish drawing was two backgrounds doing one job. */
.fx__canvas {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  min-height: 0;
}
/* The raster letterboxes with object-fit:contain and the overlay with
   preserveAspectRatio="…meet" — same box, same fit, so the polygons land on
   the drawing at any container shape. No aspect-ratio here on purpose: that
   would size the box from the width and push the stage past the viewport. */
.fx__plan {
  position: relative;
  width: 100%;
  height: 100%;
}
.fx__plan.is-loading { opacity: 0.5; }
.fx-plan__img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.fx-plan__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Nothing is painted at rest — the drawing stays a drawing. The wash appears
   only under the pointer (or under the hovered row), and there is no outline:
   the plan already draws every wall it needs. */
.fx-plan__svg g { transition: opacity 0.3s var(--ease-out); }
.fx-plan__svg polygon {
  fill: transparent;
  stroke: none;
  transition: fill 0.22s var(--ease-out);
}
.fx-plan__svg .is-available { cursor: pointer; }
.fx-plan__svg .is-available.is-focus polygon,
.fx-plan__svg .is-available:hover polygon { fill: rgba(209, 174, 141, 0.68); }
/* the entrance wipe — same gold, softer, and it leaves nothing behind */
.fx-plan__svg .is-available.is-sweep polygon { fill: rgba(209, 174, 141, 0.42); }
/* while the wave runs the fill eases in and out slowly — it is a beat of the
   entrance, not a hover; the pointer wash keeps its own quick 0.22s */
.fx-plan__svg.is-sweeping polygon { transition-duration: 0.55s; }
.fx-plan__svg .is-reserved.is-focus polygon,
.fx-plan__svg .is-reserved:hover polygon { fill: rgba(168, 105, 92, 0.22); }
/* sold is the one thing worth stating unprompted — a whisper, not a block */
.fx-plan__svg .is-sold polygon { fill: rgba(28, 36, 45, 0.07); }
.fx-plan__svg .is-unmapped { display: none; }

/* The outer node is moved by transform every frame (see tipLoop), so the
   entrance animation has to live on an inner box — two transforms, one node
   would fight each other. */
.fx-tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  pointer-events: none;
  will-change: transform;
}
.fx-tip__in {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 15px 12px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 14px 34px rgba(28, 36, 45, 0.26);
  opacity: 0;
  transform: translateY(7px) scale(0.94);
  transform-origin: 0 0;
  transition: opacity 0.26s var(--ease-out), transform 0.38s var(--ease-out);
}
.fx-tip.is-visible .fx-tip__in { opacity: 1; transform: none; }
.fx-tip__name { font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.fx-tip__meta { font-size: 12.5px; opacity: 0.7; white-space: nowrap; }
.fx-tip__hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand);
  white-space: nowrap;
}
.fx-tip__hint i { font-style: normal; }
.fx-tip__hint svg { width: 13px; height: 13px; }
.fx-tip.is-visible .fx-tip__hint svg { animation: fxNudge 1.6s var(--ease-out) infinite; }
@keyframes fxNudge {
  0%, 60%, 100% { transform: translateX(0); }
  75% { transform: translateX(4px); }
}

.fx-error { text-align: center; display: grid; gap: 16px; place-items: center; padding: 40px 0; }

/* ---------- unit panel ---------- */

.fx__panel { display: flex; }
.fx__panel-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.fx-panel__grab { display: none; }
.fx__panel-head { padding: 0 2px 14px; }
.fx__panel-head h2 { font-family: var(--font-display); font-size: 25px; font-weight: 400; }
.fx__panel-head p { font-size: 13px; color: var(--ink-60); margin-top: 2px; }

.fx__list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 2px 14px; }
.fx-empty { padding: 26px 8px; font-size: 14px; color: var(--ink-60); }

.fx-group + .fx-group { margin-top: 8px; }
.fx-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.fx-group__count { color: var(--ink-60); letter-spacing: 0.04em; }

.fx-row {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
  text-align: left;
  color: var(--ink-60);
  transition: color 0.2s var(--ease-out);
}
.fx-row__name { font-size: 15px; font-weight: 700; color: var(--ink); }
.fx-row__meta { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-row:hover, .fx-row.is-focus { color: var(--ink); }
/* The focused row needs a cue the eye catches while the pointer is over on
   the plan. A margin dot gets clipped by the list's own scroller, so it is a
   sand wash instead — faint, and only ever while something is focused. */
.fx-row.is-focus { box-shadow: inset 0 0 0 60px rgba(209, 174, 141, 0.14); }

.fx-row.is-locked { cursor: default; opacity: 0.4; }

.fx-row__go { display: grid; place-items: center; color: var(--ink-40); }
.fx-row__go svg { width: 15px; height: 15px; }
.fx-row:hover .fx-row__go { color: var(--ink); }

.fx-row__cart {
  position: relative;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--hairline);
  border-radius: 50%;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.fx-row__cart::before, .fx-row__cart::after {
  content: '';
  position: absolute;
  background: var(--ink-60);
  transition: transform 0.25s var(--ease-out), background 0.2s;
}
.fx-row__cart::before { left: 5px; right: 5px; top: 9.5px; height: 1.5px; }
.fx-row__cart::after { top: 5px; bottom: 5px; left: 9.5px; width: 1.5px; }
.fx-row:hover .fx-row__cart { border-color: var(--slate); }
.fx-row.is-in-inquiry .fx-row__cart { background: var(--sage); border-color: var(--sage); }
.fx-row.is-in-inquiry .fx-row__cart::before,
.fx-row.is-in-inquiry .fx-row__cart::after { background: var(--white); }
/* the + becomes a ✓ once the unit is in the inquiry */
.fx-row.is-in-inquiry .fx-row__cart::before { opacity: 0; }
.fx-row.is-in-inquiry .fx-row__cart::after {
  top: 3.5px;
  bottom: auto;
  left: 7px;
  width: 6px;
  height: 10px;
  background: none;
  border: 2px solid var(--white);
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}

@keyframes fxPulse {
  0%, 30% { box-shadow: inset 0 0 0 60px rgba(111, 139, 104, 0.16); }
  100% { box-shadow: inset 0 0 0 60px rgba(111, 139, 104, 0); }
}
.fx-row.is-pulse { animation: fxPulse 1.2s var(--ease-out); }

/* ---------- laptop ---------- */

@media (max-width: 1180px) {
  .fx__stage { grid-template-columns: 118px minmax(0, 1fr) minmax(262px, 300px); }
}

/* ---------- mobile: strip on top, plan, drawer at the bottom ---------- */

@media (max-width: 900px) {
  /* the stacked mobile logo runs to ~82px — the masthead needs real air
     under it, not to sit on its baseline */
  .fx { padding: 118px 0 34px; height: auto; min-height: 0; }
  /* one tight row: title left, count right — the hover hint is meaningless on
     touch and the wrapped second row left a blank band under the title */
  .fx__head { padding-bottom: 4px; gap: 14px; flex-wrap: nowrap; }
  .fx__hint { display: none; }
  .fx__total { font-size: 12px; white-space: nowrap; }
  .fx__total b { font-size: 20px; margin-right: 4px; }
  .fx__stage { display: block; }

  /* the stack lies down and becomes a scroll-snapped strip */
  .fx__rail {
    flex-direction: row;
    gap: 7px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
  }
  .fx__rail::-webkit-scrollbar { display: none; }
  .fx-slab {
    flex: 0 0 auto;
    min-height: 0;
    min-width: 96px;
    scroll-snap-align: center;
    padding: 9px 14px;
  }
  .fx-slab--parking { margin-top: 0; margin-left: 10px; flex: 0 0 auto; }
  .fx-slab.is-active, .fx-slab.is-active.fx-slab--parking { flex: 0 0 auto; }
  .fx-slab__num { font-size: 20px; }
  .fx-slab__name { display: none; }

  .fx__canvas { padding: 10px; height: min(44svh, 82vw); }

  /* Everything in one normal flow: strip → plan → the full list, statically
     below with no inner scroll (клиентска ревизия 2026-07-28 — the earlier
     pinned-plan variant read as a scrolling window). Only the floor strip
     stays sticky, so switching floors doesn't mean scrolling back up. */
  .fx__rail {
    position: sticky;
    top: 66px;
    z-index: 3;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(50% - 50vw);
    padding: 10px max(4vw, 16px);
    background: var(--paper);
  }
  /* The site header hides on scroll-down; without a backdrop the content shows
     through the gap it leaves above the pinned strip. A pseudo-element can't
     do it — the strip is an overflow-x scroller and would clip it — but a
     box-shadow paints outside. ONLY while pinned (JS toggles is-stuck): at
     rest the slab would sit on top of the masthead and blank it out. */
  .fx__rail.is-stuck { box-shadow: 0 -70px 0 70px var(--paper); }
  .fx__rail::-webkit-scrollbar { display: none; }
  .fx-rail__head { display: none; }
  .fx-floor {
    width: auto;
    flex: 0 0 auto;
    gap: 7px;
    padding: 4px 0;
    border: 0;
  }
  .fx-floor:last-child { border: 0; }
  .fx-floor--parking { margin-top: 0; margin-left: 6px; }
  .fx-floor.is-active .fx-floor__label { font-size: 17px; }
  .fx-floor::after { bottom: -2px; }
  .fx-floor__n { display: none; }

  .fx__panel { display: block; margin-top: 16px; }
  .fx__panel-inner { border: 0; background: none; }
  .fx__panel-head { padding: 10px 4px; }
  .fx__panel-head h2 { font-size: 21px; }
  .fx__list { overflow: visible; padding: 0 0 8px; }
}