/* ============================================================
   Base v2 · Styles for sections introduced by the 2026-07 TZ
   ------------------------------------------------------------
   Loads AFTER style.css. Adds only what the new structure needs:
   language toggle, manifesto, pain, model, demographics, market,
   why-villa, location tabs, master plan, unit cards, management,
   yield scenarios, payment plans.

   Every value comes from tokens.css. No hex outside tokens,
   no spacing outside the 8-point scale.
   ============================================================ */

/* ─────────────── shared section furniture ─────────────── */

/* Every section is one screen. Content is laid out side-by-side (see .slide)
   rather than stacked, so a section's height is the TALLER of its two columns,
   not the sum of its parts — that is what keeps each slide on its own page.

   style.css sets `section[data-section] { background: var(--c-bg) }` — specificity
   (0,1,1). A bare class loses to it, so the v2 section rules are qualified with
   `section` to match that weight and win on source order (v2.css loads later). */
section.v2,
.v2 {
  /* Legibility bump (Max 2026-07-18) folded into the shared scale itself
     2026-08-07 — tokens.css's bottom 3 steps now carry these values
     site-wide, so there's no separate .v2 override left to track. */
  /* Section rhythm, 2026-08-06: was a third bespoke value, clamp(28px, 4.5vh,
     72px). Folded onto --sec-py-tight — also vh-based, so short laptop screens
     (864px) still give the content the room they take away. NOT --sec-py: at
     1920×1080 that pushes #location and #units ~97px past the fold and breaks
     the one-section-one-viewport rule these slides are built on. */
  padding: var(--sec-py-tight) 0;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
section.v2--tight,
.v2--tight {
  /* --s-7 (48px) was within a rounding error of the base pad anyway; both
     "compact section" cases now name the same rhythm token. What actually
     makes this variant tight is min-height/display, not the padding. */
  padding: var(--sec-py-tight) 0;
  min-height: 0;
  display: block;
}

section.v2--dark,
.v2--dark {
  background: var(--c-bg-dark);
  color: var(--c-ink-on-dark);
}
section.v2--deep,
.v2--deep { background: var(--c-bg-deep); }

/* ── reusable premium depth: layered dark gradients + soft parallax glow orbs
   (shared language introduced on the manifesto; roll onto any dark section) ── */
.has-depth { position: relative; overflow: hidden; }
.has-depth > .v2__inner { position: relative; z-index: 1; }
.depthbg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.depthbg--dark {
  background:
    radial-gradient(72% 55% at 84% 4%, rgba(74,108,176,0.18) 0%, transparent 58%),
    radial-gradient(64% 60% at 6% 104%, rgba(44,95,155,0.16) 0%, transparent 60%),
    linear-gradient(180deg, #151C36 0%, #0D1225 62%, #0A0F20 100%);
}
.depthbg__glow { position: absolute; border-radius: 50%; filter: blur(64px); pointer-events: none; will-change: transform; }
.depthbg__glow--tr { width: 46vw; height: 46vw; top: -15vw; right: -8vw; background: radial-gradient(circle, rgba(84,120,196,0.20) 0%, transparent 68%); }
.depthbg__glow--bl { width: 42vw; height: 42vw; bottom: -18vw; left: -10vw; background: radial-gradient(circle, rgba(58,104,168,0.16) 0%, transparent 68%); }
/* film grain — fine noise for an "expensive", tactile finish on the dark stages */
.depthbg::after,
.manifest__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* developer section keeps its own gradient — depthbg here adds only glows + grain */
.developer.has-depth > .developer__inner { position: relative; z-index: 1; }

/* hero brand logo — white mark, top-right over the photo (clear of the left headline) */
.hero__logo {
  /* above the hero headline; the headline sits below it. vh cap keeps the
     whole hero on one screen even on short viewports. */
  align-self: flex-start;
  width: min(clamp(200px, 21vw, 290px), 27vh);
  height: auto;
  margin: 0 0 clamp(6px, 1.4vh, 20px);
  opacity: 0.96;
  pointer-events: none;
  filter: drop-shadow(0 2px 20px rgba(0,0,0,0.42));
}

/* Full-bleed: no max-width. Gutters reach 2cm on desktop and never exceed it —
   2cm is the ceiling Max set, and hitting it is what makes the page read as
   edge-to-edge rather than boxed. */
.v2__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 clamp(16px, 5vw, 2cm);
}

/* ── the slide grid: header column + content column ── */
.slide {
  display: grid;
  grid-template-columns: minmax(260px, 24%) 1fr;
  gap: clamp(28px, 3.4vw, 64px);
  align-items: start;
  width: 100%;
}
.slide--even { grid-template-columns: 1fr 1fr; }
.slide--wide-aside { grid-template-columns: minmax(300px, 35%) 1fr; }
.slide__aside { position: relative; }
.slide__main { min-width: 0; }

.v2-head { max-width: none; }
.v2-head--center { margin: 0 auto; text-align: center; }

.v2-eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-mono-label);
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin: 0 0 var(--s-4);
}
/* 0.5 on the dark veiled backdrops computed to ~3.4:1 — the eyebrow read as a
   watermark rather than a label (Max 2026-08-07: "сделай более читаемыми"). */
.v2--dark .v2-eyebrow { color: rgba(240, 242, 248, 0.74); }

/* Sized for the narrow aside column, not for a full-width banner — which is
   exactly the --t-h4 "small heading" role. --t-h3 (the nearest step to the old
   42px cap) costs #units 104px and #location 34px of extra wrap and puts both
   past the fold; use .v2-title--lg where a section wants the bigger title. */
.v2-title {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: var(--t-h4);
  line-height: 1.08;
  letter-spacing: var(--ls-display-lg);
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
  color: var(--c-ink);
}
.v2--dark .v2-title { color: var(--c-ink-on-dark); }
.v2-title em {
  font-style: normal;
  font-weight: 700;
}
/* One step above the base .v2-title (--t-h4). --t-h2 is the nearest step to the
   old 58px cap but renders at 80px, which wraps #units' heading to three lines
   and costs that section 69px of height. */
.v2-title--lg { font-size: var(--t-h3); }

.v2-lead {
  font-family: var(--f-body);
  font-size: var(--t-body-lg);
  line-height: 1.5;
  color: var(--c-ink-muted);
  max-width: 46ch;
  margin: var(--s-5) 0 0;
}
.v2--dark .v2-lead { color: rgba(240, 242, 248, 0.72); }
.v2-lead em { font-style: normal; font-weight: 600; color: var(--c-ink); }
.v2--dark .v2-lead em { color: var(--c-ink-on-dark); }

.v2-note {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--ls-mono-small);
  line-height: 1.55;
  color: var(--c-ink-faint);
  margin: var(--s-5) 0 0;
  max-width: 100ch;
}
.v2--dark .v2-note { color: rgba(240, 242, 248, 0.44); }

/* CTA inside a slide sits under the aside copy, not on its own row. */
.slide__aside .section__cta-row { margin-top: var(--s-6); justify-content: flex-start; }

/* ─────────────── language toggle (nav) ─────────────── */

.lang {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-left: var(--s-5);
  flex: 0 0 auto;
}
.lang__btn {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  padding: 6px 9px;
  min-height: 24px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
/* The nav sits over both photo (white ink) and light surfaces (navy ink), so the
   active state is carried by weight and opacity rather than a filled pill —
   a fill would need to know the ink colour to punch the label back out. */
.lang__btn { opacity: 0.45; font-weight: 400; }
.lang__btn:hover { opacity: 0.8; }
.lang__btn.is-active { opacity: 1; font-weight: 500; }
.lang__btn:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  opacity: 1;
}
.lang__sep {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  opacity: 0.28;
  pointer-events: none;
}
.mobile-drawer .lang {
  margin: var(--s-6) 0 0;
  align-self: flex-start;
}

/* ─────────────── 02 · manifesto ─────────────── */

/* premium dark atmosphere: layered gradients + soft parallax glow orbs */
.manifest {
  --mf-accent: color-mix(in srgb, var(--c-accent) 62%, #ffffff);
  position: relative;
  overflow: hidden;
  background: var(--c-brand-navy-deep);
}
.manifest__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(72% 55% at 84% 4%, rgba(74,108,176,0.20) 0%, transparent 58%),
    radial-gradient(64% 60% at 6% 104%, rgba(44,95,155,0.18) 0%, transparent 60%),
    linear-gradient(180deg, #151C36 0%, #0D1225 62%, #0A0F20 100%);
}
.manifest__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
  will-change: transform;
}
.manifest__glow--1 {
  width: 48vw; height: 48vw; top: -16vw; right: -8vw;
  background: radial-gradient(circle, rgba(84,120,196,0.22) 0%, transparent 68%);
}
.manifest__glow--2 {
  width: 42vw; height: 42vw; bottom: -18vw; left: -10vw;
  background: radial-gradient(circle, rgba(58,104,168,0.18) 0%, transparent 68%);
}
.manifest .v2__inner { position: relative; z-index: 1; }

.manifest__title {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: var(--t-h2);
  line-height: 1.08;
  letter-spacing: var(--ls-display-lg);
  text-transform: none;
  margin: clamp(8px, 1.4vh, 20px) 0 0;
  max-width: 20ch;
  text-wrap: balance;
  color: var(--c-ink-on-dark);
}
.manifest__title em {
  font-style: normal;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 0 44px rgba(120,160,224,0.28);
}

.manifest__list {
  list-style: none;
  margin: clamp(26px, 4.5vh, 64px) 0 0;
  padding: clamp(22px, 3vh, 42px) 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 60px);
  align-items: start;
}
/* diagonal descent — staggered rhythm (margin, not transform: the reveal system owns transform here) */
.manifest__item {
  position: relative;
  padding-top: clamp(18px, 2.2vh, 32px);
  /* The rule moved from .manifest__list to the item, 2026-08-07. One straight
     border across the list contradicted the staircase below it: it lined up
     with item 01 only, floated free above 02 and 03, and — because the ghost
     numerals are pulled above their item's top edge — it sliced straight
     through all three of them. Per-item rules step down with the content, so
     the descent reads as a descent and nothing crosses a numeral. */
  border-top: var(--hairline) solid rgba(240, 242, 248, 0.16);
}
.manifest__item:nth-child(2) { margin-top: clamp(14px, 3vh, 44px); }
.manifest__item:nth-child(3) { margin-top: clamp(28px, 6vh, 88px); }
.manifest__item::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 30px; height: 2px;
  background: var(--mf-accent);
  opacity: 0.85;
  transition: width var(--d-medium) var(--ease-out), opacity var(--d-medium);
}
.manifest__item:hover::before { width: 52px; opacity: 1; }
/* Removed 2026-08-07. The oversized watermark numeral was 140px tall at 5%
   opacity sitting inside a ~200px item, so it could not avoid lying under
   either the divider above it or the paragraph beside it — Max hit both. It
   carried no information the mono "01" label above each title doesn't already
   carry, so it goes, exactly as .why__ghost did. Rule kept (not deleted) so the
   markup and the parallax-free spans stay documented. */
.manifest__ghost { display: none; }
.manifest__ghost--unused {
  position: absolute;
  top: clamp(4px, 0.8vh, 12px);
  right: 4%;
  z-index: 0;
  font-family: var(--f-display);
  font-weight: 200;
  font-size: var(--t-h1);
  line-height: 1;
  color: rgba(240,242,248,0.05);
  pointer-events: none;
  will-change: transform;
  transition: color var(--d-medium) var(--ease-out);
}
.manifest__n {
  position: relative;
  z-index: 1;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-mono-label);
  color: rgba(240, 242, 248, 0.4);
  display: block;
  margin-bottom: var(--s-3);
}
.manifest__t {
  position: relative;
  z-index: 1;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-body-lg);
  line-height: 1.2;
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--s-3);
  color: var(--c-ink-on-dark);
  transition: transform var(--d-medium) var(--ease-out);
}
.manifest__item:hover .manifest__t { transform: translateX(4px); }
.manifest__d {
  position: relative;
  z-index: 1;
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: rgba(240, 242, 248, 0.66);
  margin: 0;
}

/* ─────────────── 03 · pain — the gap between what they want and what they get
   Dubai-premium editorial: slim text column + two seamless (flush) photo mosaics.
   "Что находят" is desaturated and veiled so the contrast tells the story. ─────────────── */

.pain2-sec {
  background:
    radial-gradient(120% 90% at 100% 0%, var(--c-bg-deep) 0%, rgba(245,246,248,0) 55%),
    var(--c-bg);
}
.pain2 {
  display: grid;
  grid-template-columns: minmax(280px, 31%) 1fr;
  gap: clamp(28px, 3.6vw, 68px);
  align-items: center;
  width: 100%;
}
.pain2__aside { position: relative; min-width: 0; }
.pain2__aside .v2-eyebrow { margin-bottom: clamp(8px, 1.4vh, 16px); }
.pain2__aside .v2-title { line-height: 1.05; }  /* size now == the base .v2-title step */
.pain2__aside .v2-lead { margin-top: clamp(10px, 1.4vh, 18px); max-width: 42ch; }

.pain2__rows {
  margin-top: clamp(8px, 1.6vh, 22px);
  border-top: var(--hairline) solid var(--c-line);
}
.pain2__row {
  padding: clamp(5px, 0.85vh, 12px) 0;
  border-bottom: var(--hairline) solid var(--c-line-soft);
}
.pain2__row-k {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-mono-label);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--s-2);
}
.pain2__row-v {
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--c-ink-soft);
  margin: 0;
}

.pain2__main {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.2vh, 28px);
  min-width: 0;
}
.pain2__clusters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.2vw, 40px);
  align-items: start;
}
.pain2__cluster { margin: 0; min-width: 0; }
.pain2__label {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--ls-mono-label);
  text-transform: uppercase;
  margin: 0 0 clamp(9px, 1.3vh, 15px);
  padding-bottom: clamp(7px, 1vh, 12px);
  border-bottom: var(--hairline) solid var(--c-line);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.pain2__label::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.pain2__cluster--want .pain2__label { color: var(--c-accent); }
.pain2__cluster--want .pain2__label::before { background: var(--c-accent); }
.pain2__cluster--find .pain2__label { color: var(--c-ink-faint); }
.pain2__cluster--find .pain2__label::before { background: var(--c-ink-faint); }

.pain2__mosaic {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;                       /* «слитно» — фото вплотную друг к другу */
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--c-bg-deep);
  box-shadow: var(--shadow-hero);
}
.pain2__cell {
  position: relative;
  overflow: hidden;
  display: block;
  aspect-ratio: 3 / 2;          /* горизонтальные прямоугольники — фото не режутся в квадрат */
}
.pain2__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--d-slow) var(--ease-out), filter var(--d-medium) var(--ease-out);
}
.pain2__cell:hover { z-index: 2; }
.pain2__cell:hover img { transform: scale(1.06); }

.pain2__cluster--find .pain2__cell img { filter: saturate(0.5) contrast(0.9) brightness(0.86); }
.pain2__cluster--find .pain2__cell:hover img { filter: saturate(0.74) contrast(0.95) brightness(0.94); }
.pain2__cluster--find .pain2__mosaic::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(158deg, rgba(26,37,67,0.04) 0%, rgba(26,37,67,0.30) 100%);
}

/* ── shared: labelled point-groups (also used by 13 · developer) ── */
.model__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.model__group {
  border-top: 2px solid var(--c-brand-navy);
  padding: var(--s-4) 0 0;
}
.model__group-t {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-body);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin: 0 0 var(--s-2);
}
.model__group-d {
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.45;
  color: var(--c-ink-muted);
  margin: 0;
}

/* ─────────────── 05 · demographics ─────────────── */

/* dark premium data-viz — glowing gradient charts on glass cards */
.dem {
  --dem-1: color-mix(in srgb, var(--c-accent) 58%, #ffffff);  /* tinted accent (was sage green — palette moved to blue 2026-08-07) */
  --dem-2: rgb(140, 172, 226);                                /* light blue */
  --dem-3: rgba(240,242,248,0.34);                            /* muted */
  --dem-track: rgba(255,255,255,0.07);
}
.dem__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(9px, 1vw, 14px);
  margin-top: 0;
}
.dem__card {
  border: var(--hairline) solid var(--c-line-on-dark);
  border-radius: var(--r-panel);
  padding: clamp(11px, 1.2vw, 18px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4vh, 14px);
  background: linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.015) 100%);
  box-shadow: 0 20px 48px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: border-color var(--d-medium) var(--ease-out), transform var(--d-medium) var(--ease-out);
}
.dem__card:hover { border-color: rgba(138,178,232,0.34); transform: translateY(-3px); }
/* Rows chosen so five distinct chart forms tile one screen:
   geo list (5) · age columns (4) · sex donut (3) · job bars (7) · family stack (5). */
.dem__card--geo  { grid-column: span 5; }
.dem__card--age  { grid-column: span 4; }
.dem__card--sex  { grid-column: span 3; }
.dem__card--job  { grid-column: span 7; }
.dem__card--fam  { grid-column: span 5; }
.dem__card--age, .dem__card--sex { align-items: stretch; }
.dem__card-t {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-mono-label);
  text-transform: uppercase;
  color: rgba(240,242,248,0.5);
  margin: 0;
}
.dem__card b { font-variant-numeric: tabular-nums; }

/* shared legend chips */
.chip-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.chip-legend--wrap { gap: var(--s-2) var(--s-4); }
.chip-legend li {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--f-body); font-size: var(--t-body); color: rgba(240,242,248,0.66);
}
.chip-legend li b { color: var(--c-ink-on-dark); font-family: var(--f-mono); font-size: var(--t-mono-sm); margin-left: auto; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; } /* legend swatch — true circle, not the --r-el element scale (was 2px, then a stray --r-el square) */
.dot--navy { background: var(--dem-2); box-shadow: 0 0 8px rgba(140,172,226,0.5); }
.dot--forest { background: var(--dem-1); box-shadow: 0 0 8px rgba(148,186,236,0.5); }
.dot--muted { background: var(--dem-3); }

/* AGE — vertical columns */
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); align-items: end; height: 100%; min-height: clamp(96px, 13vh, 150px); }
.col { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); height: 100%; justify-content: flex-end; }
.col__v { font-family: var(--f-mono); font-size: var(--t-mono-sm); color: rgba(240,242,248,0.6); }
.col__v b { font-family: var(--f-display); font-weight: 600; font-size: var(--t-body-lg); color: var(--c-ink-on-dark); }
.col__track { width: 100%; flex: 1; display: flex; align-items: flex-end; background: var(--dem-track); border-radius: var(--r-el); overflow: hidden; }
.col__bar {
  display: block; width: 100%; height: var(--h);
  background: linear-gradient(180deg, var(--dem-1) 0%, color-mix(in srgb, var(--dem-1) 55%, var(--dem-2)) 100%);
  border-radius: var(--r-el) var(--r-el) 0 0;
  box-shadow: 0 0 22px rgba(148,186,236,0.28);
  transform-origin: bottom; transform: scaleY(0);
  transition: transform var(--d-slower) var(--ease-out), filter var(--d-fast);
}
.col:hover .col__bar { filter: brightness(1.14); }
.dem__grid.is-anim .col__bar { transform: scaleY(1); }
.col__k { font-family: var(--f-mono); font-size: var(--t-label); color: rgba(240,242,248,0.4); }

/* SEX — conic-gradient donut */
.donut-wrap { display: flex; flex-direction: column; gap: var(--s-5); align-items: center; }
.donut {
  width: clamp(96px, 9vw, 132px); aspect-ratio: 1; border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%);
          mask: radial-gradient(circle, transparent 56%, #000 57%);
  filter: drop-shadow(0 0 16px rgba(148,186,236,0.26));
  opacity: 0; transform: scale(.82) rotate(-8deg);
  transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-spring);
}
.donut--sex { background: conic-gradient(var(--dem-2) 0 54%, var(--dem-1) 54% 100%); }
.dem__grid.is-anim .donut { opacity: 1; transform: scale(1) rotate(0); }
.donut-wrap .chip-legend { width: 100%; }

/* JOB — horizontal bars */
.bars { display: flex; flex-direction: column; gap: var(--s-4); margin: 0; }
.bar { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-4); align-items: baseline; padding: 3px 6px; border-radius: var(--r-el); transition: background var(--d-fast) var(--ease-out); }
.bar:hover { background: rgba(255,255,255,0.04); }
.bar__k { font-family: var(--f-body); font-size: var(--t-body); color: rgba(240,242,248,0.72); }
.bar__v { font-family: var(--f-mono); font-size: var(--t-mono-sm); color: var(--c-ink-on-dark); font-variant-numeric: tabular-nums; }
.bar__track { grid-column: 1 / -1; height: 7px; border-radius: var(--r-pill); background: var(--dem-track); overflow: hidden; }
.bar__fill {
  display: block; height: 100%; width: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--dem-1) 0%, var(--dem-2) 100%);
  box-shadow: 0 0 16px rgba(148,186,236,0.30);
  transform-origin: left center; transform: scaleX(0);
  transition: transform var(--d-slower) var(--ease-out);
}
.bar:hover .bar__fill { filter: brightness(1.14); }
.dem__grid.is-anim .bar__fill { transform: scaleX(var(--s, 1)); }

/* FAMILY — 100% stacked bar */
.stack { display: flex; flex-direction: column; gap: var(--s-5); }
.stack__bar { display: flex; height: 16px; border-radius: var(--r-pill); overflow: hidden; background: var(--dem-track); box-shadow: 0 0 20px rgba(148,186,236,0.16); }
.stack__seg { height: 100%; width: var(--w); transform-origin: left; transform: scaleX(0); transition: transform var(--d-slower) var(--ease-out); }
.stack__seg--1 { background: var(--dem-2); }
.stack__seg--2 { background: var(--dem-1); }
.stack__seg--3 { background: var(--dem-3); }
.stack__bar:hover .stack__seg { filter: brightness(1.1); }
.dem__grid.is-anim .stack__seg { transform: scaleX(1); }
.stack__seg--2 { transition-delay: .08s; }
.stack__seg--3 { transition-delay: .16s; }
.stack .chip-legend { flex-direction: row; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }
.stack .chip-legend li b { margin-left: var(--s-2); }

/* GEO — ranked list with rank bars */
.geo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(5px, 0.9vh, 11px); }
.geo li {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-4); row-gap: 6px;
  align-items: baseline;
  font-family: var(--f-body); font-size: var(--t-body); color: rgba(240,242,248,0.78);
  padding-bottom: clamp(5px, 0.9vh, 11px); border-bottom: var(--hairline) solid var(--c-line-on-dark);
}
.geo li:last-child { border-bottom: 0; padding-bottom: 0; }
.geo__n { font-family: var(--f-mono); font-size: var(--t-label); color: rgba(240,242,248,0.38); font-variant-numeric: tabular-nums; }
.geo__bar {
  grid-column: 2; height: 4px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--dem-1), var(--dem-2)); width: calc(var(--s) * 100%);
  box-shadow: 0 0 14px rgba(148,186,236,0.30);
  transform-origin: left; transform: scaleX(0);
  transition: transform var(--d-slower) var(--ease-out), filter var(--d-fast);
}
.geo li:hover .geo__bar { filter: brightness(1.16); }
.dem__grid.is-anim .geo__bar { transform: scaleX(1); }

/* ─────────────── 06 · market ─────────────── */

/* premium-light: subtle gradient for depth (bright luxury among the dark slides) */
.v2.mkt {
  background:
    radial-gradient(85% 65% at 100% 0%, rgba(44,95,155,0.06) 0%, transparent 55%),
    radial-gradient(80% 70% at 0% 100%, rgba(26,37,67,0.05) 0%, transparent 55%),
    linear-gradient(180deg, #ffffff 0%, var(--c-bg-deep) 100%);
}
.mkt__layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(24px, 2.6vw, 48px);
  margin-top: 0;
  align-items: start;
}
.mkt__table { width: 100%; border-collapse: collapse; }
.mkt__table th {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-mono-label);
  text-transform: uppercase;
  color: var(--c-ink-faint);
  font-weight: 400;
  text-align: left;
  padding: 0 var(--s-4) var(--s-4);
  border-bottom: var(--hairline) solid var(--c-line);
}
.mkt__table th:not(:first-child),
.mkt__table td:not(:first-child) { text-align: right; }
/* highlight the Base column — our price sits below the market median */
.mkt__table th:last-child { color: var(--c-accent-deep); font-weight: 700; }
.mkt__table th:last-child,
.mkt__table td:last-child {
  background: linear-gradient(180deg, rgba(44,95,155,0.08), rgba(44,95,155,0.035));
  padding-left: var(--s-4);
  padding-right: var(--s-4);
}
.mkt__table td {
  padding: clamp(13px, 1.9vh, 22px) var(--s-4);
  border-bottom: var(--hairline) solid var(--c-line-soft);
  font-family: var(--f-body);
  font-size: var(--t-body-lg);
  color: var(--c-ink-soft);
  transition: background var(--d-fast) var(--ease-out);
}
.mkt__table tbody tr:hover td { background: rgba(26,37,67,0.025); }
.mkt__table tbody tr:hover td:last-child { background: linear-gradient(180deg, rgba(44,95,155,0.14), rgba(44,95,155,0.07)); }
.mkt__table td:first-child { font-weight: 500; color: var(--c-ink); padding-left: 0; }
.mkt__table td.n {
  font-family: var(--f-mono);
  font-size: var(--t-body);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mkt__table td.n--ours { color: var(--c-accent-deep); font-weight: 700; font-size: var(--t-body-lg); }

.mkt__proof {
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--r-panel);
  padding: clamp(20px, 2.4vw, 40px);
  background: #ffffff;
  box-shadow: var(--shadow-card);
}
.mkt__proof-t {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-body-lg);
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--s-4);
}
.mkt__proof-d {
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--c-ink-muted);
  margin: 0 0 clamp(18px, 3vh, 36px);
}
.mkt__scale {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: var(--hairline) solid var(--c-line);
}
.mkt__scale div { display: flex; flex-direction: column; gap: var(--s-2); }
.mkt__scale div:nth-child(2) { text-align: center; }
.mkt__scale div:last-child { text-align: right; }
.mkt__scale-k {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-mono-small);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.mkt__scale-v {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: var(--t-h4);
  letter-spacing: -0.01em;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mkt__scale div:nth-child(2) .mkt__scale-v { color: var(--c-accent); font-weight: 600; }
/* range gauge under min/avg/max — visualises where the average sits in the band */
.mkt__gauge {
  position: relative;
  height: 4px;
  margin-top: clamp(14px, 2.4vh, 24px);
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--c-line) 0%, var(--c-accent-soft) 52%, var(--c-line) 100%);
}
.mkt__gauge-dot {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--c-ink-faint); border: 2px solid #fff; box-shadow: var(--shadow-card);
}
.mkt__gauge-dot--lo { left: 0; }
.mkt__gauge-dot--avg { left: 52%; background: var(--c-accent); width: 14px; height: 14px; }
.mkt__gauge-dot--hi { left: 100%; }

.mkt__concl {
  margin-top: var(--s-6);
  font-family: var(--f-body);
  font-size: var(--t-body-lg);
  line-height: 1.35;
  color: var(--c-ink);
  max-width: 46ch;
}
.mkt__concl em { font-style: normal; font-weight: 600; color: var(--c-accent-deep); }

/* ─────────────── 07 · why a villa ─────────────── */

.why { --mf-accent: color-mix(in srgb, var(--c-accent) 62%, #ffffff); }
/* fill the emptiness: a real villa photo sits under a heavy dark veil → atmosphere,
   text stays fully readable. (Interim: existing asset; can swap for a generated shot.) */
.why .depthbg {
  background:
    radial-gradient(70% 52% at 84% 4%, rgba(74,108,176,0.16) 0%, transparent 58%),
    radial-gradient(62% 58% at 6% 104%, rgba(44,95,155,0.14) 0%, transparent 60%),
    /* lighter veil (was 0.86–0.95) so the villa photo reads through — matches the
       Comparison / Audience sections. Still dark enough for the white card text. */
    linear-gradient(180deg, rgba(15,21,42,0.66) 0%, rgba(12,17,34,0.72) 55%, rgba(9,14,30,0.80) 100%),
    url("../../Photos_v2/exterior/ext_03.jpg") center 30% / cover no-repeat;
}
/* Card grid reworked 2026-08-07 (Max: "смотрится как каша из текста").
   Was: four blocks of number-label → title → paragraph stacked vertically, all
   at similar weight, so nothing anchored the eye and the four read as one wall.
   Now each card is a hanging-indent grid — the numeral is a real graphic in the
   left column, title beside it, copy indented under the title — which gives the
   block four unmistakable entry points instead of twelve equal text runs. */
.why__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vh, 44px) clamp(32px, 3.4vw, 64px);
  margin-top: 0;
}
.why__card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "n t"
    ". d";
  column-gap: clamp(14px, 1.3vw, 22px);
  row-gap: clamp(8px, 1vh, 14px);
  align-items: start;
  padding-top: clamp(16px, 2.2vh, 26px);
  border-top: var(--hairline) solid rgba(240,242,248,0.16);
}
/* The old ghost numeral sat at 5% opacity behind the card — effectively
   invisible (Max: "их почти не видно"). The visible numeral below replaces it
   outright rather than the two competing. */
.why__ghost { display: none; }
.why__n {
  grid-area: n;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 0.82;
  letter-spacing: var(--ls-display-lg);
  font-variant-numeric: tabular-nums;
  color: var(--mf-accent);
  display: block;
  margin: 0;
  transition: color var(--d-medium) var(--ease-out);
}
.why__card:hover .why__n { color: #fff; }
.why__t {
  grid-area: t;
  align-self: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-body-lg);
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
  color: var(--c-ink-on-dark);
  transition: transform var(--d-medium) var(--ease-out);
}
.why__card:hover .why__t { transform: translateX(4px); }
.why__d {
  grid-area: d;
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  /* Lifted from 0.66 — on the veiled photo backdrop that landed under 4.5:1. */
  color: rgba(240,242,248,0.80);
  max-width: 46ch;
  margin: 0;
}
.why__quote {
  position: relative;
  margin: clamp(22px, 4vh, 46px) 0 0;
  padding: clamp(18px, 2.6vh, 30px) 0 0 clamp(30px, 3vw, 48px);
  border-top: var(--hairline) solid var(--c-line-on-dark);
  max-width: none;
}
.why__quote-mark {
  position: absolute;
  left: -0.04em;
  top: clamp(6px, 1.6vh, 20px);
  font-family: var(--f-display);
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 0.6;
  color: var(--mf-accent);
  opacity: 0.5;
  pointer-events: none;
}
.why__quote p {
  font-family: var(--f-body);
  font-style: italic;
  font-size: var(--t-body-lg);
  /* 1.4 was tight for an italic serif at this size — the descenders of one line
     ran into the ascenders of the next. */
  line-height: 1.5;
  color: var(--c-ink-on-dark);
  margin: 0;
  font-weight: 400;
}
/* Attribution readability (Max 2026-08-07): mono at 0.42 opacity with tracking
   is a decorative caption, not a readable line. Dropped the mono face for the
   body serif, cut the tracking, and lifted the colour past AA. */
.why__quote footer {
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-style: italic;
  letter-spacing: 0;
  color: rgba(240,242,248,0.72);
  margin-top: var(--s-4);
  line-height: 1.5;
}

/* ─────────────── 08 · location tabs ─────────────── */

/* Head is a single row: title left, tabs right — keeps the panel's full height
   for the panel itself. */
.loc2__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-6);
  flex-wrap: wrap;
  margin-bottom: var(--s-5); /* was --s-6 — #location ran 1.03 screens at 1920×1080, 2026-08-06 */
}
.loc2__head .v2-title { max-width: 22ch; }

.loc2__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(24px, 2.8vw, 56px);
  align-items: start;
}
.loc2__col { min-width: 0; display: flex; flex-direction: column; }

.loc2__tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--r-pill);
  margin-top: 0;
  flex: 0 0 auto;
}
.loc2__tab {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--ls-mono-small);
  text-transform: uppercase;
  padding: var(--s-3) var(--s-6);
  min-height: 44px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-ink-muted);
  cursor: pointer;
  transition: background var(--d-medium) var(--ease-out), color var(--d-medium) var(--ease-out);
}
.loc2__tab:hover { color: var(--c-ink); }
.loc2__tab[aria-selected="true"] {
  background: var(--c-brand-navy);
  color: var(--c-ink-on-dark);
}
.loc2__tab:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.loc2__panel { margin-top: 0; }
.loc2__panel[hidden] { display: none; }

/* Location split: ocean/beach photo (left) + real GPS map (right), 50/50 */
.loc2__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.6vw, 26px);
  align-items: stretch;
}
.loc2__photo,
.loc2__mapfig {
  position: relative;
  margin: 0;
  border-radius: var(--r-panel);
  overflow: hidden;
  aspect-ratio: 1500 / 1180;
  background: var(--c-bg-deep);
}
.loc2__photo img,
.loc2__mapfig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.loc2__photo-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 10, 20, 0.78) 0%, rgba(6, 10, 20, 0.18) 46%, transparent 72%);
  pointer-events: none;
}
.loc2__photo-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(20px, 2.2vw, 40px);
  color: #fff;
}

.loc2__hero {
  position: relative;
  border-radius: var(--r-panel);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  max-height: 34vh;
  background: var(--c-bg-deep);
  margin: 0;
}
.loc2__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loc2__hero-veil {
  position: absolute;
  inset: 0;
  background: var(--c-overlay-dark);
  pointer-events: none;
}
.loc2__hero-copy {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(24px, 3vw, 56px);
  color: var(--c-ink-on-photo);
}
.loc2__hero-t {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: var(--t-h3);
  line-height: 1.1;
  letter-spacing: var(--ls-display-lg);
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.loc2__hero-p {
  font-family: var(--f-body);
  font-size: var(--t-body-lg);
  color: rgba(255, 255, 255, 0.82);
  margin: var(--s-4) 0 0;
  max-width: 56ch;
}

.loc2__drivers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.6vw, 28px);
  margin-top: var(--s-4); /* was --s-5 — see .loc2__head note */
}
.loc2__driver {
  border-top: var(--hairline) solid var(--c-line);
  padding-top: var(--s-4);
}
.loc2__driver-t {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-body-lg);
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--s-3);
}
.loc2__driver-d {
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--c-ink-muted);
  margin: 0;
}
.loc2__who {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--ls-mono-small);
  color: var(--c-ink-faint);
  margin: var(--s-4) 0 0; /* was --s-5 — see .loc2__head note */
}

.loc2__inf { display: flex; flex-direction: column; }
.loc2__inf-t {
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: var(--t-label);
  letter-spacing: var(--ls-mono-label);
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin: 0 0 var(--s-3);
}
.loc2__inf-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: var(--hairline) solid var(--c-line-soft);
  align-items: baseline;
}
.loc2__inf-k {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-mono-small);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.loc2__inf-v {
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.4;
  color: var(--c-ink-soft);
  margin: 0;
}
.loc2__inf-v b { font-weight: 600; color: var(--c-ink); }
.loc2__map {
  border-radius: var(--r-panel);
  overflow: hidden;
  border: var(--hairline) solid var(--c-line);
  background: var(--c-bg-deep);
  margin: var(--s-5) 0 0;
}
/* The source map carries its own legend panel down the left edge, which now
   duplicates the native list beside it — bias the crop right so the satellite
   view and the project marker are what survive. */
.loc2__map img {
  width: 100%;
  height: auto;
  max-height: 26vh;
  object-fit: cover;
  object-position: 68% center;
  display: block;
}

/* ─────────────── 10 · master plan — full-screen aerial photo, text overlaid on the
   empty (no-house) zones: title top-left over the greenery, stats + features along
   the bottom over the road/grass, with soft scrims so the text stays readable. ─────────────── */

.v2.mp2-sec { padding-top: 0; padding-bottom: 0; justify-content: flex-start; background: var(--c-brand-navy-deep); }
.mp2__photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.mp2__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(9,13,28,0.56) 0%, rgba(9,13,28,0.16) 18%, transparent 36%),
    linear-gradient(0deg, rgba(9,13,28,0.85) 0%, rgba(9,13,28,0.42) 22%, transparent 47%),
    radial-gradient(55% 45% at 20% 10%, rgba(9,13,28,0.32), transparent 62%);
}
.mp2__overlay {
  position: relative; z-index: 2;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding-top: clamp(84px, 12vh, 120px);
  padding-bottom: clamp(34px, 6vh, 66px);
  gap: var(--s-6);
}
.mp2__top { max-width: 44ch; }
.mp2__top .v2-eyebrow { color: rgba(240,242,248,0.72); }
.mp2__top .v2-title { color: #ffffff; text-shadow: 0 2px 28px rgba(0,0,0,0.55); }
.mp2__lead {
  font-family: var(--f-body);
  font-size: var(--t-body-lg);
  line-height: 1.5;
  color: rgba(255,255,255,0.92);
  margin: clamp(12px, 1.8vh, 20px) 0 0;
  max-width: 42ch;
  text-shadow: 0 1px 18px rgba(0,0,0,0.6);
}
.mp2__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 80px);
  flex-wrap: wrap;
}
.mp2__stats { display: flex; flex-wrap: wrap; row-gap: var(--s-5); gap: clamp(22px, 3.4vw, 60px); } /* wrap: 4 unbreakable stat items don't fit one row on phones (mobile audit 2026-08-07) */
.mp2__stat-v {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: var(--t-h3);
  line-height: 1;
  letter-spacing: var(--ls-display-lg);
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  margin: 0;
  text-shadow: 0 2px 24px rgba(0,0,0,0.6);
}
.mp2__stat-v--sm { font-size: var(--t-body-lg); font-weight: 500; }
.mp2__stat-k {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-mono-label);
  text-transform: uppercase;
  color: rgba(255,255,255,0.64);
  margin: var(--s-2) 0 0;
  text-shadow: 0 1px 10px rgba(0,0,0,0.55);
}
.mp2__lists { display: flex; flex-wrap: wrap; row-gap: var(--s-5); gap: clamp(20px, 3vw, 52px); } /* wrap: same reasoning as .mp2__stats above */
.mp2__list-t {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-mono-label);
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  margin: 0 0 var(--s-3);
  text-shadow: 0 1px 10px rgba(0,0,0,0.55);
}
.mp2__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.mp2__list li {
  font-family: var(--f-body);
  font-size: var(--t-body);
  color: rgba(255,255,255,0.85);
  padding-left: var(--s-5);
  position: relative;
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}
.mp2__list li::before { content: "+"; position: absolute; left: 0; color: rgba(255,255,255,0.5); font-family: var(--f-mono); }

/* ─────────────── 11 · unit cards ─────────────── */

/* Numbered master plan sits in the aside so the four cards get the main column;
   it is portrait, so it is capped by viewport height rather than width. */
/* Units section header band: eyebrow on top, big title bottom-left, lead bottom-right. */
.units2__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--s-3) clamp(24px, 4vw, 72px);
  margin: 0 0 clamp(20px, 2.4vh, 32px); /* was 3.2vh/46px cap — see .u-card__mini note */
}
.units2__head .v2-eyebrow { grid-column: 1 / -1; margin: 0; }
.units2__head .v2-title { grid-column: 1; margin: 0; }
.units2__head .v2-lead { grid-column: 2; justify-self: end; text-align: right; max-width: 42ch; margin: 0; }

/* No card backing — the transparent cut-out plan floats on the light section,
   left-aligned, sized tall (portrait) to nearly fill the section height.
   width:fit-content shrink-wraps the figure to the image box so the percentage
   number-pins land on the right footprints regardless of the column width. */
.units2__plan {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: var(--s-5) 0 0;
}
.units2__plan img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 16px 34px rgba(16, 22, 40, 0.16));
}

/* Per-unit number pins overlaid on the plan: always visible (the 1–16
   numbering), and they light up the units of the hovered type card. */
.uplan-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1A2543;
  color: #fff;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(16, 22, 40, 0.4);
  pointer-events: none;
  transition: transform var(--d-medium) var(--ease-out),
              opacity var(--d-medium) var(--ease-out),
              background var(--d-medium) var(--ease-out),
              box-shadow var(--d-medium) var(--ease-out);
}
/* hovering a type card dims every pin, then relights this type's units */
.units2__plan[data-hl] .uplan-pin { opacity: 0.2; }
.units2__plan[data-hl="40"] .uplan-pin[data-utype="40"],
.units2__plan[data-hl="50"] .uplan-pin[data-utype="50"],
.units2__plan[data-hl="60"] .uplan-pin[data-utype="60"],
.units2__plan[data-hl="80"] .uplan-pin[data-utype="80"] {
  opacity: 1;
  background: #2C5F9B;
  transform: translate(-50%, -50%) scale(1.32);
  box-shadow: 0 4px 16px rgba(44,95,155, 0.55);
  z-index: 3;
}

.units2__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.4vw, 20px);
  margin-top: 0;
}
.u-card {
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--r-panel);
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  transition: border-color var(--d-medium) var(--ease-out), box-shadow var(--d-medium) var(--ease-out);
}
.u-card:hover {
  border-color: var(--c-brand-navy);
  box-shadow: var(--shadow-card);
}
/* type card = text body + mini floor-plan thumbnail on the right.
   Horizontal → the plan adds width, not height, so the section stays 1 screen. */
.u-card { flex-direction: row; align-items: stretch; gap: var(--s-5); }
.u-card__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.u-card__mini {
  position: relative;
  flex: 0 0 auto;
  width: clamp(148px, 42%, 198px);
  height: clamp(152px, 20vh, 188px); /* was 23vh/214px cap — #units ran 1.06 screens at 1920×1080, 2026-08-06 */
  align-self: center;
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--r-panel);
  background: #fdfdfc;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--d-medium) var(--ease-out), box-shadow var(--d-medium) var(--ease-out);
}
/* absolute inset + object-fit:contain guarantees the whole plan fits (no crop),
   because the panel has a definite height that % can resolve against. */
.u-card__mini img {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: contain;
  display: block;
}
.u-card__mini::after {
  content: "⤢";
  position: absolute;
  right: 5px; bottom: 4px;
  font-size: var(--t-label);
  line-height: 1;
  color: #fff;
  background: rgba(26, 37, 67, 0.82);
  border-radius: var(--r-el);
  padding: 3px 4px;
  opacity: 0;
  transition: opacity var(--d-medium) var(--ease-out);
}
.u-card__mini:hover, .u-card__mini:focus-visible {
  border-color: var(--c-brand-navy);
  box-shadow: var(--shadow-card);
}
.u-card__mini:hover::after, .u-card__mini:focus-visible::after { opacity: 1; }

/* floor-plan lightbox */
.uplan-lb {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 1080px);
  max-height: 92vh;
  overflow: visible;
}
.uplan-lb::backdrop { background: rgba(16, 22, 40, 0.8); }
.uplan-lb__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--r-panel);
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.uplan-lb__close {
  position: absolute;
  top: 10px; right: 10px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--c-brand-navy);
  font-size: var(--t-body);
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}
.u-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding-bottom: var(--s-4); /* was --s-5 — #units ran 1.06 screens at 1920×1080, 2026-08-06 */
  border-bottom: var(--hairline) solid var(--c-line);
}
.u-card__tag {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-mono-label);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.u-card__count {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-mono-small);
  color: var(--c-accent);
  background: var(--c-accent-soft);
  border-radius: var(--r-pill);
  padding: 3px var(--s-3);
  white-space: nowrap;
}
.u-card__t {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: var(--t-body-lg);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: var(--s-4) 0 var(--s-3);
}
.u-card__t em { font-style: normal; font-weight: 700; }
.u-card__d {
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.35;
  color: var(--c-ink-muted);
  margin: 0 0 var(--s-3); /* was --s-4 — see .u-card__head note */
  min-height: 2.4em; /* was 2.7em */
}
.u-card__plan {
  margin: 0 0 var(--s-6);
  border-radius: var(--r-el);
  overflow: hidden;
  background: var(--c-bg-deep);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
}
.u-card__plan img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  padding: var(--s-4);
}
.u-card__plan--empty {
  border: 1px dashed var(--c-line);
  background: transparent;
}
.u-card__plan-note {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-mono-small);
  color: var(--c-ink-faint);
  text-align: center;
  padding: var(--s-5);
}
.u-card__prices {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-3); /* was --s-4 — see .u-card__head note */
  border-top: var(--hairline) solid var(--c-line);
}
.u-card__price {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px var(--s-4);
}
.u-card__price-k { flex: 0 0 auto; }
.u-card__price-v { min-width: 0; }
.u-card__price-k {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-mono-small);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.u-card__price-v {
  font-family: var(--f-display);
  font-weight: 300;
  /* was --t-body-xl, whose legacy alias already resolved to --t-body-lg — so
     this is the step it has always rendered at. --t-h4 would be a real +10px
     jump and costs #units 75px of height across the stacked cards. */
  font-size: var(--t-body-lg);
  letter-spacing: var(--ls-display-lg);
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.u-card__price--full .v,
.u-card__price--full .u-card__price-v {
  font-size: var(--t-body-lg);
  font-weight: 500;
  color: var(--c-ink-muted);
}
.u-card__price-note {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  color: var(--c-ink-faint);
  letter-spacing: var(--ls-mono-small);
  margin: 0;
}
.u-card__units {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-mono-small);
  color: var(--c-ink-faint);
  margin: var(--s-3) 0 0;
  line-height: 1.4;
}
.u-card__units b { color: var(--c-ink-soft); font-weight: 500; }

.units2__terms {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: clamp(10px, 1.1vw, 18px);
  align-items: center;
  margin-top: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--c-bg-deep);
  border-radius: var(--r-panel);
}
.units2__term-k {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-mono-label);
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin: 0 0 var(--s-2);
}
.units2__term-v {
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--c-ink);
  margin: 0;
  line-height: 1.3;
}
.units2__cta { margin: 0; justify-content: flex-end; }

/* ─────────────── 14 · management ─────────────── */

.mgm__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.4vw, 20px);
  margin-top: 0;
}
.mgm__col {
  border-radius: var(--r-panel);
  padding: var(--s-5);
  border: var(--hairline) solid var(--c-line);
}
.mgm__col--pays { background: var(--c-bg-deep); }
.mgm__col--never {
  border-style: dashed;
  border-color: var(--c-line);
}
.mgm__col-t {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-body-lg);
  line-height: 1.25;
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: var(--hairline) solid var(--c-line);
  min-height: 3.4em;
}
.mgm__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.mgm__list li {
  font-family: var(--f-body);
  font-size: var(--t-body);
  color: var(--c-ink-soft);
  padding-left: var(--s-5);
  position: relative;
}
.mgm__list li::before {
  content: "+";
  position: absolute; left: 0;
  font-family: var(--f-mono);
  color: var(--c-accent);
}
.mgm__col--never .mgm__list li { color: var(--c-ink-muted); text-decoration: line-through; text-decoration-thickness: 1px; } /* was --c-ink-faint: ~2.4:1 on --c-bg-deep, fails WCAG AA (mobile audit 2026-08-07). --c-ink-muted is the token already documented as 5.5:1 on white */
.mgm__col--never .mgm__list li::before { content: "−"; color: var(--c-ink-faint); text-decoration: none; }
.mgm__key {
  margin-top: var(--s-6);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-panel);
  background: var(--c-brand-navy);
  color: var(--c-ink-on-dark);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.45;
  max-width: none;
}
.mgm__fee {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  flex-wrap: wrap;
  margin-top: var(--s-5);
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--ls-mono-small);
  color: var(--c-ink-faint);
}
.mgm__fee b { color: var(--c-ink); font-weight: 500; }

/* ─────────────── 15 · yield scenarios ─────────────── */

.yl2__hero {
  margin-top: var(--s-6);
  padding: var(--s-6) 0;
  border-top: var(--hairline) solid var(--c-line-on-dark);
  border-bottom: var(--hairline) solid var(--c-line-on-dark);
  text-align: left;
}
.yl2__num {
  font-family: var(--f-display);
  font-weight: 100;
  font-size: var(--t-h2);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-ink-on-dark);
  font-variant-numeric: tabular-nums;
  margin: 0;
  white-space: nowrap;
}
.yl2__num em { font-style: normal; font-weight: 600; }
.yl2__dash {
  display: inline-block;
  width: clamp(24px, 4vw, 64px);
  height: 2px;
  background: rgba(240, 242, 248, 0.34);
  vertical-align: middle;
  margin: 0 clamp(8px, 1.4vw, 20px);
}
.yl2__scenarios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.4vw, 20px);
  margin-top: 0;
}
.yl2__sc {
  border: var(--hairline) solid var(--c-line-on-dark);
  border-radius: var(--r-panel);
  padding: var(--s-5);
}
.yl2__sc--opt { border-style: dashed; }
.yl2__sc-v {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: var(--t-h3);
  line-height: 1;
  letter-spacing: var(--ls-display-lg);
  color: var(--c-ink-on-dark);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.yl2__sc--opt .yl2__sc-v { color: rgba(240, 242, 248, 0.62); }
.yl2__sc-t {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-body);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--c-ink-on-dark);
  margin: var(--s-5) 0 var(--s-2);
}
.yl2__sc-d {
  font-family: var(--f-body);
  font-size: var(--t-body);
  color: rgba(240, 242, 248, 0.6);
  margin: 0;
}
.yl2__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 2.6vw, 48px);
  margin-top: var(--s-6);
}
.yl2__col-t {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-mono-label);
  text-transform: uppercase;
  color: rgba(240, 242, 248, 0.5);
  margin: 0 0 var(--s-5);
}
.yl2__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: var(--hairline) solid var(--c-line-on-dark);
  font-family: var(--f-body);
  font-size: var(--t-body);
}
.yl2__k { color: rgba(240, 242, 248, 0.62); }
.yl2__v { color: var(--c-ink-on-dark); font-family: var(--f-mono); font-size: var(--t-mono-sm); font-variant-numeric: tabular-nums; }

/* ─────────────── 16 · payment plans ─────────────── */

.pay2__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.4vw, 20px);
  margin-top: 0;
}
.pay2__card {
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--r-panel);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  transition: border-color var(--d-medium) var(--ease-out);
}
.pay2__card:hover { border-color: var(--c-brand-navy); }
.pay2__tag {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-mono-label);
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin: 0 0 var(--s-5);
}
.pay2__t {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: var(--t-h3);
  line-height: 1;
  letter-spacing: var(--ls-display-lg);
  margin: 0 0 var(--s-3);
  text-transform: uppercase;
}
.pay2__d {
  font-family: var(--f-body);
  font-size: var(--t-body);
  color: var(--c-ink-muted);
  margin: 0 0 var(--s-6);
}
.pay2__list { list-style: none; margin: auto 0 0; padding: var(--s-5) 0 0; border-top: var(--hairline) solid var(--c-line); display: flex; flex-direction: column; gap: var(--s-4); }
.pay2__list li { display: flex; justify-content: space-between; gap: var(--s-4); align-items: baseline; }
.pay2__list span:first-child {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-mono-small);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.pay2__list span:last-child {
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--c-ink);
  text-align: right;
}

/* Four labels across a ~310px aside gives each ~70px — "Бронирование" alone is
   wider than that. Stack them 2×2 so each label keeps its own line. */
.pay2__bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4) var(--s-4);
  margin-top: var(--s-6);
}
.pay2__bar-step { display: flex; flex-direction: column; gap: var(--s-3); }
.pay2__bar-line { height: 3px; border-radius: var(--r-pill); background: var(--c-brand-navy); opacity: 0.22; }
.pay2__bar-step:first-child .pay2__bar-line { opacity: 1; }
.pay2__bar-step:nth-child(2) .pay2__bar-line { opacity: 0.7; }
.pay2__bar-step:nth-child(3) .pay2__bar-line { opacity: 0.45; }
.pay2__bar-k {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-mono-small);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

/* ─────────────── responsive ─────────────── */

/* Short laptop screens (≈768px tall): the unit cards carry four blocks each and
   simply cannot hold a full screen at that height. The one-line description is
   the least load-bearing part — price, size and unit numbers are what the slide
   is for — so it goes first rather than letting the slide spill. */
@media (min-width: 1101px) and (max-height: 820px) {
  .u-card__d { display: none; }
  .u-card__t { margin: var(--s-3) 0 var(--s-3); font-size: var(--t-body-lg); }
  .units2__plan img { max-height: 64vh; }
  .v2-lead { font-size: var(--t-body); }
  .yl2__num { font-size: var(--t-h3); }
}

/* Below the slide breakpoint every section stops being one screen and simply
   flows — trying to hold 100vh on a phone is what pushes content off-slide. */
@media (max-width: 1100px) {
  section.v2,
  .v2 {
    min-height: 0;
    display: block;
    padding: var(--s-8) 0;
    overflow: visible;
  }
  .slide,
  .slide--even,
  .slide--wide-aside { grid-template-columns: 1fr; gap: var(--s-7); }
  /* (the old mobile .v2-title size mapped onto the same --t-h3 step the base
     rule already uses, so the override is removed rather than restated) */
  .mkt__layout,
  .loc2__grid,
  .yl2__cols { grid-template-columns: 1fr; }
  .units2__terms { grid-template-columns: repeat(2, 1fr); }
  .units2__cta { grid-column: 1 / -1; justify-content: flex-start; }
  .loc2__hero,
  .units2__plan img,
  .loc2__map img { max-height: none; }
  .dem__card--geo,
  .dem__card--age,
  .dem__card--sex,
  .dem__card--job,
  .dem__card--fam { grid-column: span 12; }
}

@media (max-width: 900px) {
  .pain2 { grid-template-columns: 1fr; gap: var(--s-7); align-items: start; }
  .why__grid,
  .manifest__list,
  .mgm__cols,
  .pay2__grid,
  .yl2__scenarios,
  .loc2__drivers { grid-template-columns: 1fr; }
  .loc2__split { grid-template-columns: 1fr; }
  .units2__grid { grid-template-columns: 1fr; }
  .units2__head { grid-template-columns: 1fr; }
  .units2__head .v2-lead { grid-column: 1; justify-self: start; text-align: left; }
  .u-card { flex-direction: column; }
  .u-card__mini { width: 100%; align-self: auto; aspect-ratio: 16 / 8; max-height: 170px; margin-top: var(--s-4); }
  .mp2__head { grid-template-columns: 1fr; align-items: start; }
  /* `.mp2__stats`/`.mp2__lists` are flex, not grid — grid-template-columns was a
     no-op here (dead code, mobile audit 2026-08-07). flex-basis is what actually
     forces a 2-per-row wrap on a flex container. */
  .mp2__stats > * { flex: 0 0 calc(50% - 11px); }
  .loc2__head { flex-direction: column; align-items: flex-start; }
  .mp2__lists > * { flex: 0 0 calc(50% - 10px); }
  .loc2__inf-row { grid-template-columns: 1fr; gap: var(--s-2); }
  .loc2__hero { aspect-ratio: 4 / 3; }
  .pay2__bar { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
}

@media (max-width: 560px) {
  .pain2__clusters { grid-template-columns: 1fr; gap: var(--s-5); }
  .u-card__d { min-height: 0; }
  .mgm__col-t { min-height: 0; }
  .mkt__scale { grid-template-columns: 1fr; gap: var(--s-5); }
  .mkt__scale div,
  .mkt__scale div:nth-child(2),
  .mkt__scale div:last-child { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .bar__fill { transition: none; transform: scaleX(1); }
  .pain2__cell img { transition: none; }
  .pain2__cell:hover img { transform: none; }
}

/* ── Audience section: atmospheric expat-lifestyle photo behind the dark dashboard.
   Photo sits ABOVE the depthbg gradient (z-index) so it's actually visible;
   a directional scrim keeps it darker on the left (under the white text) and
   lighter on the right (where the glass cards already darken it). ── */
#audience { position: relative; }
#audience .dem__bg-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0.9;
}
#audience .dem__bg-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(105deg, rgba(9, 13, 24, 0.9) 0%, rgba(9, 13, 24, 0.86) 22%, rgba(9, 13, 24, 0.55) 46%, rgba(9, 13, 24, 0.42) 100%);
}
#audience .depthbg { z-index: 0; }
#audience .v2__inner { position: relative; z-index: 2; }

/* ── Next-steps: keep the step numbers aligned. The "Dec 2026" date on step 3
   sits top-right (absolute) instead of pushing the "03" number down. ── */
@media (min-width: 1101px) {
  .p-step__date {
    position: absolute;
    top: clamp(32px, 4vh, 56px);
    right: clamp(20px, 1.8vw, 32px);
    margin: 0;
  }
}

/* ── Developer section: founder portrait beside the content (premium 2-col) ── */
.developer__inner {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 33%);
  gap: clamp(40px, 5vw, 96px);
  align-items: center;
}
.developer__content {
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 4.2vh, 58px);
  min-width: 0;
}
.developer__portrait {
  margin: 0;
  position: relative;
  border-radius: var(--r-panel);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  max-height: 64vh;
  align-self: center;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.developer__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.developer__portrait-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: clamp(18px, 1.8vw, 30px);
  background: linear-gradient(to top, rgba(10, 16, 30, 0.9) 0%, rgba(10, 16, 30, 0.28) 66%, transparent 100%);
}
.developer__portrait-name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-body-lg);
  color: #fff;
  letter-spacing: 0.01em;
}
.developer__portrait-role {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}
@media (max-width: 1100px) {
  .developer__inner { grid-template-columns: 1fr; }
  .developer__portrait { max-height: 58vh; max-width: 380px; width: 100%; margin: 0 auto; }
}

/* ── Developer 2-col fix: the narrow left column can't hold the big title AND
   side-by-side stats, so the stats overflowed under the portrait. Stack the
   two stat cards vertically, tighten the top-row gap, and scale the title so
   everything packs into the left column with zero collision. Height is
   unchanged (stacked stats are shorter than the header) → still one screen. ── */
.developer__inner { grid-template-columns: 1fr minmax(272px, 29%); }
.developer__top { gap: clamp(18px, 1.8vw, 32px); align-items: start; }
.developer__stats { flex-direction: column; align-self: start; }
.developer__stat { min-width: 132px; }
.developer__title { font-size: var(--t-h3); }
/* min-width added (was bare max-width: 1100px) — v2.css loads after style.css,
   so at equal specificity this always won over style.css's own
   `@media (max-width: 700px) { .developer__stats { flex-direction: column } }`,
   even on phones where that rule was the one actually meant to apply. This is
   a tablet-range treatment; phones now correctly fall through to style.css's
   column stack. Mobile audit 2026-08-07. */
@media (min-width: 701px) and (max-width: 1100px) {
  .developer__stats { flex-direction: row; }
}

/* ═══════════════════════════════════════════════════════════════════
   BATCH 2026-07-20 · audience text legibility · gallery title wrap
   ═══════════════════════════════════════════════════════════════════ */

/* ── Audience (#audience): Max — the small text was too small & too grey to read
   over the photo. Bigger + brighter, SCOPED to #audience (id-specificity 1,1,0
   beats the shared .v2--dark / .dem base rules) so no other section changes.
   Big headline + bright value figures deliberately untouched. ── */
#audience .v2-eyebrow { font-size: var(--t-mono-sm); color: rgba(240, 242, 248, 0.78); }
#audience .v2-lead { color: rgba(240, 242, 248, 0.86); }
#audience .v2-note { font-size: var(--t-body); color: rgba(240, 242, 248, 0.76); }
#audience .dem__card-t { font-size: var(--t-mono-sm); color: rgba(240, 242, 248, 0.76); }
#audience .col__k { font-size: var(--t-mono-sm); color: rgba(240, 242, 248, 0.76); }
#audience .col__v { font-size: var(--t-body); color: rgba(240, 242, 248, 0.82); }
#audience .geo__name { font-size: var(--t-body-lg); color: rgba(240, 242, 248, 0.9); }
#audience .geo__n { font-size: var(--t-mono-sm); color: rgba(240, 242, 248, 0.62); }
#audience .chip-legend li { font-size: var(--t-body); color: rgba(240, 242, 248, 0.86); }
#audience .bar__k { font-size: var(--t-body); color: rgba(240, 242, 248, 0.88); }

/* ── Gallery title: on page 3 the long RU word «СОВРЕМЕННОСТЬ» overflowed the
   narrow white column under the photos. Let it wrap/hyphenate inside the column
   (language-agnostic, works RU & EN, all pages); small font trim for a clean break. ── */
section.gallery .gallery__card .display.display--3 {
  font-size: var(--t-body-lg); /* long RU word «СОВРЕМЕННОСТЬ» must fit one line; the em below renders it (weight 900), so size is tuned against that */
  overflow-wrap: break-word;             /* safety net: if it ever can't fit, it breaks INSIDE the column, never under the photos */
  word-break: break-word;
  hyphens: auto;
  min-width: 0;
}
/* Drop the 1.16× em size boost for the gallery title only — that boost is what pushed
   the bold word «СОВРЕМЕННОСТЬ» past the column. Weight 900 keeps the emphasis. */
section.gallery .gallery__card .display.display--3 em { font-size: 1em; }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE ADAPTATION 2026-07-20 · 9:16 backgrounds (phones) + stacked-layout fixes
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* #why — vertical 9:16 villa background (keeps the light veil) */
  .why .depthbg {
    background:
      radial-gradient(70% 52% at 84% 4%, rgba(74, 108, 176, 0.16) 0%, transparent 58%),
      radial-gradient(62% 58% at 6% 104%, rgba(44,95,155, 0.14) 0%, transparent 60%),
      linear-gradient(180deg, rgba(15, 21, 42, 0.60) 0%, rgba(12, 17, 34, 0.66) 52%, rgba(9, 14, 30, 0.76) 100%),
      url("../../_dl/why-bg-m.webp") center 28% / cover no-repeat;
  }
}
@media (max-width: 900px) {
  /* units — the mini floor-plan box was 16/8 (too wide) so the plan showed tiny.
     A 4/3 box lets the plan fill the width on mobile. */
  .u-card__mini { aspect-ratio: 4 / 3; max-height: 260px; }
  /* units — keep the card row inside the viewport (was spilling ~20px right) */
  #units .v2__inner { overflow-x: clip; }
}
@media (max-width: 1100px) {
  /* developer — the batch-2 desktop 2-col rule must collapse to 1 col here,
     else the founder portrait overlaps the body text */
  .developer__inner { grid-template-columns: 1fr !important; }
}

/* Mobile nav fit: the RU/EN toggle was clipping off the right edge (~15px) because
   the long brand forced the grid wider than the viewport. Shorten the brand on
   phones and let its grid column shrink so the toggle stays on-screen. */
@media (max-width: 600px) {
  /* The long brand ("Base · Bali Villas · Maison Development") made the fixed nav
     wider than the phone viewport, pushing the RU/EN toggle ~15px off-screen.
     Drop the "· Maison Development" suffix on phones (kept in the developer +
     contact sections) so the brand + toggle fit. Higher specificity than the
     base mobile rule that force-shows it. */
  .nav .nav__brand-suffix { display: none !important; }
  .nav__brand { min-width: 0 !important; overflow: hidden !important; }
  /* The fixed nav's grid track still parks the RU/EN toggle ~15px past the right
     edge; nudge it back inside and clip any residual horizontal overflow. */
  .nav .lang { transform: translateX(-24px) !important; }
}

/* ── #why title scale, 2026-08-07 ────────────────────────────
   Max: "сделал бы крупнее заголовок". The wide aside gives this slide ~620px
   of column at 1920 and the section runs a full 1080 with the content block
   floating in the middle of it, so unlike #units and #location — where the
   comment on .v2-title--lg explains why bigger titles push content past the
   fold — this one has the room to spend. --t-h2 is the section-headline role,
   the same step the Comparison slide's title already uses. */
@media (min-width: 1101px) {
  #why .v2-title { font-size: var(--t-h2); }
  #why .why__grid { gap: clamp(32px, 4.6vh, 64px) clamp(32px, 3.4vw, 64px); }
}

/* The staircase offsets are a diagonal across three columns. Stacked into one
   column on a phone there is no diagonal left — they just make the gap before
   02 and 03 inconsistent with the gap before 01. (2026-08-07) */
@media (max-width: 900px) {
  .manifest__item:nth-child(2),
  .manifest__item:nth-child(3) { margin-top: 0; }
}

/* ── 4-language switcher fit, 2026-08-17 ──────────────────────
   The switcher went from RU/EN to RU/EN/PL/FR (~50px wider), and the
   PL and FR nav labels are longer than the English ones
   ("Lokalizacja", "Rentownosc", "Emplacement", "Rendement").
   Between 901px — where the desktop header is still shown instead of
   the burger — and 1150px the nav's `auto 1fr auto` tracks together
   outgrew the viewport: measured at 950px, the links needed 456px (PL)
   / 453px (FR) but only 426px was left over, which pushed the switcher
   46px (PL) / 37px (FR) past the right edge. RU was already flush at
   -5px before the two new buttons, so this band was out of room
   regardless of language.

   Freed by dropping the " · Maison Development" brand suffix here, the
   same trade the <=600px rule in style.css already makes (the suffix
   is kept in the developer + contact sections, so no branding is
   lost) — that returns ~180px, far more than the ~50px needed, so the
   nav labels keep their full size and tracking. `minmax(0, 1fr)` on
   the middle track is a floor: the min-content default is what let the
   links push the switcher off-screen rather than yield.
   At >=1151px there is room to spare and at <=900px the header
   collapses to the burger + drawer, so neither end is touched. */
@media (min-width: 901px) and (max-width: 1150px) {
  .nav .nav__brand-suffix { display: none; }
  .nav__brand { min-width: 0; }
  .nav { grid-template-columns: auto minmax(0, 1fr) auto; }
  /* Dropping the suffix left PL/FR ~5-10px short at the tightest point
     (950px). Easing the inter-link gap closes it and restores a gap
     between the brand and the first link; the labels themselves keep
     their full size and tracking. */
  .nav__links { gap: clamp(14px, 1.6vw, 24px); }
  /* At the very bottom of the band (901–~1050px) the seven links still
     run past the track — RU included, by 2px, so this is not a PL/FR-only
     shortfall. Ramp the label size down to 9.5px there and back to the
     normal 11px (--t-label) by ~1047px, rather than cutting label text. */
  .nav__link { font-size: clamp(9.5px, 1.05vw, 11px); }
}