/* ============================================================
   Base · Bali Villas — Site (archidomo-inspired)
   Reuses ../tokens.css for design tokens.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  /* Body bg → white (was navy) — fixes blue strip at bottom of slides 2026-05-02 */
  background: var(--c-bg, #fff);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
html { background: var(--c-bg, #fff); }
/* Lenis smooth scroll fix */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ============================================================
   PRELOADER — 3s cinematic intro
   ============================================================ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  /* BASE intro: navy fallback + load.png (2026-05-03 v18) */
  background-color: var(--c-brand-navy);
  background-image: url("../../Photos/renders/load.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vh, 40px);
  overflow: hidden;
  isolation: isolate;
  /* v75: 2s smooth fade-out (was 0.7/0.9s) */
  transition: opacity 2.0s var(--ease-out), transform 2.0s var(--ease-out);
}
.preloader__bg {
  position: absolute;
  inset: -24px;
  z-index: -1;
  background-color: var(--c-brand-navy);
  background-image: url("../../Photos/renders/load.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(32px) saturate(1.18);
  opacity: 0;
  animation: pre-bg-reveal 2.8s 0.1s var(--ease-out) forwards;
  will-change: filter, opacity;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}
@keyframes pre-bg-reveal {
  0%   { opacity: 0; filter: blur(32px) saturate(1.22); }
  18%  { opacity: 1; filter: blur(32px) saturate(1.22); }
  100% { opacity: 1; filter: blur(0)    saturate(1.0); }
}
/* Radial darkening + усиленный bottom-up gradient (2026-05-04 v81 — темнее) */
.preloader::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 70% at center,
      rgba(0,0,0,0.18) 0%,
      rgba(0,0,0,0.42) 65%,
      rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.05) 25%,
      rgba(0,0,0,0.30) 50%,
      rgba(0,0,0,0.60) 75%,
      rgba(0,0,0,0.85) 92%,
      rgba(0,0,0,0.95) 100%);
  pointer-events: none;
}
.preloader__inner {
  /* v70: padding 0 чтобы BASE вмещался в полную ширину viewport */
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.4vh, 36px);
  width: 100%;
  max-width: 100%;
  padding: 0;
}
.preloader__eyebrow,
.preloader__tag {
  /* v69: размер ×2 (was clamp(16px, 1.25vw, 20px)) */
  font-family: var(--f-mono);
  font-size: clamp(32px, 2.5vw, 40px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 2px 14px rgba(0,0,0,0.45),
    0 4px 28px rgba(0,0,0,0.28);
  display: flex;
  gap: 14px;
}
.preloader__eyebrow [data-pre-fade],
.preloader__tag [data-pre-fade] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.preloader__word {
  /* v148: BASE по центру с равными отступами по краям (text-align center, не space-between) */
  font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
  font-weight: 200;
  font-size: clamp(180px, 32vw, 640px);
  line-height: 0.88;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow:
    0 4px 22px rgba(0,0,0,0.40),
    0 10px 60px rgba(0,0,0,0.26);
  opacity: 1;
  display: block;
  text-align: center;
  width: 100%;
  padding: 0 clamp(20px, 3vw, 48px);
  box-sizing: border-box;
  text-transform: uppercase;
  margin: 0;
}
.preloader__word [data-pre-letter] {
  display: inline-block;
  opacity: 0;
  transform: translateY(14%) scale(1.18);
  filter: blur(18px);
  transition:
    opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.0s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}
/* v70 — Premium loader: тонкий минималистичный bar с traveling glow + sparkle на конце + shimmer
   Inspired by Linear, Vercel, Aesop, Aman atelier loaders
   ============================================================ */
.preloader__bar {
  position: absolute;
  bottom: clamp(64px, 8vh, 110px);
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 60vw);
  height: 1px;
  background: rgba(255,255,255,0.10);
  overflow: visible;
  z-index: 3;
}
/* Hairline ticks at 0/25/50/75/100 — subtle precision-engineered marks */
.preloader__bar::before,
.preloader__bar::after {
  content: "";
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: rgba(255,255,255,0.25);
  pointer-events: none;
}
.preloader__bar::before { left: 0; }
.preloader__bar::after  { right: 0; }
.preloader__bar-fill {
  display: block;
  position: relative;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg,
    rgba(245,232,196,0) 0%,
    rgba(245,232,196,0.6) 20%,
    rgba(255,255,255,0.95) 60%,
    rgba(255,255,255,1) 100%);
  box-shadow:
    0 0 12px rgba(255,255,255,0.45),
    0 0 28px rgba(245,232,196,0.32),
    0 0 1px rgba(255,255,255,1);
  /* v136: width is driven by JS tick (synced with counter %) — short transition smooths between RAF frames */
  transition: width 80ms linear;
}
/* Sparkle orb at fill leading edge — glowing dot that travels with progress */
.preloader__bar-fill::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  box-shadow:
    0 0 8px rgba(255,255,255,1),
    0 0 18px rgba(245,232,196,0.85),
    0 0 36px rgba(255,255,255,0.4);
  animation: pre-orb-pulse 1.8s ease-in-out infinite;
}
@keyframes pre-orb-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,255,255,1), 0 0 18px rgba(245,232,196,0.85), 0 0 36px rgba(255,255,255,0.4); transform: translateY(-50%) scale(1); }
  50%      { box-shadow: 0 0 14px rgba(255,255,255,1), 0 0 32px rgba(245,232,196,1), 0 0 56px rgba(255,255,255,0.6); transform: translateY(-50%) scale(1.18); }
}
/* Shimmer overlay — subtle moving highlight на bar даже когда fill стоит */
.preloader__bar-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.6) 50%,
    transparent 100%);
  background-size: 30% 100%;
  background-repeat: no-repeat;
  animation: pre-bar-shimmer 2.2s linear infinite;
  mix-blend-mode: overlay;
}
@keyframes pre-bar-shimmer {
  0%   { background-position: -30% 0; }
  100% { background-position: 130% 0; }
}

/* Counter — split layout: status text слева + percent справа */
.preloader__counter {
  position: absolute;
  bottom: clamp(24px, 3.5vh, 56px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: clamp(11px, 0.95vw, 14px);
  letter-spacing: 0.40em;
  text-transform: uppercase;
  color: #fff;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  opacity: 0.92;
  text-shadow:
    0 2px 12px rgba(0,0,0,0.65),
    0 4px 30px rgba(0,0,0,0.4);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(720px, 60vw);
  z-index: 3;
  padding: 0;
}
/* Tiny dot indicator перед label */
.preloader__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(245,232,196,1);
  box-shadow: 0 0 8px rgba(245,232,196,0.9), 0 0 16px rgba(245,232,196,0.4);
  animation: pre-dot-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
  margin-right: 12px;
}
@keyframes pre-dot-pulse {
  0%,100% { opacity: 0.45; transform: scale(0.85); }
  50%     { opacity: 1.0;  transform: scale(1.25); }
}
.preloader__loading-label {
  color: rgba(255,255,255,0.78);
  font-weight: 400;
  flex-shrink: 0;
  margin-right: auto;
}
.preloader__sep {
  display: none; /* не нужен в split layout */
}
.preloader__pct {
  color: rgba(245,232,196,0.85);
  margin-left: 6px;
  font-weight: 500;
}
[data-pre-pct] {
  font-weight: 500;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.20em;
  font-size: 1.05em;
}

/* States — controlled by JS */
.preloader.is-ready .preloader__word [data-pre-letter] {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.preloader.is-ready .preloader__word [data-pre-letter]:nth-child(1) { transition-delay: 0.10s; }
.preloader.is-ready .preloader__word [data-pre-letter]:nth-child(2) { transition-delay: 0.25s; }
.preloader.is-ready .preloader__word [data-pre-letter]:nth-child(3) { transition-delay: 0.40s; }
.preloader.is-ready .preloader__word [data-pre-letter]:nth-child(4) { transition-delay: 0.55s; }

.preloader.is-ready .preloader__eyebrow [data-pre-fade] { opacity: 1; transform: translateY(0); }
.preloader.is-ready .preloader__tag    [data-pre-fade] { opacity: 1; transform: translateY(0); }
.preloader.is-ready .preloader__eyebrow [data-pre-fade]:nth-child(n)  { transition-delay: calc(0.05s * var(--i, 0)); }
/* v136: bar width управляется JS-ом synced с counter percent — CSS rule removed */
/* Counter is now visible from frame 1 (opacity: 0.95 base) — no fade-in delay */

.preloader.is-done {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}
.preloader.is-done .preloader__word [data-pre-letter] {
  transform: translateY(-30%);
  transition-duration: 0.5s;
}

/* Body locked while preloader active */
body.is-loading { overflow: hidden; height: 100vh; }
body.is-loading .scroll-progress,
body.is-loading .grain,
body.is-loading .nav { opacity: 0; visibility: hidden; }

/* ============================================================
   SPLIT-TEXT reveal — words/chars with staggered slide-up
   ============================================================ */
[data-split-words], [data-split-chars] { perspective: 1200px; }
.split-word, .split-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em) rotateX(40deg);
  transform-origin: 50% 100%;
  transition:
    opacity 0.6s var(--ease-out) calc(0.035s * var(--i, 0)),
    transform 0.7s var(--ease-out) calc(0.035s * var(--i, 0));
  will-change: opacity, transform;
}
.is-visible .split-word, .is-visible .split-char {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}

/* ============================================================
   MAGNETIC buttons — base transform handled by JS
   ============================================================ */
[data-magnetic] {
  transition: transform 0.5s var(--ease-spring);
  will-change: transform;
}

/* ============================================================
   Section card — subtle shadow + elevated interaction
   ============================================================ */
section[data-section],
.hero {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 14px 40px rgba(0,0,0,0.10),
    0 30px 90px rgba(26,37,67,0.18);
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, textarea, select { font: inherit; color: inherit; background: none; border: 0; }
ul, ol { list-style: none; }

.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 clamp(28px, 4vw, 96px);
}

/* ============================================================
   Type primitives — site-side adjustments to deck tokens
   ============================================================ */
.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: var(--ls-mono-label);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--c-ink-muted);
}
.eyebrow--on-dark { color: rgba(255,255,255,0.82); }
.eyebrow--on-dark::before { background: rgba(255,255,255,0.55); }

.display {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  text-transform: uppercase;
}
/* Em — no italic; use weight + size jump for emphasis */
.display em {
  font-style: normal;
  font-weight: 900;
  color: inherit;
  font-size: 1.16em;
  letter-spacing: -0.015em;
}
.display--1 { font-size: clamp(32px, 2.6vw, 48px); line-height: 0.96; font-weight: 700; }
.display--2 { font-size: clamp(48px, 4.6vw, 80px); line-height: 0.94; font-weight: 700; }
.display--3 { font-size: clamp(56px, 5.4vw, 100px); line-height: 0.92; font-weight: 700; }
.display--4 { font-size: clamp(80px, 9vw, 168px); line-height: 0.88; letter-spacing: var(--ls-display-lg); font-weight: 800; }
.display--mega { font-size: clamp(72px, 7.6vw, 144px); line-height: 0.90; letter-spacing: -0.012em; font-weight: 800; }
.display--on-dark { color: var(--c-ink-on-dark); }

.lead {
  font-family: var(--f-body);
  font-size: clamp(22px, 1.85vw, 34px);
  line-height: 1.32;
  font-weight: 500;
  color: var(--c-ink);
  max-width: 42ch;
  letter-spacing: -0.012em;
}
.lead em {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  color: inherit;
  letter-spacing: -0.005em;
  font-size: 1.06em;
}
.body { font-family: var(--f-body); font-size: var(--t-body); color: var(--c-ink-soft); line-height: 1.6; max-width: 68ch; font-weight: 400; }
.body--sm { font-family: var(--f-body); font-size: var(--t-body-sm); color: var(--c-ink-muted); line-height: 1.6; max-width: 60ch; font-weight: 400; }
.subhead {
  font-size: clamp(17px, 1.3vw, 22px);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
  max-width: 64ch;
  margin-top: var(--s-5);
}
.subhead--on-dark { color: rgba(255,255,255,0.78); }
.caption {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--ls-mono-small);
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.divider { height: var(--hairline); background: var(--c-line); border: 0; }
.divider--on-dark { background: rgba(255,255,255,0.18); }

.s-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-bottom: clamp(32px, 4vh, 64px);
  position: relative;
}
.s-head .display em { font-style: normal; font-weight: 900; color: inherit; font-size: 1.16em; letter-spacing: -0.018em; }
/* Large grey numerals removed 2026-05-02 — presentation mode (PDF slides) */
.s-head[data-num]::before { display: none !important; }

/* ============================================================
   BUTTONS — 2026 modern system: pill, fill-slide hover, arrow micro
   ============================================================ */
.cta-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  background: var(--c-brand-navy);
  color: #fff;
  border: 1px solid var(--c-brand-navy);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  overflow: hidden;
  transition: color .35s var(--ease-out), border-color .35s var(--ease-out), transform .35s var(--ease-out);
}
.cta-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-accent);
  transform: translateY(102%);
  transition: transform .45s var(--ease-out);
  z-index: -1;
}
.cta-button:hover { transform: translateY(-2px); border-color: var(--c-brand-navy); }
.cta-button:hover::before { transform: translateY(0); }
.cta-button .arrow {
  font-family: var(--f-display);
  font-size: 14px;
  line-height: 1;
  transition: transform .35s var(--ease-out);
  display: inline-block;
}
.cta-button:hover .arrow { transform: translate(3px, -3px); }

.cta-button--solid { background: var(--c-brand-navy); color: #fff; border-color: var(--c-brand-navy); }
.cta-button--solid::before { background: var(--c-accent); }

.strike { text-decoration: line-through; color: var(--c-ink-faint); margin-right: 8px; }

/* ============================================================
   SCROLL PROGRESS — thin hairline at top of viewport
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;        /* track invisible (была светлая полоска) */
  z-index: 200;
  pointer-events: none;
}
.scroll-progress__fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--c-accent) 0%, var(--c-brand-navy) 100%);
  transition: width .15s linear;
}

/* ============================================================
   SKIP-LINK — keyboard accessibility (WCAG 2.4.1)
   ============================================================ */
.skip-link {
  position: absolute;
  left: -10000px;
  top: 8px;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--c-brand-navy);
  color: var(--c-ink-on-dark);
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  text-decoration: none;
}
.skip-link:focus {
  left: 8px;
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* ============================================================
   GRAIN — subtle SVG noise overlay site-wide for premium feel
   ============================================================ */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 150;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   EDITORIAL CORNER MARKS — small + on each section corner
   ============================================================ */
section[data-section]::before,
section[data-section]::after {
  content: "+";
  position: absolute;
  font-family: var(--f-mono);
  font-size: 12px;
  color: rgba(26,37,67,0.22);
  pointer-events: none;
  z-index: 1;
}
section[data-section] {
  position: relative;
}
section[data-section]::before {
  top: clamp(20px, 2.5vh, 36px);
  left: clamp(20px, 1.6vw, 32px);
}
section[data-section]::after {
  bottom: clamp(20px, 2.5vh, 36px);
  right: clamp(20px, 1.6vw, 32px);
}
/* On dark sections — flip corner marks to white */
.concept::before, .concept::after,
.contact::before, .contact::after {
  color: rgba(255,255,255,0.32);
}

/* ============================================================
   NAV
   ============================================================ */
/* Variant A — Top-split editorial (Sotheby's/Knight Frank style) */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;
  /* auto 1fr auto (2026-05-06): brand занимает свою ширину слева, links — center
     в оставшемся пространстве справа, burger справа (hidden на desktop).
     Раньше 1fr 2fr 1fr центрировал links относительно центра экрана. */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 22px clamp(24px, 4vw, 56px);
  /* Transparent blur — no tint, no border (чтобы nav blendил в hero фон без полоски) */
  background: transparent;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: none;
  color: #fff;
  transition: color .3s var(--ease-out);
}
/* Brand-suffix " · Maison Development" — visible во всех viewports (2026-05-06).
   Раньше был hidden на desktop т.к. дублировал hero__brand-mark. Hero brand-mark убран,
   suffix теперь единственный источник "Maison Development" брендинга в шапке. */
.nav__brand-suffix {
  display: inline;
}
.nav, .nav * { color: #fff; }
/* Scrolled over light sections — text DARK, bg остаётся transparent blur */
.nav.is-scrolled {
  background: transparent;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: none;
}
.nav.is-scrolled,
.nav.is-scrolled * { color: var(--c-ink); }
.nav.is-scrolled .nav__reserve {
  border-color: var(--c-ink);
  color: var(--c-ink);
}

.nav__brand {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
}
.nav__brand-dot {
  width: 6px; height: 6px;
  background: currentColor;
  border-radius: 50%;
  display: inline-block;
}
.nav__links {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 2vw, 36px);
}
.nav__link {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: inherit;
  position: relative;
  padding: 4px 0;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__cta {
  position: relative;
  isolation: isolate;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: inherit;
  overflow: hidden;
  transition: color .35s ease, border-color .35s ease, transform .35s var(--ease-out);
}
.nav__cta::before {
  content: ""; position: absolute; inset: 0;
  background: currentColor;
  transform: translateY(102%);
  transition: transform .45s var(--ease-out);
  z-index: -1;
  opacity: 0.92;
}
.nav__cta:hover::before { transform: translateY(0); }
.nav__cta:hover { transform: translateY(-1px); }
.nav.is-scrolled .nav__cta:hover { color: #fff; }
.nav:not(.is-scrolled) .nav__cta:hover { color: var(--c-brand-navy); }
.nav__cta .arrow { font-family: var(--f-display); font-size: 13px; transition: transform .35s var(--ease-out); display: inline-block; }
.nav__cta:hover .arrow { transform: translate(2px, -2px); }
@media (max-width: 900px) {
  .nav { grid-template-columns: 1fr auto; padding: 16px 24px; }
  .nav__links { display: none; }
  .nav__brand { grid-column: 1; }
  .nav__cta { grid-column: 2; }
}

/* ============================================================
   MOBILE DRAWER — hidden by default on desktop
   На desktop drawer не нужен (есть полноценный nav__links).
   На ≤600px переопределяется на display: flex (line ~8307).
   Без этого правила drawer рендерится в normal flow между
   <header.nav> и <section.hero> и создаёт белую полосу под nav.
   2026-05-06 fix.
   ============================================================ */
.mobile-drawer {
  display: none;
}

/* ============================================================
   HERO — cinematic photo + centered editorial card
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 1;             /* Default 1 — photo всегда виден. JS Motion может temporary set to 0 для cinematic intro fade-in */
  will-change: opacity, transform;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
}
/* DOF blur — soft blur from top-left fading to clear at bottom-right (2026-05-02 v2) */
.hero__photo-blur {
  position: absolute;
  inset: 0;
  z-index: 1;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  mask-image: linear-gradient(135deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.80) 25%,
    rgba(0,0,0,0.45) 45%,
    rgba(0,0,0,0.15) 65%,
    rgba(0,0,0,0) 80%);
  -webkit-mask-image: linear-gradient(135deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.80) 25%,
    rgba(0,0,0,0.45) 45%,
    rgba(0,0,0,0.15) 65%,
    rgba(0,0,0,0) 80%);
  pointer-events: none;
}
.hero__photo-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Lighter overlay 2026-05-02 v2 — night render уже dark, overlay нужен мягче */
  background:
    linear-gradient(135deg,
      rgba(0,0,0,0.28) 0%,
      rgba(0,0,0,0.22) 30%,
      rgba(0,0,0,0.16) 55%,
      rgba(0,0,0,0.10) 75%,
      rgba(0,0,0,0.05) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,0.05) 0%,
      rgba(0,0,0,0.10) 50%,
      rgba(0,0,0,0.16) 100%);
}
.hero__photo-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(ellipse 95% 80% at 60% 55%,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,0.18) 100%);
  pointer-events: none;
}
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #000;
  opacity: 0;             /* Default 0 — photo всегда виден. JS Motion может temporary set to 1 для cinematic intro */
  will-change: opacity;
  pointer-events: none;
}

/* ---------- Hero asymmetric stage (text bottom, magazine layout) ---------- */
/* ============================================================
   HERO v2 2026-05-01 — Modern luxe minimalist + variable sizing accent
   Eyebrow + headline (mixed sizes) + sub + horizontal stats + single CTA
   ============================================================ */
.hero__stage {
  position: absolute;
  z-index: 5;
  left: clamp(28px, 4vw, 96px);
  right: clamp(28px, 4vw, 96px);
  top: clamp(120px, 14vh, 180px);
  bottom: clamp(48px, 6vh, 88px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(20px, 2.4vh, 36px);
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45);
  opacity: 0;
  will-change: opacity, transform;
}
/* Hide legacy left/right wrappers if present */
.hero__left, .hero__right { display: contents; }

.hero__eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin: 0;
}

/* Headline — variable sizing: normal lines + huge accent number */
.hero__headline {
  font-family: var(--f-display);
  font-weight: 500;
  color: #fff;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(8px, 0.8vw, 14px);
  line-height: 0.95;
  letter-spacing: -0.018em;
}
.hero__headline-line {
  font-size: clamp(28px, 3.2vw, 56px);
  font-weight: 500;
  text-transform: none;
}
.hero__headline-line em {
  font-style: italic;
  font-weight: 400;
  opacity: 0.86;
}
/* Variable sizing accent — big number */
.hero__headline-num {
  font-family: var(--f-display);
  font-size: clamp(64px, 8vw, 144px);
  font-weight: 800;
  letter-spacing: -0.028em;
  font-variant-numeric: tabular-nums;
  display: inline-block;
  line-height: 0.92;
}
.hero__headline-num--sm {
  font-size: clamp(48px, 5.4vw, 96px);
}

.hero__sub {
  font-family: var(--f-body);
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  max-width: 56ch;
  margin: 0;
}

/* Stats — horizontal compact, hairline separated */
.hero__points {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.20);
  border-bottom: 1px solid rgba(255,255,255,0.20);
  padding: clamp(16px, 2vh, 24px) 0;
  margin: 0;
  list-style: none;
  width: 100%;
}
.hero__points li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  text-align: left;
  padding: 0 clamp(12px, 1.4vw, 24px);
  border-right: 1px solid rgba(255,255,255,0.16);
}
.hero__points li:first-child { padding-left: 0; }
.hero__points li:last-child { border-right: 0; }
.hero__point-num {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.012em;
}
.hero__point-num small {
  font-size: 0.65em;
  font-weight: 500;
  opacity: 0.8;
}
.hero__point-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  white-space: nowrap;
}
.hero__cta-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
}
/* Larger CTA на hero — visible action */
.cta-wa--lg {
  padding: 18px 32px;
  font-size: 12px;
  letter-spacing: 0.18em;
}
/* Hero CTA — white bg + dark text override (visible on photo) */
.hero .cta-wa--primary {
  background: #fff;
  color: var(--c-ink);
  border-color: #fff;
}
.hero .cta-wa--primary:hover {
  background: var(--c-ink);
  color: #fff;
  border-color: var(--c-ink);
}
.hero .cta-wa--primary::before {
  /* WhatsApp icon dark on white */
  filter: invert(1);
}
.hero .cta-wa--primary:hover::before {
  filter: none;
}

/* ============================================================
   HERO v3 — Project-first luxe (BASE wordmark + editorial tagline)
   ============================================================ */
.hero__brand-mark {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin: 0;
}
/* v144: title-group объединяет title-block + lead в один flex-item у hero__stage,
   чтобы lead был визуально привязан к headline а не "плавал" в space-between distribution */
.hero__title-group {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.8vh, 14px);
}
.hero__title-block {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vh, 22px);
  margin-bottom: 0;
}
.hero__wordmark {
  font-family: var(--f-display);
  /* Montserrat Thin (100) — kentokawazoe.com style. Wide letter-spacing для elegant feel */
  font-weight: 100;
  font-size: clamp(120px, 18vw, 280px);
  line-height: 0.92;
  letter-spacing: 0.04em;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
}
.hero__tagline {
  font-family: var(--f-display);
  /* 2026-05-04 v64: уменьшен базовый размер (was 72-132px / 7.8vw) чтобы line3 на 1.3em влезала в одну строку без переноса */
  font-size: clamp(56px, 5.8vw, 100px);
  line-height: 1.04;
  color: #fff;
  margin: 0;
  max-width: 100%;
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.hero__tagline em {
  /* Heavy weight для 'How to earn 10%' и 'in Bali.' (стиль как 'AT A FAIR PRICE.' в Concept) */
  font-style: normal;
  font-weight: 800;
  font-size: 1em;
  letter-spacing: -0.022em;
}
/* 2026-05-04 v66: третья строка масштабируется чтобы заполнять ширину stage container полностью (right-edge offset = left-edge offset). 1.635em рассчитан из real measurements: stage 1766px / line3 width factor 10.8px-per-em-of-font ≈ 163.5px target for base 100px */
.hero__tagline-line3 {
  font-size: 1.635em;
  display: inline-block;
  line-height: 1;
  letter-spacing: inherit;
  white-space: nowrap;
}
/* 2026-05-04 v74 — Premium per-letter cinematic reveal на hero headline.
   38 букв, stagger 50ms между, duration 2.4s каждая, total reveal ~4.3s.
   Эффект: blur(20px) + translateY(56px) + opacity → smooth ease-out cubic-bezier */
.hero__letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(56px);
  filter: blur(20px);
  animation: hero-letter-reveal 2.4s cubic-bezier(0.19, 1, 0.22, 1) both;
  /* v133: задержка +1.0s от исходной (2.5s) — текст начинает появляться через 3.5s */
  animation-delay: calc(3.5s + var(--i, 0) * 0.05s);
  will-change: transform, filter, opacity;
}
@keyframes hero-letter-reveal {
  0% {
    opacity: 0;
    transform: translateY(56px);
    filter: blur(20px);
  }
  35% {
    opacity: 0.6;
    filter: blur(8px);
  }
  65% {
    opacity: 1;
    filter: blur(2px);
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__letter {
    animation: hero-letter-reveal-reduced 0.6s ease-out both;
    animation-delay: calc(2.5s + var(--i, 0) * 0.02s);
  }
  @keyframes hero-letter-reveal-reduced {
    from { opacity: 0; }
    to   { opacity: 1; transform: none; filter: none; }
  }
}
/* v81: Lead "Affordable villas..." — быстрее (1.2s) и раньше (5.5s), чище без multi-stage blur */
.hero__lead {
  animation: hero-lead-reveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) 5.5s both;
}
@keyframes hero-lead-reveal {
  0%   { opacity: 0; transform: translateY(20px); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* v81: CTA button — быстрее (0.9s) и раньше (6.4s), плавный slide-up */
.hero__cta-primary {
  animation: hero-cta-reveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) 6.4s both;
}
@keyframes hero-cta-reveal {
  0%   { opacity: 0; transform: translateY(14px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__lead,
  .hero__cta-primary {
    animation: hero-fade-only 0.5s ease-out both;
  }
  .hero__lead { animation-delay: 5.0s; }
  .hero__cta-primary { animation-delay: 6.0s; }
  @keyframes hero-fade-only {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}
/* Headline single-font 2026-05-02: italic-spans отключены (наследуют тег родителя) */
.hero__tagline-italic {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  text-transform: inherit;
  font-size: 1em;
  letter-spacing: inherit;
}
.hero__lead {
  /* v142: mono-caption под headline (real estate in Bali) — компактный отступ */
  font-family: var(--f-mono);
  font-weight: 500;
  font-style: normal;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  max-width: none;
  white-space: nowrap;
  margin: clamp(6px, 0.8vh, 14px) 0 0 0;
}
/* Global no-italic override 2026-05-02 — Max: курсив не использовать нигде */
em, i, cite, blockquote, .hero__tagline-italic {
  font-style: normal !important;
}
.hero__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: clamp(16px, 1.8vh, 24px) 0;
  border-top: 1px solid rgba(255,255,255,0.22);
  border-bottom: 1px solid rgba(255,255,255,0.22);
}
.hero__strip li {
  /* v141: Montserrat heavy display, размер уменьшен (22 → 18 cap) */
  font-family: var(--f-display);
  font-weight: 800;
  font-style: normal;
  font-size: clamp(13px, 1.0vw, 18px);
  line-height: 1.25;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.hero__strip li::before {
  content: "·";
  margin: 0 clamp(14px, 1.6vw, 28px);
  color: rgba(255,255,255,0.40);
}
.hero__strip li:first-child::before { content: ""; margin: 0; }

@media (max-width: 700px) {
  .hero__wordmark { font-size: clamp(80px, 22vw, 140px); }
  .hero__tagline { font-size: clamp(18px, 5vw, 24px); }
  .hero__strip { gap: 8px 0; }
  .hero__strip li::before { margin: 0 12px; }
}

/* Mobile — stack hero stats и smaller headline */
@media (max-width: 700px) {
  .hero__points { grid-template-columns: repeat(2, 1fr); }
  .hero__points li:nth-child(odd) { padding-left: 0; }
  .hero__points li:nth-child(even) { border-right: 0; }
  .hero__points li:nth-child(1), .hero__points li:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.14); padding-bottom: 12px; }
  .hero__points li:nth-child(3), .hero__points li:nth-child(4) { padding-top: 12px; }
  .hero__headline-line { font-size: clamp(24px, 6vw, 36px); }
  .hero__headline-num { font-size: clamp(56px, 14vw, 96px); }
}
.hero__bottom-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 2vh, 22px);
}
.hero__cta-primary {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  width: max-content;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  background-color: #fff;
  color: var(--c-brand-navy);
  border: 1px solid #fff;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  transition:
    background-color .35s var(--ease-out),
    color .35s var(--ease-out),
    border-color .35s var(--ease-out),
    transform .35s var(--ease-out),
    opacity .4s var(--ease-out);
}
/* v126: fade out CTA когда scroll past hero — иначе пилюля просвечивает сквозь nav glass blur */
.hero__cta-primary.is-faded {
  opacity: 0;
  pointer-events: none;
}
.hero__cta-primary:hover {
  background-color: var(--c-brand-navy);
  color: #fff;
  border-color: var(--c-brand-navy);
  transform: translateY(-2px);
}
.hero__cta-primary .arrow { font-family: var(--f-display); font-size: 12px; transition: transform .35s var(--ease-out); display: inline-block; }
.hero__cta-primary:hover .arrow { transform: translate(3px, -3px); }

.hero__scroll {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  z-index: 5;
  animation: nudge 2.4s ease-in-out infinite;
  opacity: 0;
}
@keyframes nudge {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.42; }
  50%       { transform: translate(-50%, 6px); opacity: 0.82; }
}

@media (max-width: 900px) {
  .hero__points { grid-template-columns: repeat(2, 1fr); }
  .hero__points li:nth-child(2) { border-right: 0; }
  .hero__points li:nth-child(1), .hero__points li:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.14); padding-bottom: 12px; }
  .hero__points li:nth-child(3), .hero__points li:nth-child(4) { padding-top: 12px; }
  .hero__stage { padding: 28px 24px; }
  /* P1-17 · headline overflow fix on narrow viewports */
  .hero__headline > span,
  .hero__headline em {
    white-space: normal;
  }
}

/* ============================================================
   SECTION padding base
   ============================================================ */
/* Sections — floating cards with radii on all sides + slim navy gap between */
/* Default — cinematic stage (Concept, Featured, Gallery, Process, Floor-plan, Location) */
section[data-section] {
  padding: clamp(48px, 6vh, 80px) 0;
  min-height: calc(100vh - var(--card-gap-y, 16px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  margin: var(--card-gap-y, 8px) var(--card-gap-x, 12px);
  border-radius: var(--r-card-lg);
  background: var(--c-bg);
  background-clip: padding-box;
}
/* Photo bg sections — body bg show нет на edges (2026-05-02) */
section.hero, section.concept, section.contact, section.developer {
  background-color: var(--c-brand-navy, #1A2543) !important;
}
/* Gallery — photos edge-to-edge, no padding gaps */
section.gallery {
  padding: 0 !important;
  background: var(--c-bg, #fff) !important;
}
/* Apply to all data-section sections — uniform slide pages */
section[data-section]:not(.hero):not(.concept):not(.contact):not(.location):not(.payment):not(.process) {
  min-height: 100vh;
}
/* Note: strict 100vh locks (max-height + overflow hidden) on units/yield/market-proof/
   comparison/floor-plan/featured/gallery and gallery__mosaic moved to presentation.css
   on 2026-05-03 — Site keeps natural section heights. */
/* Payment — full-screen height (2026-05-02) */
section.payment {
  min-height: 100vh;
  padding: clamp(80px, 10vh, 120px) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
:root {
  /* Navy gaps between sections REMOVED 2026-05-01 (Max preference: continuous flow) */
  --card-gap-y: 0;
  --card-gap-x: 0;
}
/* Sections seamless — no margins, no border-radius, no rounded card edges */
section[data-section] {
  margin: 0 !important;
  border-radius: 0 !important;
}
.hero {
  margin: 0 !important;
  border-radius: 0 !important;
  height: 100vh !important;
}
/* First section (Hero) needs default white bg + same radius */
.hero {
  border-radius: var(--r-card-lg);
  margin: var(--card-gap-y, 8px) var(--card-gap-x, 12px);
  height: calc(100vh - var(--card-gap-y, 16px));
  overflow: hidden;
}
/* Section header (eyebrow + display) sits at top */
section[data-section] > .container > .s-head:first-child,
section[data-section] > .s-head:first-child {
  flex: 0 0 auto;
}

/* ============================================================
   CONCEPT — full-bleed aerial bg + modern editorial layout
   ============================================================ */
.concept {
  position: relative;
  isolation: isolate;
  color: var(--c-ink-on-dark);
  overflow: hidden;
  contain: layout paint;
  background: var(--c-brand-navy);
  /* 2026-05-03 v18 — full-screen, photo visible across entire viewport */
  width: 100%;
  min-height: 100vh;
  padding: clamp(56px, 7vh, 96px) 0;
  display: flex;
  align-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 24px 60px rgba(0,0,0,0.22);
}
.floor-plan { background: var(--c-bg); }
/* Contact QR — WhatsApp scan code (2026-05-02) — compact for 1-screen fit */
.contact__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.6vh, 8px);
  padding: clamp(8px, 1vh, 12px);
  background: #fff;
  border-radius: 6px;
  width: max-content;
  margin: 0 auto;
}
.contact__qr img {
  display: block;
  width: clamp(96px, 8vw, 130px);
  height: clamp(96px, 8vw, 130px);
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}
.contact__qr .caption {
  color: var(--c-ink);
  text-align: center;
  font-weight: 500;
}

/* Concept editorial layout — base properties (presentation-only 100vh lock moved to presentation.css 2026-05-03) */
.concept {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 7vh, 80px) 0 !important;
  background: var(--c-brand-navy, #1A2543) !important;
}
.concept__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 clamp(28px, 5vw, 96px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vh, 28px);
}
.concept__head {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vh, 20px);
  max-width: 1400px;
}
.concept__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,242,236,0.78);
  font-weight: 500;
}
/* Title — Montserrat thin/heavy mix (как Hero) — sizes reduced для 100vh fit */
.concept__title {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(36px, 4vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.008em;
  color: rgba(245,242,236,0.92);
  text-wrap: balance;
  max-width: 22ch;
  text-transform: uppercase;
  margin: 0;
}
.concept__title em {
  font-style: normal;
  font-weight: 700;
  color: rgba(245,242,236,0.96);
  letter-spacing: -0.022em;
}

/* 2-column layout: lead+body left, pillars right — gaps reduced */
.concept__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 3vw, 56px);
  align-items: start;
}
.concept__lead-col {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vh, 20px);
  padding-top: 4px;
}
.concept__lead {
  /* Montserrat thin uppercase, sizes reduced. v57: повышен contrast для readability на photo bg — opacity 100%, weight 300 (чуть бодее), усилен text-shadow */
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(16px, 1.3vw, 22px);
  line-height: 1.25;
  color: #ffffff;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  max-width: 28ch;
  margin: 0;
  text-shadow:
    0 2px 14px rgba(0,0,0,0.65),
    0 4px 28px rgba(0,0,0,0.45),
    0 0 4px rgba(0,0,0,0.30);
}
.concept__lead em {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.012em;
  color: #ffffff;
}
.concept__body {
  font-family: var(--f-body);
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1.5;
  font-weight: 500;
  color: rgba(245,242,236,0.85);
  max-width: 110ch;
  margin: 0;
}
.concept__body strong {
  /* Tint полоса убрана — strong только weight, без bg */
  font-weight: 700;
  color: rgba(245,242,236,0.94);
}

/* 3 pillars — frosted-glass cards (sizes reduced для 100vh fit) */
.concept__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.2vw, 20px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vh, 14px);
  padding: clamp(14px, 1.6vw, 24px);
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: background .35s var(--ease-out), border-color .35s var(--ease-out), transform .35s var(--ease-out);
}
.pillar:hover {
  background: rgba(0,0,0,0.55);
  border-color: rgba(255,255,255,0.32);
  transform: translateY(-2px);
}
.pillar__num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,242,236,0.68);
  font-weight: 500;
}
.pillar__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 30px);
  line-height: 0.98;
  letter-spacing: -0.012em;
  color: rgba(245,242,236,0.94);
  text-transform: uppercase;
  margin: 0;
}
.pillar__desc {
  font-family: var(--f-body);
  font-size: clamp(12px, 0.85vw, 14px);
  line-height: 1.45;
  font-weight: 500;
  color: rgba(245,242,236,0.82);
  margin-top: auto;
}

/* Footer quote — compact (cite removed 2026-05-02) */
.concept__foot {
  display: block;
  padding-top: clamp(16px, 2vh, 28px);
  border-top: 1px solid rgba(255,255,255,0.22);
}

/* === Montserrat thin/heavy mix — apply across ALL display headers === */
/* Display--3 (used в Floor-plan, Units, Yield, Market, Location, Comparison, Payment, Process, Contact) */
.display.display--3 {
  font-family: var(--f-display);
  font-weight: 200;
  letter-spacing: -0.008em;
  text-transform: uppercase;
}
.display.display--3 em {
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.018em;
}
/* Featured 2BR title */
.featured__title {
  font-weight: 200 !important;
  letter-spacing: -0.008em !important;
}
.featured__title em {
  font-weight: 700 !important;
  letter-spacing: -0.018em !important;
}
/* Process step titles */
.p-step__title {
  font-weight: 200;
  letter-spacing: -0.008em;
  text-transform: uppercase;
}
/* Loc-card names */
.loc-card__name {
  font-weight: 200 !important;
  letter-spacing: -0.005em !important;
  text-transform: uppercase;
}
.concept__quote {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 1.8vw, 28px);
  margin: 0;
}
.concept__quote-mark {
  font-family: var(--f-display);
  font-size: clamp(48px, 4vw, 72px);
  line-height: 0.7;
  color: rgba(255,255,255,0.32);
  margin-top: -4px;
  flex-shrink: 0;
}
.concept__quote p {
  font-family: var(--f-body);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(15px, 1.15vw, 20px);
  line-height: 1.35;
  color: rgba(245,242,236,0.88);
  letter-spacing: -0.005em;
  max-width: 60ch;
}
.concept__quote em {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(245,242,236,0.94);
  letter-spacing: -0.005em;
}
.concept__cite {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-align: right;
  align-self: end;
  font-weight: 500;
}

@media (max-width: 1100px) {
  .concept__layout { grid-template-columns: 1fr; }
  .concept__pillars { grid-template-columns: 1fr; }
  .concept__foot { grid-template-columns: 1fr; gap: 16px; }
  .concept__cite { text-align: left; }
}
.concept__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.concept__bg { overflow: hidden; }
/* v112: crossfade stack wrapper — full bleed, layered videos */
.concept__bg-stack {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.concept__bg img,
.concept__bg-video {
  position: absolute;
  /* Extra buffer для parallax movement (top -10% / height 120%) */
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  object-position: center center;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform, opacity;
}
/* v113: crossfade — два видео layered + photo backdrop под ними.
   Backdrop всегда показан (z-index 0) → закрывает любые щели на crossfade.
   Активный video — opacity 1, idle — 0. Transition 0.7s ease-in-out. */
.concept__bg-stack .concept__bg-backdrop {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}
.concept__bg-stack .concept__bg-video {
  z-index: 1;
  opacity: 0;
  transition: opacity 0.7s ease-in-out;
}
.concept__bg-stack .concept__bg-video.is-active {
  opacity: 1;
}
/* Left-side soft blur — DISABLED 2026-05-03 (Max: фото не урезай — clean photo во весь экран) */
.concept__bg-blur {
  display: none;
}
.concept__bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* 2026-05-03 v20 — moderate overlay: photo visible AND text legible */
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.32) 0%,
      rgba(0,0,0,0.38) 50%,
      rgba(0,0,0,0.48) 100%);
}
/* Text-shadow on Concept content for legibility on any photo bg */
.concept .lead,
.concept .body,
.concept .body--sm,
.concept__title,
.concept__eyebrow,
.concept .pillar__num,
.concept .pillar__title,
.concept .pillar__desc {
  text-shadow: 0 2px 14px rgba(0,0,0,0.55), 0 4px 28px rgba(0,0,0,0.32);
}
.concept .lead { color: #fff; max-width: 56ch; }
.concept .lead em { color: #fff; }
.concept .body { color: rgba(255,255,255,0.86); max-width: 60ch; }
.concept .body--sm { color: rgba(255,255,255,0.74); max-width: 56ch; }

/* Legacy .concept__plan rules — replaced by .floor-plan__* (v2) */
.concept__plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.concept__plan-figure {
  position: relative;
  background: transparent;
  overflow: hidden;
  max-width: 520px;
  max-height: 80vh;
  justify-self: start;
  width: 100%;
  aspect-ratio: 590 / 1100;
}
.concept__plan-figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* ============================================================
   FLOOR PLAN v3 — Full-width 2-col: text LEFT + plan RIGHT
   ============================================================ */
section.floor-plan {
  background: var(--c-bg);
  /* Padding ужат 2026-05-02 v6 — fit в 100vh без clip (был 12vh/10vh → 9vh/7vh) */
  padding: clamp(72px, 9vh, 128px) clamp(8px, 1vw, 24px) clamp(56px, 7vh, 96px);
  min-height: auto;
  height: auto;
  display: block;
}
.floor-plan__layout {
  max-width: 100%;
  width: 100%;
  margin: 0;
  display: grid;
  /* 3 cols: text · plan (full size) · villa photos (wider 2026-05-01 v2) */
  grid-template-columns: 1.0fr 1.25fr 0.95fr;
  gap: clamp(24px, 2.4vw, 48px);
  /* Top-aligned 2026-05-01 — text "+ FLOOR PLAN" и plan начинаются с same Y */
  align-items: start;
}
.floor-plan__head {
  text-align: left;
  max-width: 100%;
  padding-left: clamp(0px, 2vw, 32px);
  /* Top-aligned: текст и план начинаются с same Y */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.floor-plan__head .display.display--3 {
  /* 2026-05-03 v42: размер 1:1 с .market-proof__head (was clamp(36-64)) */
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin-bottom: clamp(20px, 2.4vh, 32px);
}
.floor-plan__head .eyebrow {
  margin-bottom: clamp(12px, 1.4vh, 20px);
}
/* Spec list — physical specs (Surface / Bedroom / etc) */
.floor-plan__specs {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--c-line);
  margin: 0 0 clamp(20px, 2.4vh, 32px);
  list-style: none;
  padding: 0;
}
.floor-plan__specs li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: clamp(8px, 1vh, 12px) 0;
  border-bottom: 1px solid var(--c-line);
  gap: var(--s-4);
}
.floor-plan__spec-k {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--ls-mono-label);
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.floor-plan__spec-v {
  font-family: var(--f-display);
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 500;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
/* Financial — bigger emphasized values */
.floor-plan__finance {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: clamp(16px, 2vh, 24px) 0 0;
  border-top: 2px solid var(--c-ink);
  list-style: none;
}
.floor-plan__finance li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: clamp(10px, 1.2vh, 14px) 0;
  gap: var(--s-4);
  border-bottom: 1px solid var(--c-line);
}
.floor-plan__finance li:last-child { border-bottom: 0; }
.floor-plan__spec-v--lg {
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.floor-plan__spec-v--accent {
  color: var(--c-accent);
}
.floor-plan__interactive {
  position: relative;
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.floor-plan__figure {
  margin: 0;
  background: transparent;
  position: relative;
  width: 100%;
  /* 2026-05-01: убран max-width 540px — план в полный размер колонки */
  max-width: 100%;
  /* No fixed aspect-ratio — let image natural height drive it */
  overflow: hidden;
}
.floor-plan__figure img {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  /* Contain instead of cover — show full plan, no crop */
  object-fit: contain;
  max-height: 88vh;
}

/* Villa photos — 2 renders stacked vertically, matching plan column height */
.floor-plan__photos {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: clamp(12px, 1.6vh, 20px);
  /* Stretch to match plan column height в parent grid */
  align-self: stretch;
  height: 100%;
  min-height: 0;
}
.floor-plan__photo {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: clamp(8px, 0.8vw, 14px);
  background: var(--c-line);
}
.floor-plan__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tablet — text+plan side-by-side, photos full-width row below */
@media (max-width: 1100px) {
  .floor-plan__layout {
    grid-template-columns: 1fr 1.2fr;
    grid-template-areas:
      "head plan"
      "photos photos";
    gap: clamp(24px, 3vw, 48px) clamp(20px, 2.4vw, 40px);
  }
  .floor-plan__head { grid-area: head; }
  .floor-plan__interactive { grid-area: plan; }
  .floor-plan__photos {
    grid-area: photos;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .floor-plan__photo { aspect-ratio: 4 / 3; }
}

/* Mobile — stack everything: text top, plan, photos below */
@media (max-width: 900px) {
  .floor-plan__layout {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    gap: clamp(28px, 4vh, 48px);
  }
  .floor-plan__head { padding-left: 0; text-align: center; }
  .floor-plan__interactive { max-width: 540px; margin: 0 auto; }
  .floor-plan__photos {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    max-width: 540px;
    margin: 0 auto;
    height: auto;
  }
  .floor-plan__photo { aspect-ratio: 4 / 3; }
}

/* Hotspots — small circular dots с pulsing animation, positioned absolutely на plan */
.hotspot {
  position: absolute;
  /* Smaller 2026-05-01: 28-36 → 20-26 чтобы не перекрывать room labels */
  width: clamp(20px, 1.6vw, 26px);
  height: clamp(20px, 1.6vw, 26px);
  border-radius: 50%;
  background: rgba(47, 80, 64, 0.92);
  border: 2px solid rgba(255,255,255,0.95);
  cursor: pointer;
  transform: translate(-50%, -50%);
  z-index: 10;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  box-shadow: 0 4px 10px rgba(26,37,67,0.22);
}
.hotspot::before {
  content: "+";
  color: #fff;
  font-family: var(--f-mono);
  font-size: clamp(10px, 0.9vw, 13px);
  font-weight: 600;
  line-height: 1;
}
.hotspot:hover,
.hotspot:focus-visible {
  transform: translate(-50%, -50%) scale(1.18);
  box-shadow: 0 8px 24px rgba(47,80,64,0.45);
  outline: none;
}
/* Pulsing ring animation для draw attention */
.hotspot::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: rgba(47,80,64,0.30);
  animation: hotspot-pulse 2.4s ease-in-out infinite;
  z-index: -1;
}
@keyframes hotspot-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hotspot::after { animation: none; }
}

/* Tooltip — appears on hover, photo + label + data */
.floor-plan__tooltip {
  position: absolute;
  background: var(--c-bg);
  box-shadow: 0 16px 48px rgba(26,37,67,0.22);
  border-radius: var(--r-card);
  padding: clamp(12px, 1vw, 16px);
  width: clamp(240px, 22vw, 300px);
  z-index: 20;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vh, 12px);
  border: 1px solid var(--c-line);
}
.floor-plan__tooltip[hidden] { display: none; }
.floor-plan__tooltip img {
  width: 100%;
  height: clamp(140px, 18vh, 180px);
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.floor-plan__tooltip-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.floor-plan__tooltip-text .eyebrow {
  margin: 0;
}
.floor-plan__tooltip-data {
  font-family: var(--f-body);
  font-size: clamp(13px, 0.95vw, 15px);
  color: var(--c-ink-soft);
  margin: 0;
  line-height: 1.45;
}

@media (max-width: 700px) {
  .floor-plan__interactive { max-width: 100%; }
  .floor-plan__tooltip { width: 220px; }
  .hotspot { width: 26px; height: 26px; }
}
.concept__plan-meta {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-top: var(--s-3);
  position: sticky;
  top: 100px;
}
.concept__plan-meta .display {
  letter-spacing: -0.012em;
}
.plan-meta-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--c-line);
  margin-top: var(--s-4);
}
.plan-meta-list li {
  display: flex;
  justify-content: space-between;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-line);
  align-items: baseline;
  gap: var(--s-4);
}
.plan-meta-list li > span:first-child {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.plan-meta-list li > span:last-child {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(18px, 1.4vw, 22px);
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

@media (max-width: 800px) {
  .concept__grid { grid-template-columns: 1fr; }
  .concept__photo { position: relative; top: auto; }
  .concept__plan { grid-template-columns: 1fr; }
  .concept__plan-meta { position: relative; top: auto; }
  .concept__plan-figure { max-width: 100%; }
}

/* ============================================================
   FEATURED — Studio marketing spotlight (parallax + asymmetric)
   ============================================================ */
.featured {
  /* 2026-05-03 v34: padding matched 1:1 to .floor-plan (was 12vh/10vh) — единая геометрия */
  height: auto;
  min-height: auto;
  max-height: none;
  overflow: visible;
  padding: clamp(72px, 9vh, 128px) clamp(8px, 1vw, 24px) clamp(56px, 7vh, 96px);
  display: block;
  justify-content: flex-start;
}
.featured__inner {
  display: grid;
  /* 2026-05-03 v34: mirror grid 1:1 of .floor-plan__layout — photos column = 0.95fr (last in floor-plan, first in featured) */
  grid-template-columns: 0.95fr 1.25fr 1.0fr;
  gap: clamp(24px, 2.4vw, 48px);
  align-items: start;
  width: 100%;
  max-width: 100%;
  margin: 0;
  /* 2026-05-03 v36: симметричный edge inset — фото слева и метаданные справа не упираются в край (mirror of .floor-plan__head padding-left: 32px) */
  padding: 0 clamp(0px, 2vw, 32px);
}
/* Villa photos — 2 renders stacked (mirror of .floor-plan__photos but LEFT side) */
.featured__photos {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: clamp(12px, 1.6vh, 20px);
  align-self: stretch;
  height: 100%;
  min-height: 0;
}
.featured__photo-item {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: clamp(8px, 0.8vw, 14px);
  background: var(--c-line);
}
.featured__photo-item img,
.featured__photo-item video,
.featured__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.featured__photo-block {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: flex-start;
}
.featured__photo {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--c-bg-deep);
  margin: 0;
  width: 100%;
  /* 2026-05-01: max-height снят — план в полный размер колонки (mirror floor-plan) */
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.featured__photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top center;
}
.featured__caption {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

.featured__meta {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vh, 26px);
  justify-content: flex-start;
}
.featured__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.featured__eyebrow-rule { width: 32px; height: 1px; background: var(--c-line); }
.featured__title {
  font-family: var(--f-display);
  font-weight: 600;
  /* 2026-05-03 v42: размер 1:1 с .market-proof__head (was clamp(36-64)) */
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--c-ink);
  text-transform: uppercase;
}
.featured__title em {
  font-style: normal;
  font-weight: 700;
  font-size: 1em;
  letter-spacing: -0.022em;
}
.featured__lead {
  font-family: var(--f-body);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.5;
  color: var(--c-ink-soft);
  max-width: 52ch;
}
/* Force featured brackets visible — IO data-reveal-stagger sometimes не triggers */
.featured__brackets li[data-reveal-stagger],
.featured__brackets > li {
  opacity: 1 !important;
  transform: none !important;
}
.featured__brackets {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-line);
}
.featured__brackets li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s-5);
  /* 2026-05-03 v34: padding matched 1:1 to .floor-plan__specs li (was 10-16px) */
  padding: clamp(8px, 1vh, 12px) 0;
  border-bottom: 1px solid var(--c-line);
  min-width: 0;
}
.featured__brackets .b-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.featured__brackets .b-value {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(20px, 1.4vw, 26px);
  letter-spacing: -0.012em;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.featured__cta-row {
  display: flex;
  gap: clamp(20px, 2vw, 32px);
  align-items: center;
  flex-wrap: wrap;
}
.featured__cta-primary {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  background: var(--c-brand-navy);
  color: #fff;
  border: 1px solid var(--c-brand-navy);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  overflow: hidden;
  transition: color .35s var(--ease-out), border-color .35s var(--ease-out), transform .35s var(--ease-out);
}
.featured__cta-primary::before {
  content: ""; position: absolute; inset: 0;
  background: var(--c-brand-navy);
  transform: translateY(102%);
  transition: transform .45s var(--ease-out);
  z-index: -1;
}
.featured__cta-primary:hover { transform: translateY(-2px); border-color: var(--c-brand-navy); }
.featured__cta-primary:hover::before { transform: translateY(0); }
.featured__cta-primary .arrow { font-family: var(--f-display); font-size: 14px; transition: transform .35s var(--ease-out); display: inline-block; }
.featured__cta-primary:hover .arrow { transform: translate(3px, -3px); }

.featured__cta-secondary {
  position: relative;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink);
  padding: 8px 0;
}
.featured__cta-secondary::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transition: transform .35s var(--ease-out);
}
.featured__cta-secondary::after { transform-origin: left; }
.featured__cta-secondary:hover::after { transform: scaleX(0.55); }
.featured__cta-secondary .arrow { display: inline-block; transition: transform .35s var(--ease-out); }
.featured__cta-secondary:hover .arrow { transform: translate(2px, -2px); }

@media (max-width: 1100px) {
  .featured__inner {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }
  .featured__photos {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    height: auto;
    max-width: 540px;
    margin: 0 auto;
  }
  .featured__photo-item { aspect-ratio: 4 / 3; }
}

/* Tablet — plan + meta 2-col, photos full-width row above */
@media (min-width: 901px) and (max-width: 1100px) {
  .featured {
    height: auto;
    min-height: 100vh !important;
    max-height: none;
  }
  .featured__inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "photos photos"
      "plan meta";
    gap: clamp(24px, 3vw, 40px) clamp(20px, 2.4vw, 40px);
  }
  .featured__photos {
    grid-area: photos;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .featured__photo-item { aspect-ratio: 4 / 3; }
  .featured__photo-block { grid-area: plan; }
  .featured__meta { grid-area: meta; }
}

/* ============================================================
   UNITS — project list
   ============================================================ */
.proj-list { border-top: 1px solid var(--c-line); }
.proj-list__head {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(120px, 0.8fr) minmax(110px, 0.8fr) minmax(80px, 0.6fr) auto;
  gap: var(--s-7);
  padding: 14px 0 14px;
  border-bottom: 1px solid var(--c-line);
}
.proj-list__head > span {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.proj-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(120px, 0.8fr) minmax(110px, 0.8fr) minmax(80px, 0.6fr) auto;
  align-items: baseline;
  gap: var(--s-7);
  padding: clamp(20px, 2.4vw, 36px) 0;
  border-bottom: 1px solid var(--c-line);
  transition: background .25s var(--ease-out);
}
.proj-row::before {
  content: "";
  position: absolute;
  /* v147: отступ left -16px чтобы hover bar не примыкал вплотную к тексту */
  left: -16px; top: 0; bottom: 0;
  width: 0;
  background: var(--c-ink);
  transition: width .4s var(--ease-out);
  pointer-events: none;
}
.proj-row:hover {
  background: linear-gradient(90deg, var(--c-bg-deep) 0%, transparent 70%);
}
.proj-row:hover::before { width: 3px; }
.proj-row__name {
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.proj-row[data-featured] .proj-row__name em { color: inherit; font-style: normal; }
.proj-row__meta,
.proj-row__loc {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.proj-row__value {
  font-family: var(--f-display);
  font-size: clamp(22px, 1.8vw, 28px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.proj-row__income {
  font-family: var(--f-display);
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.proj-row__yield {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(20px, 1.6vw, 28px);
  letter-spacing: -0.005em;
  color: var(--c-accent);
}
.proj-row__link {
  font-family: var(--f-display);
  font-style: normal;
  font-size: 24px;
  width: 56px; height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-ink);
  border-radius: 50%;
  color: var(--c-ink);
  transition: background .2s ease, color .2s ease, transform .3s var(--ease-out);
}
.proj-row__link:hover { background: var(--c-ink); color: var(--c-ink-on-dark); transform: translate(2px, -2px); }
@media (max-width: 1100px) {
  .proj-list__head { display: none; }
  .proj-row { grid-template-columns: 1fr; gap: var(--s-3); }
  .proj-row__link { justify-self: end; }
}

/* ============================================================
   YIELD + GALLERY — edge-to-edge full-width sections
   ============================================================ */
.yield .container,
.gallery .container { padding: 0 clamp(20px, 2vw, 40px); }

/* ============================================================
   GALLERY v10 — 4-col grid: text card | hero | thumb col A | thumb col B
   Photos seamless (gap 0), text в собственной колонке, не overlay
   ============================================================ */
section.gallery {
  position: relative;
  min-height: auto;
  /* Расширено 2026-05-01 — Max preference для taller gallery */
  height: clamp(640px, 95vh, 1080px);
  max-height: 100vh;
  overflow: hidden;
  padding: 0;
  isolation: isolate;
}
.gallery__mosaic {
  position: absolute;
  inset: 0;
  display: grid;
  /* col 1 = text card · col 2 = hero (largest) · col 3+4 = thumb columns */
  grid-template-columns: 1fr 1.6fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0;
  z-index: 0;
}
/* Text card — col 1, both rows, white background, не overlay */
section.gallery .gallery__card {
  grid-column: 1;
  grid-row: 1 / 3;
  background: var(--c-bg);
  padding: clamp(28px, 3.5vh, 48px) clamp(24px, 2.5vw, 40px);
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  border-radius: 0;
  box-shadow: none;
}
section.gallery .gallery__card .display.display--3 {
  font-size: clamp(28px, 2.6vw, 42px);
  line-height: 1.04;
  margin-bottom: clamp(16px, 2vh, 24px);
}
section.gallery .gallery__card .subhead {
  font-size: clamp(14px, 0.95vw, 17px);
  margin: 0;
  max-width: 100%;
}
section.gallery .gallery__card .eyebrow {
  margin-bottom: clamp(12px, 1.4vh, 20px);
}
.gallery__tile {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--c-bg-deep);
}
.gallery__tile--hero { grid-column: 2; grid-row: 1 / 3; }
.gallery__tile--1 { grid-column: 3; grid-row: 1; }
.gallery__tile--2 { grid-column: 4; grid-row: 1; }
.gallery__tile--3 { grid-column: 3; grid-row: 2; }
.gallery__tile--4 { grid-column: 4; grid-row: 2; }
/* Hide tile (используется на page 2 deck v4 — exterior only 4 photos, 5-й tile скрыт) */
.gallery__tile.is-hidden { visibility: hidden; pointer-events: none; }
.gallery__tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.4s var(--ease-out);
}
.gallery__tile.is-swapping .gallery__tile-img { opacity: 0; }
/* Thumbs clickable — cursor pointer + subtle hover scale via inner img */
.gallery__tile--1,
.gallery__tile--2,
.gallery__tile--3,
.gallery__tile--4 {
  cursor: pointer;
}
.gallery__tile--1:hover .gallery__tile-img,
.gallery__tile--2:hover .gallery__tile-img,
.gallery__tile--3:hover .gallery__tile-img,
.gallery__tile--4:hover .gallery__tile-img {
  filter: brightness(1.08);
}
.gallery__overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  padding: clamp(40px, 5vh, 64px) clamp(28px, 4vw, 80px);
}
/* OLD v8 .gallery__card rules removed 2026-05-01 — replaced by v10 (line ~1462) */
/* Navigation pill — bottom-right corner */
.gallery__controls {
  position: absolute;
  bottom: clamp(20px, 3vh, 36px);
  right: clamp(28px, 4vw, 80px);
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  z-index: 3;
}
.gallery__caption {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--ls-mono-label);
  text-transform: uppercase;
  color: #fff;
  background: rgba(26,37,67,0.65);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Note: .gallery__controls { display:none } moved to presentation.css 2026-05-03.
   Site needs the 5-photo nav controls visible. */
.gallery__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.94);
  padding: 6px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-card);
}
.gallery__arrow {
  width: clamp(36px, 3vw, 44px);
  height: clamp(36px, 3vw, 44px);
  border-radius: 50%;
  background: transparent;
  color: var(--c-ink);
  font-family: var(--f-mono);
  font-size: clamp(14px, 1.2vw, 18px);
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
}
.gallery__arrow:hover {
  background: var(--c-brand-navy);
  color: #fff;
}
.gallery__arrow:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.gallery__counter {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--ls-mono-label);
  text-transform: uppercase;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  padding: 0 6px;
  min-width: clamp(60px, 5vw, 80px);
  text-align: center;
}

/* Gallery pager (prev arrow + dots + next arrow) — in text card */
.gallery__pager {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(20px, 2.4vh, 32px);
}
.gallery__pager-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--c-line);
  color: var(--c-brand-navy);
  font-family: var(--f-mono);
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out);
}
.gallery__pager-btn:hover {
  background: var(--c-brand-navy);
  border-color: var(--c-brand-navy);
  color: #fff;
}
.gallery__pager-btn:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* Gallery page indicator dots — clickable, prominent */
.gallery__dots {
  display: flex;
  gap: 10px;
  align-items: center;
}
.gallery__dot {
  width: 32px;
  height: 4px;
  background: rgba(26,37,67,0.18);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  transition: background .25s var(--ease-out), width .35s var(--ease-out);
}
.gallery__dot.is-active {
  background: var(--c-brand-navy);
  width: 56px;
}
.gallery__dot:hover {
  background: var(--c-brand-navy);
}
.gallery__dot:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

/* ============================================================
   2026-05-03 SITE — Gallery lightbox (native <dialog>)
   Click any tile → opens full-size photo overlay.
   Close: × button, ESC key, or click on backdrop.
   ============================================================ */
.gallery-lightbox {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  inset: 0;
  overflow: hidden;
}
.gallery-lightbox::backdrop {
  background: rgba(17, 24, 47, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: gallery-backdrop-in .25s var(--ease-out) both;
}
@keyframes gallery-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.gallery-lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-lightbox__img {
  max-width: 88vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: clamp(10px, 1vw, 16px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  animation: gallery-img-in .35s var(--ease-out) both;
}
@keyframes gallery-img-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.gallery-lightbox__close {
  position: absolute;
  top: clamp(16px, 2.4vh, 28px);
  right: clamp(16px, 2.4vw, 28px);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.94);
  border: 0;
  color: var(--c-brand-navy);
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform .2s var(--ease-out), background .2s var(--ease-out);
}
.gallery-lightbox__close:hover {
  transform: scale(1.08);
  background: #fff;
}
.gallery-lightbox__close:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

/* Side nav arrows for prev/next photo inside lightbox */
.gallery-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.94);
  border: 0;
  color: var(--c-brand-navy);
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform .2s var(--ease-out), background .2s var(--ease-out);
}
.gallery-lightbox__nav--prev { left: clamp(16px, 2.4vw, 32px); }
.gallery-lightbox__nav--next { right: clamp(16px, 2.4vw, 32px); }
.gallery-lightbox__nav:hover {
  transform: translateY(-50%) scale(1.06);
  background: #fff;
}
.gallery-lightbox__nav:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

/* Hero tile also clickable now (was non-interactive when swap-to-hero existed) */
section.gallery .gallery__tile--hero {
  cursor: pointer;
}
section.gallery .gallery__tile--hero:hover .gallery__tile-img {
  filter: brightness(1.04);
}

/* ============================================================
   Text card reveal animation on page swap
   - Old text: fade out + slight up-shift + blur (220ms, syncs with photo swap)
   - New text: fade in + bigger up-rise + blur lift, staggered per element
   ============================================================ */
section.gallery .gallery__card .is-text-fading {
  opacity: 0;
  transform: translateY(-8px);
  filter: blur(2px);
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), filter .22s var(--ease-out);
}
section.gallery .gallery__card .is-text-in {
  animation: gallery-text-in 560ms var(--ease-out) both;
  animation-delay: var(--text-in-delay, 0ms);
}
@keyframes gallery-text-in {
  from {
    opacity: 0;
    transform: translateY(var(--text-in-distance, 14px));
    filter: blur(var(--text-in-blur, 0));
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  section.gallery .gallery__card .is-text-fading,
  section.gallery .gallery__card .is-text-in {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ============================================================
   Page 2 layout — grid-4 (4 photos in 2x2, no hero)
   Text card stays in col 1, photos fill cols 2-3 in 2x2 grid.
   ============================================================ */
.gallery__mosaic[data-layout="grid-4"] {
  grid-template-columns: 1fr 1.5fr 1.5fr;
  grid-template-rows: 1fr 1fr;
}
.gallery__mosaic[data-layout="grid-4"] .gallery__tile--hero {
  grid-column: 2;
  grid-row: 1;
}
.gallery__mosaic[data-layout="grid-4"] .gallery__tile--1 {
  grid-column: 3;
  grid-row: 1;
}
.gallery__mosaic[data-layout="grid-4"] .gallery__tile--2 {
  grid-column: 2;
  grid-row: 2;
}
.gallery__mosaic[data-layout="grid-4"] .gallery__tile--3 {
  grid-column: 3;
  grid-row: 2;
}
.gallery__mosaic[data-layout="grid-4"] .gallery__tile--4 {
  display: none;
}

/* Tablet */
@media (max-width: 1100px) {
  section.gallery .gallery__card { max-width: clamp(320px, 60vw, 480px); }
  .gallery__overlay { padding: clamp(32px, 4vh, 48px) clamp(20px, 3vw, 48px); }
}
/* Mobile */
@media (max-width: 700px) {
  section.gallery { height: clamp(440px, 80vh, 600px); }
  section.gallery .gallery__card {
    max-width: 100%;
    padding: 24px 24px;
  }
  section.gallery .gallery__card .display.display--3 { font-size: clamp(28px, 7vw, 40px); }
  .gallery__controls {
    right: 16px;
    bottom: 16px;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
}

/* ============================================================
   GALLERY v6 (legacy, orphan after v8 — kept for cleanup later)
   ============================================================ */
section.gallery {
  min-height: auto;
  padding: clamp(40px, 5vh, 64px) clamp(12px, 1.6vw, 32px);
  max-height: calc(100vh - var(--card-gap-y, 16px));
  overflow: hidden;
  justify-content: center;
}
section.gallery > .container {
  max-width: 100%;
  width: 100%;
  padding: 0;
}
.gallery__grid {
  display: grid;
  /* Photos LEFT (hero + 2 thumb cols) | text RIGHT — Max preference 2026-05-01 */
  grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(8px, 1vw, 16px);
  align-items: stretch;
  height: clamp(420px, 64vh, 640px);
}
/* OLD v7 .s-head rules removed 2026-05-01 — replaced by v10 (line ~1462)
   Card now uses .gallery__card grid-column: 1, не col 4 */
.gallery__hero,
.gallery__photo {
  position: relative;
  margin: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-bg-deep);
}
.gallery__hero {
  grid-column: 1;
  grid-row: 1 / -1;
}
/* Force visibility for gallery photos — IO scroll-reveal иногда не срабатывает
   на full-viewport sections с скоростью обновления, photos должны быть visible сразу */
.gallery__hero,
.gallery__photo,
.gallery__hero[data-reveal],
.gallery__photo[data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}
/* Interactive hero — button wraps img, photo cycles через 8 photos */
.gallery__hero-btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
.gallery__hero-btn:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: -4px;
}
.gallery__hero-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Removed transform/will-change — GPU compositor layer вызывал blur artifacts на hero.
     Только opacity transition для is-swapping fade. */
  transition: opacity 0.25s var(--ease-out);
  display: block;
}
.gallery__hero-btn.is-swapping img { opacity: 0; }
/* Override generic :hover scale rules для hero specifically — no scale on btn */
.gallery__hero:hover img,
.gallery__hero-btn:hover img {
  transform: none;
}
.gallery__hero-cap {
  position: absolute;
  top: clamp(12px, 1.4vw, 20px);
  left: clamp(14px, 1.6vw, 22px);
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--ls-mono-label);
  text-transform: uppercase;
  color: #fff;
  background: rgba(26,37,67,0.55);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  pointer-events: none;
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.gallery__hero-nav {
  position: absolute;
  bottom: clamp(14px, 1.6vw, 22px);
  right: clamp(14px, 1.6vw, 22px);
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  z-index: 2;
}
.gallery__hero-arrow {
  width: clamp(36px, 3vw, 48px);
  height: clamp(36px, 3vw, 48px);
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--c-ink);
  font-size: clamp(16px, 1.4vw, 20px);
  font-family: var(--f-mono);
  cursor: pointer;
  transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
}
.gallery__hero-arrow:hover {
  background: var(--c-accent);
  color: #fff;
  transform: scale(1.06);
}
.gallery__hero-arrow:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.gallery__hero-counter {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--ls-mono-label);
  text-transform: uppercase;
  color: #fff;
  background: rgba(26,37,67,0.55);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-variant-numeric: tabular-nums;
}
.gallery__photo--1 { grid-column: 2; grid-row: 1; }
.gallery__photo--2 { grid-column: 3; grid-row: 1; }
.gallery__photo--3 { grid-column: 2; grid-row: 2; }
.gallery__photo--4 { grid-column: 3; grid-row: 2; }
.gallery__hero img,
.gallery__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
  will-change: transform;
}
.gallery__hero:hover img,
.gallery__photo:hover img { transform: scale(1.04); }
.gallery__hero figcaption,
.gallery__photo figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: clamp(10px, 1vw, 16px) clamp(12px, 1.2vw, 20px);
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: var(--ls-mono-label);
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(0deg, rgba(26,37,67,0.55) 0%, rgba(26,37,67,0) 100%);
  pointer-events: none;
}

/* Tablet — 2-col 3-row: header / hero / photos 2x2 */
@media (max-width: 1100px) {
  .gallery__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    height: auto;
  }
  section.gallery .s-head { grid-column: span 2; grid-row: auto; }
  .gallery__hero { grid-column: span 2; grid-row: auto; height: clamp(280px, 36vh, 420px); }
  .gallery__photo--1 { grid-column: 1; grid-row: auto; height: clamp(160px, 20vh, 240px); }
  .gallery__photo--2 { grid-column: 2; grid-row: auto; height: clamp(160px, 20vh, 240px); }
  .gallery__photo--3 { grid-column: 1; grid-row: auto; height: clamp(160px, 20vh, 240px); }
  .gallery__photo--4 { grid-column: 2; grid-row: auto; height: clamp(160px, 20vh, 240px); }
}
@media (max-width: 700px) {
  .gallery__grid { grid-template-columns: 1fr; }
  section.gallery .s-head { grid-column: auto; }
  .gallery__hero,
  .gallery__photo { grid-column: auto; height: clamp(200px, 28vh, 280px); }
  section.gallery .display.display--3 { font-size: clamp(32px, 7vw, 44px); }
}

.yield__hero {
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding: clamp(28px, 3.5vh, 48px) 0;
  margin-bottom: clamp(24px, 3vh, 40px);
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  gap: clamp(32px, 4vw, 80px);
  align-items: end;
  text-align: left;
}
.yield__hero-eyebrow,
.yield__hero-foot {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--ls-mono-label);
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.yield__hero-eyebrow { padding-bottom: 16px; max-width: 22ch; }
.yield__hero-foot { padding-bottom: 16px; max-width: 30ch; text-align: right; justify-self: end; }
.yield__hero-num {
  font-family: var(--f-display);
  font-weight: 800;
  font-style: normal;
  font-size: clamp(84px, 9.6vw, 176px);
  line-height: 0.86;
  letter-spacing: -0.025em;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  text-align: center;
  margin: 0;
  text-wrap: nowrap;
}
@media (max-width: 900px) {
  .yield__hero { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .yield__hero-foot { text-align: left; justify-self: start; padding-bottom: 0; }
  .yield__hero-eyebrow { padding-bottom: 0; }
}
.yield__hero-dash {
  font-style: normal;
  color: var(--c-ink);
  margin: 0 clamp(6px, 1vw, 14px);
  letter-spacing: -0.05em;
}

.yield__breakdown {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 8vw, 160px);
  align-items: start;
}
.yield__col {
  display: flex;
  flex-direction: column;
}
.yield__col-eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--ls-mono-label);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-ink);
  margin-bottom: 0;
}
.yield__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: clamp(18px, 2vw, 28px) 0;
  border-bottom: 1px solid var(--c-line);
  gap: var(--s-5);
}
.yield__k {
  font-family: var(--f-body);
  font-size: clamp(15px, 1.1vw, 18px);
  color: var(--c-ink-soft);
}
.yield__v {
  font-family: var(--f-display);
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 500;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.yield__v em {
  font-style: normal;
  color: var(--c-accent);
}

@media (max-width: 800px) {
  .yield__breakdown { grid-template-columns: 1fr; }
}

/* ============================================================
   YIELD v4 — 4-col horizontal compaction 2026-05-01
   text(s-head) | hero number | Inputs col | What it means col — fits 1 viewport
   ============================================================ */
section.yield {
  min-height: auto;
  padding: clamp(40px, 5vh, 64px) clamp(12px, 1.6vw, 32px);
  max-height: calc(100vh - var(--card-gap-y, 16px));
  overflow: hidden;
  justify-content: center;
}
section.yield > .container {
  max-width: 100%;
  width: 100%;
  padding: 0;
}
.yield__layout {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr 1fr 1fr;
  gap: clamp(14px, 1.4vw, 28px);
  align-items: stretch;
}
section.yield .s-head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding-right: clamp(8px, 1vw, 16px);
}
section.yield .display.display--3 {
  font-size: clamp(28px, 2.8vw, 44px);
  line-height: 1.04;
}
/* Hero column — yield__hero overrides original border style */
section.yield .yield__hero {
  border-top: 0;
  border-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 2.5vh, 32px);
  margin: 0;
  text-align: left;
  background: var(--c-bg-deep);
  border-radius: var(--r-card);
  grid-template-columns: 1fr;
  align-items: flex-start;
}
section.yield .yield__hero-eyebrow {
  padding-bottom: 0;
  margin-bottom: clamp(8px, 1vh, 12px);
  max-width: 100%;
  text-align: left;
  justify-self: start;
}
section.yield .yield__hero-num {
  font-size: clamp(48px, 5.5vw, 88px);
  text-align: left;
  margin: 0 0 clamp(12px, 1.6vh, 20px) 0;
  line-height: 0.92;
}
section.yield .yield__hero-foot {
  padding-bottom: 0;
  margin-top: clamp(6px, 0.8vh, 10px);
  text-align: left;
  justify-self: start;
  max-width: 100%;
  font-size: clamp(11px, 0.85vw, 13px);
}
/* Yield columns — Inputs / What it means */
section.yield .yield__col {
  /* 2026-05-03 v56: дизайн матчит .villa-card в comparison — gradient bg, hairline, shadow, accent line сверху */
  position: relative;
  padding: clamp(20px, 2.4vh, 32px) clamp(20px, 2vw, 32px);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.92) 0%,
      rgba(245,245,250,0.86) 100%);
  border: 1px solid rgba(26,37,67,0.10);
  border-radius: clamp(8px, 0.8vw, 14px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 8px 24px rgba(26,37,67,0.05),
    0 1px 2px rgba(26,37,67,0.04);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
section.yield .yield__col::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--c-brand-navy, #1A2543) 30%,
    var(--c-brand-navy, #1A2543) 70%,
    transparent 100%);
  opacity: 0.55;
  z-index: 1;
}
section.yield .yield__col:hover {
  transform: translateY(-3px);
  border-color: rgba(26,37,67,0.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 14px 36px rgba(26,37,67,0.08),
    0 2px 4px rgba(26,37,67,0.06);
}
section.yield .yield__col-eyebrow {
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-3);
}
section.yield .yield__row {
  padding: clamp(10px, 1.2vw, 16px) 0;
}
section.yield .yield__k {
  font-size: clamp(13px, 0.95vw, 16px);
}
section.yield .yield__v {
  font-size: clamp(20px, 1.8vw, 28px);
}

/* Tablet — 2-col, 2-row (header+hero on top spanning, cols below) */
@media (max-width: 1100px) {
  .yield__layout {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  section.yield .s-head { grid-column: 1 / -1; }
  section.yield .yield__hero { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .yield__layout { grid-template-columns: 1fr; }
  section.yield .yield__hero-num { font-size: clamp(60px, 12vw, 88px); }
}

/* ============================================================
   AMBIENT BACKGROUNDS — subtle photo depth on 2 sections
   ============================================================ */

/* Market-proof ambient bg removed 2026-05-02 (per Max — was eле просвечивающее фото) */
.market-proof { position: relative; isolation: isolate; }
.market-proof__ambient { display: none !important; }

/* Process: clean cream bg — base properties (presentation-only 100vh lock moved to presentation.css 2026-05-03) */
.process {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 6vh, 80px) clamp(40px, 4vw, 80px) !important;
}

/* UNIVERSAL navy text-fade gradient — applied to ALL navy heavy text (2026-05-02 v2) */
.display, .display--3, .display--4, .display--mega,
.featured__title,
.p-step__title,
.pay-card__title,
.pay-card__price,
.floor-plan__head .display,
.floor-plan__spec-v--lg,
.featured__brackets .b-value,
.yield__hero-num,
.yield__big,
.units .proj-row__name,
.proj-row__value,
.proj-row__income,
.proj-row__yield,
.contact__brand,
.featured__price,
.market-proof__head-tag em,
section.process .display.display--3,
section.process .p-step__title,
section.floor-plan .display.display--3,
section.featured .featured__title,
section.units .display.display--3,
section.yield .display.display--3,
section.market-proof .display.display--3,
section.comparison .display.display--3,
section.payment .display.display--3,
section.location .display.display--3 {
  background: linear-gradient(180deg,
    var(--c-brand-navy, #1A2543) 0%,
    var(--c-brand-navy, #1A2543) 55%,
    rgba(26,37,67,0.55) 85%,
    rgba(26,37,67,0.20) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Big numbers/prices — solid navy без gradient (Market-proof + Comparison + Yield 11-15%) */
.proof-row__stat,
.comp-card__price,
.yield__hero-num,
.yield__big {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--c-brand-navy, #1A2543) !important;
  color: var(--c-brand-navy, #1A2543) !important;
}

/* Developer section — base properties (presentation-only 100vh lock moved to presentation.css 2026-05-03) */
section.developer {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 7vh, 80px) clamp(40px, 5vw, 96px) !important;
  /* Black gradient bottom → top (fade-in to navy) */
  background: linear-gradient(0deg,
    #000000 0%,
    #050810 30%,
    #0E1528 60%,
    var(--c-brand-navy, #1A2543) 100%) !important;
  color: #fff;
}
.developer__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.95fr 1.1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: stretch;
}
/* Photo — large arched top, fills available height */
.developer__photo {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 50% 50% 8px 8px / 24% 24% 8px 8px;
  background: rgba(255,255,255,0.04);
  min-height: 70vh;
}
.developer__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
.developer__content {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vh, 22px);
  justify-content: center;
}
.developer__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(48px, 5.6vw, 100px);
  line-height: 0.94;
  letter-spacing: -0.022em;
  text-transform: uppercase;
  color: rgba(245,242,236,0.98);
  margin: 0;
  text-wrap: balance;
}
.developer__title em {
  font-style: normal;
  font-family: var(--f-display);
  font-weight: 200;
  color: rgba(245,242,236,0.92);
  letter-spacing: -0.014em;
  text-transform: uppercase;
}
.developer__sub {
  font-family: var(--f-mono);
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(245,242,236,0.78);
  margin: 0 0 clamp(10px, 1.4vh, 18px);
  padding-bottom: clamp(14px, 1.8vh, 22px);
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.developer__quote {
  font-family: var(--f-body);
  font-size: clamp(16px, 1.25vw, 22px);
  line-height: 1.45;
  font-weight: 500;
  color: rgba(245,242,236,0.94);
  margin: 0 0 clamp(20px, 2.6vh, 32px);
  max-width: 46ch;
  letter-spacing: -0.005em;
  font-style: normal;
}
.developer__pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.4vw, 22px);
}
.developer__pillars li {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.5vh, 6px);
}
.developer__pillar-num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(245,242,236,0.50);
  font-weight: 500;
  margin-bottom: clamp(2px, 0.4vh, 6px);
}
.developer__pillar-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.2;
  color: rgba(245,242,236,0.96);
  margin: 0 0 clamp(4px, 0.6vh, 8px);
  letter-spacing: -0.005em;
}
.developer__pillar-desc {
  font-family: var(--f-body);
  font-size: clamp(12px, 0.9vw, 14px);
  line-height: 1.5;
  font-weight: 400;
  color: rgba(245,242,236,0.70);
  margin: 0;
}
@media (max-width: 900px) {
  .developer__inner { grid-template-columns: 1fr; gap: clamp(24px, 4vh, 40px); }
  .developer__photo { min-height: 50vh; aspect-ratio: 4 / 5; max-width: 480px; margin: 0 auto; }
  .developer__pillars { grid-template-columns: 1fr; }
}
/* Em наследует gradient родителя */
.display em, .display--3 em,
.featured__title em,
section.process .display.display--3 em,
section.floor-plan .display.display--3 em,
section.featured .featured__title em,
section.units .display.display--3 em,
section.yield .display.display--3 em,
section.market-proof .display.display--3 em,
section.comparison .display.display--3 em,
section.payment .display.display--3 em,
section.location .display.display--3 em {
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Sub-line — thin/narrow weight, размер 1:1 с parent (как .featured__title em) — solid navy без градиента (2026-05-03 v40) */
.display .display__sub {
  font-weight: 200;
  font-size: 1em;
  line-height: 1;
  letter-spacing: 0.01em;
  display: inline-block;
  font-style: normal;
  /* Solid navy — override parent's transparent fill */
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--c-brand-navy, #1A2543) !important;
  color: var(--c-brand-navy, #1A2543) !important;
}
/* Floor-plan em — размер 1em (was 1.16em). Градиент НАСЛЕДУЕТСЯ от parent .display.display--3 через universal rule выше — идентично .featured__title em / "highest yield." (2026-05-03 v43, был own-gradient в v40-42) */
.floor-plan__head .display.display--3 em,
section.floor-plan .display.display--3 em {
  font-size: 1em;
  letter-spacing: -0.022em;
}
.process__ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.process__ambient img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0.10;
  mix-blend-mode: multiply;
  filter: saturate(0.4) brightness(1.2);
}
.process__ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 70% at 50% 50%, transparent 30%, var(--c-bg) 85%),
    linear-gradient(180deg, var(--c-bg) 0%, transparent 18%, transparent 82%, var(--c-bg) 100%);
}

/* ============================================================
   MARKET PROOF v3 2026-05-02 — Compact 1-screen layout
   Top header · 3 cols of proof rows · sources footer
   ============================================================ */
section.market-proof {
  min-height: 100vh !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  padding: clamp(64px, 8vh, 96px) 0 !important;
}
.market-proof__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(24px, 3vw, 48px);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.6vh, 48px);
}
.market-proof__layout {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.6vh, 48px);
}
.market-proof__head {
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(24px, 3vw, 56px);
  align-items: end;
  position: static;
}
.market-proof__head .eyebrow {
  margin-bottom: 0;
  grid-column: 1 / -1;
}
.market-proof__head .display.display--3 {
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1.04;
  margin: 0;
}
.market-proof__head .subhead {
  font-family: var(--f-body);
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.5;
  color: var(--c-ink-soft);
  margin: 0;
  font-weight: 500;
}
.market-proof__head-tag {
  font-family: var(--f-body);
  font-size: clamp(13px, 0.95vw, 15px);
  color: var(--c-brand-navy);
  line-height: 1.45;
  margin: 0;
  padding: 0;
  border: none;
  max-width: 36ch;
  font-weight: 500;
}
.market-proof__head-tag em {
  font-weight: 700;
}
.market-proof__head .cta-wa-row {
  margin: 0;
}

/* 3 proof rows — horizontal cards row, compact */
.market-proof__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.6vw, 28px);
}
.proof-row {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vh, 12px);
  padding: clamp(20px, 2vh, 28px);
  background: rgba(26,37,67,0.04);
  border: 1px solid var(--c-line);
  border-radius: 6px;
}
.proof-row__num {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--c-ink-muted);
  font-variant-numeric: tabular-nums;
  padding: 0;
}
.proof-row__body {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.8vh, 10px);
}
.proof-row__source {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin: 0;
  line-height: 1.3;
}
.proof-row__stat {
  font-family: var(--f-display);
  font-size: clamp(40px, 4.4vw, 72px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.022em;
  color: var(--c-brand-navy);
  margin: clamp(4px, 0.6vh, 8px) 0;
  font-variant-numeric: tabular-nums;
}
.proof-row__benefit {
  font-family: var(--f-body);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.35;
  font-weight: 600;
  color: var(--c-brand-navy);
  margin: 0;
}
.proof-row__benefit em {
  font-weight: 700;
}
.proof-row__facts {
  list-style: none;
  margin: clamp(10px, 1.4vh, 16px) 0 0;
  padding: clamp(10px, 1.4vh, 14px) 0 0;
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.6vh, 8px);
}
.proof-row__facts li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-family: var(--f-body);
  font-size: clamp(12px, 0.85vw, 14px);
  line-height: 1.3;
}
.proof-row__facts li > span {
  color: var(--c-ink-muted);
}
.proof-row__facts li > strong {
  font-family: var(--f-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
  letter-spacing: -0.005em;
  white-space: nowrap;
}

/* Tablet/mobile stack */
@media (max-width: 1000px) {
  .market-proof__head { grid-template-columns: 1fr; }
  .market-proof__rows { grid-template-columns: 1fr; }
}
.market-proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.4vw, 24px);
}
.proof-card {
  position: relative;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  padding: clamp(24px, 2.2vw, 36px) clamp(22px, 1.8vw, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vh, 18px);
  transition: border-color .25s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.proof-card:hover {
  border-color: var(--c-brand-navy);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(26,37,67,0.08);
}
.proof-card__source {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  padding-bottom: clamp(8px, 1vh, 14px);
  border-bottom: 1px solid var(--c-line);
  margin: 0;
}
/* Stat smaller — was 56-104, now 40-72 для refined luxe look */
.proof-card__stat {
  font-family: var(--f-display);
  font-size: clamp(40px, 3.8vw, 72px);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.022em;
  color: var(--c-brand-navy);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
/* New benefit hook — italic accent line */
.proof-card__benefit {
  font-family: var(--f-body);
  font-size: clamp(15px, 1.1vw, 18px);
  font-style: italic;
  line-height: 1.4;
  color: var(--c-accent);
  font-weight: 500;
  margin: 0;
  max-width: 24ch;
  letter-spacing: -0.005em;
}
.proof-card__stat span { display: inline; font-size: inherit; font-weight: inherit; color: inherit; line-height: inherit; }
.proof-card__label {
  font-family: var(--f-body);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.42;
  color: var(--c-ink-soft);
  font-weight: 500;
  max-width: 24ch;
}
.proof-card__facts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding-top: clamp(12px, 1.4vh, 20px);
  border-top: 1px solid var(--c-line);
}
.proof-card__facts li {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-ink-soft);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.proof-card__facts li::before {
  content: "+";
  font-family: var(--f-mono);
  color: var(--c-ink-faint);
  margin-right: 8px;
  flex-shrink: 0;
}
.proof-card__facts li > strong {
  font-family: var(--f-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
/* ============================================================
   WhatsApp CTA buttons — universal styling 2026-05-01
   ============================================================ */
.cta-wa {
  font-family: var(--f-mono);
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out), transform .2s var(--ease-out);
}
.cta-wa::before {
  content: "";
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M17.6 6.32A8 8 0 0 0 4.07 14.5l-1 3.65 3.74-.98a8 8 0 0 0 3.84.98h.01A8 8 0 0 0 17.6 6.32zm-5.94 12.32a6.65 6.65 0 0 1-3.39-.93l-.24-.14-2.5.66.67-2.43-.16-.25a6.65 6.65 0 1 1 5.62 3.09zm3.65-4.98c-.2-.1-1.18-.58-1.36-.65-.18-.07-.32-.1-.45.1s-.51.65-.63.78c-.12.13-.23.15-.43.05-.2-.1-.84-.31-1.6-.99-.6-.53-1-1.18-1.12-1.38-.12-.2-.01-.31.09-.41.09-.09.2-.23.3-.35.1-.12.13-.2.2-.33.07-.13.03-.25-.02-.35-.05-.1-.45-1.08-.62-1.48-.16-.39-.33-.34-.45-.34-.12 0-.25-.02-.39-.02s-.35.05-.53.25c-.18.2-.7.69-.7 1.67 0 .98.71 1.93.81 2.06.1.13 1.4 2.13 3.4 2.99.47.2.85.32 1.14.41.48.15.92.13 1.26.08.39-.06 1.18-.48 1.35-.95.17-.47.17-.87.12-.95-.05-.08-.18-.13-.38-.23z'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
}
.cta-wa--primary {
  background: var(--c-brand-navy);
  color: #fff;
  border-color: var(--c-brand-navy);
}
.cta-wa--primary:hover {
  background: var(--c-brand-navy-deep);
  border-color: var(--c-brand-navy-deep);
  transform: translateY(-1px);
}
.cta-wa--secondary {
  background: var(--c-brand-navy);
  color: #fff;
  border-color: var(--c-brand-navy);
}
.cta-wa--secondary:hover {
  background: #000;
  border-color: #000;
  transform: translateY(-1px);
}
.cta-wa--outline {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-line);
}
.cta-wa--outline:hover {
  border-color: var(--c-brand-navy);
  background: var(--c-bg-deep);
}
.cta-wa--on-dark {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.32);
}
.cta-wa--on-dark:hover {
  background: #fff;
  color: var(--c-brand-navy);
  border-color: #fff;
}
.cta-wa-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1vw, 16px);
  margin-top: clamp(20px, 2.4vh, 32px);
}

/* CTA bar at bottom — luxe marketing closure */
.market-proof__cta {
  margin-top: clamp(40px, 5vh, 64px);
  padding: clamp(28px, 3vh, 44px) clamp(28px, 3vw, 48px);
  background: var(--c-brand-navy);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  flex-wrap: wrap;
}
.market-proof__cta-text {
  font-family: var(--f-body);
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.4;
  color: var(--c-ink-on-dark);
  font-weight: 400;
  margin: 0;
  max-width: 44ch;
}
.market-proof__cta-text em {
  font-style: italic;
  font-weight: 600;
  color: #fff;
}
.market-proof__cta-link {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding: 14px 24px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.market-proof__cta-link:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
}
.market-proof__sources {
  margin-top: clamp(20px, 2.4vh, 32px);
  text-align: center;
  font-size: 12px;
  color: var(--c-ink-muted);
}

@media (max-width: 900px) {
  .market-proof__grid { grid-template-columns: 1fr; }
  .market-proof__cta { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ============================================================
   COMPARISON — what expats already pay
   ============================================================ */
.comparison__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 40px);
}
/* Two-card variant — wider cards, max-width 900px centered for breathing room */
.comparison__grid--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 900px;
  margin: 0 auto;
}
/* ============================================================
   COMPARISON v3 (2026-05-03) — full-width editorial strips
   No boxes, hairline dividers, market vs ours split per row.
   ============================================================ */
.rent-compare {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--c-line);
}
.rent-strip {
  border-bottom: 1px solid var(--c-line);
  padding: clamp(36px, 4.4vh, 64px) 0;
}
.rent-strip__head {
  display: grid;
  grid-template-columns: auto 1fr 1fr auto;
  align-items: baseline;
  gap: clamp(16px, 2vw, 36px);
  margin-bottom: clamp(20px, 2.6vh, 32px);
}
.rent-strip__num {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.20em;
  color: var(--c-ink-faint);
  font-variant-numeric: tabular-nums;
}
.rent-strip__type {
  font-family: var(--f-display);
  font-size: clamp(20px, 1.6vw, 28px);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--c-ink);
  margin: 0;
}
.rent-strip__size {
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--c-ink-soft);
  margin: 0;
}
.rent-strip__delta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: #2f7d4d;
  background: rgba(47, 125, 77, 0.08);
  padding: 6px 12px;
  border-radius: 999px;
  margin: 0;
  white-space: nowrap;
  justify-self: end;
}
.rent-strip__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 56px);
  align-items: start;
  position: relative;
}
.rent-strip__row::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--c-line);
}
/* 2026-05-03 v50: single-column variant — без 2-col grid, без divider, без left-pad на ours */
.rent-strip__row--single {
  grid-template-columns: 1fr;
}
.rent-strip__row--single::before {
  display: none;
}
.rent-strip__row--single .rent-strip__col--ours {
  padding-left: 0;
}
/* Note line — italic muted, отделяет market reference text от primary numbers */
.rent-strip__meta--note {
  font-style: italic;
  opacity: 0.78;
  margin-top: clamp(4px, 0.6vh, 8px);
}
.rent-strip__col {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vh, 12px);
}
.rent-strip__col--ours { padding-left: clamp(24px, 3vw, 56px); }
.rent-strip__label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin: 0;
}
.rent-strip__col--ours .rent-strip__label {
  color: var(--c-brand-navy);
  font-weight: 500;
}
.rent-strip__price {
  font-family: var(--f-display);
  font-size: clamp(48px, 5vw, 88px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rent-strip__price--ours { color: var(--c-brand-navy); }
.rent-strip__per {
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin-left: 6px;
  vertical-align: baseline;
  white-space: nowrap;
}
.rent-strip__meta {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-ink-soft);
  margin: 0;
}

/* Mobile — collapse split into stacked rows */
@media (max-width: 760px) {
  .rent-strip__head {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "num type"
      "num size"
      "delta delta";
  }
  .rent-strip__num { grid-area: num; }
  .rent-strip__type { grid-area: type; }
  .rent-strip__size { grid-area: size; }
  .rent-strip__delta { grid-area: delta; justify-self: start; }
  .rent-strip__row { grid-template-columns: 1fr; }
  .rent-strip__row::before { display: none; }
  .rent-strip__col--ours { padding-left: 0; padding-top: 16px; border-top: 1px solid var(--c-line); }
}

/* Old comp-card styles kept for legacy (not rendered now) */

/* Featured brackets — divider between specs and finance (matches floor-plan style) */
.featured__brackets .b-divider {
  /* 2026-05-03 v34: matched 1:1 to .floor-plan__finance border-top — тонкая 2px navy line, без block-margin (was 2px height + 24-40px margin = thick visual bar) */
  display: block;
  height: 0;
  background: transparent;
  border-top: 2px solid var(--c-ink);
  border-bottom: 0;
  padding: clamp(10px, 1.2vh, 16px) 0 0;
  margin: 0;
  list-style: none;
  grid-template-columns: none;
}
.comp-card {
  position: relative;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  padding: clamp(32px, 3vw, 52px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vh, 26px);
  background: var(--c-bg);
  transition: border-color .25s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  overflow: hidden;
}
/* Top accent line — subtle navy hairline */
.comp-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--c-brand-navy);
  opacity: 0.85;
}
.comp-card:hover {
  border-color: var(--c-brand-navy);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(26, 37, 67, 0.08);
}
.comp-card__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.comp-card__tag {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin: 0;
}
.comp-card__type {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink);
  font-weight: 500;
  margin: 0;
}
.comp-card__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.comp-card__price {
  font-family: var(--f-display);
  font-size: clamp(44px, 4.2vw, 68px);
  font-weight: 800;
  line-height: 0.95;
  color: var(--c-ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin: 0;
  white-space: nowrap;
}
.comp-card__per {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  font-weight: 400;
  margin-left: 6px;
  vertical-align: baseline;
  white-space: nowrap;
}
/* Price range secondary value */
.comp-card__price span.comp-card__price-range {
  font-family: var(--f-display);
  font-size: 0.55em;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--c-ink);
  margin-left: 2px;
  vertical-align: baseline;
}
.comp-card__local {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin: 0;
}
.comp-card__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--c-line);
  padding-top: clamp(16px, 2vh, 22px);
  list-style: none;
  margin: 0;
}
.comp-card__meta li {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-ink-soft);
}
.comp-card__meta li::before {
  content: "+ ";
  color: var(--c-ink-faint);
  margin-right: 2px;
}
/* "Ours" comparison block — navy bg with white text, value-prop highlight */
.comp-card__ours {
  margin-top: auto;
  background: var(--c-brand-navy);
  color: #fff;
  padding: clamp(14px, 1.6vh, 20px) clamp(16px, 1.6vw, 24px);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.comp-card__ours-label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin: 0;
}
.comp-card__ours-value {
  font-family: var(--f-display);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #fff;
  margin: 0;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.comp-card__ours-per {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.comp-card__ours-delta {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #aef0c5;
  background: rgba(174, 240, 197, 0.08);
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .comparison__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PAYMENT — 3 plans + agent offer
   ============================================================ */
.payment__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.6vw, 28px);
}
.pay-card {
  border: 1px solid var(--c-line);
  border-radius: 4px;
  padding: clamp(24px, 2.2vw, 36px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vh, 22px);
  background: var(--c-bg);
  transition: border-color .25s var(--ease-out), transform .35s var(--ease-out);
}
.pay-card:hover {
  border-color: var(--c-ink);
  transform: translateY(-2px);
}
.pay-card--featured {
  /* Top navy → bottom darker navy depth (2026-05-02 v3 — match .p-step.is-now style) */
  background: linear-gradient(180deg,
    var(--c-brand-navy, #1A2543) 0%,
    var(--c-brand-navy, #1A2543) 45%,
    #141C36 80%,
    #0E1528 100%);
  border-color: rgba(26,37,67,0.85);
  color: var(--c-ink-on-dark);
}
.pay-card__tag {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.pay-card--featured .pay-card__tag { color: rgba(255,255,255,0.62); }
.pay-card__title {
  font-family: var(--f-display);
  font-size: clamp(32px, 2.8vw, 48px);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.018em;
  color: var(--c-ink);
  text-transform: uppercase;
}
.pay-card__title em { font-style: normal; font-weight: 900; color: inherit; font-size: 1.12em; letter-spacing: -0.024em; }
.pay-card--featured .pay-card__title { color: #fff; }
.pay-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-4);
  margin-top: auto;
}
.pay-card--featured .pay-card__list { border-top-color: rgba(255,255,255,0.18); }
.pay-card__list li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  align-items: baseline;
}
.pay-card__list li > span:first-child {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.pay-card--featured .pay-card__list li > span:first-child { color: rgba(255,255,255,0.55); }
.pay-card__list li > span:last-child {
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 500;
  color: var(--c-ink);
  text-align: right;
}
.pay-card--featured .pay-card__list li > span:last-child { color: #fff; }
/* AGENT OFFER title — override universal navy gradient fade text (3317-3354).
   Без этого title рендерится navy gradient → невидим на navy bg карточки.
   2026-05-06 fix. */
.pay-card--featured .pay-card__title,
.pay-card--featured .pay-card__title em {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}
@media (max-width: 1100px) { .payment__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .payment__grid { grid-template-columns: 1fr; } }

.form__optional {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* ============================================================
   GALLERY — Interactive Carousel (warm minimalism)
   ============================================================ */
.gallery .container {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vh, 32px);
}
.gallery .s-head { flex: 0 0 auto; }

/* ---- Carousel shell ---- */
.carousel {
  position: relative;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

/* Main stage — shows 1 photo + peek of neighbors */
.carousel__track-wrap {
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--c-bg-deep);
  position: relative;
}

.carousel__track {
  display: flex;
  gap: clamp(10px, 1vw, 16px);
  transition: transform 0.72s var(--ease-out);
  will-change: transform;
  cursor: grab;
}
.carousel__track.is-dragging {
  transition: none;
  cursor: grabbing;
}

/* Each slide */
.carousel__slide {
  flex: 0 0 calc(72% - 8px);
  min-width: 0;
  border-radius: var(--r-card-sm);
  overflow: hidden;
  background: var(--c-bg-deep);
  aspect-ratio: 16 / 10;
  position: relative;
  outline: none;
}

/* Peek neighbors on desktop */
@media (min-width: 900px) {
  .carousel__slide { flex: 0 0 calc(76% - 8px); }
}
@media (max-width: 600px) {
  .carousel__slide { flex: 0 0 calc(90% - 6px); }
}

.carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.72s var(--ease-out), opacity 0.5s var(--ease-out);
  will-change: transform;
  pointer-events: none;
}

/* Non-active slides dim slightly */
.carousel__slide:not(.is-active) img {
  opacity: 0.68;
  transform: scale(0.985);
}
.carousel__slide.is-active img {
  opacity: 1;
  transform: scale(1);
}

/* Lightbox open button on active slide */
.carousel__slide.is-active::after {
  content: "↗";
  position: absolute;
  top: clamp(14px, 1.4vw, 22px);
  right: clamp(14px, 1.4vw, 22px);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 50%;
  font-family: var(--f-display);
  font-size: 16px;
  color: var(--c-brand-navy);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  pointer-events: none;
  z-index: 3;
}
.carousel__slide.is-active:hover::after {
  opacity: 1;
  transform: translate(2px, -2px);
}

/* Caption bar under track */
.carousel__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(16px, 1.8vh, 24px);
  gap: var(--s-5);
}

.carousel__caption {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--ls-mono-label);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  min-height: 1.4em;
  transition: opacity 0.4s var(--ease-out);
}

.carousel__counter {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--ls-mono-small);
  color: var(--c-ink-faint);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Nav buttons */
.carousel__nav {
  display: flex;
  gap: var(--s-3);
  flex-shrink: 0;
}

.carousel__btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-bg);
  color: var(--c-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), transform 0.3s var(--ease-out), color 0.25s var(--ease-out);
  outline: none;
}
.carousel__btn:hover {
  background: var(--c-brand-navy);
  border-color: var(--c-brand-navy);
  color: #fff;
  transform: scale(1.06);
}
.carousel__btn:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.carousel__btn:disabled {
  opacity: 0.32;
  pointer-events: none;
}

/* ---- LIGHTBOX ---- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,12,20,0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out);
}
.lb.is-open {
  opacity: 1;
  pointer-events: all;
}

.lb__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(60px, 8vh, 100px) clamp(24px, 6vw, 80px);
}

.lb__img-wrap {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
}

.lb__img {
  max-width: 100%;
  max-height: calc(100vh - 160px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  display: block;
  transition: opacity 0.35s var(--ease-out), transform 0.4s var(--ease-out);
  will-change: opacity, transform;
  box-shadow: 0 32px 80px rgba(0,0,0,0.55);
}

.lb__img.is-switching {
  opacity: 0;
  transform: scale(0.97);
}

/* Close button */
.lb__close {
  position: absolute;
  top: clamp(16px, 3vh, 28px);
  right: clamp(16px, 3vw, 28px);
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.88);
  font-family: var(--f-display);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s var(--ease-out), transform 0.3s var(--ease-out);
  outline: none;
  z-index: 10;
}
.lb__close:hover { background: rgba(255,255,255,0.18); transform: scale(1.06) rotate(90deg); }
.lb__close:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* Lightbox nav */
.lb__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: 20px;
  cursor: pointer;
  transition: background 0.25s var(--ease-out), transform 0.3s var(--ease-out), opacity 0.25s var(--ease-out);
  outline: none;
  z-index: 10;
}
.lb__btn:hover { background: rgba(255,255,255,0.16); }
.lb__btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.lb__btn:disabled { opacity: 0.22; pointer-events: none; }
.lb__btn--prev { left: clamp(12px, 3vw, 28px); }
.lb__btn--next { right: clamp(12px, 3vw, 28px); }
.lb__btn--prev:hover { transform: translateY(-50%) translateX(-2px); }
.lb__btn--next:hover { transform: translateY(-50%) translateX(2px); }

/* Lightbox footer */
.lb__footer {
  position: absolute;
  bottom: clamp(16px, 3vh, 28px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--s-6);
  white-space: nowrap;
}
.lb__caption {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: var(--ls-mono-label);
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
.lb__counter {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.42);
  font-variant-numeric: tabular-nums;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .carousel__track { transition: none; }
  .carousel__slide img { transition: opacity 0.2s; }
  .lb, .lb__img { transition: opacity 0.2s; }
}

/* ============================================================
   LOCATION — v5 horizontal full-width 2026-05-01
   4-column row: text (s-head) | map | Canggu | Uluwatu — все на одной строке.
   Edge-to-edge: container max-width 100%, минимальный padding.
   ============================================================ */
section.location {
  /* 2026-05-01: full-screen height — was capped at 100vh+overflow:hidden */
  min-height: 100vh;
  height: auto;
  max-height: none;
  overflow: visible;
  padding: clamp(80px, 10vh, 120px) clamp(16px, 2vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Container — true edge-to-edge (override global .container padding) */
section.location > .container {
  max-width: 100%;
  width: 100%;
  padding: 0;
}
/* Grid — 4 columns horizontal: text | map | card1 | card2 */
.location__grid {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr 1fr 1fr;
  gap: clamp(14px, 1.4vw, 28px);
  align-items: stretch;
}
/* s-head становится первой колонкой grid — vertical-center text */
section.location .s-head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  margin-bottom: 0;
  padding-right: clamp(8px, 1vw, 20px);
}
section.location .display.display--3 {
  font-size: clamp(28px, 2.8vw, 44px);
  line-height: 1.04;
}
section.location .subhead {
  font-size: clamp(14px, 0.95vw, 17px);
  margin-top: clamp(16px, 1.6vh, 24px);
  max-width: 100%;
}
section.location .eyebrow {
  margin-bottom: clamp(12px, 1.4vh, 20px);
}
/* Map — fills its column, занимает всю высоту row */
.location__map {
  aspect-ratio: auto;
  width: 100%;
  /* Увеличено для full-screen layout */
  height: clamp(420px, 65vh, 720px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg-deep);
  border-radius: var(--r-card);
  overflow: hidden;
  padding: clamp(12px, 1.4vw, 24px);
}
.location__map svg { width: 100%; height: 100%; max-width: 100%; }

/* ---- Photo cards for location ---- */
/* В 4-col horizontal layout cards = same height as map (col 3 + col 4 sibling map col 2) */
.loc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  /* Match map height — full-screen layout 2026-05-01 */
  height: clamp(420px, 65vh, 720px);
  isolation: isolate;
  cursor: default;
}

/* Photo background layer */
.loc-card__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.loc-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 0.8s var(--ease-out);
  will-change: transform;
}
.loc-card:hover .loc-card__photo img {
  transform: scale(1.05);
}

/* Gradient overlay for text legibility — lightened 2026-05-01 v3 rework
   Original 0.28→0.52→0.82 затемнял photos до невидимости.
   New 0.10→0.30→0.66 — photo читается, текст в bottom area защищён */
.loc-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(26,37,67,0.10) 0%,
    rgba(26,37,67,0.30) 55%,
    rgba(26,37,67,0.66) 100%
  );
  transition: opacity 0.6s var(--ease-out);
}
.loc-card:hover .loc-card__overlay {
  opacity: 0.92;
}

/* Content layer — padding уменьшен 20-32 → 16-24, gap s-3 → s-2 для compact look */
.loc-card__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: clamp(16px, 1.8vw, 24px);
  height: 100%;
  justify-content: flex-end;
}

.loc-card .caption {
  color: rgba(255,255,255,0.72);
}

/* Card name scale-down: clamp 36-52 → 28-40, более compact на узком столбце */
.loc-card__name {
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}

.loc-card .body--sm {
  color: rgba(255,255,255,0.84);
  max-width: 42ch;
  font-size: 14px;
  line-height: 1.5;
}

/* Uluwatu card — portrait photo, focal point at top (temple/cliffs) */
.loc-card--uluwatu .loc-card__photo img {
  object-position: center 20%;
}

/* Tablet — 2-col, 2-row: header on top spanning, then map | card | card */
@media (max-width: 1100px) {
  .location__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  section.location .s-head { grid-column: span 2; }
  .location__map { grid-column: span 2; height: clamp(280px, 36vh, 400px); }
  .loc-card { height: clamp(220px, 28vh, 320px); }
}
/* Mobile — single column stack */
@media (max-width: 700px) {
  .location__grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  section.location .s-head { grid-column: auto; }
  .location__map { grid-column: auto; height: clamp(240px, 32vh, 320px); }
  .loc-card { height: clamp(200px, 25vh, 260px); }
  section.location .display.display--3 { font-size: clamp(32px, 7vw, 44px); }
}

/* ============================================================
   PROCESS timeline
   ============================================================ */
.process-line {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  position: relative;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.p-step {
  padding: clamp(32px, 4vh, 56px) clamp(20px, 1.8vw, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vh, 22px);
  border-right: 1px solid var(--c-line);
  position: relative;
  min-width: 0;
}
.p-step:last-child { border-right: 0; }
/* Все мелкие элементы увеличены 2026-05-01 для читаемости */
.p-step__date {
  font-family: var(--f-mono);
  font-size: clamp(13px, 0.95vw, 15px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.p-step__num {
  font-family: var(--f-mono);
  font-size: clamp(13px, 0.95vw, 15px);
  letter-spacing: 0.16em;
  color: var(--c-ink-faint);
}
.p-step__title {
  font-family: var(--f-display);
  font-size: clamp(24px, 2.0vw, 32px);
  font-weight: 500;
  letter-spacing: -0.01em;
  /* 2-line min-height for cross-card alignment of desc rows (2026-05-02) */
  min-height: 2lh;
}
.p-step__desc {
  font-size: clamp(15px, 1.05vw, 18px);
  color: var(--c-ink-soft);
  line-height: 1.55;
}
.p-step__status {
  font-family: var(--f-mono);
  font-size: clamp(12px, 0.85vw, 14px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  align-self: flex-start;
  padding: 6px 14px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  margin-top: auto;
}
.p-step.is-now {
  /* Top navy → bottom slightly darker navy (2026-05-02 v3 — softer) */
  background: linear-gradient(180deg,
    var(--c-brand-navy, #1A2543) 0%,
    var(--c-brand-navy, #1A2543) 45%,
    #141C36 80%,
    #0E1528 100%);
  color: var(--c-ink-on-dark);
}
.p-step.is-now .p-step__date,
.p-step.is-now .p-step__desc,
.p-step.is-now .p-step__num { color: rgba(245,244,239,0.65); }
/* Title gradient fade (white version для dark navy bg) — overrides global gradient */
.p-step.is-now .p-step__title {
  background: linear-gradient(180deg,
    rgba(245,242,236,0.96) 0%,
    rgba(245,242,236,0.96) 55%,
    rgba(245,242,236,0.55) 85%,
    rgba(245,242,236,0.20) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Status badge — cream вместо green (per Max 2026-05-02) */
.p-step.is-now .p-step__status {
  border-color: rgba(245,242,236,0.85);
  color: rgba(245,242,236,0.92);
}
.p-step.is-now .p-step__status::before {
  content: "● ";
  color: rgba(245,242,236,0.92);
}
.p-step.is-done .p-step__status::before {
  content: "✓ ";
  color: var(--c-brand-navy, #1A2543);
}
@media (max-width: 1000px) {
  .process-line { grid-template-columns: 1fr; }
  .p-step { border-right: 0; border-bottom: 1px solid var(--c-line); }
  .p-step:last-child { border-bottom: 0; }
}

/* ============================================================
   CONTACT (dark)
   ============================================================ */
/* Specificity bump: section[data-section] (0,0,1,1) beats .contact (0,0,1,0).
   section.contact (0,0,1,1) matches and wins by cascade order. Fix 2026-05-01. */
section.contact {
  background: var(--c-bg-dark);
  color: var(--c-ink-on-dark);
  display: flex !important;
  flex-direction: column;
  position: relative;
  isolation: isolate;
}
/* Note: 100vh strict lock + space-evenly justify-content for section.contact moved to
   presentation.css 2026-05-03. Site lets contact grow naturally. */
/* Top zone — Contacts heading на photo (dark sky region) */
.contact__top {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding-top: 0;
  text-align: left;
  flex-shrink: 0;
}
.contact__top .contact__heading {
  margin: 0;
  font-size: clamp(40px, 4.6vw, 80px);
}
/* Background photo + overlay (hero-style) — 2026-05-02 */
.contact__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.contact__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
/* DOF blur — soft from bottom-left fading to clear at top-right (2026-05-02) */
.contact__bg-blur {
  position: absolute;
  inset: 0;
  z-index: 1;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  mask-image: linear-gradient(45deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.85) 25%,
    rgba(0,0,0,0.50) 45%,
    rgba(0,0,0,0.20) 65%,
    rgba(0,0,0,0) 80%);
  -webkit-mask-image: linear-gradient(45deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.85) 25%,
    rgba(0,0,0,0.50) 45%,
    rgba(0,0,0,0.20) 65%,
    rgba(0,0,0,0) 80%);
  pointer-events: none;
}
.contact__bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.42) 0%,
    rgba(0,0,0,0.50) 50%,
    rgba(0,0,0,0.62) 100%);
}
.contact__bg-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(ellipse 95% 80% at 50% 50%,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 50%,
    rgba(0,0,0,0.32) 100%);
  pointer-events: none;
}

/* Contact v4 2026-05-02 — 2-col side-by-side: headline LEFT + card RIGHT */
.contact__inner {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 4vw, 80px);
  /* 2026-05-02 v6: align center vместо end — headline и card гармонично центрированы по высоте */
  align-items: center;
}
.contact__head {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vh, 16px);
  text-align: left;
  max-width: 100%;
  /* 2026-05-02 v6: headline alignment = center с card */
  align-self: center;
  padding-bottom: 0;
}
@media (max-width: 1000px) {
  .contact__inner {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}
.contact__eyebrow {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  margin: 0;
  font-weight: 500;
}
.contact__heading {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(48px, 5.4vw, 96px);
  line-height: 1;
  letter-spacing: -0.022em;
  text-transform: uppercase;
  color: rgba(245,242,236,0.96);
  margin: 0 0 clamp(8px, 1.2vh, 16px);
}
.contact__title {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(36px, 4vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: rgba(245,242,236,0.96);
  margin: 0;
  max-width: 100%;
  white-space: normal;
}
.contact__title em {
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.022em;
}
.contact__sub {
  font-family: var(--f-body);
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1.5;
  font-weight: 500;
  color: rgba(245,242,236,0.78);
  margin: 0;
  max-width: 70ch;
}

/* Card — narrow single-column, RIGHT col of 2-col grid (2026-05-02 v7) */
.contact__card {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vh, 18px);
  padding: clamp(18px, 2vw, 28px);
  background: rgba(20,28,52,0.42);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  position: static;
  /* Card на right col grid — narrow + ограничено */
  max-width: 440px;
  width: 100%;
  margin-left: auto;
  margin-right: 0;
  align-self: start;
}
/* Внутренние col больше не используются — keep selectors но disable layout */
.contact__col,
.contact__col--left,
.contact__col--right {
  display: contents;
}
.contact__col--right {
  /* Visual separator before QR block */
  border-top: 1px solid rgba(255,255,255,0.14);
  margin-top: clamp(8px, 1vh, 14px);
  padding-top: clamp(14px, 1.8vh, 22px);
}
.contact__col {
  display: flex;
  flex-direction: column;
}
.contact__col--left { gap: clamp(10px, 1.4vh, 18px); }
.contact__col--right {
  gap: clamp(14px, 1.8vh, 22px);
  align-items: center;
  justify-content: center;
  padding-left: clamp(24px, 3vw, 40px);
  border-left: 1px solid rgba(255,255,255,0.12);
}
.contact__caption {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0;
}
.contact__brand {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 36px);
  line-height: 0.96;
  letter-spacing: -0.018em;
  text-transform: uppercase;
  margin: 0;
  /* White на dark bg — override universal navy gradient */
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: rgba(245,242,236,0.96) !important;
  color: rgba(245,242,236,0.96) !important;
}
.contact__brand-sub {
  font-family: var(--f-body);
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.5;
  font-weight: 500;
  color: rgba(245,242,236,0.65);
  margin: 0;
  padding-bottom: clamp(8px, 1vh, 12px);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: clamp(4px, 0.6vh, 8px);
}
.contact__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.contact__rows li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: clamp(12px, 1.4vw, 20px);
  align-items: baseline;
  padding: clamp(8px, 1vh, 12px) 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.contact__rows li:last-child { border-bottom: 0; }
.contact__label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.contact__val {
  font-family: var(--f-mono);
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.04em;
  color: rgba(245,242,236,0.94);
  text-decoration: none;
  transition: color .2s ease;
}
a.contact__val:hover { color: var(--c-brand-navy); }

/* QR — clean white card */
.contact__qr {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 1.4vw, 18px);
  background: #fff;
  border-radius: 8px;
  margin: 0 auto;
  width: max-content;
}
.contact__qr img {
  display: block;
  /* Reduced 2026-05-02 — fit в 100vh без обрезки */
  width: clamp(140px, 11vw, 180px);
  height: clamp(140px, 11vw, 180px);
  object-fit: contain;
  image-rendering: pixelated;
}
.contact__qr-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  margin: 0 auto;
  text-align: center;
}
.contact__cta {
  align-self: center;
  margin: 0 auto;
}
.contact__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: clamp(12px, 1.4vh, 16px) clamp(20px, 2.4vw, 32px);
  background: #fff;
  color: var(--c-brand-navy);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid #fff;
  transition: background .25s ease, color .25s ease, gap .25s ease;
}
.contact__cta:hover {
  background: transparent;
  color: #fff;
  gap: 18px;
}
.contact__cta .arrow { font-size: 14px; }

/* Mobile/tablet — stack */
@media (max-width: 800px) {
  .contact__card {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vh, 36px);
  }
  .contact__col--right {
    padding-left: 0;
    border-left: 0;
    padding-top: clamp(20px, 3vh, 32px);
    border-top: 1px solid rgba(255,255,255,0.12);
  }
}
.contact .eyebrow { color: rgba(255,255,255,0.82); }
.contact .eyebrow::before { background: rgba(255,255,255,0.55); }
.contact .display { color: var(--c-ink-on-dark); }
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(28px, 3.6vw, 56px);
  align-items: start;
}
/* Card-only mode (form removed for presentation) — 2026-05-02 */
.contact__grid--card-only {
  grid-template-columns: 1fr;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
.form { display: flex; flex-direction: column; gap: clamp(12px, 1.6vh, 18px); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 20px); }
.form__field { display: flex; flex-direction: column; gap: 8px; }
.form__field label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.form__field input,
.form__field textarea,
.form__field select {
  padding: 8px 0;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.32);
  color: #fff;
  font-size: 15px;
  outline: none;
  transition: border-color .2s ease;
}
.form__field input:focus,
.form__field textarea:focus,
.form__field select:focus { border-bottom-color: var(--c-accent); }
.form__field select { color-scheme: dark; }
.form__field select option { background: var(--c-bg-dark); color: #fff; }
.form__field textarea { resize: vertical; min-height: 56px; }
.form__field input::placeholder, .form__field textarea::placeholder { color: rgba(255,255,255,0.32); }
.form__submit {
  align-self: flex-start;
  margin-top: var(--s-4);
  background: #fff;
  color: var(--c-brand-navy);
  border-color: #fff;
}
.form__submit::before { background: var(--c-accent); }
.form__submit:hover { color: #fff; }
.form__legal { color: rgba(255,255,255,0.55); }
.form__hint {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: 6px;
}
.form__success {
  display: none;
  padding: 14px 18px;
  border: 1px solid var(--c-accent);
  background: rgba(197,165,114,0.10);
  color: var(--c-accent);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.form__success.is-show { display: block; }
@media (max-width: 700px) { .form__row { grid-template-columns: 1fr; } }

.contact__card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  padding: clamp(18px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.8vh, 10px);
  position: static;
}
.contact__brand {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1;
  color: var(--c-ink-on-dark);
  letter-spacing: -0.015em;
  margin-top: clamp(6px, 0.8vh, 10px);
}
.contact__row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: clamp(8px, 1vw, 16px);
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.contact__val { font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.04em; color: #fff; }
.contact__val:hover { color: var(--c-brand-navy); }

@media (max-width: 900px) {
  .contact__grid { grid-template-columns: 1fr; }
  .contact__card { position: relative; top: auto; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--c-bg-deep);
  padding-top: clamp(60px, 8vh, 100px);
  border-top: 1px solid var(--c-line);
}
.footer__wordmark {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(120px, 22vw, 360px);
  line-height: 0.84;
  letter-spacing: -0.045em;
  text-align: center;
  margin: 0 0 clamp(40px, 6vw, 80px);
}
/* Navy text fade-out gradient — overrides [data-mask-reveal] generic rule */
.footer__wordmark,
.footer__wordmark[data-mask-reveal],
.footer__wordmark[data-mask-reveal].is-visible {
  background: linear-gradient(180deg,
    var(--c-brand-navy, #1A2543) 0%,
    var(--c-brand-navy, #1A2543) 55%,
    rgba(26,37,67,0.55) 85%,
    rgba(26,37,67,0.20) 100%) !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.footer__cols {
  display: grid;
  /* 5 cols on desktop: Project · Invest · Direct · On site · Schedule (sync с nav 2026-05-06) */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 48px);
  padding: var(--s-9) 0;
  border-top: 1px solid var(--c-line);
}
.footer__col h4 {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin-bottom: var(--s-4);
  font-weight: 500;
}
.footer__col p,
.footer__col a,
.footer__col li {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  line-height: 1.85;
}
.footer__col li::before { content: "+ "; opacity: 0.5; }
.footer__col a:hover { color: var(--c-brand-navy); }
.footer__bar {
  background: var(--c-bg-dark);
  color: rgba(255,255,255,0.55);
  display: flex;
  justify-content: space-between;
  padding: 14px clamp(24px, 5vw, 80px);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
@media (max-width: 1100px) {
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__bar { flex-direction: column; gap: 6px; }
}
@media (max-width: 480px) {
  .footer__cols { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   Reveal-on-scroll defaults
   ============================================================ */
/* Reveal animations 2026-05-01 — 6 variants для interesting transitions между sections */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }

/* Variant: slide from left */
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="left"].is-visible { transform: translateX(0); }

/* Variant: slide from right */
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="right"].is-visible { transform: translateX(0); }

/* Variant: scale-in */
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="scale"].is-visible { transform: scale(1); }

/* Variant: blur fade — modern luxury */
[data-reveal="blur"] { filter: blur(12px); transform: translateY(20px); }
[data-reveal="blur"].is-visible { filter: blur(0); transform: translateY(0); }

/* Variant: fade-only (no transform) */
[data-reveal="fade"] { transform: none; }
[data-reveal="fade"].is-visible { transform: none; }

/* Variant: cinematic — slow + scale */
[data-reveal="cinematic"] { transform: translateY(48px) scale(0.96); transition-duration: 1.4s; }
[data-reveal="cinematic"].is-visible { transform: translateY(0) scale(1); }

[data-reveal-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
[data-reveal-stagger].is-visible > * { opacity: 1; transform: translateY(0); }
[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 80ms; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 160ms; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 240ms; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 320ms; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 400ms; }

[data-mask-reveal] {
  background: linear-gradient(90deg, var(--c-ink) 0%, var(--c-ink) 50%, transparent 50%);
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 200% 100%;
  background-position: 100% 0;
  color: transparent;
  transition: background-position 1.4s var(--ease-out);
}
[data-mask-reveal].is-visible { background-position: 0 0; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-stagger] > *, [data-mask-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    background-position: 0 0 !important;
    color: var(--c-ink) !important;
  }
  .hero__scroll { animation: none; }
}

/* Note: presentation-mode rules (16:9 letterbox, slide compression, 100vh locks,
   gallery controls hidden, contact 100vh lock) extracted to presentation.css
   on 2026-05-03 — loaded only by presentation.html. Site stays clean. */

/* ============================================================
   2026-05-03 SITE — Hero + Concept full-width sections (revised v17)
   Earlier aspect-ratio: 16/9 caused width narrowing on non-16:9 viewports
   (e.g. 1920×900 → width clamped to 1600px). Now: full viewport width,
   natural height = at least 100vh.
   ============================================================ */
@media (min-width: 900px) {
  .hero {
    width: 100%;
    min-height: 100vh;
  }
  /* 2026-05-03 v51: Concept slide = full-width section, фото на всю ширину viewport, BEZ navy bars. Высота = calc(100vh-72px). Photo scaled to fill width — vertical overhang дает room для parallax. */
  .concept {
    width: 100%;
    max-width: 100%;
    height: calc(100vh - 72px);
    min-height: auto !important;
    max-height: calc(100vh - 72px);
    aspect-ratio: auto !important;
    margin: 0;
    padding: 0 !important;
    background: var(--c-brand-navy, #1A2543) !important;
    position: relative;
    overflow: hidden;
  }
  /* 2026-05-03 v53: Comparison slide = one-screen fit + рич villa-card дизайн (gradient bg, hover lift, stats grid) */
  section.comparison {
    height: calc(100vh - 72px);
    min-height: auto;
    max-height: calc(100vh - 72px);
    padding: clamp(40px, 5vh, 64px) 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
      radial-gradient(ellipse at top right, rgba(26,37,67,0.04) 0%, transparent 60%),
      radial-gradient(ellipse at bottom left, rgba(26,37,67,0.03) 0%, transparent 60%),
      var(--c-bg);
  }
  section.comparison > .container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(20px, 2.4vh, 32px);
  }
  section.comparison .display.display--3 {
    font-size: clamp(28px, 3vw, 48px);
    line-height: 1.04;
    margin: 0;
  }
  section.comparison .s-head { margin: 0; }
  section.comparison .subhead {
    margin: clamp(8px, 1vh, 14px) 0 0;
    font-size: clamp(13px, 1vw, 16px);
    line-height: 1.45;
    max-width: 56ch;
  }
  section.comparison .comparison__caption {
    font-size: 12px;
    margin: 0;
    color: var(--c-ink-muted);
  }
  section.comparison .section__cta-row {
    margin-top: clamp(4px, 0.8vh, 12px);
  }
}

/* ============================================================
   2026-05-03 v53 VILLA-CARD — rich comparison cards
   Side-by-side grid, gradient bg, hover lift, stats row
   ============================================================ */
.villa-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2vw, 36px);
}
.villa-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vh, 22px);
  padding: clamp(24px, 3vh, 40px) clamp(24px, 2.4vw, 40px);
  border-radius: clamp(8px, 0.8vw, 14px);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.92) 0%,
      rgba(245,245,250,0.86) 100%);
  border: 1px solid rgba(26,37,67,0.10);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 8px 24px rgba(26,37,67,0.05),
    0 1px 2px rgba(26,37,67,0.04);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
  overflow: hidden;
  isolation: isolate;
}
.villa-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--c-brand-navy, #1A2543) 30%,
    var(--c-brand-navy, #1A2543) 70%,
    transparent 100%);
  opacity: 0.55;
  z-index: 1;
}
.villa-card:hover {
  transform: translateY(-3px);
  border-color: rgba(26,37,67,0.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 14px 36px rgba(26,37,67,0.08),
    0 2px 4px rgba(26,37,67,0.06);
}
/* Header: number + tag */
.villa-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
}
.villa-card__num {
  font-family: var(--f-display);
  font-size: clamp(20px, 1.6vw, 28px);
  font-weight: 200;
  letter-spacing: 0.04em;
  color: var(--c-brand-navy);
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
}
.villa-card__tag {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  padding: 5px 10px;
  border: 1px solid rgba(26,37,67,0.15);
  border-radius: 999px;
  white-space: nowrap;
}
/* Title block */
.villa-card__title-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.villa-card__type {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(20px, 1.7vw, 28px);
  letter-spacing: -0.012em;
  color: var(--c-ink);
  margin: 0;
  text-transform: uppercase;
}
.villa-card__type em {
  font-style: normal;
  font-weight: 800;
  color: var(--c-brand-navy);
  letter-spacing: -0.022em;
}
.villa-card__loc {
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--c-ink-soft);
  margin: 0;
}
/* Price block — hero number */
.villa-card__price-block {
  position: relative;
  padding: clamp(12px, 1.4vh, 18px) 0;
  border-top: 1px solid rgba(26,37,67,0.10);
  border-bottom: 1px solid rgba(26,37,67,0.10);
}
.villa-card__price {
  font-family: var(--f-display);
  font-size: clamp(40px, 4vw, 64px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.022em;
  color: var(--c-brand-navy);
  margin: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: linear-gradient(180deg,
    var(--c-brand-navy) 0%,
    var(--c-brand-navy) 60%,
    rgba(26,37,67,0.65) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.villa-card__per {
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin-left: 8px;
  vertical-align: baseline;
  white-space: nowrap;
  -webkit-text-fill-color: var(--c-ink-muted);
}
.villa-card__price-note {
  margin: clamp(4px, 0.6vh, 8px) 0 0;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
/* Stats — 3 column row */
.villa-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(12px, 1.2vw, 24px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.villa-card__stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: clamp(8px, 1vh, 12px) 0 clamp(8px, 1vh, 12px) clamp(10px, 1vw, 14px);
  border-left: 1px solid rgba(26,37,67,0.18);
}
.villa-stat__label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.villa-stat__value {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(15px, 1.2vw, 19px);
  letter-spacing: -0.005em;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.villa-stat__value--accent {
  color: var(--c-brand-navy);
  font-weight: 800;
}
/* Footer note */
.villa-card__footer {
  font-family: var(--f-body);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--c-ink-muted);
  font-style: italic;
  margin: 0;
  padding-top: clamp(4px, 0.6vh, 8px);
}
.villa-card__plus {
  font-style: normal;
  color: var(--c-brand-navy);
  font-weight: 700;
  margin-right: 4px;
}
@media (max-width: 900px) {
  .villa-compare-grid {
    grid-template-columns: 1fr;
    gap: clamp(16px, 2vh, 24px);
  }
}
/* Close the @media (min-width: 900px) block opened above */
@media (min-width: 900px) {
  /* placeholder to balance braces — main rules are above this section */
  /* BG layer fills section полностью — фото cover на всю ширину viewport, vertical overhang для parallax */
  .concept__bg {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
  }
  /* Контент full-width на photo */
  .concept__inner {
    position: relative;
    z-index: 3;
    height: 100%;
    max-width: 100%;
    margin: 0;
    padding-top: clamp(32px, 4vh, 56px);
    padding-bottom: clamp(32px, 4vh, 56px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ============================================================
   2026-05-03 SITE — Unified .cta-pill for mid-section CTAs
   All 10 mid-sections + Contact primary use same compact pill pattern.
   .cta-pill         — navy outline + navy text (light bg sections)
   .cta-pill--on-dark — white outline + white text (dark bg sections)
   Hover: solid fill of accent color, text inverts.
   ============================================================ */
.cta-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-brand-navy);
  border: 1px solid var(--c-brand-navy);
  background-color: transparent;
  width: max-content;
  transition:
    background-color .35s var(--ease-out),
    color .35s var(--ease-out),
    border-color .35s var(--ease-out),
    transform .35s var(--ease-out);
}
.cta-pill:hover {
  background-color: var(--c-brand-navy);
  color: #fff;
  transform: translateY(-2px);
}
.cta-pill .arrow {
  font-family: var(--f-display);
  font-size: 12px;
  display: inline-block;
  transition: transform .35s var(--ease-out);
}
.cta-pill:hover .arrow { transform: translate(3px, -3px); }

/* On-dark variant — used on Concept, Contact, и любых photo-bg dark sections */
.cta-pill--on-dark {
  color: #fff;
  border-color: rgba(255,255,255,0.45);
  background-color: transparent;
}
.cta-pill--on-dark:hover {
  background-color: #fff;
  color: var(--c-brand-navy);
  border-color: #fff;
}

/* CTA row wrapper — gives CTA its own line below section content */
.section__cta-row {
  margin-top: clamp(20px, 3vh, 36px);
  display: flex;
  justify-content: flex-start;
}

/* Floor-plan section doesn't have container — give CTA row its own padding */
.floor-plan__cta-row {
  padding: 0 clamp(28px, 4vw, 96px);
  margin-bottom: clamp(40px, 5vh, 80px);
}
/* CTA inside floor-plan__head — hugs disclaimer, doesn't extend section */
.floor-plan__cta {
  margin-top: clamp(16px, 2vh, 24px);
}

/* Contact CTA row — center horizontally on dark photo bg */
.contact__cta-row {
  justify-content: center;
  margin-top: clamp(24px, 3.5vh, 40px);
}

/* ============================================================
   2026-05-03 SITE — Market-proof rewrite (R030 fix)
   Replaced 3 unverified proof-rows (12+ invented numbers) with
   editorial gated block — only brief-derived facts visible,
   detailed market data behind "available on request" CTA.
   ============================================================ */
.market-proof__gated {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vh, 22px);
  padding: clamp(24px, 3vh, 36px);
  background: rgba(26,37,67,0.04);
  border: 1px solid var(--c-line);
  border-radius: 8px;
}
.market-proof__gated-eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin: 0;
}
.market-proof__gated-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vh, 14px);
}
.market-proof__gated-list li {
  font-family: var(--f-body);
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.45;
  color: var(--c-brand-navy);
  padding-left: 18px;
  position: relative;
}
.market-proof__gated-list li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--c-ink-muted);
}
.market-proof__gated-note {
  font-family: var(--f-body);
  font-size: clamp(12px, 0.85vw, 14px);
  font-style: italic;
  color: var(--c-ink-soft);
  margin: clamp(4px, 0.6vh, 8px) 0 0;
  line-height: 1.5;
}

/* ============================================================
   2026-05-04 v61 — MOBILE ADAPTATION
   Адаптация для tablet ≤900px и phone ≤600px без потери концепции:
   - Auto-height для slide-секций (concept/comparison/yield)
   - Hero subhead: убрать nowrap, дать wrap
   - Multi-col grids → stack vertically
   - Уменьшенные размеры fonts/paddings для phone
   - Photos: cover с min-height для visual presence
   ============================================================ */

/* TABLET / SMALL DESKTOP ≤ 900px */
@media (max-width: 900px) {
  /* Hero — subhead unwrap + headline scaled */
  .hero__lead {
    white-space: normal !important;
    max-width: 100% !important;
    margin-top: clamp(12px, 1.5vh, 20px) !important;
    line-height: 1.35;
  }
  .hero__tagline {
    font-size: clamp(38px, 8.5vw, 72px) !important;
  }
  /* 2026-05-04 v62: Concept на мобиле — фото БЕЗ crop, contain с центрированием.
     Section min-height 100vh, navy bars сверху/снизу photo (photo 16:9 в portrait viewport).
     Контент оверлеит как на desktop. */
  .concept {
    height: auto !important;
    max-height: none !important;
    min-height: 100vh !important;
    aspect-ratio: auto !important;
    padding: clamp(56px, 8vh, 96px) 0 !important;
  }
  .concept__bg {
    position: absolute !important;
    inset: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .concept__bg img {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }
  .concept__inner {
    height: auto !important;
    padding: clamp(20px, 3vh, 40px) clamp(20px, 5vw, 40px) !important;
    aspect-ratio: auto !important;
  }
  /* 2026-05-04 v62: Hero photo на мобиле — contain (no crop) */
  .hero {
    background: var(--c-brand-navy);
  }
  .hero__photo {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero__photo img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
  /* Market-proof ambient photo на мобиле — contain */
  .market-proof__ambient img {
    object-fit: contain !important;
    object-position: center center !important;
  }
  /* 2026-05-04 v95 — Concept text card компактнее */
  .concept__title {
    font-size: clamp(26px, 6vw, 42px) !important;
    max-width: 100% !important;
    line-height: 1.05 !important;
    margin-bottom: 8px !important;
  }
  .concept__lead {
    font-size: clamp(13px, 3.4vw, 17px) !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
  }
  .concept__head {
    margin-bottom: 14px !important;
  }
  .concept__eyebrow {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }
  .concept__inner {
    padding: clamp(14px, 2.5vh, 28px) clamp(16px, 4vw, 24px) !important;
    gap: 12px !important;
  }
  .concept__layout {
    gap: clamp(12px, 2vh, 20px) !important;
  }
  /* 2026-05-04 v99 — pillars в ряд (3 cards in row), увеличены fonts (заполняют доступное место) */
  .concept__pillars {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    justify-items: stretch !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .pillar {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 12px !important;
    box-sizing: border-box !important;
  }
  .pillar > * {
    max-width: 100% !important;
  }
  .pillar h3,
  .pillar__title {
    font-size: 14px !important;
    line-height: 1.15 !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.005em !important;
  }
  .pillar p,
  .pillar__body,
  .pillar__desc {
    font-size: 11px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  /* Index "01"/"02"/"03" — чуть крупнее, не теряется */
  .pillar .pillar__num,
  .pillar > span:first-child {
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 6px !important;
    opacity: 0.65 !important;
  }
  .concept__layout {
    grid-template-columns: 1fr !important;
    gap: clamp(16px, 2.5vh, 28px) !important;
  }

  /* Comparison — auto height, villa-cards stack (already done at 5641, additionally compress) */
  section.comparison {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    padding: clamp(56px, 8vh, 80px) 0 !important;
    overflow: visible;
  }
  section.comparison > .container {
    height: auto;
    gap: clamp(20px, 3vh, 32px);
  }
  section.comparison .display.display--3 {
    font-size: clamp(28px, 6vw, 44px) !important;
  }
  /* villa-card mobile: tighter padding, stats may need to wrap */
  .villa-card {
    padding: clamp(20px, 4vw, 32px) clamp(20px, 4vw, 28px) !important;
    gap: clamp(12px, 2vh, 18px) !important;
  }
  .villa-card__price {
    font-size: clamp(36px, 9vw, 56px) !important;
  }
  .villa-card__stats {
    gap: clamp(8px, 2vw, 16px) !important;
  }
  .villa-card__stats li {
    padding: clamp(6px, 1vh, 10px) 0 clamp(6px, 1vh, 10px) clamp(8px, 2vw, 12px) !important;
  }
  .villa-stat__value {
    font-size: clamp(13px, 3vw, 18px) !important;
  }
  .villa-card__head {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Yield section — stack 3 cols vertically */
  .yield__breakdown {
    grid-template-columns: 1fr !important;
    gap: clamp(20px, 3vh, 32px) !important;
  }
  section.yield .yield__col {
    padding: clamp(20px, 4vw, 28px) !important;
  }

  /* Floor-plan / Featured / Gallery / Units — stack или compress */
  .floor-plan,
  section.floor-plan {
    padding: clamp(56px, 8vh, 80px) 0 !important;
  }
  .featured {
    padding: clamp(56px, 8vh, 80px) 0 !important;
    min-height: auto !important;
  }

  /* Market-proof — stack head + gated */
  .market-proof__layout {
    grid-template-columns: 1fr !important;
    gap: clamp(24px, 3vh, 40px) !important;
  }

  /* Location — already has responsive, ensure 1-col stack */
  .location__grid {
    grid-template-columns: 1fr !important;
    gap: clamp(20px, 3vh, 32px) !important;
  }

  /* Payment — stack cards */
  .payment__grid {
    grid-template-columns: 1fr !important;
    gap: clamp(16px, 2.5vh, 24px) !important;
  }

  /* Process — keep horizontal scroll OR stack */
  .process__grid {
    grid-template-columns: 1fr !important;
    gap: clamp(16px, 2.5vh, 24px) !important;
  }

  /* Universal display heading scaling */
  .display--mega { font-size: clamp(56px, 12vw, 96px) !important; }
  .display--4 { font-size: clamp(48px, 10vw, 80px) !important; }
}

/* PHONE ≤ 600px — extra compression */
@media (max-width: 600px) {
  /* Hero further down-scale */
  .hero__tagline {
    font-size: clamp(32px, 9vw, 56px) !important;
    line-height: 1.05 !important;
  }
  .hero__lead {
    font-size: 13px !important;
    letter-spacing: -0.005em !important;
  }
  .hero__brand-mark {
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
  }
  .hero__strip {
    flex-wrap: wrap;
    gap: 8px 16px !important;
    font-size: 10px !important;
  }

  /* Section headlines */
  section.comparison .display.display--3,
  section.yield .display.display--3,
  section.market-proof .display.display--3,
  section.location .display.display--3,
  section.payment .display.display--3,
  .floor-plan__head .display.display--3,
  .featured__title {
    font-size: clamp(28px, 7.5vw, 40px) !important;
  }

  /* Villa-card stats — 1-col on small phone */
  .villa-card__stats {
    grid-template-columns: 1fr 1fr !important;
  }
  .villa-card__stats li {
    border-left: none !important;
    border-bottom: 1px solid rgba(26,37,67,0.10);
    padding: 8px 0 !important;
  }
  .villa-card__stats li:last-child {
    border-bottom: 0;
  }
  .villa-card__price {
    font-size: clamp(32px, 11vw, 48px) !important;
  }
  .villa-card__type {
    font-size: clamp(18px, 5vw, 24px) !important;
  }

  /* Concept pillars — tighter */
  .concept__pillars { gap: 10px !important; }

  /* Floor-plan / Featured — single col */
  .floor-plan__layout {
    grid-template-columns: 1fr !important;
  }
  .featured__inner {
    grid-template-columns: 1fr !important;
    padding: 0 !important;
  }
  .floor-plan__head .display.display--3 {
    font-size: clamp(28px, 8vw, 44px) !important;
  }

  /* Generic body padding */
  .container { padding-left: 20px !important; padding-right: 20px !important; }

  /* CTA pill — slightly smaller for thumb-friendly */
  .cta-pill {
    font-size: 10px !important;
    padding: 10px 16px !important;
  }

  /* Yield hero number */
  .yield__hero-num {
    font-size: clamp(48px, 14vw, 80px) !important;
  }
}

/* Hide nav links на mobile (≤900) — already exists at line 625, kept for clarity */
@media (max-width: 900px) {
  .nav__links { display: none !important; }
  .nav { padding: 12px 20px !important; }
}

/* ============================================================
   v93 — PLAN-3D — interactive cutaway with clickable hotspots
   ============================================================ */
.plan-3d {
  position: relative;
  /* Edge-to-edge: full viewport width + height. Video covers полностью. */
  width: 100%;
  height: calc(100vh - 72px);
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 30%, #2a3528 0%, #1a2419 60%, #0e1610 100%),
    #0e1610;
  color: #fff;
}
.plan-3d__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.plan-3d__bg img,
.plan-3d__bg video,
.plan-3d__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top; /* anchor левый+верхний края — не трогаем */
  display: block;
  /* v131: zoom 5% от левого-верхнего угла — обрезает правую полосу + низ, верх и левый край сохраняются */
  transform: scale(1.05);
  transform-origin: left top;
}

/* ============================================================
   v107.1 — Floor plan PARALLAX + ZOOM cursor
   Figure целиком плавает на скролле (±30px), план виден полностью
   без обрезки границ. Курсор-лупа + click → fullscreen lightbox.
   ============================================================ */
[data-plan-parallax] {
  position: relative;
  /* overflow: visible — план должен показываться целиком, без обрезки */
  overflow: visible !important;
  cursor: zoom-in;
  will-change: transform;
}
[data-plan-parallax] img {
  display: block;
  width: 100%;
  height: auto;
  /* No scale — image в нативном размере, целиком виден */
  transition: filter 0.4s var(--ease-out);
}
[data-plan-parallax]:hover img {
  filter: brightness(1.04) contrast(1.02);
}
img[data-plan-zoom] { cursor: zoom-in; }
/* v104: лёгкое равномерное затемнение всего фона + усиление под заголовком и CTA
   для читаемости текста на любом кадре видео */
.plan-3d__overlay {
  position: absolute;
  inset: 0;
  background:
    /* база — равномерное лёгкое затемнение */
    linear-gradient(rgba(0,0,0,0.32), rgba(0,0,0,0.32)),
    /* плюс лёгкое усиление сверху и снизу для контраста с заголовком и CTA */
    linear-gradient(180deg,
      rgba(0,0,0,0.18) 0%,
      rgba(0,0,0,0)    35%,
      rgba(0,0,0,0)    65%,
      rgba(0,0,0,0.22) 100%);
  pointer-events: none;
}
.plan-3d__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: clamp(28px, 4vh, 56px);
  padding: clamp(56px, 8vh, 120px) clamp(28px, 4vw, 96px) clamp(120px, 14vh, 180px);
}
.plan-3d__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.6vh, 22px);
  max-width: 760px;
}
.plan-3d__head .eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin: 0;
}
.plan-3d__head .display--3,
.plan-3d__head .display.display--3,
section.plan-3d .display.display--3 {
  font-family: var(--f-display);
  font-size: clamp(36px, 4.4vw, 68px);
  font-weight: 200;
  line-height: 1.04;
  letter-spacing: -0.014em;
  color: #fff !important;
  text-transform: uppercase;
  margin: 0;
  text-shadow: 0 2px 24px rgba(0,0,0,0.65), 0 6px 48px rgba(0,0,0,0.45);
  /* override universal navy gradient applied к .display.display--3 */
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #fff !important;
}
.plan-3d__head .display--3 em,
.plan-3d__head .display.display--3 em,
section.plan-3d .display.display--3 em {
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
}
.plan-3d__head .subhead {
  font-family: var(--f-body);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.55;
  color: rgba(255,255,255,0.86);
  text-shadow: 0 2px 16px rgba(0,0,0,0.55);
  margin: 0;
  max-width: 56ch;
}
/* CTA pinned bottom-center of section.
   Wrapper full-width + flex-center → не зависит от transform (reveal-animations safe). */
.plan-3d__cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(36px, 5vh, 72px);
  z-index: 3;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* wrapper не ловит клики */
}
.plan-3d__cta > * { pointer-events: auto; } /* кнопка ловит */
@media (max-width: 900px) {
  .plan-3d {
    height: auto;
    min-height: 100vh;
  }
  .plan-3d__inner {
    padding: clamp(48px, 7vh, 80px) clamp(20px, 5vw, 32px) clamp(96px, 14vh, 140px);
  }
  .plan-3d__cta {
    bottom: clamp(28px, 4vh, 48px);
  }
}

/* ============================================================
   v120 — DEVELOPER — editorial layout, flat navy, all-white text
   2 rows: top = header + stats; bottom = body + quote.
   Hairline divider between. После Process, перед Contact.
   ============================================================ */
.developer {
  position: relative;
  height: calc(100vh - 72px);
  min-height: 640px;
  /* Lift в нижней части — больше bright zone, меньше тёмного pool внизу.
     Threshold сдвинут с 60% до 30% — gradient начинается раньше, lighter color сильнее. */
  background: linear-gradient(180deg,
    var(--c-brand-navy, #1A2543) 0%,
    #1f2c54 30%,
    #2a3a6e 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  box-shadow: none !important;
}
.developer::before { display: none; }
.developer__inner {
  position: relative;
  z-index: 1;
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(56px, 7vh, 96px) clamp(40px, 5vw, 120px);
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vh, 64px);
}

/* TOP ROW — header (left) + stats (right) */
.developer__top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(40px, 5vw, 96px);
  align-items: start;
}
.developer__head {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vh, 22px);
  max-width: 60ch;
}
.developer__eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}
.developer__eyebrow::before { display: none; }
.developer__title {
  font-family: var(--f-display);
  font-size: clamp(44px, 5.6vw, 96px);
  font-weight: 200;
  line-height: 0.98;
  letter-spacing: -0.024em;
  color: #fff;
  text-transform: uppercase;
  margin: 0;
}
.developer__title em {
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: #fff; /* clean white, без gradient */
}
.developer__sub {
  font-family: var(--f-body);
  font-size: clamp(14px, 0.95vw, 17px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  max-width: 56ch;
}

/* STATS — clean cards, no glass-card distractions */
.developer__stats {
  display: flex;
  gap: clamp(14px, 1.4vw, 22px);
  align-self: start;
}
.developer__stat {
  position: relative;
  padding: clamp(20px, 2.2vh, 28px) clamp(22px, 2.4vw, 32px);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  min-width: 180px;
  transition: border-color 0.4s var(--ease-out), background 0.4s var(--ease-out);
}
.developer__stat:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
}
.developer__stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.85), transparent);
}
.developer__stat-num {
  font-family: var(--f-display);
  font-size: clamp(40px, 4.4vw, 68px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  margin: 0 0 clamp(8px, 1vh, 12px);
  font-variant-numeric: tabular-nums;
}
.developer__stat-label {
  font-family: var(--f-display);
  font-size: clamp(13px, 0.95vw, 16px);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #fff;
  text-transform: uppercase;
  margin: 0 0 4px;
}
.developer__stat-cap {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

/* Hairline divider — premium editorial separator */
.developer__rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 12%,
    rgba(255, 255, 255, 0.18) 88%,
    transparent 100%);
}

/* BOTTOM ROW — body (left) + quote (right) */
.developer__bottom {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 5vw, 96px);
  align-items: center;
}
.developer__body {
  font-family: var(--f-body);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
  margin: 0;
  max-width: 56ch;
}
.developer__body em {
  font-style: normal;
  font-weight: 600;
  color: #fff;
}
.developer__quote {
  position: relative;
  padding: clamp(4px, 0.5vh, 12px) 0 clamp(4px, 0.5vh, 12px) clamp(28px, 3vw, 44px);
  border-left: 2px solid rgba(255, 255, 255, 0.32);
  margin: 0;
}
.developer__quote::before {
  content: '"';
  position: absolute;
  top: -28px;
  left: clamp(12px, 1.5vw, 24px);
  font-family: var(--f-display);
  font-size: clamp(72px, 8vw, 120px);
  line-height: 1;
  color: rgba(255, 255, 255, 0.08);
  font-weight: 700;
  pointer-events: none;
}
.developer__quote p {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(17px, 1.4vw, 26px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.94);
  letter-spacing: -0.008em;
  margin: 0 0 clamp(12px, 1.5vh, 20px);
}
.developer__quote-attr {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* Tablet */
@media (max-width: 1100px) {
  .developer__top {
    grid-template-columns: 1fr;
  }
  .developer__bottom {
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vh, 48px);
  }
}
/* Mobile */
@media (max-width: 700px) {
  .developer { height: auto; min-height: 100vh; }
  .developer__stats { flex-direction: column; }
  .developer__stat { min-width: 0; }
}

/* ============================================================
   2026-05-04 v93 — MOBILE 9:16 PORTRAIT BACKGROUNDS
   ≤600px: используем 9:16 portrait photos через <picture><source>
   - object-fit: cover (вместо contain — нет navy bars)
   - .concept video скрыт (на mobile только статика)
   ============================================================ */
@media (max-width: 600px) {
  .hero__photo,
  .hero__photo picture {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
  }
  .hero__photo img,
  .hero__photo picture img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .concept__bg-video {
    display: none !important;
  }
  .concept__bg-backdrop {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    inset: 0 !important;
  }
  .concept__bg-backdrop img,
  .concept__bg picture img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* ============================================================
   2026-05-04 v93 — MOBILE STICKY BOTTOM CTA BAR
   Показывается ТОЛЬКО на ≤600px. Один primary CTA → WhatsApp.
   Тап-target ≥56px по высоте, navy bg, white text.
   ============================================================ */
.mobile-cta-bar {
  display: none; /* hidden by default — only shown on mobile */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--c-brand-navy, #1A2543);
  color: #ffffff;
  text-decoration: none;
  font-family: var(--f-sans, "Inter", sans-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18), 0 -1px 0 rgba(255, 255, 255, 0.06) inset;
  transition: background 0.2s ease, transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.mobile-cta-bar:active {
  background: #0f1730;
  transform: scale(0.98);
}
.mobile-cta-bar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #ffffff;
  flex-shrink: 0;
}
.mobile-cta-bar__icon svg {
  display: block;
}
.mobile-cta-bar__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-cta-bar__arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 16px;
  line-height: 1;
  opacity: 0.85;
  transition: transform 0.2s ease;
}
.mobile-cta-bar:hover .mobile-cta-bar__arrow {
  transform: translateX(2px);
}

@media (max-width: 600px) {
  .mobile-cta-bar {
    display: flex;
  }
  /* Bottom padding на body чтобы CTA-bar не закрывал последнюю секцию */
  body {
    padding-bottom: 64px;
  }
  /* Hide на самом hero — там уже есть свой primary CTA */
  /* Comment: если нужно скрыть на hero, использовать JS scroll-based show/hide */
}

/* Скрыть в presentation mode (не нужно в инвестор-деке) */
body.presentation-mode .mobile-cta-bar,
.presentation-mode .mobile-cta-bar {
  display: none !important;
}

/* ============================================================
   2026-05-04 v99 — PRELOADER MOBILE: bar + counter под BASE wordmark
   ============================================================ */
@media (max-width: 600px) {
  .preloader__bar {
    bottom: 38vh !important;        /* push UP closer to BASE bottom edge */
    width: min(280px, 70vw) !important;
  }
  .preloader__counter {
    bottom: 33vh !important;        /* below bar */
    width: min(280px, 70vw) !important;
    font-size: 10px !important;
    letter-spacing: 0.32em !important;
  }
  /* Eyebrow + BASE wordmark — tighter spacing на mobile */
  .preloader__inner {
    gap: clamp(12px, 2vh, 20px) !important;
  }
  .preloader__eyebrow,
  .preloader__tag {
    font-size: clamp(13px, 3.2vw, 18px) !important;
    letter-spacing: 0.24em !important;
    gap: 8px !important;
  }
  /* BASE wordmark — fit на 1 строку для mobile (фикс 2026-05-06).
     Base font clamp(180px,32vw,640px) → floor 180px на узких viewports → "E" wraps.
     На mobile font ≤ 24vw чтобы 4 буквы помещались с letter-spacing. */
  .preloader__word {
    font-size: clamp(96px, 24vw, 180px) !important;
    letter-spacing: 0.02em !important;
    padding: 0 clamp(8px, 1.5vw, 16px) !important;
    white-space: nowrap !important;
  }
}

/* ============================================================
   2026-05-04 v98 — MOBILE NAV ADAPTATION (≤600px)
   Тонкий transparent header + мягкая blur только при scroll
   ============================================================ */
@media (max-width: 600px) {
  /* Default state — transparent с blur (over dark photo sections), text WHITE */
  /* iPhone notch fix (2026-05-06): padding-top учитывает safe-area-inset-top
     чтобы nav не лезла под statusbar/notch. viewport-fit=cover в meta required. */
  .nav {
    padding: calc(9px + env(safe-area-inset-top, 0px)) 16px 9px !important;
    height: auto !important;
    min-height: calc(48px + env(safe-area-inset-top, 0px)) !important;
    background: transparent !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    border-bottom: none !important;
    transition: background 0.3s ease, color 0.3s ease !important;
  }
  .nav,
  .nav * {
    color: #ffffff !important;
  }
  .nav .nav__brand,
  .nav .nav__brand * {
    color: #ffffff !important;
  }
  /* Scrolled state — over light sections: light frosted glass + NAVY text */
  .nav.is-scrolled {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    border-bottom: none !important;
  }
  .nav.is-scrolled,
  .nav.is-scrolled * {
    color: var(--c-brand-navy, #1A2543) !important;
  }
  .nav.is-scrolled .nav__brand,
  .nav.is-scrolled .nav__brand * {
    color: var(--c-brand-navy, #1A2543) !important;
  }
  /* Burger color follows nav color (white default → navy on scroll) */
  .nav .nav__burger {
    color: #ffffff !important;
  }
  .nav.is-scrolled .nav__burger {
    color: var(--c-brand-navy, #1A2543) !important;
  }
  .nav .nav__burger-line {
    background: currentColor !important;
  }
  /* Brand — Base · Bali Villas · Maison Development всё одного размера/цвета */
  .nav__brand {
    font-size: 9.5px !important;
    letter-spacing: 0.16em !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
  }
  .nav__brand-dot {
    width: 5px !important;
    height: 5px !important;
    flex-shrink: 0 !important;
  }
  /* Mobile: показать " · Maison Development" suffix внутри brand */
  .nav__brand-suffix {
    display: inline !important;
    font-size: inherit !important;
    letter-spacing: inherit !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    font-weight: inherit !important;
    color: inherit !important;
  }
  /* Mobile: скрыть hero brand-mark "+ Maison Development" (есть в nav suffix) */
  .hero__brand-mark {
    display: none !important;
  }
  .nav__cta {
    display: none !important;
  }
  /* Hide old hero brand-mark on mobile (moved to nav) */
  section.hero .hero__brand-mark {
    display: none !important;
  }
}

/* ============================================================
   2026-05-04 v96 — HERO MOBILE REDESIGN (≤600px)
   - Headline в 4 строки, увеличенный размер
   - Lead в 2 равные строки (text-wrap: balance)
   - Stats в 4 строки stacked
   - Чёрный gradient + smooth blur снизу до середины hero
   ============================================================ */
@media (max-width: 600px) {

  /* === HERO HEADLINE: 4 строки одинаковой ширины (auto-fit via JS),
     каждая строка в .hero__line span — font-size scaled to fill container width === */
  .hero .hero__tagline,
  .hero .hero__tagline--flat,
  section.hero .hero__title-block .hero__tagline {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 200 !important;
    letter-spacing: -0.01em !important;
    text-transform: uppercase !important;
    line-height: 1.0 !important;
  }
  .hero .hero__tagline .hero__line {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: visible !important;
    line-height: 1.02 !important;
    margin: 0 !important;
    padding: 0 !important;
    /* font-size устанавливается inline через JS */
  }
  .hero .hero__tagline em,
  .hero .hero__tagline--flat em,
  .hero .hero__line em,
  section.hero .hero__line em {
    display: inline !important;            /* force inline — НЕ block, не wrap */
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: inherit !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
  }
  .hero__title-block,
  .hero__title-group {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* === HERO LEAD: 2 lines, прямо над stats hairline в bottom-stack === */
  .hero .hero__lead,
  section.hero .hero__lead {
    font-size: clamp(16px, 4.2vw, 22px) !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
    letter-spacing: 0.015em !important;
    text-transform: uppercase !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 0 14px 0 !important;                          /* ↓ маленький gap до hairline */
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    opacity: 1 !important;
    white-space: normal !important;
  }
  /* Bottom-stack — order: lead → stats → CTA. JS вставляет lead в начало bottom-stack */
  .hero__bottom-stack {
    margin-top: auto !important;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }
  .hero__bottom-stack .hero__strip {
    margin-bottom: clamp(16px, 2.5vh, 24px) !important;
  }
  /* Contact bg на mobile — ensure 9:16 image fills viewport */
  section.contact .contact__bg picture,
  section.contact .contact__bg picture img,
  section.contact .contact__bg img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }
  /* Bottom stack — lead + stats + CTA, sits at bottom (justify-content space-between handles это) */
  .hero__bottom-stack {
    margin: 0 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }

  /* === HERO STATS: 2×2 grid (2 cols × 2 rows) — компактнее и читаемее === */
  .hero .hero__strip,
  section.hero .hero__strip {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 10px 16px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.32) !important;
    padding-top: clamp(14px, 2.2vh, 22px) !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .hero .hero__strip li {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    white-space: normal !important;
  }
  .hero .hero__strip li::before,
  .hero .hero__strip li::after {
    display: none !important;
  }

  /* === HERO BOTTOM STACK spacing === */
  .hero__bottom-stack {
    gap: clamp(14px, 2vh, 22px) !important;
  }

  /* === ЧЁРНЫЙ GRADIENT — bottom-up + top-down (top-down теперь ТЕМНЕЕ) === */
  .hero .hero__photo-overlay {
    background:
      linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.68) 15%,
        rgba(0, 0, 0, 0.48) 30%,
        rgba(0, 0, 0, 0.25) 45%,
        rgba(0, 0, 0, 0.10) 55%,
        rgba(0, 0, 0, 0) 65%
      ),
      linear-gradient(
        to top,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.78) 18%,
        rgba(0, 0, 0, 0.55) 35%,
        rgba(0, 0, 0, 0.25) 50%,
        rgba(0, 0, 0, 0) 65%
      ) !important;
    opacity: 1 !important;
    z-index: 2 !important;
  }
  /* 2) Soft blur layer — снизу до середины, плавно тает */
  .hero .hero__photo-blur {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    height: 55% !important;
    background: transparent !important;
    backdrop-filter: blur(8px) saturate(0.95) !important;
    -webkit-backdrop-filter: blur(8px) saturate(0.95) !important;
    -webkit-mask-image: linear-gradient(to top,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.95) 35%,
      rgba(0,0,0,0.5) 70%,
      rgba(0,0,0,0) 100%) !important;
    mask-image: linear-gradient(to top,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.95) 35%,
      rgba(0,0,0,0.5) 70%,
      rgba(0,0,0,0) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: 1 !important;
    display: block !important;
    transform: none !important;
  }
  /* hero__veil можно убрать на mobile — уже есть gradient */
  .hero .hero__veil {
    background: transparent !important;
    opacity: 0 !important;
  }

  /* === Hero auto-height на mobile (content не constraint'ится 100vh) === */
  section.hero,
  .hero {
    height: auto !important;
    min-height: 100vh !important;
  }
  .hero__stage {
    /* Layout: headline TOP, bottom-stack BOTTOM, middle = villa visible */
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 56px clamp(20px, 5vw, 28px) calc(64px + env(safe-area-inset-bottom)) !important;  /* нижний padding = высота sticky CTA bar */
    justify-content: space-between !important;     /* TOP-BOTTOM split */
    gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
  }
  /* Headline group — sits at TOP, no extra spacing */
  section.hero .hero__title-group,
  section.hero .hero__title-block {
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }
  .hero__brand-mark {
    display: none !important;        /* перенесён в nav */
  }
  /* Bottom stack — push CTA further down via auto margin */
  .hero__bottom-stack {
    gap: clamp(20px, 3vh, 32px) !important;
    margin-top: auto !important;     /* push to bottom */
  }
  .hero__cta-primary {
    align-self: flex-start !important;
    margin-top: clamp(12px, 2vh, 20px) !important;
  }
  .hero__scroll {
    display: none !important;       /* "↓ SCROLL" не нужен на mobile, есть sticky CTA */
  }
}

/* ============================================================
   2026-05-04 v94 — MOBILE P0 FIXES (Sprint B, ≤600px)
   Все 7 P0 одним блоком override (не трогаем существующие правила).
   P0-1 hero overflow · P0-2 floor-plan · P0-3 featured · P0-4 gallery
   P0-5 units title · P0-6 yield big-num · P0-7 plan-3d cascade
   ============================================================ */
@media (max-width: 600px) {

  /* === GLOBAL CONSTRAINTS — ничто не выходит за viewport === */
  .container {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  section {
    max-width: 100vw !important;
  }
  /* All in-section images max-width 100% (исключения: hero/concept bg уже зафиксированы выше) */
  section figure,
  section picture,
  .floor-plan img,
  .featured img,
  .gallery__tile-img,
  [data-plan-zoom],
  [data-plan-parallax] img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* === DISPLAY FONTS — уменьшить для mobile, wrap ТОЛЬКО по whitespace === */
  /* IMPORTANT: NOT use overflow-wrap:break-word/anywhere — ломает per-letter span animations */
  .display--3 {
    font-size: clamp(24px, 6.5vw, 38px) !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }
  .display--4 {
    font-size: clamp(32px, 8vw, 52px) !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }
  .display--mega {
    font-size: clamp(34px, 9vw, 58px) !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }
  /* Headings inside major sections — kill nowrap, wrap по whitespace ТОЛЬКО */
  section h1, section h2, section h3,
  section h1 *, section h2 *, section h3 * {
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  /* === P0-1 HERO HEADLINE === */
  .hero__title-block,
  .hero__title-group {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .hero__title-block * {
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  /* === P0-2 FLOOR-PLAN 40m²: 2-col layout PLAN LEFT | DATA RIGHT, photos row 2
     v3 — plan чуть больше, текст меньше для гармонии === */
  /* === FLOOR-PLAN 40m² v4 — Vertical stack:
     Row 1: header (eyebrow + LARGE title full-width)
     Row 2: specs+finance в 2 columns (full-width)
     Row 3: plan image (full-width, big)
     Row 4: 2 photos side-by-side === */
  .floor-plan__layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    gap: 14px !important;
    padding: 0 16px !important;
    max-width: 100% !important;
    align-items: stretch !important;
  }
  .floor-plan__head {
    grid-area: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
  }
  .floor-plan__interactive,
  .floor-plan__plan {
    grid-area: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .floor-plan__photos {
    grid-area: auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .floor-plan__photos figure {
    margin: 0 !important;
    width: 100% !important;
  }
  .floor-plan__photos figure img,
  .floor-plan__photo img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    aspect-ratio: 4 / 3 !important;
  }
  /* Plan image — full width, large */
  .floor-plan__interactive img,
  .floor-plan__figure img,
  .floor-plan__plan img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    aspect-ratio: auto !important;
    max-height: none !important;
  }
  /* Header v4 — LARGE title full-width, eyebrow с "Standard unit" inline */
  section.floor-plan .floor-plan__head .eyebrow,
  .floor-plan__head .eyebrow {
    font-size: 11px !important;
    margin-bottom: 14px !important;
    letter-spacing: 0.1em !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-transform: uppercase !important;
    color: var(--c-brand-navy, #1A2543) !important;
    opacity: 1 !important;
  }
  .floor-plan__head .eyebrow .eyebrow-sep {
    flex: 0 0 28px;
    height: 1px;
    background: currentColor;
    opacity: 0.4;
  }
  .floor-plan__head .eyebrow span:first-child,
  .floor-plan__head .eyebrow span:last-child {
    font-weight: 500 !important;
  }
  section.floor-plan .floor-plan__head h2,
  section.floor-plan .floor-plan__head .display.display--3,
  section.floor-plan .floor-plan__head .display--3,
  .floor-plan__head h2,
  .floor-plan__head .display--3 {
    font-size: clamp(26px, 7vw, 38px) !important;
    line-height: 1.05 !important;
    margin: 0 0 14px 0 !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Floor-plan CTA — spacing чтобы не западала за план render ниже */
  section.floor-plan .cta-pill,
  section.floor-plan a.cta-pill,
  .floor-plan__head .cta-pill,
  .floor-plan__cta {
    margin-bottom: 28px !important;
    position: relative !important;
    z-index: 5 !important;
    align-self: flex-start !important;
    width: max-content !important;
    flex: 0 0 auto !important;
  }
  /* Plan figure / image — clear top margin от CTA */
  section.floor-plan .floor-plan__figure,
  section.floor-plan figure,
  section.floor-plan__head + figure,
  .floor-plan__layout figure {
    margin-top: 16px !important;
  }
  section.floor-plan .floor-plan__head .display__sub,
  .floor-plan__head .display__sub {
    /* "Standard unit" — первая строка единого 2-строчного заголовка
       Same font-size как main title, tight line-height, без gap */
    display: block !important;
    font-size: 1em !important;            /* inherit parent display--3 size */
    line-height: 0.92 !important;         /* very tight, как display--3 база */
    font-weight: 200 !important;           /* light weight (контраст с bold em) */
    letter-spacing: -0.008em !important;
    color: var(--c-brand-navy, #1A2543) !important;
    -webkit-text-fill-color: var(--c-brand-navy, #1A2543) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    margin: 0 !important;                  /* zero gap до em */
    padding: 0 !important;
    text-transform: uppercase !important;
    opacity: 1 !important;
  }
  /* Parent h2 — line-height tight чтобы 2 строки шли вплотную */
  section.floor-plan .floor-plan__head .display.display--3,
  section.floor-plan .floor-plan__head h2.display--3 {
    line-height: 0.92 !important;
    margin: 0 0 16px 0 !important;
  }
  /* em "1-Bedroom 40m² Villa" — match sub size, тоже tight */
  section.floor-plan .floor-plan__head .display.display--3 em,
  section.floor-plan .floor-plan__head h2 em {
    font-size: 1em !important;
    line-height: 0.92 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Hide <br> между sub и em — они уже block-level */
  section.floor-plan .floor-plan__head .display.display--3 br,
  section.floor-plan .floor-plan__head h2 br {
    display: none !important;
  }
  /* Specs + Finance в 2-col grid (full-width) */
  .floor-plan__specs,
  .floor-plan__finance {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 16px !important;
  }
  .floor-plan__specs li,
  .floor-plan__finance li {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 6px !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
  }
  .floor-plan__spec-k {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    opacity: 0.65 !important;
  }
  .floor-plan__spec-v {
    font-size: 12px !important;
    font-weight: 600 !important;
  }
  .floor-plan__spec-v--lg {
    font-size: 14px !important;
    font-weight: 700 !important;
  }
  .floor-plan__head .caption {
    font-size: 9px !important;
    line-height: 1.4 !important;
    margin-top: 6px !important;
  }
  .floor-plan__cta {
    margin-top: 10px !important;
  }
  .floor-plan__cta .cta-pill {
    font-size: 11px !important;
    padding: 9px 14px !important;
  }
  .floor-plan__cta .cta-pill span:first-child {
    /* Truncate long button text если не fit */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  /* === P0-3 FEATURED 50m²: MIRROR layout DATA LEFT | PLAN RIGHT, photos row 2 ===
     Note: HTML order is photos→plan→meta, но grid-areas позволяют переарранж. */
  .featured {
    overflow: hidden !important;
    padding-bottom: clamp(56px, 8vh, 96px) !important;
  }
  /* === FEATURED 50m² v4 — Vertical stack (same как Floor-plan):
     HTML order: photos → plan → meta. Используем `order` для display order:
     Display Row 1: meta (header + brackets specs full-width)
     Display Row 2: plan (full-width, big)
     Display Row 3: photos (2-col side-by-side) === */
  .featured__inner,
  .featured__layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    gap: 14px !important;
    padding: 0 16px !important;
    max-width: 100% !important;
    align-items: stretch !important;
  }
  .featured__meta {
    order: 1 !important;
    grid-area: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
  }
  .featured__photo-block,
  .featured__plan {
    order: 2 !important;
    grid-area: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .featured__photos {
    order: 3 !important;
    grid-area: auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .featured__photos figure {
    margin: 0 !important;
    width: 100% !important;
  }
  .featured__photos figure img,
  .featured__photo-item img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    aspect-ratio: 4 / 3 !important;
  }
  /* Plan image — full width, large */
  .featured__photo-block img,
  .featured__photo img,
  .featured__plan img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    aspect-ratio: auto !important;
    max-height: none !important;
  }
  /* Header v4 — LARGE title full-width, eyebrow above */
  section.featured .featured__eyebrow,
  .featured__eyebrow {
    font-size: 11px !important;
    margin-bottom: 6px !important;
    gap: 6px !important;
    letter-spacing: 0.1em !important;
    text-align: left !important;
  }
  section.featured .featured__title,
  section.featured .featured__meta .featured__title,
  .featured__title {
    font-size: clamp(26px, 7vw, 38px) !important;
    line-height: 1.05 !important;
    margin: 0 0 14px 0 !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Kill gradient text effect — title is invisible иначе */
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--c-brand-navy, #1A2543) !important;
    color: var(--c-brand-navy, #1A2543) !important;
  }
  section.featured .featured__lead,
  .featured__lead {
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin: 0 0 12px 0 !important;
    opacity: 0.85 !important;
  }
  /* Brackets specs+finance в 2-col grid (full-width) */
  .featured__brackets {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 16px !important;
  }
  .featured__brackets li {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 6px !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
  }
  .featured__brackets li.b-divider {
    border: none !important;
    border-top: 1px solid rgba(0,0,0,0.18) !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 6px 0 !important;
    grid-column: 1 / -1 !important;       /* divider spans both cols */
  }
  .featured__brackets .b-label {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    opacity: 0.65 !important;
  }
  .featured__brackets .b-value {
    font-size: 12px !important;
    font-weight: 600 !important;
  }
  .featured__meta .caption {
    font-size: 9px !important;
    line-height: 1.4 !important;
    margin-top: 6px !important;
  }
  .featured__meta .section__cta-row {
    margin-top: 10px !important;
  }
  .featured__meta .cta-pill {
    font-size: 11px !important;
    padding: 9px 14px !important;
  }
  .featured__meta .cta-pill span:first-child {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

  /* === PLAN-3D v6.2 — video на ВСЮ секцию (no blue bars) === */
  .plan-3d {
    overflow: hidden !important;
    height: auto !important;
    min-height: 60vh !important;
    aspect-ratio: auto !important;
    position: relative !important;
    padding: 0 !important;                         /* видео edge-to-edge */
    background: var(--c-brand-navy, #1A2543) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  }
  /* Video covers ENTIRE section */
  .plan-3d__bg {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
  }
  .plan-3d__bg video,
  .plan-3d__bg img,
  .plan-3d__video {
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    background: #000 !important;
  }
  /* Inner overlays full section, internal padding для content */
  .plan-3d__inner {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 36px 22px 80px 22px !important;       /* internal padding only — video remains edge-to-edge */
    gap: 12px !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
  }
  .plan-3d__head {
    gap: 8px !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 0 !important;
  }
  .plan-3d__inner .eyebrow {
    margin: 0 0 4px 0 !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
  }
  .plan-3d__inner h2,
  .plan-3d__inner .display {
    font-size: clamp(22px, 5.5vw, 32px) !important;
    line-height: 1.08 !important;
    margin: 0 !important;
    text-align: center !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75), 0 0 4px rgba(0, 0, 0, 0.5) !important;
  }
  .plan-3d__inner .lead,
  .plan-3d__inner p,
  .plan-3d__inner .subhead {
    font-size: clamp(11px, 2.8vw, 13px) !important;
    line-height: 1.45 !important;
    margin: 8px 0 0 0 !important;
    max-width: 90% !important;
    text-align: center !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75) !important;
  }
  /* CTA — absolute at section bottom (под видео в padding area) */
  .plan-3d__cta {
    position: absolute !important;
    bottom: 24px !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 0 16px !important;
  }
  .plan-3d__cta .cta-pill,
  .plan-3d__cta a[href] {
    padding: 11px 20px !important;
    font-size: 11.5px !important;
    letter-spacing: 0.06em !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-shadow: none !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
  /* Subtle gradient overlay (но не подавляющий video) */
  .plan-3d__overlay {
    background:
      linear-gradient(rgba(0,0,0,0.30), rgba(0,0,0,0.30)) !important;
  }

  /* === P0-4 GALLERY v3 — Page 1: hero + 4 thumbs в 1 ряду; Page 2: 2×2; side arrows ===
     Page 1 (5 фото): hero (cols 1-4) + 4 thumbs (cols 1,2,3,4) — 1 ряд
     Page 2 (4 фото без hero): grid → 2 cols, 4 thumbs в 2×2 (auto-switch via :has)
     Arrows: side overlay mid-height photos area, → на page 1 / ← на page 2 */
  section.gallery {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    /* 2026-05-06: padding 80→24 — была "серая полоса" над WARM MINIMALISM. на mobile */
    padding: clamp(20px, 3vh, 32px) 0 0 !important;
    position: relative !important;
  }
  .gallery__mosaic {
    position: relative !important;  /* anchor для абсолютных стрелок */
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;  /* 4 cols по умолчанию (page 1) */
    grid-template-rows: none !important;
    flex-direction: row !important;
    gap: 0 !important;  /* впритык */
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    inset: auto !important;
    transform: none !important;
  }
  /* === GALLERY: stable height между page 1 и page 2 (no jump) ===
     Page 1: hero (aspect 4:5, spans 4 cols) + 4 thumbs (aspect 4:5, 1 col каждая) → total ~25w/16
     Page 2 (2×2): cells aspect 2:3 (taller) → же total height = 25w/16 */
  .gallery__mosaic.is-page-2,
  .gallery__mosaic:has(.gallery__tile--hero.is-hidden) {
    grid-template-columns: 1fr 1fr !important;
  }
  .gallery__mosaic.is-page-2 .gallery__tile--hero,
  .gallery__mosaic.is-page-2 .gallery__tile--1,
  .gallery__mosaic.is-page-2 .gallery__tile--2,
  .gallery__mosaic.is-page-2 .gallery__tile--3 {
    grid-column: auto !important;
    aspect-ratio: 4 / 3 !important;     /* Landscape (wider than tall) — match natural photo aspect, минимум crop */
  }
  .gallery__mosaic.is-page-2 .gallery__tile--4 {
    display: none !important;
  }
  /* Убрать grey bar/border снизу — section padding-bottom 0 */
  section.gallery {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }
  .gallery__mosaic {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
  }
  .gallery__tile,
  .gallery__tile-img {
    border-bottom: 0 !important;
  }
  /* Smooth tile transitions для page-flip effect (готов для добавления) */
  .gallery__tile {
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  .gallery__tile-img {
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  .gallery__mosaic.is-transitioning .gallery__tile {
    opacity: 0.4 !important;
  }
  /* Header (eyebrow + title) — spans all columns */
  .gallery__card {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    padding: 0 16px 12px !important;
    margin: 0 !important;
  }
  /* Hero photo — spans all 4 columns, wide aspect для big presence */
  .gallery__tile--hero {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  /* 4 small tiles — каждая 1 col на page 1 (4 в row); меньше высота (4:3 landscape) */
  .gallery__tile--1,
  .gallery__tile--2,
  .gallery__tile--3,
  .gallery__tile--4 {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;          /* shorter portrait — было 1:1 square */
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  /* Hidden tiles (JS swap для page 2) — display:none убирает из grid auto-flow */
  .gallery__tile.is-hidden {
    display: none !important;
    visibility: hidden !important;
  }
  .gallery__tile-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  /* Hide top pager на mobile — replaced by side arrows */
  .gallery__pager {
    display: none !important;
  }
  /* Bottom controls — relocated as side arrows overlay над photo area */
  .gallery__controls {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    z-index: 10 !important;
    display: block !important;
  }
  .gallery__nav {
    display: contents !important;
  }
  .gallery__counter {
    display: none !important;  /* убираем "01 / 02" текст — стрелки самодостаточны */
  }
  .gallery__arrow {
    position: absolute !important;
    /* mid-height hero photo area */
    top: clamp(220px, 32vw + 80px, 280px) !important;
    transform: translateY(-50%) !important;
    /* Touch zone 56×120 (Apple guidelines ≥44×44). SVG visual внутри 18×80
       по center — кажется тонкой стрелкой, но tap area широкая. 2026-05-06 fix. */
    width: 56px !important;
    height: 120px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;   /* без круглого фона */
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 11 !important;
    font-size: 0 !important;               /* hide ←/→ text — заменяется SVG */
    line-height: 0 !important;
    overflow: visible !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  /* SVG chevron — длинная угловатая вертикальная линия (sharp angles, не curve) */
  .gallery__arrow svg {
    width: 18px !important;
    height: 80px !important;
    fill: none !important;
    stroke: rgba(255, 255, 255, 0.98) !important;
    stroke-width: 3.5 !important;
    stroke-linecap: round !important;
    stroke-linejoin: miter !important;        /* острый угол на сгибе вместо round */
    stroke-miterlimit: 4 !important;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.5)) !important;
    pointer-events: none !important;
  }
  .gallery__arrow:active {
    background: transparent !important;
    transform: translateY(-50%) scale(0.92) !important;
  }
  .gallery__arrow:active svg {
    stroke: rgba(255, 255, 255, 1) !important;
  }
  #galleryPrev { left: 0 !important; justify-content: flex-start !important; padding-left: 12px !important; }
  #galleryNext { right: 0 !important; justify-content: flex-end !important; padding-right: 12px !important; }
  /* Hide arrow когда на edge page (disabled by JS or attribute) */
  .gallery__arrow:disabled,
  .gallery__arrow[aria-disabled="true"],
  .gallery__arrow.is-hidden,
  .gallery__arrow[hidden] {
    display: none !important;
  }

  /* === P0-5 UNITS — title overflow + 2 unit cards в row (40m² | 50m²) === */
  .units {
    overflow: hidden !important;
  }
  .units h2,
  .units .display--3,
  .units .display--mega,
  .units__title {
    font-size: clamp(32px, 9vw, 52px) !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
  .units__layout,
  .units__head,
  .units__row,
  .units__container {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Hide table header (column labels) на mobile — вместо table используем cards */
  .units .proj-list__head {
    display: none !important;
  }
  /* 2 unit cards side-by-side (40m² | 50m²) */
  .units .proj-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 16px 0 !important;
  }
  .units .proj-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding: 18px 16px 50px 16px !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,0.6) !important;
    position: relative !important;
    min-height: 0 !important;
  }
  .units .proj-row__name {
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.005em !important;
  }
  .units .proj-row__name em {
    font-style: normal !important;
  }
  .units .proj-row__meta,
  .units .proj-row__loc {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    opacity: 0.65 !important;
    line-height: 1.4 !important;
  }
  .units .proj-row__loc {
    margin-bottom: 10px !important;
  }
  .units .proj-row__value,
  .units .proj-row__income {
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }
  .units .proj-row__yield {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-top: 6px !important;
    color: var(--c-brand-navy, #1A2543) !important;
    letter-spacing: -0.01em !important;
  }
  .units .proj-row__link {
    position: absolute !important;
    bottom: 12px !important;
    right: 14px !important;
    width: 32px !important;
    height: 32px !important;
    border: 1px solid currentColor !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    text-decoration: none !important;
    line-height: 1 !important;
  }
  .units .caption {
    font-size: 11px !important;
    line-height: 1.45 !important;
    margin-top: 10px !important;
  }

  /* === P0-6 YIELD big number === */
  .yield {
    overflow: hidden !important;
  }
  .yield__hero-num,
  section.yield .yield__hero-num {
    font-size: clamp(36px, 11vw, 64px) !important;
    line-height: 1.0 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  /* === SECTION SAFETY: any section with content overflow → hidden === */
  section.market-proof,
  section.location,
  section.comparison,
  section.payment,
  section.process,
  section.developer,
  section.contact,
  section.gallery,
  section.units,
  section.yield,
  section.featured,
  section.floor-plan {
    overflow-x: hidden !important;
  }

  /* === KILL GRADIENT TEXT EFFECT на mobile — все titles invisible иначе === */
  section.featured .featured__title,
  section.featured h2,
  section.yield .display--3,
  section.yield h2,
  section.yield .yield__hero-num,
  section.market-proof .display--3,
  section.market-proof h2,
  section.location .display--3,
  section.location h2,
  section.payment .display--3,
  section.payment h2,
  section.process .display--3,
  section.process h2,
  section.developer .display--3,
  section.developer h2,
  section.comparison .display--3,
  section.comparison h2,
  section.contact .contact__title,
  section.units .display--3,
  section.units h2,
  section.floor-plan .display--3,
  section.floor-plan h2 {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--c-brand-navy, #1A2543) !important;
    color: var(--c-brand-navy, #1A2543) !important;
  }
  /* Developer section — dark navy bg → all titles white */
  section.developer .display--3,
  section.developer h2,
  section.developer .display,
  section.developer .display--3 em,
  section.developer h2 em,
  section.developer .display em {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    font-style: normal !important;
    font-size: inherit !important;
  }
  section.developer .lead,
  section.developer p {
    color: rgba(255,255,255,0.85) !important;
  }
  section.developer .eyebrow,
  section.developer .eyebrow-sep {
    color: rgba(255,255,255,0.55) !important;
  }
  section.developer .stat-num,
  section.developer .dev-stat__num {
    color: #ffffff !important;
  }
  section.developer .stat-label,
  section.developer .dev-stat__label {
    color: rgba(255,255,255,0.65) !important;
  }
  /* Heavy text em — NAVY GRADIENT FADE снизу (как desktop) для light-bg sections */
  section.featured .featured__title em,
  section.featured h2 em,
  section.yield .display--3 em,
  section.yield h2 em,
  section.market-proof .display--3 em,
  section.market-proof h2 em,
  section.location .display--3 em,
  section.location h2 em,
  section.payment .display--3 em,
  section.payment h2 em,
  section.process .display--3 em,
  section.process h2 em,
  section.comparison .display--3 em,
  section.comparison h2 em,
  section.units .display--3 em,
  section.units h2 em,
  section.floor-plan .display--3 em,
  section.floor-plan h2 em {
    background: linear-gradient(180deg,
      var(--c-brand-navy, #1A2543) 0%,
      var(--c-brand-navy, #1A2543) 55%,
      rgba(26,37,67,0.55) 85%,
      rgba(26,37,67,0.20) 100%) !important;
    background-image: linear-gradient(180deg,
      var(--c-brand-navy, #1A2543) 0%,
      var(--c-brand-navy, #1A2543) 55%,
      rgba(26,37,67,0.55) 85%,
      rgba(26,37,67,0.20) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-style: normal !important;
    font-size: inherit !important;
  }
  /* Heavy text em на dark sections — SOLID white (без gradient fade — washed out на photo) */
  section.concept .display em,
  section.concept h2 em,
  section.concept .display--3 em,
  section.plan-3d .display--3 em,
  section.plan-3d h2 em,
  section.contact .contact__title em,
  section.developer .display--3 em,
  section.developer h2 em,
  section.developer .developer__title em {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    font-style: normal !important;
    font-size: inherit !important;
    opacity: 1 !important;
  }
  /* Developer stats numbers (13, 100%) — solid white вместо gradient fade */
  section.developer .developer__stat-num,
  section.developer .stat-num,
  section.developer .dev-stat__num,
  section.developer aside .developer__stat-num {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    opacity: 1 !important;
  }
  /* HERO em — SOLID white (без gradient fade — слишком washed out на photo bg) */
  section.hero h1 em,
  section.hero .hero__line em,
  section.hero .hero__tagline em {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    font-style: normal !important;
    font-size: inherit !important;
    opacity: 1 !important;
  }
  /* Hero text — solid white (не transparent) */
  section.hero h1,
  section.hero .hero__line,
  section.hero .hero__tagline,
  section.hero .hero__line span,
  section.hero h1 span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    opacity: 1 !important;
  }
  /* === MOBILE NAV: burger + drawer === */
  .nav__burger {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 44px !important;
    height: 44px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    z-index: 100 !important;
    position: relative !important;
  }
  .nav__burger-line {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: currentColor !important;
    border-radius: 2px !important;
    transition: transform 0.25s ease, opacity 0.2s ease !important;
  }
  .nav__burger[aria-expanded="true"] .nav__burger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  .nav__burger[aria-expanded="true"] .nav__burger-line:nth-child(2) {
    opacity: 0 !important;
  }
  .nav__burger[aria-expanded="true"] .nav__burger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }
  /* Hide desktop nav links on mobile, show burger only */
  .nav__links {
    display: none !important;
  }
  /* Mobile drawer (full-screen overlay) */
  .mobile-drawer {
    position: fixed !important;
    inset: 0 !important;
    background: var(--c-brand-navy, #1A2543) !important;
    z-index: 99 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 80px 24px 80px !important;
    transform: translateX(100%) !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    overflow-y: auto !important;
  }
  body.nav-open .mobile-drawer {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  body.nav-open {
    overflow: hidden !important;
  }
  .mobile-drawer__close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    font-size: 26px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .mobile-drawer__links {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
    align-items: center !important;
    text-align: center !important;
  }
  .mobile-drawer__link {
    color: rgba(255,255,255,0.92) !important;
    font-family: var(--f-display, sans-serif) !important;
    font-size: 24px !important;
    font-weight: 200 !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
  }
  .mobile-drawer__link:active {
    color: #ffffff !important;
    transform: scale(0.98) !important;
  }
  .mobile-drawer__cta {
    margin-top: 36px !important;
  }
  .mobile-drawer__cta-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #ffffff !important;
    color: var(--c-brand-navy, #1A2543) !important;
    padding: 14px 24px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
  }
  /* Burger color follows nav text color (dark on light bg, light on dark bg) */
  .nav .nav__burger {
    color: var(--c-brand-navy, #1A2543) !important;
  }
  /* Over hero (dark photo) — burger white */
  body:not(.scrolled) .nav .nav__burger,
  .nav.is-over-hero .nav__burger {
    color: #ffffff !important;
  }

  /* Hero CTA — точная копия desktop spec: white solid pill, navy mono text */
  section.hero .hero__cta-primary,
  section.hero a.hero__cta-primary {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: var(--c-brand-navy, #1A2543) !important;
    border: 1px solid #ffffff !important;
    border-radius: 999px !important;
    padding: 11px 20px !important;
    font-family: var(--f-mono, monospace) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    box-shadow: none !important;
    width: max-content !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
  }
  section.hero .hero__cta-primary:active {
    background: var(--c-brand-navy, #1A2543) !important;
    color: #ffffff !important;
    border-color: var(--c-brand-navy, #1A2543) !important;
  }
  section.hero .hero__cta-primary span,
  section.hero .hero__cta-primary .arrow {
    color: var(--c-brand-navy, #1A2543) !important;
    -webkit-text-fill-color: var(--c-brand-navy, #1A2543) !important;
    background: none !important;
  }
  section.hero .hero__cta-primary .arrow {
    font-family: var(--f-display, sans-serif) !important;
    font-size: 12px !important;
  }
  section.hero .hero__cta-primary:active span,
  section.hero .hero__cta-primary:active .arrow {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  /* Big numbers (yield "12.1-12.6%", villa card prices) — same navy gradient fade */
  section.yield .yield__hero-num,
  section.yield .yield__big,
  section.units .proj-row__value,
  section.units .proj-row__income,
  section.units .proj-row__yield,
  section.comparison .villa-card__price,
  section.comparison .villa-card__type em {
    background: linear-gradient(180deg,
      var(--c-brand-navy, #1A2543) 0%,
      var(--c-brand-navy, #1A2543) 55%,
      rgba(26,37,67,0.55) 85%,
      rgba(26,37,67,0.20) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }
  /* Sections с темным фоном — white text для основного title */
  section.hero .hero__tagline,
  section.hero .hero__line,
  section.plan-3d .display--3,
  section.plan-3d h2,
  section.concept .display,
  section.concept .display--3,
  section.concept h2,
  section.contact .contact__title {
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
  }

  /* === REVEAL ANIMATIONS: kill translate-jumps на mobile, оставить subtle opacity fade ===
     Текст не должен прыгать при скролле — только мягкий 200ms fade-in */
  [data-reveal],
  [data-reveal-stagger],
  [data-reveal-stagger] > * {
    transform: none !important;
    filter: none !important;
    transition: opacity 0.4s ease-out !important;
  }
  [data-reveal] {
    opacity: 1 !important;       /* отключаем initial hidden state — никаких прыжков */
  }
  [data-reveal].is-visible,
  [data-reveal-stagger].is-visible > * {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Также убираем initial translate из stagger items */
  [data-reveal-stagger] > * {
    opacity: 1 !important;
  }

  /* === CONTACT v2 — narrow card (под размер текста), better headings === */
  section.contact .contact__inner,
  section.contact {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .contact__head {
    padding: 0 20px !important;
    margin-bottom: 14px !important;
    text-align: center !important;
  }
  .contact__eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 8px !important;
    opacity: 0.85 !important;
  }
  .contact__title {
    font-size: clamp(28px, 7.5vw, 40px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.005em !important;
    margin: 0 0 10px 0 !important;
    text-align: center !important;
  }
  .contact__title em {
    font-style: normal !important;
    font-weight: 700 !important;
  }
  .contact__sub {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    opacity: 0.78 !important;
    max-width: 280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Card: narrow, centered, fits content */
  .contact__card {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    grid-template-columns: 1fr !important;
    width: auto !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    padding: 18px 20px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(14px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 6px !important;
  }
  .contact__col {
    width: 100% !important;
    padding: 0 !important;
  }
  .contact__caption {
    font-size: 9.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    margin: 0 0 6px 0 !important;
    opacity: 0.65 !important;
  }
  .contact__brand {
    font-size: 19px !important;
    line-height: 1.1 !important;
    margin: 0 0 6px 0 !important;
    font-weight: 600 !important;
  }
  .contact__brand-sub {
    font-size: 10.5px !important;
    line-height: 1.4 !important;
    margin: 0 0 12px 0 !important;
    opacity: 0.72 !important;
  }
  .contact__rows {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  .contact__rows li {
    display: grid !important;
    grid-template-columns: 70px 1fr !important;
    align-items: baseline !important;
    gap: 8px !important;
    padding: 5px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .contact__rows li:last-child {
    border-bottom: 0 !important;
  }
  .contact__label {
    font-size: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    opacity: 0.6 !important;
  }
  .contact__val {
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
  }
  /* Right col: QR + caption — compact, centered */
  .contact__col--right {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-top: 4px !important;
  }
  .contact__qr {
    width: 132px !important;
    height: 132px !important;
    margin: 0 !important;
    padding: 4px !important;
    background: #ffffff !important;
    border-radius: 4px !important;
  }
  .contact__qr img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }
  .contact__qr-label {
    font-size: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    margin: 0 !important;
    opacity: 0.7 !important;
  }
  /* CTA row под card */
  .contact__cta-row {
    margin-top: 16px !important;
    padding: 0 20px !important;
    text-align: center !important;
  }
  .contact__cta-row .cta-pill {
    font-size: 11px !important;
    padding: 11px 18px !important;
    letter-spacing: 0.04em !important;
  }

  /* ============================================================
     2026-05-04 v100 — REMAINING SECTIONS PREMIUM ADAPTATION
     Yield · Market-proof · Location · Payment · Process · Developer
     Common style: tight padding, glass cards, hairline dividers,
     consistent type scale (eyebrow 10/title clamp/body 12/13/caption 9)
     ============================================================ */

  /* === YIELD: compact 2-col inputs grid === */
  section.yield .container {
    padding: clamp(48px, 6vh, 72px) 16px !important;
  }
  section.yield .yield__panel,
  section.yield .yield__inner {
    padding: 0 !important;
  }
  section.yield .eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 8px !important;
  }
  section.yield h2,
  section.yield .display--3 {
    font-size: clamp(28px, 7.5vw, 40px) !important;
    line-height: 1.05 !important;
    margin: 0 0 16px 0 !important;
  }
  /* Hero number block */
  .yield__hero,
  section.yield .yield__hero-num {
    text-align: left !important;
  }
  .yield__hero-eyebrow,
  section.yield .yield__hero-eyebrow {
    font-size: 9px !important;
    letter-spacing: 0.15em !important;
    margin-bottom: 8px !important;
    opacity: 0.65 !important;
  }
  /* Inputs/breakdown — 2-col grid */
  .yield__inputs,
  .yield__breakdown,
  .yield__rows,
  section.yield .breakdown {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 16px !important;
    margin-top: 12px !important;
  }
  .yield__inputs li,
  .yield__breakdown li,
  .yield__rows > div,
  section.yield .breakdown__row {
    display: flex !important;
    justify-content: space-between !important;
    padding: 7px 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    gap: 6px !important;
  }
  .yield__label,
  section.yield .label {
    font-size: 9.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    opacity: 0.65 !important;
  }
  .yield__value,
  section.yield .value {
    font-size: 12px !important;
    font-weight: 600 !important;
  }

  /* === MARKET-PROOF: compact card === */
  section.market-proof .container {
    padding: clamp(48px, 6vh, 72px) 16px !important;
  }
  section.market-proof h2,
  section.market-proof .display--3 {
    font-size: clamp(26px, 7vw, 38px) !important;
    line-height: 1.05 !important;
    margin: 0 0 12px 0 !important;
  }
  section.market-proof .subhead {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 0 0 16px 0 !important;
    opacity: 0.85 !important;
  }
  section.market-proof ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 12px 0 !important;
  }
  section.market-proof ul li {
    font-size: 12px !important;
    line-height: 1.5 !important;
    padding: 8px 0 8px 22px !important;
    position: relative !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  }
  section.market-proof ul li::before {
    content: "+";
    position: absolute;
    left: 4px;
    top: 8px;
    font-weight: 600;
    opacity: 0.5;
  }

  /* === LOCATION: 2 area cards (Canggu | Uluwatu) compact === */
  section.location .container {
    padding: clamp(48px, 6vh, 72px) 16px !important;
  }
  section.location h2,
  section.location .display--3 {
    font-size: clamp(28px, 7.5vw, 40px) !important;
    line-height: 1.05 !important;
    margin: 0 0 12px 0 !important;
  }
  section.location .subhead {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
  }
  /* Map — fit inside viewport, no horizontal overflow */
  section.location .location__map,
  section.location .map,
  section.location__map {
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  section.location svg,
  section.location .location__map svg,
  section.location .location__map img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  /* === LOCATION mobile — vertical stack: title → map → Canggu → Uluwatu === */
  section.location {
    min-height: 0 !important;
    padding: clamp(48px, 6vh, 72px) 16px !important;
    height: auto !important;
    display: block !important;
  }
  section.location > .container {
    padding: 0 !important;
  }
  section.location .location__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    grid-template-columns: 1fr !important;
  }
  /* Map — natural aspect, both pins visible (svg viewBox 600×540) */
  section.location .location__map {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 600 / 540 !important;
    max-height: 70vh !important;
    padding: 12px !important;
    background: var(--c-bg-deep, #F5F5F5) !important;
    border-radius: 8px !important;
    overflow: visible !important;
    display: block !important;
    box-sizing: border-box !important;
  }
  section.location .location__map svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    overflow: visible !important;
  }
  /* Loc cards — full-width, landscape 4:3 — фото без сильного crop */
  section.location .loc-card {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    max-height: 60vh !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin: 0 !important;
  }
  section.location .loc-card__photo,
  section.location .loc-card__photo img {
    object-position: center center !important;
  }
  section.location .loc-card__content {
    padding: 16px !important;
  }
  section.location .loc-card__name {
    font-size: clamp(28px, 7vw, 36px) !important;
  }
  section.location .loc-card .body--sm,
  section.location .loc-card p {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }
  /* CTA row */
  section.location .section__cta-row {
    margin-top: 16px !important;
  }

  /* === PAYMENT: 2×2 grid 4 cards с desktop-size typography === */
  section.payment .container {
    padding: clamp(48px, 6vh, 72px) 16px !important;
  }
  /* Section title: HUGE как desktop, 2 lines (THREE WAYS / TO OWN A UNIT.)
     Specificity boost через #payment чтобы бить standardization (section[id]) в конце */
  section#payment h2,
  section#payment .display--3,
  section#payment .display.display--3 {
    font-size: clamp(46px, 11.5vw, 68px) !important;
    line-height: 0.92 !important;
    margin: 0 0 28px 0 !important;
    letter-spacing: -0.022em !important;
    word-break: keep-all !important;
  }
  /* em "own a unit." — inline, "to own a unit." на одной строке + WHITE GRADIENT FADE снизу как desktop */
  section#payment h2 em,
  section#payment .display--3 em,
  section#payment .display.display--3 em {
    display: inline !important;
    font-size: 1em !important;
    font-weight: 700 !important;
    font-style: normal !important;
    letter-spacing: -0.025em !important;
    line-height: 0.92 !important;
    /* Navy → white gradient fade snizu (как desktop) */
    background: linear-gradient(180deg,
      var(--c-brand-navy, #1A2543) 0%,
      var(--c-brand-navy, #1A2543) 55%,
      rgba(26,37,67,0.55) 85%,
      rgba(26,37,67,0.20) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }
  /* br между "Three ways" и "to own a unit." — должен быть видим */
  section#payment h2 br,
  section#payment .display--3 br {
    display: inline !important;
  }
  /* 2×2 grid — 4 identical squares (STANDARD+OPTION1 row, OPTION2+AGENT row) */
  section.payment .payment__grid,
  section.payment .pay-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 1fr !important;
    gap: 10px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    align-items: stretch !important;
  }
  /* Card — identical 4 squares, точная копия desktop пропорций */
  section.payment .pay-card,
  section.payment .payment__card {
    padding: 20px 16px !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,0.6) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    height: 100% !important;
    width: 100% !important;
  }
  /* Tag — same as desktop: small caps */
  section.payment .pay-card__tag,
  section.payment .pay-card .label,
  section.payment .pay-card__label {
    font-size: 10.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    font-weight: 500 !important;
    opacity: 0.6 !important;
    margin: 0 0 16px 0 !important;
    line-height: 1 !important;
  }
  /* Title — ALL BOLD + WHITE GRADIENT FADE снизу (как desktop) */
  section.payment .pay-card h3,
  section.payment .pay-card__title {
    font-size: clamp(24px, 6.4vw, 32px) !important;
    font-weight: 700 !important;
    margin: 0 0 16px 0 !important;
    line-height: 0.95 !important;
    letter-spacing: -0.018em !important;
    text-transform: uppercase !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(0,0,0,0.12) !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    min-height: calc(2 * 0.95em + 16px) !important;
    /* Navy → white gradient fade snizu (как desktop) */
    background: linear-gradient(180deg,
      var(--c-brand-navy, #1A2543) 0%,
      var(--c-brand-navy, #1A2543) 55%,
      rgba(26,37,67,0.55) 85%,
      rgba(26,37,67,0.20) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }
  /* em inside title — same bold + inherit gradient from parent */
  section.payment .pay-card h3 em,
  section.payment .pay-card__title em {
    font-weight: 700 !important;
    font-style: normal !important;
    font-size: 1em !important;
    letter-spacing: -0.018em !important;
    /* inherit parent gradient via background: inherit */
    background: inherit !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }
  /* Featured (Agent offer): white gradient fade на dark navy bg */
  section.payment .pay-card--featured .pay-card__title,
  section.payment .pay-card--featured h3 {
    background: linear-gradient(180deg,
      #ffffff 0%,
      #ffffff 55%,
      rgba(255,255,255,0.6) 85%,
      rgba(255,255,255,0.25) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }
  section.payment .pay-card--featured .pay-card__title em,
  section.payment .pay-card--featured h3 em {
    background: inherit !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }
  section.payment .pay-card__title em,
  section.payment .pay-card h3 em {
    font-weight: 700 !important;
    font-style: normal !important;
    font-size: 1em !important;
    letter-spacing: -0.018em !important;
    color: var(--c-brand-navy, #1A2543) !important;
    -webkit-text-fill-color: var(--c-brand-navy, #1A2543) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
  }
  /* Spec rows — comfortable spacing, desktop-rhythm */
  section.payment .pay-card__list,
  section.payment .pay-card__rows,
  section.payment .pay-card ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  /* Spec rows: НЕТ рамок (как desktop) — vertical stack без рамок, разделены hairline border-bottom */
  section.payment .pay-card__list,
  section.payment .pay-card__rows,
  section.payment .pay-card ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    border-top: 0 !important;
  }
  section.payment .pay-card__list li,
  section.payment .pay-card__rows li,
  section.payment .pay-card ul li {
    font-size: 13px !important;
    line-height: 1.3 !important;
    padding: 8px 0 !important;
    border: none !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 4px !important;
    background: none !important;
  }
  section.payment .pay-card__list li:last-child,
  section.payment .pay-card ul li:last-child {
    padding-bottom: 0 !important;
  }
  /* Label — top, caps */
  section.payment .pay-card__list li > span:first-child,
  section.payment .pay-card ul li > span:first-child {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    font-weight: 500 !important;
    opacity: 0.55 !important;
    line-height: 1 !important;
  }
  /* Value — below label, navy bold */
  section.payment .pay-card__list li > span:last-child,
  section.payment .pay-card ul li > span:last-child {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--c-brand-navy, #1A2543) !important;
    -webkit-text-fill-color: var(--c-brand-navy, #1A2543) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    text-align: left !important;
  }
  /* Featured (Agent offer): без borders между rows */
  section.payment .pay-card--featured .pay-card__list li,
  section.payment .pay-card--featured ul li {
    border: none !important;
    background: none !important;
  }
  section.payment .pay-card p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  /* Featured (Agent offer) keeps navy bg + white text — override for divider/values */
  section.payment .pay-card--featured .pay-card__title {
    border-bottom-color: rgba(255,255,255,0.18) !important;
  }
  section.payment .pay-card--featured .pay-card__list li,
  section.payment .pay-card--featured ul li {
    border-bottom-color: rgba(255,255,255,0.15) !important;
  }
  section.payment .pay-card--featured .pay-card__list li > span:last-child,
  section.payment .pay-card--featured ul li > span:last-child {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  section.payment .pay-card--featured .pay-card__list li > span:first-child,
  section.payment .pay-card--featured ul li > span:first-child {
    color: rgba(255,255,255,0.6) !important;
  }
  section.payment .pay-card--featured .pay-card__tag {
    color: rgba(255,255,255,0.6) !important;
  }
  /* Featured card (Agent offer) — navy fill + white text (highlighted variant) */
  section.payment .pay-card--featured {
    background: var(--c-brand-navy, #1A2543) !important;
    border-color: var(--c-brand-navy, #1A2543) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(26, 37, 67, 0.18) !important;
  }
  section.payment .pay-card--featured .pay-card__tag,
  section.payment .pay-card--featured .label {
    color: rgba(255,255,255,0.62) !important;
    opacity: 1 !important;
  }
  section.payment .pay-card--featured .pay-card__title,
  section.payment .pay-card--featured h3 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
  }
  section.payment .pay-card--featured .pay-card__title em,
  section.payment .pay-card--featured h3 em {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
  }
  section.payment .pay-card--featured ul li,
  section.payment .pay-card--featured .pay-card__list li {
    border-bottom-color: rgba(255,255,255,0.18) !important;
  }
  section.payment .pay-card--featured ul li > span:first-child {
    color: rgba(255,255,255,0.55) !important;
  }
  section.payment .pay-card--featured ul li > span:last-child {
    color: #ffffff !important;
  }

  /* === PROCESS v3 — desktop-style: card stack + outline pills с ✓ / ● === */
  section.process .container {
    padding: clamp(48px, 6vh, 72px) 16px !important;
  }
  /* Section title — 2 lines: FROM CONTRACT / TO FIRST PAYOUT.
     "to first payout." 16 chars + bold em — нужен font ≤48px чтобы fit на 1 line на 580px */
  section#process h2,
  section#process .display--3,
  section#process .display.display--3 {
    font-size: clamp(30px, 7.8vw, 46px) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.03em !important;
    margin: 0 0 24px 0 !important;
    word-break: keep-all !important;
    font-weight: 200 !important;
  }
  /* em "first payout." — inline, tighter letters */
  section#process h2 em,
  section#process .display--3 em,
  section#process .display.display--3 em {
    display: inline !important;
    font-size: 1em !important;
    font-weight: 700 !important;
    font-style: normal !important;
    letter-spacing: -0.035em !important;
    line-height: 0.94 !important;
  }
  /* br между "From contract" и "to first payout." — видим */
  section#process h2 br,
  section#process .display--3 br {
    display: inline !important;
  }
  /* Fix invisible <em> in title — gradient text trick makes em transparent */
  section.process h2 em,
  section.process .display--3 em,
  section.process .display em {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--c-brand-navy, #1A2543) !important;
    color: var(--c-brand-navy, #1A2543) !important;
    font-style: normal !important;
    font-size: inherit !important;
    font-weight: inherit !important;
  }
  section.process .p-steps,
  section.process .process__list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Card structure via grid-template-areas */
  section.process .p-step {
    display: grid !important;
    grid-template-areas:
      "date status"
      "title title"
      "desc desc" !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px 12px !important;
    padding: 16px 16px !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,0.55) !important;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
  }
  /* Card — vertical stack: date → num → title → desc → status pill (bottom). Compact высота */
  section.process .p-step {
    display: flex !important;
    flex-direction: column !important;
    grid-template-areas: none !important;
    gap: 4px !important;
    padding: 14px 16px !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,0.55) !important;
    align-items: stretch !important;
    position: relative !important;
    overflow: visible !important;
  }
  /* List gap tighter */
  section.process .p-steps,
  section.process .process__list {
    gap: 8px !important;
  }
  section.process .p-step.is-done {
    border-color: rgba(0,0,0,0.12) !important;
    background: rgba(255,255,255,0.55) !important;
  }
  section.process .p-step.is-now {
    background: linear-gradient(180deg,
      var(--c-brand-navy, #1A2543) 0%,
      var(--c-brand-navy, #1A2543) 45%,
      #141C36 80%,
      #0E1528 100%) !important;
    color: #ffffff !important;
    border-color: var(--c-brand-navy, #1A2543) !important;
    box-shadow: 0 8px 24px rgba(26, 37, 67, 0.18) !important;
  }
  /* Date — Q1 2026 (top, mono caps) — compact margin */
  section.process .p-step__date {
    grid-area: auto !important;
    display: block !important;
    font-family: var(--f-mono, monospace) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    opacity: 0.7 !important;
    line-height: 1 !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
    position: static !important;
    color: rgba(0,0,0,0.6) !important;
  }
  section.process .p-step.is-now .p-step__date {
    color: rgba(245,244,239,0.65) !important;
    opacity: 1 !important;
  }
  /* Num — 01 (small mono) — compact */
  section.process .p-step__num {
    grid-area: auto !important;
    display: block !important;
    position: static !important;
    font-family: var(--f-mono, monospace) !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    font-weight: 500 !important;
    opacity: 0.45 !important;
    line-height: 1 !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    color: rgba(0,0,0,0.5) !important;
  }
  section.process .p-step.is-now .p-step__num {
    color: rgba(245,244,239,0.55) !important;
    opacity: 1 !important;
  }
  /* Title — display weight, compact margin */
  section.process .p-step__title {
    grid-area: auto !important;
    font-family: var(--f-display, sans-serif) !important;
    font-size: clamp(20px, 5vw, 26px) !important;
    font-weight: 500 !important;
    line-height: 1.05 !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    letter-spacing: -0.012em !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    min-height: auto !important;
    color: var(--c-brand-navy, #1A2543) !important;
    -webkit-text-fill-color: var(--c-brand-navy, #1A2543) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
  }
  /* Active title — white gradient fade snizu */
  section.process .p-step.is-now .p-step__title {
    background: linear-gradient(180deg,
      rgba(245,242,236,0.96) 0%,
      rgba(245,242,236,0.96) 55%,
      rgba(245,242,236,0.55) 85%,
      rgba(245,242,236,0.20) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }
  /* Description — compact margin */
  section.process .p-step__desc {
    grid-area: auto !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    margin: 0 0 8px 0 !important;
    opacity: 0.75 !important;
    color: rgba(0,0,0,0.7) !important;
  }
  section.process .p-step.is-now .p-step__desc {
    color: rgba(245,244,239,0.85) !important;
    opacity: 1 !important;
  }
  /* Status pill — outline at bottom, compact как desktop */
  section.process .p-step__status {
    grid-area: auto !important;
    align-self: flex-start !important;
    justify-self: flex-start !important;
    font-family: var(--f-mono, monospace) !important;
    font-size: 10px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    line-height: 1 !important;
    background: transparent !important;
    border: 1px solid rgba(0,0,0,0.18) !important;
    color: rgba(0,0,0,0.55) !important;
    margin-top: 0 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }
  /* DONE: ✓ checkmark prefix (outline navy) */
  section.process .p-step.is-done .p-step__status {
    background: transparent !important;
    border-color: rgba(0,0,0,0.18) !important;
    color: var(--c-brand-navy, #1A2543) !important;
  }
  section.process .p-step.is-done .p-step__status::before {
    content: "✓ " !important;
    color: var(--c-brand-navy, #1A2543) !important;
    font-weight: 700 !important;
  }
  /* NOW: ● dot prefix (outline white on navy bg) */
  section.process .p-step.is-now .p-step__status {
    background: transparent !important;
    border-color: rgba(245,242,236,0.85) !important;
    color: rgba(245,242,236,0.92) !important;
    box-shadow: none !important;
  }
  section.process .p-step.is-now .p-step__status::before {
    content: "● " !important;
    color: rgba(245,242,236,0.92) !important;
  }
  /* NEXT: outline neutral, no prefix (default uses base) */
  section.process .p-step:not(.is-done):not(.is-now) .p-step__status::before {
    content: none !important;
  }

  /* === DEVELOPER: compact founder card === */
  section.developer .container {
    padding: clamp(48px, 6vh, 72px) 16px !important;
  }
  section.developer h2,
  section.developer .display--3 {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.05 !important;
    margin: 0 0 12px 0 !important;
  }
  section.developer .subhead {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    margin: 0 0 16px 0 !important;
    opacity: 0.85 !important;
  }
  /* Founder photo + content */
  section.developer .developer__photo,
  section.developer figure img {
    max-width: 200px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto 14px auto !important;
    display: block !important;
    border-radius: 4px !important;
  }
  /* Pillars compact */
  section.developer .developer__pillars,
  section.developer ul {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  section.developer ul li {
    padding: 10px 12px !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,0.5) !important;
  }
  section.developer ul li h3,
  section.developer ul li strong {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    margin: 0 0 4px 0 !important;
    display: block !important;
  }
  section.developer ul li p {
    font-size: 11px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    opacity: 0.8 !important;
  }
  section.developer .developer__stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
    margin: 12px 0 !important;
    padding: 12px 0 !important;
    border-top: 1px solid rgba(0,0,0,0.1) !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
  }
  section.developer .developer__stat {
    text-align: center !important;
  }
  section.developer .developer__stat-num {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    margin-bottom: 2px !important;
    color: var(--c-brand-navy, #1A2543) !important;
  }
  section.developer .developer__stat-label {
    font-size: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    opacity: 0.65 !important;
  }

  /* === Common section eyebrow uniformity === */
  section .eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
  }

  /* === COMPARISON: vertical stack 2 villa cards — стандартизировано под Floor-plan rhythm === */
  .villa-compare-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
  }
  .villa-card {
    padding: 20px 18px !important;
    min-height: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,0.55) !important;
  }
  /* Header: num + tag pill */
  .villa-card__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }
  .villa-card__num {
    font-size: 14px !important;
    letter-spacing: 0.14em !important;
    font-weight: 500 !important;
    opacity: 0.55 !important;
  }
  .villa-card__tag {
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    padding: 6px 12px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-align: center !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
  }
  /* Title: 1-BR Villa em 50m² — same hierarchy как Floor-plan */
  .villa-card__type {
    font-size: clamp(22px, 6vw, 32px) !important;
    line-height: 0.95 !important;
    font-weight: 200 !important;
    margin: 4px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.012em !important;
  }
  .villa-card__type em {
    font-size: 1em !important;
    font-weight: 700 !important;
    font-style: normal !important;
    letter-spacing: -0.018em !important;
    color: var(--c-brand-navy, #1A2543) !important;
    -webkit-text-fill-color: var(--c-brand-navy, #1A2543) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
  }
  /* Big rate price — match Floor-plan investment row size */
  .villa-card__price {
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: 1 !important;
    margin: 6px 0 0 0 !important;
    letter-spacing: -0.015em !important;
    font-weight: 700 !important;
    color: var(--c-brand-navy, #1A2543) !important;
    -webkit-text-fill-color: var(--c-brand-navy, #1A2543) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
  }
  .villa-card__per {
    font-size: 14px !important;
    letter-spacing: 0.04em !important;
    font-weight: 500 !important;
    opacity: 0.7 !important;
    margin-left: 4px !important;
  }
  .villa-card__price-note {
    font-size: 10px !important;
    line-height: 1.5 !important;
    margin: 4px 0 8px 0 !important;
    opacity: 0.6 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
  }
  /* Stats: ENTRY / NET YIELD / LEASE — 2-col flex like Floor-plan specs */
  .villa-card__stats {
    list-style: none !important;
    padding: 0 !important;
    margin: 8px 0 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border-top: 1px solid rgba(0,0,0,0.12) !important;
  }
  .villa-card__stats li {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 12px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    border-left: none !important;
  }
  .villa-card__stats li:last-child {
    border-bottom: 0 !important;
  }
  .villa-stat__label,
  .villa-card__stats .label {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    font-weight: 500 !important;
    opacity: 0.6 !important;
    flex-shrink: 0 !important;
  }
  .villa-stat__value,
  .villa-card__stats .value {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--c-brand-navy, #1A2543) !important;
    -webkit-text-fill-color: var(--c-brand-navy, #1A2543) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    text-align: right !important;
  }
  .villa-card__footer,
  .villa-card__plus {
    font-size: 10.5px !important;
    line-height: 1.5 !important;
    margin: 10px 0 0 0 !important;
    opacity: 0.7 !important;
    letter-spacing: 0.02em !important;
  }
  .villa-stat__value,
  .villa-card__stats .value {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }
  .villa-card__footer {
    font-size: 8.5px !important;
    line-height: 1.4 !important;
    margin: 8px 0 0 0 !important;
    opacity: 0.65 !important;
  }
  .villa-card__plus {
    font-size: 9px !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════
     === MOBILE TYPOGRAPHY STANDARDIZATION (final pass — wins cascade) ===
     Унифицирует все секции: eyebrow, section-title 2-line stack,
     lead, spec rows, CTA pills. Применяется к Floor-plan, Featured,
     Yield, Market-proof, Comparison, Payment, Process, Developer, Contact, Concept, Units, Location.
     ═══════════════════════════════════════════════════════════════════════ */

  /* --- 1. EYEBROW: единый стиль (small caps + hairline rule) --- */
  section .eyebrow {
    font-size: 10.5px !important;
    line-height: 1 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    margin: 0 0 14px 0 !important;
    opacity: 0.78 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  section .eyebrow::before {
    content: "" !important;
    display: inline-block !important;
    width: 24px !important;
    height: 1px !important;
    background: currentColor !important;
    opacity: 0.5 !important;
    flex-shrink: 0 !important;
  }
  /* Featured eyebrow — different markup, нормализую вручную */
  section.featured .featured__eyebrow,
  .featured__eyebrow {
    font-size: 10.5px !important;
    line-height: 1 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    margin: 0 0 14px 0 !important;
    opacity: 0.78 !important;
    gap: 10px !important;
  }

  /* --- 2. SECTION TITLE: 2-line stack унифицированный rhythm ---
     Sub-line (light 200) / Main em (bold 700) — same size, line-height 0.92, no gap
     Высокая специфичность: section[id] чтобы бить section.X selectors */
  section[id] .display.display--3,
  section[id] h2.display--3,
  section[id] .featured__title,
  section[id] .contact__title,
  section[id] .developer__title,
  section.featured .featured__title,
  section.contact .contact__title,
  section.developer .developer__title {
    font-size: clamp(28px, 7.6vw, 40px) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.012em !important;
    font-weight: 200 !important;
    margin: 0 0 16px 0 !important;
    text-align: left !important;
    word-break: keep-all !important;
  }
  /* Sub-line (display__sub) — light, same size, tight, no margin */
  section .display.display--3 .display__sub,
  section h2 .display__sub,
  .display__sub {
    display: block !important;
    font-size: 1em !important;
    line-height: 0.92 !important;
    font-weight: 200 !important;
    letter-spacing: -0.008em !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: uppercase !important;
  }
  /* em: bold, same size, tight, на своей строке */
  section[id] .display.display--3 em,
  section[id] h2 em,
  section[id] .featured__title em,
  section[id] .contact__title em,
  section[id] .developer__title em,
  section.featured .featured__title em,
  section.contact .contact__title em,
  section.developer .developer__title em {
    display: block !important;
    font-size: 1em !important;
    line-height: 0.92 !important;
    font-weight: 700 !important;
    letter-spacing: -0.018em !important;
    margin: 0 !important;
    padding: 0 !important;
    font-style: normal !important;
  }
  /* <br> между sub и em — скрыть только для Floor-plan структуры (.display__sub + br + em).
     Другие секции (Location, Process, Yield) используют <br> для line breaks внутри текста — оставить видимыми. */
  section[id] .display__sub + br,
  section[id] .display.display--3 .display__sub + br {
    display: none !important;
  }
  /* For Featured title — text node "1-Bedroom 50m² Villa" перед em
     становится первой строкой автоматически когда em = block */

  /* --- 3. LEAD: paragraph под title — единый rhythm --- */
  section .lead,
  section .featured__lead,
  section .floor-plan__lead,
  section .yield__lead,
  section .market-proof__lead,
  section .comparison__lead,
  section .concept__lead,
  section .units__lead,
  section .location__lead,
  section .payment__lead,
  section .process__lead,
  section .developer__sub,
  section .subhead {
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    margin: 0 0 18px 0 !important;
    opacity: 0.85 !important;
  }

  /* --- 4. SPEC GRID: 2-col uniform для all unit sections --- */
  section .floor-plan__specs,
  section .floor-plan__finance,
  section .featured__brackets {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 16px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 12px 0 !important;
  }
  section .floor-plan__specs li,
  section .floor-plan__finance li,
  section .featured__brackets li {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 6px !important;
    padding: 7px 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  }
  /* Spec label */
  section .b-label,
  section .floor-plan__spec-l,
  section .floor-plan__finance-l {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-weight: 500 !important;
    opacity: 0.65 !important;
    line-height: 1.2 !important;
  }
  /* Spec value */
  section .b-value,
  section .floor-plan__spec-v,
  section .floor-plan__finance-v {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: var(--c-brand-navy, #1A2543) !important;
    -webkit-text-fill-color: var(--c-brand-navy, #1A2543) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    text-align: right !important;
  }

  /* --- 5. FOOTNOTE under specs — small mono caps --- */
  section .footnote,
  section .floor-plan__footnote,
  section .featured__footnote,
  section .yield__footnote,
  section .units__footnote {
    font-size: 9.5px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    opacity: 0.6 !important;
    margin: 0 0 16px 0 !important;
  }

  /* --- 6. CTA PILL: outline button — единый rhythm --- */
  section .cta-pill,
  section .btn-outline,
  section a[class*="cta"]:not(.mobile-cta-bar):not(.mobile-cta-bar *):not(.hero__cta-primary):not(.mobile-drawer__cta-link),
  section button[class*="cta"]:not(.mobile-cta-bar):not(.mobile-cta-bar *):not(.hero__cta-primary) {
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    padding: 12px 20px !important;
    border: 1.5px solid var(--c-brand-navy, #1A2543) !important;
    border-radius: 999px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--c-brand-navy, #1A2543) !important;
    background: transparent !important;
    text-decoration: none !important;
  }
  /* CTA on-dark variant — white outline + white text (Concept, Contact, dark photo sections) */
  section a.cta-pill--on-dark,
  section a.cta-pill.cta-pill--on-dark {
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
    background: transparent !important;
    font-family: var(--f-mono, monospace) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.18em !important;
    font-weight: 500 !important;
    padding: 11px 20px !important;
    border-radius: 999px !important;
  }
  section a.cta-pill--on-dark span,
  section a.cta-pill--on-dark .arrow {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  /* Hero CTA — override standardization (white pill) */
  section.hero a.hero__cta-primary[class*="cta"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: var(--c-brand-navy, #1A2543) !important;
    border: 1px solid #ffffff !important;
    border-radius: 999px !important;
    padding: 11px 20px !important;
    font-family: var(--f-mono, monospace) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.18em !important;
    font-weight: 500 !important;
  }
  section.hero a.hero__cta-primary[class*="cta"] span,
  section.hero a.hero__cta-primary[class*="cta"] .arrow {
    color: var(--c-brand-navy, #1A2543) !important;
    -webkit-text-fill-color: var(--c-brand-navy, #1A2543) !important;
  }

  /* --- 7. SECTION CONTAINER: единый padding rhythm --- */
  section .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* --- 7b. UNITS card labels: Price / Income · yr / ROI (mobile only) --- */
  section.units .proj-row__value,
  section.units .proj-row__income,
  section.units .proj-row__yield {
    display: block !important;
    position: relative !important;
    margin-bottom: 8px !important;
  }
  section.units .proj-row__value::before,
  section.units .proj-row__income::before,
  section.units .proj-row__yield::before {
    display: block !important;
    font-family: var(--f-mono, monospace) !important;
    font-size: 9.5px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    margin-bottom: 3px !important;
    line-height: 1 !important;
    color: var(--c-brand-navy, #1A2543) !important;
    -webkit-text-fill-color: var(--c-brand-navy, #1A2543) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    opacity: 0.55 !important;
  }
  section.units .proj-row__value::before { content: "Price" !important; }
  section.units .proj-row__income::before { content: "Income · yr" !important; }
  section.units .proj-row__yield::before { content: "ROI" !important; }

  /* --- 8. INVESTMENT/INCOME ROW (Floor-plan + Featured) — top divider, чуть жирнее --- */
  section .featured__brackets li.b-divider,
  section .floor-plan__finance li:first-child {
    border-top: 1.5px solid rgba(0,0,0,0.18) !important;
    margin-top: 4px !important;
    padding-top: 12px !important;
  }
  section .floor-plan__finance .b-value,
  section .featured__brackets li.b-finance .b-value {
    font-size: 16px !important;
    font-weight: 700 !important;
  }

}