/* ══════════════════════════════════════════════════════════
   Усадьба Пущино-на-Наре — стиль страницы объекта
   Тёмный вход (кадр), светлый корпус (чтение), тёмные врезки.
   Шрифты только системные: страница обязана открываться без сети.
   ══════════════════════════════════════════════════════════ */

:root {
  --ink:        #17130F;   /* текст на бумаге */
  --ink-soft:   #4A423A;
  --paper:      #F6F3EE;
  --paper-warm: #EFEAE1;
  --night:      #12100E;   /* тёмные секции */
  --night-2:    #1B1815;
  --light:      #F4EFE7;   /* текст на тёмном */
  --light-soft: #C3B9AC;
  --bronze:     #7A5A2E;   /* акцент на светлом */
  --bronze-lt:  #C9A876;   /* акцент на тёмном */
  --line:       rgba(23,19,15,.14);
  --line-dark:  rgba(244,239,231,.16);

  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Кривые: встроенные ease слишком вялые для этой подачи */
  --out: cubic-bezier(.23, 1, .32, 1);
  --inout: cubic-bezier(.77, 0, .175, 1);

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 64px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture { display: block; max-width: 100%; }
/* Размеры в разметке нужны, чтобы место под кадр резервировалось до загрузки
   (иначе страница «растёт» на ходу и переход по ссылке не доезжает до цели).
   Высоту при этом считает браузер, а не разметка. */
:where(img[width][height]) { height: auto; }  /* :where — нулевой вес, иначе это правило перебивало height:100% у первого экрана */

/* <picture> по умолчанию строчный: без явной высоты у него height:100%
   у картинки не разрешается, и кадр схлопывается в свою пропорцию.
   На широком экране это незаметно, на телефоне — чёрная пустота под фото. */
.hero__media picture,
.shot picture { height: 100%; }

::selection { background: rgba(122,90,46,.22); }

/* ── Контакты над первым экраном ─────────────────────────
   Телефон должен быть виден сразу, до всякой прокрутки. */
.svyaz-verh {
  position: relative;
  z-index: 40;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 4vw, 34px);
  flex-wrap: wrap;
  padding: 11px 16px calc(11px + env(safe-area-inset-top));
  background: #0E0C0A;
}
.svyaz-verh a {
  color: #F1E9DC;
  font-size: clamp(15px, 3.6vw, 17px);
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .svyaz-verh a:hover { color: var(--bronze-lt); }
}

/* ── Плашка черновика ───────────────────────────────────── */
.draft-bar {
  position: relative;
  z-index: 40;
  background: #241E17;
  color: #E8DFD1;
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 16px;
}

/* ── Общая раскладка ────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap--narrow { max-width: 760px; }

.section { padding: clamp(72px, 11vw, 140px) 0; }
/* Две светлые секции подряд давали двойной отступ: между ответами и съёмкой
   зияла пустая полоса в пол-экрана. Стык светлое-к-светлому сжимаем. */
.section--paper + .section--paper { padding-top: clamp(24px, 3vw, 44px); }
.section--paper { background: var(--paper); color: var(--ink); }
.section--dark  { background: var(--night); color: var(--light); }

/* ── Типографика: трекинг и интерлиньяж зависят от кегля ── */
.eyebrow {
  margin: 0 0 22px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze);
  font-weight: 600;
}
.section--dark .eyebrow { color: #C9A876; }

.h2 {
  margin: 0 0 clamp(28px, 4vw, 48px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -.018em;
}

.lede {
  margin: 0 0 26px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.42;
  letter-spacing: -.008em;
}
.lede--tight { max-width: 760px; }

.body { margin: 0 0 20px; max-width: 68ch; color: var(--ink-soft); }
.section--dark .body { color: var(--light-soft); }
.body strong { color: var(--ink); font-weight: 600; }
.section--dark .body strong { color: var(--light); font-weight: 600; }

.note {
  margin: 26px 0 0;
  max-width: 66ch;
  font-size: 14px;
  line-height: 1.55;
  color: #6B6157;
  border-left: 2px solid var(--line);
  padding-left: 16px;
}
.section--dark .note { color: #A9A093; border-left-color: var(--line-dark); }
.note--center { border: 0; padding: 0; text-align: center; max-width: none; }

/* ── Кнопки ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 2px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  /* 🔴 Фон обязателен ЗДЕСЬ, а не только в модификаторах. У <a> своего фона нет,
     а <button> браузер сам красит в системный светло-серый - и «призрачная»
     кнопка превращалась в белую дыру со светлым текстом на светлом.
     Поймано 15.08.2026 на кнопке «Закрыть»: она стала первой на сайте
     кнопкой-тегом <button> с модификатором btn--ghost. */
  background: transparent;
  transition: transform 160ms var(--out), background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
/* Нажатие обязано читаться пальцем: кнопка слегка проседает под ним. */
.btn:active { transform: scale(.97); }
.btn--light { background: var(--light); color: #16120E; }
.btn--dark  { background: #16120E; color: var(--light); }
.btn--ghost { border-color: rgba(244,239,231,.42); color: var(--light); }
.section--paper .btn--ghost { border-color: rgba(23,19,15,.32); color: var(--ink); }
.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--lg { padding: 16px 32px; font-size: 16px; }

@media (hover: hover) and (pointer: fine) {
  .btn--light:hover { background: #fff; }
  .btn--dark:hover  { background: #241E17; }
  .btn--ghost:hover { border-color: rgba(244,239,231,.85); background: rgba(244,239,231,.07); }
  .section--paper .btn--ghost:hover { border-color: var(--ink); background: rgba(23,19,15,.05); }
}

:focus-visible { outline: 2px solid #C9A876; outline-offset: 3px; }

/* ══ ПЕРВЫЙ ЭКРАН ═══════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  background: #0B0908;
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 46%;
  /* Медленный наезд: кадр дышит, но движение на грани заметности */
  animation: heroDrift 26s var(--inout) forwards;
}
/* На узком экране кадр режется по бокам — сдвигаем к дому, иначе он уходит
   в тёмный правый край и первый экран остаётся без главного героя. */
@media (max-width: 620px) {
  /* Кадр шире экрана: держим правую часть фасада и верх, низ уходит под текст */
  .hero__media img { object-position: 52% 28%; }
}
@keyframes heroDrift {
  from { transform: scale(1.005); }
  to   { transform: scale(1.065); }
}

/* Затемнение снизу — без него светлый текст на фото не читается */
/* Затемнение работает только там, где лежит текст: выше кадр остаётся кадром.
   Прежняя вуаль давила всю фотографию, и подсвеченный фасад уходил в темноту. */
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(6,5,4,.92) 0%, rgba(6,5,4,.80) 30%, rgba(6,5,4,.42) 54%, rgba(6,5,4,.10) 74%, rgba(6,5,4,.20) 100%);
}
/* На широком экране кадр выходил темнее, чем на телефоне: снимаем лишнюю тень
   выше строки текста, оставляя её ровно под надписями. */
@media (min-width: 621px) {
  .hero__veil {
    background:
      linear-gradient(to top, rgba(6,5,4,.90) 0%, rgba(6,5,4,.74) 26%, rgba(6,5,4,.34) 50%, rgba(6,5,4,.04) 72%, rgba(6,5,4,.12) 100%);
  }
}

.hero__inner {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gut) clamp(88px, 13vh, 150px);
  color: var(--light);
}

.hero__title {
  margin: 0 0 24px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 8.2vw, 104px);
  line-height: 1.06; /* было 1.02: в две строки заголовок слипался */
  letter-spacing: -.028em;  /* крупному кеглю нужен отрицательный трекинг */
  text-wrap: balance;
}

.hero__lead {
  margin: 0 0 36px;
  max-width: 33ch;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
  color: #EBE3D7;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Три кнопки должны стоять в один ряд и на узком экране */
@media (max-width: 430px) {
  .hero__actions { gap: 8px; }
  .hero__actions .btn { padding: 13px 16px; font-size: 14.5px; }
}

.hero .eyebrow { color: #D6BC8C; }

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  width: 34px; height: 46px;
  display: grid; place-items: center;
}
.hero__scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, rgba(244,239,231,.06), rgba(244,239,231,.6));
  transform-origin: top;
  animation: scrollHint 2.6s var(--inout) infinite;
}
@keyframes scrollHint {
  0%, 100% { transform: scaleY(.35); opacity: .35; }
  50%      { transform: scaleY(1);   opacity: .9; }
}

/* ══ ПЛАВАЮЩАЯ ПАНЕЛЬ ═══════════════════════════════════ */
.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background: rgba(246,243,238,.82);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-top: 1px solid rgba(23,19,15,.10);
  transform: translateY(100%);
  transition: transform 320ms var(--out);
}
.dock[data-shown] { transform: translateY(0); }
.dock__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.dock__facts { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.dock__facts strong { font-size: 17px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.dock__facts span {
  font-size: 13px; color: #5E554B;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* На узком экране в панель влезает только цена: раньше «50 млн ₽» ломалось
   на две строки, а факты обрезались на полуслове («4 га · О…»). */
@media (max-width: 470px) {
  .dock__facts span { display: none; }
  .dock__facts strong { font-size: 18px; }
}

/* ══ ПЛИТКА ФАКТОВ ══════════════════════════════════════ */
.facts {
  margin: clamp(48px, 7vw, 84px) 0 0;
  display: grid;
  /* Колонки числом, а не auto-fit: на 1024px auto-fit давал 3+1 и четвёртая
     плитка висела одна. Четыре факта должны стоять либо 4, либо 2+2, либо 1. */
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 1180px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } }
.facts__item { background: var(--paper-warm); padding: clamp(22px, 3vw, 34px); }
.facts dt {
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  color: #6B6157; margin-bottom: 12px;
}
.facts dd {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(24px, 2.7vw, 34px);
  line-height: 1.1;
  letter-spacing: -.02em;
}
/* Не переносить только САМО число: примечание — тоже dd, и запрет переноса
   растягивал его в одну строку, распирая страницу по горизонтали. */
.facts dd:not(.facts__note) {
  white-space: nowrap;
  hyphens: none;
}
@media (max-width: 1180px) and (min-width: 561px) {
  .facts dd { font-size: clamp(22px, 2.4vw, 30px); }
}
.facts__note {
  white-space: normal !important;
  text-wrap: pretty;
  margin-top: 10px !important;
  font-family: var(--sans) !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  color: #5E554B;
}

/* ══ ДВЕ КОЛОНКИ ════════════════════════════════════════ */
.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.cols--flip .cols__media { order: -1; }
.cols__media { margin: 0; }
.cols__media img { width: 100%; border-radius: 2px; }
.cols__media figcaption {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #A9A093;
}
.section--paper .cols__media figcaption { color: #6B6157; }

@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr; }
  .cols--flip .cols__media { order: 0; }
}

/* ══ СПИСОК-СТРОКИ ══════════════════════════════════════ */
.lines { list-style: none; margin: 0; padding: 0; }
.lines li {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-dark);
  color: var(--light-soft);
  font-size: 15.5px;
}
.lines li:first-child { border-top: 1px solid var(--line-dark); }
.lines span {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: #C9A876; padding-top: 3px;
}
@media (max-width: 520px) {
  .lines li { grid-template-columns: 1fr; gap: 4px; }
}

/* ══ РАБОТЫ ═════════════════════════════════════════════
   Колонки заданы числом, а не auto-fit: при шести карточках
   auto-fit давал 4+2 и одну «висящую» — ряды должны быть полными. */
.works {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
  margin: clamp(40px, 6vw, 68px) 0 clamp(44px, 6vw, 72px);
}
@media (max-width: 940px) { .works { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .works { grid-template-columns: 1fr; } }
.work { border-top: 2px solid var(--ink); padding-top: 20px; }
.work__title {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 23px;
  letter-spacing: -.012em;
}
.work p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
.work strong { color: var(--ink); font-weight: 600; }
.work__when {
  font-size: 12px !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bronze) !important;
}

/* ══ ДОКАЗАТЕЛЬСТВА ═════════════════════════════════════ */
.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}
.proof__item { margin: 0; }
.proof__item img { width: 100%; border-radius: 2px; }
.proof__item figcaption {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #6B6157;
}

.callout {
  margin: clamp(44px, 6vw, 72px) 0 0;
  padding: clamp(26px, 3.4vw, 40px);
  background: var(--paper-warm);
  border: 1px solid rgba(169,139,93,.34);
  font-family: var(--serif);
  font-size: clamp(18px, 1.9vw, 23px);
  line-height: 1.45;
  letter-spacing: -.006em;
  max-width: 900px;
}

/* ══ КАРТОЧКИ СЦЕНАРИЕВ ═════════════════════════════════ */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 8px;
}
@media (max-width: 940px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }
.card { background: var(--paper); padding: clamp(24px, 3vw, 36px); }
.card h3 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -.012em;
  hyphens: none;          /* «Ретрит или арт-пространство» рвалось по дефису */
  text-wrap: balance;
}
.card p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }

/* ══ ШАГИ СДЕЛКИ ════════════════════════════════════════ */
.steps { margin: 0 0 24px; padding: 0 0 0 22px; }
.steps li {
  margin-bottom: 16px;
  padding-left: 8px;
  color: var(--light-soft);
  font-size: 16px;
  line-height: 1.55;
}
.steps li::marker { color: #C9A876; }
.steps strong { color: var(--light); font-weight: 600; }

/* ══ ВОПРОСЫ ════════════════════════════════════════════ */
.qa { border-top: 1px solid var(--line); max-width: 860px; }
.qa__item { border-bottom: 1px solid var(--line); }
.qa__item summary {
  padding: 22px 40px 22px 0;
  position: relative;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.32;
  letter-spacing: -.01em;
  transition: color 200ms ease;
}
.qa__item summary::-webkit-details-marker { display: none; }
.qa__item summary::after {
  content: '';
  position: absolute;
  right: 6px; top: 50%;
  width: 11px; height: 11px;
  margin-top: -8px;
  border-right: 1.5px solid var(--bronze);
  border-bottom: 1.5px solid var(--bronze);
  transform: rotate(45deg);
  transition: transform 220ms var(--out);
}
.qa__item[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.qa__item p {
  margin: 0 0 24px;
  max-width: 66ch;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.62;
}
@media (hover: hover) and (pointer: fine) {
  .qa__item summary:hover { color: var(--bronze); }
}

/* ══ ВИДЕО ══════════════════════════════════════════════
   Плеер ВКонтакте подставляется только по нажатию: пока его нет,
   страница не делает ни одного запроса наружу. */
.video { margin: 0 0 clamp(28px, 3.6vw, 48px); scroll-margin-top: clamp(16px, 4vh, 48px); }
.gallery__lead { scroll-margin-top: clamp(16px, 4vh, 48px); }
.video__ramka-mesto { position: relative; }
.video__zapis {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 2px;
  background: var(--night);
}
.video__pusk {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0; padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.video__pusk[hidden] { display: none; }
.video__pusk:active .video__knopka { transform: translate(-50%, -50%) scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .video__pusk:hover .video__knopka { transform: translate(-50%, -50%) scale(1.06); background: #fff; }
}

.video__poster {
  position: relative;
  display: block;
  width: 100%;
  margin: 0; padding: 0;
  border: 0;
  border-radius: 2px;
  overflow: hidden;
  background: var(--night);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.video__poster img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: brightness(.82);
  transition: filter 400ms var(--out), transform 600ms var(--out);
}
.video__knopka {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(62px, 8vw, 88px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(246,243,238,.92);
  box-shadow: 0 10px 40px rgba(8,7,6,.45);
  transition: transform 220ms var(--out), background-color 200ms ease;
}
.video__knopka svg { width: 44%; height: 44%; fill: #16120E; margin-left: 6%; }
.video__podpis {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(16px, 2.4vw, 26px);
  text-align: left;
  font-family: var(--serif);
  font-size: clamp(17px, 2vw, 24px);
  color: var(--light);
  background: linear-gradient(to top, rgba(8,7,6,.72), rgba(8,7,6,0));
}
.video__poster:active .video__knopka { transform: translate(-50%, -50%) scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .video__poster:hover img { filter: brightness(.92); transform: scale(1.02); }
  .video__poster:hover .video__knopka { transform: translate(-50%, -50%) scale(1.06); background: #fff; }
}
.video__ramka {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 2px;
  display: block;
  background: var(--night);
}
.video figcaption {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #6B6157;
}
.video figcaption a { color: #6B6157; text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .video figcaption a:hover { color: var(--bronze); }
}

/* ══ ГАЛЕРЕЯ ════════════════════════════════════════════
   Все плитки одной пропорции и ряды полные: прежняя раскладка
   с широкими плитками оставляла пустые ячейки, а кроп превью
   не совпадал с полным кадром — казалось, что открывается «другая» фотография.
   Поэтому главный кадр вынесен отдельной полосой над сеткой. */
.gallery__lead {
  display: block;
  width: 100%;
  margin: 0 0 clamp(10px, 1.4vw, 18px);
  padding: 0;
  border: 0;
  background: var(--paper-warm);
  cursor: zoom-in;
  overflow: hidden;
  border-radius: 2px;
}
.gallery__lead img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  transition: transform 600ms var(--out);
}
@media (max-width: 620px) { .gallery__lead img { aspect-ratio: 4 / 3; } }

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
}
.shot {
  position: relative;
  margin: 0; padding: 0;
  border: 0;
  background: var(--paper-warm);
  cursor: zoom-in;
  overflow: hidden;
  border-radius: 2px;
  transition: transform 200ms var(--out);
}
.shot img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 500ms var(--out);
}
.shot:active { transform: scale(.985); }
.gallery__lead:active { transform: scale(.994); }
@media (hover: hover) and (pointer: fine) {
  .shot:hover img,
  .gallery__lead:hover img { transform: scale(1.035); }
}
/* Неполный последний ряд: одинокая плитка растягивается на остаток ряда,
   иначе она «повисает» с краю — владелец поймал это на телефоне глазами.
   Работает при любом числе кадров, подгонять количество больше не нужно. */
.shot:last-child:nth-child(3n + 1) { grid-column: span 3; }
.shot:last-child:nth-child(3n + 2) { grid-column: span 2; }
.shot:last-child:nth-child(3n + 1) img,
.shot:last-child:nth-child(3n + 2) img { aspect-ratio: 3 / 1.2; }

@media (max-width: 720px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  /* при двух колонках правила для трёх не годятся — считаем заново */
  .shot:last-child:nth-child(3n + 1),
  .shot:last-child:nth-child(3n + 2) { grid-column: auto; }
  .shot:last-child:nth-child(3n + 1) img,
  .shot:last-child:nth-child(3n + 2) img { aspect-ratio: 3 / 2; }
  .shot:last-child:nth-child(odd) { grid-column: span 2; }
  .shot:last-child:nth-child(odd) img { aspect-ratio: 3 / 1.4; }
}

.gallery__hint {
  margin: 18px 0 0;
  font-size: 13.5px;
  color: #6B6157;
}

/* ══ СХЕМА ГРАНИЦ ═══════════════════════════════════════ */
.plan { margin: clamp(34px, 4.6vw, 60px) 0 0; }
.plan__shot {
  display: block;
  width: 100%;
  margin: 0; padding: 0;
  border: 0;
  border-radius: 2px;
  overflow: hidden;
  background: var(--night-2);
  cursor: zoom-in;
}
.plan__shot img { display: block; width: 100%; height: auto; }
.plan figcaption {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #A9A093;
}

/* ══ ФИНАЛ ══════════════════════════════════════════════ */
.section--final {
  background: var(--night);
  color: var(--light);
  padding: clamp(90px, 13vw, 170px) 0;
  text-align: center;
}
.final__title {
  margin: 0 0 22px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5.6vw, 66px);
  line-height: 1.06;
  letter-spacing: -.024em;
}
.final__lead {
  margin: 0 auto 26px;
  max-width: 46ch;
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.45;
  color: #D9CFC1;
}
/* 🔴 Финальная секция тёмная, но правил цвета для неё не было: обычный текст
   шёл тёмным по тёмному (контраст 1.93), сноска — 3.14. Поймано приёмкой 07.08. */
.section--final .body {
  margin-left: auto; margin-right: auto;
  text-align: center;
  color: var(--light-soft);
}
.section--final .body strong { color: var(--light); font-weight: 600; }
.section--final .note { color: #A9A093; border-left-color: var(--line-dark); }
.final__actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center;
  margin-top: 34px;
}


.final__svyaz {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px clamp(20px, 4vw, 40px);
  margin: 30px 0 0;
}
.final__svyaz a {
  color: var(--light);
  font-family: var(--serif);
  font-size: clamp(21px, 4.4vw, 30px);
  letter-spacing: -.01em;
  text-decoration: none;
  border-bottom: 1px solid rgba(244,239,231,.3);
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color 200ms ease, border-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .final__svyaz a:hover { border-bottom-color: var(--bronze); color: var(--bronze); }
}

/* ══ ПОДВАЛ ═════════════════════════════════════════════ */
.footer {
  background: var(--night-2);
  color: #9C9285;
  padding: 40px 0 calc(64px + env(safe-area-inset-bottom));
  font-size: 13.5px;
  line-height: 1.6;
}
.footer p { margin: 0; }
.footer__imya { color: #A79D90; }
.footer__svyaz {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 16px !important;
}
.footer__svyaz a {
  color: #E8DFD1;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .footer__svyaz a:hover { color: var(--bronze-lt); }
}

/* ══ ПРОСМОТР ФОТО ══════════════════════════════════════ */
.viewer {
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  background: rgba(8,7,6,.96);
  color: var(--light);
  overscroll-behavior: contain;
}
.viewer::backdrop { background: rgba(8,7,6,.9); }
.viewer[open] { display: grid; place-items: center; }
.viewer__frame {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 0 clamp(12px, 7vw, 96px);
  touch-action: pan-y;
}
.viewer__img {
  max-width: min(92vw, 1500px);
  max-height: 78vh;
  object-fit: contain;
  border-radius: 2px;
  /* Смена кадра не должна выглядеть как перезагрузка страницы */
  animation: kadr 260ms var(--out);
}
@keyframes kadr { from { opacity: 0; transform: scale(.992); } to { opacity: 1; transform: none; } }

.viewer__bar {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 68ch;
  text-align: center;
}
.viewer__caption { font-size: 14.5px; line-height: 1.5; color: var(--light-soft); }
.viewer__count {
  font-size: 12px;
  letter-spacing: .1em;
  color: #8E857A;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.viewer__close,
.viewer__nav {
  position: absolute;
  display: grid;
  place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(244,239,231,.12);
  color: var(--light);
  cursor: pointer;
  transition: transform 160ms var(--out), background-color 200ms ease, opacity 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.viewer__close {
  top: max(14px, env(safe-area-inset-top)); right: 16px;
  width: 44px; height: 44px;
  font-size: 26px; line-height: 1;
  z-index: 2;
}
.viewer__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
}
.viewer__nav svg { width: 26px; height: 26px; fill: currentColor; }
.viewer__nav--prev { left: clamp(8px, 2vw, 28px); }
.viewer__nav--next { right: clamp(8px, 2vw, 28px); }
.viewer__close:active { transform: scale(.94); }
.viewer__nav:active { transform: translateY(-50%) scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .viewer__close:hover,
  .viewer__nav:hover { background: rgba(244,239,231,.24); }
}
/* На узком экране стрелки уходят под кадр, чтобы не лежать поверх фотографии */
@media (max-width: 620px) {
  .viewer__nav {
    top: auto; bottom: max(18px, env(safe-area-inset-bottom));
    transform: none;
    width: 48px; height: 48px;
  }
  .viewer__nav:active { transform: scale(.94); }
  .viewer__nav--prev { left: 24px; }
  .viewer__nav--next { right: 24px; }
  .viewer__frame { padding: 0 12px; }
  .viewer__img { max-height: 66vh; }
  .viewer__bar { padding-bottom: 74px; }
}

/* ══ КРУГЛЫЕ КНОПКИ: НАВЕРХ И ПОДЕЛИТЬСЯ ════════════════ */
.tools {
  position: fixed;
  right: clamp(14px, 2vw, 26px);
  bottom: calc(clamp(80px, 12vw, 104px) + env(safe-area-inset-bottom));
  z-index: 40;
  display: grid;
  gap: 10px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 320ms var(--out), transform 320ms var(--out);
}
.tools[data-shown] { opacity: 1; transform: none; pointer-events: auto; }
.tool {
  position: relative;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(250,248,244,.92);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(23,19,15,.13);
  transition: transform 180ms var(--out), background-color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.tool svg { width: 21px; height: 21px; fill: currentColor; }
.tool:active { transform: scale(.93); }
.tool[data-done] { background: var(--bronze); color: #fff; border-color: var(--bronze); }
.tool__tip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  padding: 6px 10px;
  border-radius: 4px;
  background: var(--night);
  color: var(--light);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms var(--out);
}
@media (hover: hover) and (pointer: fine) {
  .tool:hover { background: #fff; }
  .tool:hover .tool__tip { opacity: 1; transform: translateY(-50%); }
}
.tool[data-done] .tool__tip { opacity: 1; transform: translateY(-50%); }

/* На телефоне кнопки лежали поверх текста и мешали читать: делаем меньше,
   прижимаем к самому краю и убираем подсказку — там она бесполезна. */
@media (max-width: 620px) {
  .tools {
    right: 10px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    gap: 8px;
  }
  .tool { width: 38px; height: 38px; box-shadow: 0 4px 14px rgba(23,19,15,.18); }
  .tool svg { width: 17px; height: 17px; }
  .tool__tip { display: none; }
}

/* ══ ОГЛАВЛЕНИЕ ═════════════════════════════════════════ */
.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(34px, 4.6vw, 56px);
}
.toc a {
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 13.5px;
  letter-spacing: .01em;
  color: var(--ink-soft);
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.toc a:last-child { border-color: var(--ink); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .toc a:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
}

/* ══ АКЦЕНТНАЯ СТРОКА В ТЁМНОЙ СЕКЦИИ ═══════════════════ */
.accent {
  margin: clamp(26px, 3.4vw, 40px) 0;
  padding: clamp(20px, 2.6vw, 30px) clamp(22px, 3vw, 34px);
  border: 1px solid rgba(169,139,93,.42);
  background: rgba(169,139,93,.08);
  font-family: var(--serif);
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.45;
  letter-spacing: -.006em;
  color: var(--light);
}

/* ══ ПОЯВЛЕНИЕ ══════════════════════════════════════════
   Ничего не появляется из ничего: 10px сдвиг + прозрачность.  */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 620ms var(--out), transform 620ms var(--out);
  transition-delay: var(--d, 0ms);
}
.js .reveal[data-in] { opacity: 1; transform: none; }

/* Первый экран показывается сразу после загрузки, без ожидания прокрутки */
.hero .reveal { transition-duration: 900ms; }

/* ══ ДОСТУПНОСТЬ И НАСТРОЙКИ СИСТЕМЫ ════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero__media img { animation: none; transform: scale(1.02); }
  .hero__scroll-line { animation: none; opacity: .6; }
  .dock { transition: none; }
  .shot img, .btn, .viewer__close, .viewer__nav, .tool, .tools { transition: none; }
  .viewer__img { animation: none; }
  .gallery__lead img { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .dock { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  :root { --ink-soft: #2A241E; --light-soft: #E4DCD0; --line: rgba(23,19,15,.34); --line-dark: rgba(244,239,231,.4); }
  .note { color: #3A342C; }
  .section--dark .note { color: #D2C9BC; }
  .hero__veil { background: linear-gradient(to top, rgba(4,3,3,.97) 0%, rgba(4,3,3,.9) 34%, rgba(4,3,3,.6) 70%, rgba(4,3,3,.5) 100%); }
}

@media print {
  .dock, .hero__scroll, .draft-bar, .tools, .toc { display: none; }
  .js .reveal { opacity: 1; transform: none; }
  .section--dark, .section--final { background: #fff; color: #000; }
}

/* ══ ЗАПРОС ДОКУМЕНТОВ ══════════════════════════════════
   Кнопка стоит в середине страницы (раздел «Сделка») и в конце.
   Окно — родной <dialog>, тот же приём, что у просмотра фотографий:
   Esc, ловушка фокуса и подложка достаются от браузера, а не от нас. */

.zapros {
  display: flex;
  justify-content: center;
  margin: clamp(30px, 4.5vw, 44px) 0 0;
}

.zayavka {
  width: min(430px, calc(100vw - 28px));
  /* Телефон, повёрнутый набок, оставляет под окно полосу в 320 px высотой:
     без этих строк низ формы вместе с кнопкой уходил бы за край.
     Первая строка - для браузеров, которые не знают svh (айфоны до 15.4). */
  max-height: calc(100vh - 24px);
  max-height: calc(100svh - 24px);
  overflow-y: auto;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--night-2);
  color: var(--light);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.zayavka::backdrop { background: rgba(8,7,6,.74); }

/* Появление из 0.96, а не из нуля: предмет не возникает из ничего.
   Окно не привязано к кнопке, поэтому растёт из центра. */
.zayavka[open] { animation: zayavkaVhod 200ms cubic-bezier(.23, 1, .32, 1); }
.zayavka[open]::backdrop { animation: zayavkaFon 200ms ease-out; }

@keyframes zayavkaVhod {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes zayavkaFon { from { opacity: 0; } to { opacity: 1; } }

.zayavka__box {
  position: relative; /* якорь для крестика закрытия */
  padding: clamp(26px, 5vw, 34px) clamp(22px, 5vw, 32px) clamp(22px, 4vw, 28px);
}

/* Пока открыто окно, страница под ним не ездит. */
.zamok-prokrutki, .zamok-prokrutki body { overflow: hidden; }

.zayavka__close {
  position: absolute;
  top: 6px;
  right: 6px;
  /* 44 px - размер, в который палец попадает не целясь. Меньше делать нельзя. */
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--light-soft);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: color 200ms ease, background-color 200ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1);
}
.zayavka__close:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .zayavka__close:hover { color: var(--light); background: rgba(244,239,231,.08); }
}

/* Заголовок формы не должен доезжать до крестика: на экране в 320 px
   «Получить документы» встаёт впритык к нему и цепляет его углом. */
.zayavka__box:not(.zayavka__gotovo) .zayavka__title { padding-right: 46px; }

.zayavka__title {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(25px, 5.4vw, 30px);
  line-height: 1.12;
  letter-spacing: -.018em;
}
.zayavka__lead {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--light-soft);
}

.zayavka__pole { display: block; margin: 0 0 14px; }
.zayavka__podpis {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--light-soft);
}
.zayavka__neobyaz { color: #8C8377; }

.zayavka__vvod {
  display: block;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line-dark);
  border-radius: 3px;
  background: rgba(8,7,6,.55);
  color: var(--light);
  font: inherit;
  font-size: 16px; /* меньше 16px — и телефон сам приближает страницу при вводе */
  transition: border-color 200ms ease, background-color 200ms ease;
}
.zayavka__vvod::placeholder { color: #7C7367; }
.zayavka__vvod:focus {
  outline: none;
  border-color: var(--bronze-lt);
  background: rgba(8,7,6,.75);
}
.zayavka__vvod:focus-visible { outline: 2px solid #C9A876; outline-offset: 2px; }
.zayavka__vvod[aria-invalid="true"] { border-color: #C86B57; }

/* Ловушка для роботов: поле есть в разметке, но человек его не видит и не
   получает фокусом. Заполнено — значит, отправлял не человек. */
.zayavka__lovushka {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.zayavka__otpravit {
  width: 100%;
  margin-top: 6px;
  padding: 15px 26px;
  position: relative;
}
.zayavka__otpravit[disabled] { cursor: progress; opacity: .72; }

.zayavka__oshibka {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: #E5A08D;
}

.zayavka__sogl {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #8C8377;
}

/* Успех: то же окно, другое содержимое. Отдельного окна не поднимаем —
   человек остаётся ровно там, где нажал. */
.zayavka__gotovo { text-align: center; }
.zayavka__znak {
  width: 46px;
  height: 46px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border: 1px solid var(--bronze-lt);
  border-radius: 50%;
  color: var(--bronze-lt);
}
.zayavka__znak svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }

@media (prefers-reduced-motion: reduce) {
  .zayavka[open],
  .zayavka[open]::backdrop { animation: none; }
  .btn:active,
  .zayavka__close:active { transform: none; }
}

.zayavka__gotovo .zayavka__lead a {
  color: var(--bronze-lt);
  text-decoration: none;
  border-bottom: 1px solid rgba(201,168,118,.4);
  white-space: nowrap;
}
.zayavka__gotovo .btn { margin-top: 8px; }