/* Оформление маркетплейса Art Estate.
   Дизайн-код утверждён 4 августа 2026 по макетам «Ночь и медь» и «Полка».
   Единый на всю сетку: шкуры застройщиков здесь не используются — они
   остаются на отдельных лендингах объектов. */

@font-face{font-family:'Playfair';src:url('../ш/playfair-c.woff2') format('woff2');
  unicode-range:U+0400-04FF;font-weight:400;font-display:swap}
@font-face{font-family:'Playfair';src:url('../ш/playfair-l.woff2') format('woff2');
  font-weight:400;font-display:swap}
@font-face{font-family:'Jost';src:url('../ш/jost-c.woff2') format('woff2');
  unicode-range:U+0400-04FF;font-weight:200 400;font-display:swap}
@font-face{font-family:'Jost';src:url('../ш/jost-l.woff2') format('woff2');
  font-weight:200 400;font-display:swap}
@font-face{font-family:'Manrope';src:url('../ш/manrope-c.woff2') format('woff2');
  unicode-range:U+0400-04FF;font-weight:300 500;font-display:swap}
@font-face{font-family:'Manrope';src:url('../ш/manrope-l.woff2') format('woff2');
  font-weight:300 500;font-display:swap}

:root{
  --графит:#0E1012; --уголь:#16181B; --ночь:#08090A;
  --молоко:#F6F3EE; --свет:#EFEBE5;
  --медь:#C28B71; --медь-тём:#9A6547;
  /* Красный только для одного — дома, который мы показываем вперёд всех.
     Оттенок кирпичный, из семьи меди: чистый алый рядом с терракотой
     выглядит чужой наклейкой. */
  --красный:#B23A25;
  --серо:#8A8A88; --серо-тём:#5F625F;
  --полоса:rgba(246,243,238,.14); --полоса-тём:rgba(14,16,18,.12);
  --поле:clamp(20px,4vw,64px);
  --лента:1320px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--молоко);color:var(--графит);
  font:300 16px/1.62 Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.лента{max-width:var(--лента);margin:0 auto;padding:0 var(--поле)}

/* ── типографика ─────────────────────────────────────────────────────── */
.антиква{font-family:Playfair,Georgia,serif;font-weight:400;letter-spacing:-.01em}
h1,h2,h3{font-family:Playfair,Georgia,serif;font-weight:400;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(38px,5.4vw,74px);line-height:1.04}
h2{font-size:clamp(27px,3.2vw,44px);line-height:1.12}
h3{font-size:clamp(19px,2vw,25px);line-height:1.22}
.капс{font-family:Jost,system-ui,sans-serif;font-weight:300;
  text-transform:uppercase;letter-spacing:.26em;font-size:11px}
.надстрочная{font-family:Jost,system-ui,sans-serif;font-weight:200;
  text-transform:uppercase;letter-spacing:.34em;font-size:11.5px;color:var(--медь)}
.лид{font-size:clamp(15px,1.35vw,18px);line-height:1.72;color:var(--серо-тём);max-width:62ch}
.тёмн .лид{color:rgba(246,243,238,.66)}
.тёмн .надстрочная{color:var(--медь)}

/* ── шапка ───────────────────────────────────────────────────────────── */
.шапка{position:sticky;top:0;z-index:40;background:rgba(14,16,18,.90);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--полоса)}
.шапка .лента{display:flex;align-items:center;gap:32px;height:88px}
/* Знак растёт только целиком: высота задана, ширина считается сама. Ни ужать
   по одной оси, ни обрезать поле вокруг него нельзя — форма неприкосновенна. */
.шапка img.знак{height:44px;width:auto}
@media(max-width:560px){.шапка .лента{height:76px}.шапка img.знак{height:36px}}
.меню{display:flex;gap:26px;margin-left:auto}
.меню a{color:rgba(246,243,238,.72);font-family:Jost,sans-serif;font-weight:300;
  text-transform:uppercase;letter-spacing:.16em;font-size:11.5px;
  padding-bottom:3px;border-bottom:1px solid transparent;transition:.2s}
.меню a:hover{color:var(--молоко);border-color:var(--медь)}
.шапка .кнопка{margin-left:8px}
@media(max-width:860px){.меню{display:none}}

/* ── кнопки ──────────────────────────────────────────────────────────── */
.кнопка{display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border:1px solid var(--медь);color:var(--медь);
  background:transparent;cursor:pointer;
  font-family:Jost,sans-serif;font-weight:300;text-transform:uppercase;
  letter-spacing:.2em;font-size:11px;transition:.22s}
.кнопка:hover{background:var(--медь);color:var(--ночь)}
.кнопка.залитая{background:var(--медь);color:var(--ночь)}
.кнопка.залитая:hover{background:var(--медь-тём);border-color:var(--медь-тём);color:var(--молоко)}
.светл .кнопка{border-color:var(--медь-тём);color:var(--медь-тём)}
.светл .кнопка:hover{background:var(--медь-тём);color:var(--молоко)}
/* залитая кнопка остаётся залитой и на светлых страницах: иначе медный текст
   на медном фоне — надпись пропадает */
.светл .кнопка.залитая{background:var(--медь);border-color:var(--медь);color:var(--ночь)}
.светл .кнопка.залитая:hover{background:var(--медь-тём);border-color:var(--медь-тём);
  color:var(--молоко)}

/* ── первый экран ────────────────────────────────────────────────────── */
.экран{position:relative;min-height:clamp(560px,88vh,860px);
  display:flex;align-items:flex-end;background:var(--ночь);overflow:hidden}
.экран>img.фон{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Вуаль стала легче 6 августа 2026, и дважды за один день. Раньше она держала
   .62 сверху и .80 слева и была рассчитана на любой кадр — в том числе на
   случайно тёмный. Теперь кадр выбирается по светлоте (см. ниже), и такой
   запас не нужен: под ним гасли и хороший фасад, и небо. Второй заход снял
   ещё треть: даже с выбранным светлым кадром левые сорок процентов экрана
   читались как чёрное поле. Текст держится не затемнением, а тенью под
   буквами — она стоит ниже, у «.экран .лента». */
.вуаль{position:absolute;inset:0;background:
  linear-gradient(to bottom,rgba(8,9,10,.34) 0%,rgba(8,9,10,.10) 34%,
  rgba(8,9,10,.30) 70%,rgba(8,9,10,.74) 100%)}
.вуаль::after{content:'';position:absolute;inset:0;background:
  linear-gradient(to right,rgba(8,9,10,.52) 0%,rgba(8,9,10,.28) 44%,
  rgba(8,9,10,.03) 74%,transparent 100%)}
/* Тёмный кадр. Вуаль нужна не сама по себе, а чтобы белый заголовок читался
   поверх светлого неба и светлого фасада. На тёмном кадре она не нужна вовсе:
   текст и так читается, а плотная вуаль поверх тёмной фотографии гасит её
   насмерть — 6 августа 2026 первый экран главной стал чёрным прямоугольником
   с белой строчкой. Поэтому вуаль слабеет ровно там, где кадр и без неё тёмный.
   Насколько кадр светлый, считает «яркость.py»; порог ставит сборщик. */
.экран.тёмный-кадр .вуаль{background:linear-gradient(to bottom,
  rgba(8,9,10,.22) 0%,rgba(8,9,10,.06) 34%,rgba(8,9,10,.18) 70%,
  rgba(8,9,10,.58) 100%)}
.экран.тёмный-кадр .вуаль::after{background:linear-gradient(to right,
  rgba(8,9,10,.32) 0%,rgba(8,9,10,.16) 44%,rgba(8,9,10,.02) 74%,transparent 100%)}
/* Читаемость белого текста держит тень под буквами, а не затемнение всего
   кадра. Тень видна только вплотную к буквам — фотография остаётся
   фотографией. Затемнением решать это дороже: оно съедает весь экран. */
.экран .лента{position:relative;z-index:2;padding-bottom:clamp(44px,6vw,84px);
  padding-top:clamp(60px,10vw,120px);width:100%;color:var(--молоко);
  text-shadow:0 1px 2px rgba(8,9,10,.6),0 4px 34px rgba(8,9,10,.85)}
.экран h1{max-width:16ch;margin:18px 0 0}
.экран .лид{margin-top:22px;color:rgba(246,243,238,.94)}
.экран .цифры span{color:rgba(246,243,238,.86)}
/* Незалитая кнопка на светлом фасаде теряется: у неё только контур. Своя
   тёмная подложка возвращает ей край, не трогая кадр вокруг. */
.экран .кнопка:not(.залитая){background:rgba(8,9,10,.30);backdrop-filter:blur(3px)}
.подвес{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}

/* цифры под первым экраном */
.цифры{display:flex;gap:clamp(28px,5vw,72px);margin-top:46px;flex-wrap:wrap}
.цифры b{display:block;font-family:Playfair,serif;font-weight:400;
  font-size:clamp(26px,3vw,38px);line-height:1;color:var(--молоко)}
.цифры span{display:block;margin-top:9px;color:rgba(246,243,238,.52);
  font-family:Jost,sans-serif;font-weight:300;text-transform:uppercase;
  letter-spacing:.2em;font-size:10.5px}

/* ── полки объектов ──────────────────────────────────────────────────── */
.раздел{padding:clamp(56px,7vw,104px) 0}
.раздел.тёмный{background:var(--графит);color:var(--молоко)}
.раздел.угольный{background:var(--уголь);color:var(--молоко)}
.заголовок-раздела{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;margin-bottom:clamp(28px,3.4vw,46px);flex-wrap:wrap}
.заголовок-раздела .лид{margin-top:14px}

.полка{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(18px,2.2vw,32px)}
/* Карточки в ряду держим одной высоты, а цену прижимаем к низу: у домов
   разной длины названия полка иначе идёт лесенкой. */
.карточка{display:flex;flex-direction:column;position:relative;background:#fff;
  border:1px solid var(--полоса-тём);transition:.24s}
.тёмный .карточка{background:var(--уголь);border-color:var(--полоса)}
.карточка:hover{transform:translateY(-3px);border-color:var(--медь)}
/* 16:10 — та же пропорция, в которую нарезаны все кадры. Совпадение важно:
   иначе обложка ещё раз обрезается уже браузером, и у домов пропадает то
   небо, то первый этаж. */
.карточка .снимок{position:relative;aspect-ratio:16/10;background:#20232619;overflow:hidden}
.карточка .снимок img{width:100%;height:100%;object-fit:cover;transition:.5s}
.карточка:hover .снимок img{transform:scale(1.035)}
.карточка .нет-снимка{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(135deg,#1b1e21,#0E1012);
  color:rgba(246,243,238,.22);font-family:Playfair,serif;font-size:38px}
.карточка .метка{position:absolute;left:0;bottom:0;background:rgba(8,9,10,.78);
  color:var(--медь);padding:8px 14px;
  font-family:Jost,sans-serif;font-weight:300;text-transform:uppercase;
  letter-spacing:.2em;font-size:10px}
/* Красная лента главного дома. Стоит в правом верхнем углу снимка — по
   диагонали от метки класса, чтобы две подписи не слиплись в одну кашу. */
.карточка .лента-главного{position:absolute;right:0;top:0;background:var(--красный);
  color:var(--молоко);padding:8px 14px;
  font-family:Jost,sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:.16em;font-size:10px}
.карточка .нутро{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column}
.карточка h3{font-size:22px}
.карточка .гео{margin-top:8px;color:var(--серо-тём);font-size:13.5px;
  min-height:2.9em}
.тёмный .карточка .гео{color:rgba(246,243,238,.5)}
.карточка .строки{margin-top:16px;flex:0 0 auto;border-top:1px solid var(--полоса-тём);padding-top:14px;
  display:flex;flex-direction:column;gap:7px}
.тёмный .карточка .строки{border-color:var(--полоса)}
.карточка .строки div{display:flex;justify-content:space-between;gap:12px;font-size:13.5px}
.карточка .строки span:first-child{color:var(--серо-тём)}
.тёмный .карточка .строки span:first-child{color:rgba(246,243,238,.44)}
.карточка .цена{margin-top:auto;padding-top:18px;font-family:Playfair,serif;font-size:23px;color:var(--медь-тём)}
.тёмный .карточка .цена{color:var(--медь)}
.карточка .цена small{font-family:Jost,sans-serif;font-weight:300;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--серо);margin-right:8px}

/* ── срезы: ссылки на соседние страницы ──────────────────────────────── */
.срезы{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.срезы a{border:1px solid var(--полоса-тём);padding:10px 18px;
  font-family:Jost,sans-serif;font-weight:300;font-size:12px;letter-spacing:.1em;
  transition:.2s}
.срезы a:hover{border-color:var(--медь-тём);color:var(--медь-тём)}
.тёмный .срезы a{border-color:var(--полоса)}
.тёмный .срезы a:hover{border-color:var(--медь);color:var(--медь)}

/* ── указатель подборок на главной ───────────────────────────────────────
   Три списка в ряд: районы, метро, классы. На телефоне складываются в один
   столбец. Число домов справа от названия — чтобы человек не заходил в
   подборку из трёх домов, рассчитывая на выбор. */
.указатель{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(26px,3.4vw,54px);margin-top:clamp(26px,3vw,40px)}
.указатель h3{font-family:Jost,sans-serif;font-weight:400;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--серо-тём);
  padding-bottom:12px;border-bottom:1px solid var(--полоса-тём)}
.указатель h3 a:hover{color:var(--медь-тём)}
.указатель ul{list-style:none;margin-top:6px}
.указатель li{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;padding:9px 0;border-bottom:1px solid var(--полоса-тём);font-size:14.5px}
.указатель li a{transition:.2s}
.указатель li a:hover{color:var(--медь-тём)}
.указатель li span{font-family:Jost,sans-serif;font-weight:300;font-size:11.5px;
  letter-spacing:.08em;color:var(--серо);white-space:nowrap}
@media (max-width:860px){.указатель{grid-template-columns:1fr}}

/* ── хлебные крошки ──────────────────────────────────────────────────── */
.крошки{padding:22px 0 0;font-family:Jost,sans-serif;font-weight:300;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--серо)}
.крошки a:hover{color:var(--медь-тём)}
.крошки span{margin:0 10px;opacity:.5}

/* ── шапка страницы среза ────────────────────────────────────────────────
   Устроена как шапка объекта: тот же графит, те же цифры плиткой. Полка и
   карточка дома должны читаться как один сайт, а не как два. */
.шапка-полки{background:var(--графит);color:var(--молоко);
  padding:clamp(30px,4vw,52px) 0 clamp(30px,4vw,48px)}
.шапка-полки .крошки{padding:0 0 22px;color:rgba(246,243,238,.42)}
.шапка-полки .крошки a:hover{color:var(--медь)}
.шапка-полки .надстрочная{color:var(--медь)}
.шапка-полки h1{max-width:20ch;margin-top:14px;
  font-size:clamp(32px,4.2vw,58px)}
.шапка-полки .лид{margin-top:20px;color:rgba(246,243,238,.66)}
.шапка-полки .факты{margin-top:clamp(26px,3.4vw,40px)}

/* ── текстовый блок страницы среза ───────────────────────────────────── */
.текст{max-width:74ch;font-size:16.5px;line-height:1.78;color:#2a2d30}
.текст p{margin:0 0 18px}
.тёмный .текст{color:rgba(246,243,238,.74)}

/* ── о компании и QR ─────────────────────────────────────────────────── */
.о-компании{background:var(--графит);color:var(--молоко);
  padding:clamp(48px,6vw,88px) 0;border-top:1px solid var(--полоса)}
.о-компании .лента{display:grid;grid-template-columns:1.35fr .9fr;
  gap:clamp(30px,5vw,72px);align-items:center}
.о-компании .цифры{margin-top:32px}
.канал{border:1px solid var(--полоса);padding:28px;display:flex;gap:24px;align-items:center}
.канал .код{flex:0 0 auto;background:var(--молоко);padding:11px;line-height:0}
.канал h3{font-size:20px;color:var(--молоко)}
.канал p{margin:9px 0 0;font-size:13.5px;line-height:1.6;color:rgba(246,243,238,.6)}
.канал .имя{margin-top:12px;color:var(--медь);font-family:Jost,sans-serif;
  font-weight:300;letter-spacing:.16em;font-size:11.5px;text-transform:uppercase}
@media(max-width:900px){
  .о-компании .лента{grid-template-columns:1fr}
  /* QR на телефоне не показываем: снимать его нечем, а место он съедает */
  .канал .код{display:none}
  .канал{padding:22px}
}

/* ── подвал ──────────────────────────────────────────────────────────── */
.подвал{background:var(--ночь);color:rgba(246,243,238,.52);
  padding:clamp(40px,5vw,64px) 0;font-size:13px}
.подвал .лента{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px}
.подвал h4{font-family:Jost,sans-serif;font-weight:300;text-transform:uppercase;
  letter-spacing:.22em;font-size:10.5px;color:var(--медь);margin:0 0 16px}
.подвал ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.подвал a:hover{color:var(--молоко)}
.подвал .оговорка{margin-top:36px;padding-top:24px;border-top:1px solid var(--полоса);
  font-size:11.5px;line-height:1.7;color:rgba(246,243,238,.34)}
@media(max-width:820px){.подвал .лента{grid-template-columns:1fr}}

/* Дом снят с продажи: звезду «на сайт» в базе сняли. Плашка заметная, но не
   тревожная — красного здесь не надо: человек не сделал ничего плохого, ему
   просто нужно сказать правду до того, как он прочтёт цены. */
.плашка-закрыто{display:inline-block;margin:0 0 14px;padding:9px 16px;
  border-radius:999px;background:rgba(246,243,238,.16);
  border:1px solid rgba(246,243,238,.34);color:var(--молоко);
  font-size:14px;line-height:1.35;letter-spacing:.01em;backdrop-filter:blur(3px)}

/* Красная пометка на первом экране дома: что в нём главное сегодня. Тот же
   кирпичный красный, что и на ленте карточки, — человек, нажавший на ленту,
   должен узнать её на странице. */
.плашка-главное{display:inline-block;margin:0 0 14px;padding:8px 16px;
  border-radius:999px;background:var(--красный);color:var(--молоко);
  font-family:Jost,sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:.16em;font-size:11px;line-height:1.35}

/* Та же плашка на первом экране главной, но кликабельная: главный дом должен
   быть виден до прокрутки, а не только карточкой в полке ниже сгиба. */
.ссылка-главного{display:inline-flex;align-items:center;gap:14px;
  margin:0 0 22px;padding:13px 24px;text-decoration:none;
  font-size:13px;box-shadow:0 8px 30px rgba(178,58,37,.45);
  transition:background .2s,box-shadow .2s,transform .2s}
.ссылка-главного:hover{background:#8E2C1C;transform:translateY(-1px);
  box-shadow:0 10px 34px rgba(178,58,37,.6)}
.ссылка-главного b{font-weight:400}
.ссылка-главного span{opacity:.9;letter-spacing:.06em;text-transform:none;
  font-size:15px;font-family:Playfair,Georgia,serif}
.ссылка-главного i{font-style:normal;font-size:15px}
@media(max-width:640px){.ссылка-главного{gap:9px;padding:11px 16px;
  font-size:11px}.ссылка-главного span{font-size:13px}}

/* ── карточка объекта ────────────────────────────────────────────────── */
.объект-шапка{background:var(--графит);color:var(--молоко);
  padding:clamp(44px,5vw,72px) 0 clamp(30px,4vw,48px)}
/* Шапка с фотографией дома. Высота меньше, чем у первого экрана полки: там
   фон — единственное содержание, а здесь под ним сразу идёт галерея, и
   гнать её за край экрана незачем. */
.объект-шапка.с-фоном{position:relative;overflow:hidden;background:var(--ночь);
  min-height:clamp(460px,72vh,700px);display:flex;align-items:flex-end;
  padding-top:clamp(60px,9vw,110px)}
.объект-шапка>img.фон{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
.объект-шапка.с-фоном>.лента{position:relative;z-index:2;width:100%}
/* Затемнение слева плотнее, чем на полках: там на фоне стоит короткий
   заголовок, здесь — заголовок в пять строк, лид и строка фактов. Светлый
   фасад под мелким текстом съедает его целиком. */
.объект-шапка.с-фоном .вуаль::after{background:linear-gradient(to right,
  rgba(8,9,10,.62) 0%,rgba(8,9,10,.42) 42%,rgba(8,9,10,.12) 76%,transparent 100%)}
.объект-шапка.с-фоном .лента{text-shadow:0 1px 2px rgba(8,9,10,.6),
  0 4px 34px rgba(8,9,10,.85)}
/* Мелкий текст поверх фотографии. Крупный заголовок держится сам, а лид и
   крошки в четверть прозрачности на светлом фасаде исчезают: буквы тонкие,
   и им не за что зацепиться. На тёмном фоне такая приглушённость читалась,
   на кадре — нет. */
.объект-шапка.с-фоном .лид{color:rgba(246,243,238,.94)}
.объект-шапка.с-фоном .крошки{color:rgba(246,243,238,.72)}
/* Надстрочная строка над заголовком набрана медью — на графите она читается,
   на фотографии пропадает: тонкий вес, широкая разрядка и цвет, близкий к
   кирпичу и штукатурке. Поверх кадра она становится светлой. */
.экран .надстрочная,.объект-шапка.с-фоном .надстрочная{color:rgba(246,243,238,.88)}
/* На узком экране текст идёт во всю ширину, и затемнение слева направо его уже
   не спасает: правый край строки ложится на светлый фасад. Поэтому на телефоне
   вуаль разворачивается снизу вверх — она гуще там, где стоит текст. */
@media(max-width:900px){
  .объект-шапка.с-фоном .вуаль::after{background:linear-gradient(to top,
    rgba(8,9,10,.78) 0%,rgba(8,9,10,.68) 46%,rgba(8,9,10,.44) 78%,rgba(8,9,10,.24) 100%)}
}
/* То же послабление для тёмного кадра. На странице дома оно нужнее, чем на
   полке: там кадр выбирается из всей витрины и светлый находится всегда, а у
   отдельного дома снимков пять-восемь, и светлого может не быть ни одного. */
.объект-шапка.с-фоном.тёмный-кадр .вуаль{background:linear-gradient(to bottom,
  rgba(8,9,10,.22) 0%,rgba(8,9,10,.06) 34%,rgba(8,9,10,.18) 70%,
  rgba(8,9,10,.58) 100%)}
.объект-шапка.с-фоном.тёмный-кадр .вуаль::after{background:linear-gradient(to right,
  rgba(8,9,10,.38) 0%,rgba(8,9,10,.22) 42%,rgba(8,9,10,.06) 76%,transparent 100%)}
@media(max-width:900px){
  .объект-шапка.с-фоном.тёмный-кадр .вуаль::after{background:linear-gradient(to top,
    rgba(8,9,10,.56) 0%,rgba(8,9,10,.46) 46%,rgba(8,9,10,.28) 78%,rgba(8,9,10,.14) 100%)}
}
.объект-шапка.с-фоном .факты div{background:rgba(20,22,24,.72);
  backdrop-filter:blur(2px)}
.объект-шапка .крошки{padding:0 0 22px;color:rgba(246,243,238,.42)}
.объект-шапка .крошки a:hover{color:var(--медь)}
.объект-шапка h1{max-width:18ch;margin-top:16px}
.факты{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--полоса);margin-top:clamp(30px,4vw,46px)}
.факты div{background:var(--графит);padding:20px 22px}
.факты b{display:block;font-family:Playfair,serif;font-weight:400;font-size:21px}
.факты span{display:block;margin-top:7px;font-family:Jost,sans-serif;font-weight:300;
  text-transform:uppercase;letter-spacing:.2em;font-size:10px;color:rgba(246,243,238,.44)}

/* ── галерея объекта ─────────────────────────────────────────────────────
   Кадры приходят нарезанными в 16:10 — одна пропорция на всю витрину. Сетку
   строим под неё: крупный кадр слева, четыре столбиком справа, и высоты
   сходятся сами, без подгонки. */
.галерея{display:grid;grid-template-columns:2.06fr 1fr;gap:8px;background:var(--ночь)}
.галерея .кадр{position:relative;padding:0;margin:0;border:0;background:#0b0d0e;
  cursor:zoom-in;overflow:hidden;display:block;line-height:0}
.галерея .кадр img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.галерея .кадр:hover img{transform:scale(1.03)}
.галерея .кадр:focus-visible{outline:2px solid var(--медь);outline-offset:-2px}
.галерея .столбик{display:grid;grid-template-rows:repeat(4,1fr);gap:8px}
.галерея .столбик .кадр img{aspect-ratio:auto;height:100%}
/* Лупа на крупном кадре: без неё не видно, что снимок открывается. */
.галерея .лупа{position:absolute;right:16px;bottom:16px;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;color:var(--молоко);
  background:rgba(8,9,10,.52);backdrop-filter:blur(6px);
  border:1px solid rgba(246,243,238,.22);opacity:0;transition:.24s}
.галерея .лупа svg{width:20px;height:20px}
.галерея .кадр:hover .лупа{opacity:1}
/* Счётчик на последнем кадре столбика — вместо кнопки «ещё N фото»: место
   то же, а нажать можно прямо по снимку. */
.галерея .сколько-ещё{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;background:rgba(8,9,10,.62);color:var(--молоко);
  font-family:Playfair,serif;font-size:clamp(22px,2.4vw,30px);letter-spacing:.02em}
.под-галереей{display:flex;align-items:center;gap:clamp(16px,3vw,34px);
  margin-top:16px;flex-wrap:wrap}
.под-галереей .сноска{margin:0;flex:1 1 280px}
@media(max-width:820px){
  .галерея{grid-template-columns:1fr}
  .галерея .столбик{grid-template-rows:none;grid-template-columns:repeat(4,1fr)}
  .галерея .столбик .кадр img{aspect-ratio:1/1}
}

/* ── слайдер ─────────────────────────────────────────────────────────────
   Открывается поверх страницы. Кадр показываем целиком (contain), а не
   обрезаем: человек открыл его именно чтобы рассмотреть. Фон — ночь, чтобы
   ничего не спорило со снимком. */
.слайдер{position:fixed;inset:0;z-index:90;background:rgba(6,7,8,.97);
  display:flex;flex-direction:column;opacity:0;transition:opacity .22s}
.слайдер.видно{opacity:1}
.слайдер[hidden]{display:none}
.слайдер .верх{display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:16px clamp(14px,3vw,28px);color:rgba(246,243,238,.72);
  font-family:Jost,sans-serif;font-weight:300;text-transform:uppercase;
  letter-spacing:.2em;font-size:11px;flex:0 0 auto}
.слайдер .счёт{color:var(--медь)}
.слайдер .закрыть{background:none;border:0;color:rgba(246,243,238,.6);cursor:pointer;
  font-size:30px;line-height:1;padding:2px 8px}
.слайдер .закрыть:hover{color:var(--медь)}
.слайдер .сцена{position:relative;flex:1 1 auto;min-height:0;display:flex;
  align-items:center;justify-content:center;padding:0 clamp(8px,5vw,72px)}
.слайдер .сцена img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;opacity:0;transition:opacity .2s}
.слайдер .сцена img.готов{opacity:1}
.слайдер .шаг{position:absolute;top:50%;transform:translateY(-50%);
  width:clamp(44px,4.4vw,58px);height:clamp(44px,4.4vw,58px);
  display:flex;align-items:center;justify-content:center;
  background:rgba(246,243,238,.06);border:1px solid rgba(246,243,238,.18);
  color:var(--молоко);cursor:pointer;transition:.2s}
.слайдер .шаг:hover{background:var(--медь);border-color:var(--медь);color:var(--ночь)}
.слайдер .шаг svg{width:20px;height:20px}
.слайдер .шаг.назад{left:clamp(6px,1.6vw,22px)}
.слайдер .шаг.вперёд{right:clamp(6px,1.6vw,22px)}
.слайдер .низ{flex:0 0 auto;padding:clamp(10px,1.6vw,18px) clamp(14px,3vw,28px)
  clamp(14px,2vw,24px)}
.слайдер .подпись{margin:0 0 12px;color:rgba(246,243,238,.62);font-size:13.5px;
  text-align:center;min-height:1.4em}
/* Лента миниатюр: по ней видно, сколько ещё осталось, и можно прыгнуть сразу
   к нужному кадру — листать двенадцать снимков стрелками никто не станет. */
.слайдер .лента-кадров{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:thin;justify-content:flex-start}
.слайдер .лента-кадров button{flex:0 0 auto;width:104px;padding:0;border:0;
  background:none;cursor:pointer;line-height:0;opacity:.42;transition:.2s;
  box-shadow:inset 0 0 0 2px transparent}
.слайдер .лента-кадров button:hover{opacity:.8}
.слайдер .лента-кадров button.сейчас{opacity:1;box-shadow:inset 0 0 0 2px var(--медь)}
.слайдер .лента-кадров img{width:100%;aspect-ratio:16/10;object-fit:cover}
@media(max-width:640px){
  .слайдер .лента-кадров button{width:76px}
  .слайдер .верх{letter-spacing:.14em}
}

/* ── страница объекта: разделы ───────────────────────────────────────── */
/* Полторы тысячи слов подряд не читаются. Разделы чередуют фон, у каждого
   своя надстрочная — глаз цепляется за нужный и пропускает остальное. */
/* ── кадр рядом с текстом раздела ────────────────────────────────────────
   Текст держит свою меру строки (74ch), кадр занимает то место, которое
   раньше пустовало справа. Кадр «липкий»: раздел длинный, и снимок должен
   быть виден, пока читают про него, а не уехать вверх на втором абзаце. */
.нутро-раздела{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.раздел.с-кадром .нутро-раздела{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);align-items:start}
.раздел.с-кадром .нутро-раздела.кадр-слева{
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
.раздел.с-кадром .кадр-слева .кадр-раздела{order:-1}
.кадр-раздела{margin:0;position:sticky;top:clamp(24px,4vw,48px)}
.кадр-раздела button{position:relative;display:block;width:100%;padding:0;margin:0;
  border:0;background:#0b0d0e;cursor:zoom-in;overflow:hidden;line-height:0}
.кадр-раздела img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.кадр-раздела button:hover img{transform:scale(1.03)}
.кадр-раздела button:focus-visible{outline:2px solid var(--медь);outline-offset:-2px}
.кадр-раздела .лупа{position:absolute;right:12px;bottom:12px;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;color:var(--молоко);
  background:rgba(8,9,10,.52);backdrop-filter:blur(6px);
  border:1px solid rgba(246,243,238,.22);opacity:0;transition:.24s}
.кадр-раздела .лупа svg{width:18px;height:18px}
.кадр-раздела button:hover .лупа{opacity:1}
.кадр-раздела figcaption{margin-top:10px;font-family:Jost,sans-serif;font-weight:300;
  font-size:12.5px;line-height:1.5;color:var(--серо-тём);letter-spacing:.01em}
@media(max-width:900px){
  /* На телефоне кадр идёт над текстом: снимок шириной в пол-экрана рядом с
     колонкой в шесть слов не читается ни как фотография, ни как текст. */
  .раздел.с-кадром .нутро-раздела,
  .раздел.с-кадром .нутро-раздела.кадр-слева{grid-template-columns:minmax(0,1fr)}
  .кадр-раздела{position:static;margin-bottom:26px;order:-1}
}

.раздел.на-свету{background:#fff}
.раздел + .раздел{border-top:1px solid var(--полоса-тём)}
.раздел .заголовок-раздела h2{max-width:20ch}
.раздел .заголовок-раздела .надстрочная{margin-bottom:12px}

/* Рамку рисуем на ячейках, а не на сетке: в последнем ряду ячеек бывает
   меньше, и общая заливка оставляла серый хвост пустоты. */
.таблица-дома{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:1px}
.таблица-дома div{background:#fff;padding:18px 20px;
  box-shadow:0 0 0 1px var(--полоса-тём)}
.таблица-дома span{display:block;font-family:Jost,sans-serif;font-weight:300;
  text-transform:uppercase;letter-spacing:.2em;font-size:10px;color:var(--серо)}
.таблица-дома b{display:block;margin-top:8px;font-weight:400;font-size:16.5px;
  line-height:1.4}
.раздел:not(.на-свету) .таблица-дома div{background:var(--молоко)}

/* Цены по типам квартир. Три колонки, цена справа и крупнее: глаз идёт по
   правому краю, а тип квартиры читается уже потом. */
.цены-таблица{border-top:1px solid var(--полоса-тём);max-width:92ch}
.цены-таблица .шапка-строк,.цены-таблица .строка{display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(90px,.8fr) minmax(120px,.9fr);
  gap:16px;align-items:baseline;padding:16px 2px;
  border-bottom:1px solid var(--полоса-тём)}
.цены-таблица .шапка-строк span{font-family:Jost,sans-serif;font-weight:300;
  text-transform:uppercase;letter-spacing:.2em;font-size:10px;color:var(--серо)}
.цены-таблица .тип{font-size:16px}
.цены-таблица .тип small{display:block;margin-top:4px;font-size:12.5px;
  color:var(--серо);line-height:1.5}
.цены-таблица .площадь{font-family:Jost,sans-serif;font-weight:300;
  font-size:15px;color:var(--серо)}
.цены-таблица .цена{font-size:17px;text-align:right;white-space:nowrap}
.цены-таблица .строка:hover{background:rgba(194,139,113,.06)}
@media(max-width:560px){
  .цены-таблица .шапка-строк{display:none}
  .цены-таблица .строка{grid-template-columns:1fr auto;row-gap:4px}
  .цены-таблица .тип{grid-column:1/3}
  .цены-таблица .цена{text-align:right}
}

.планировки{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:clamp(12px,1.6vw,20px)}
.планировки a{display:block;background:#fff;border:1px solid var(--полоса-тём);
  padding:14px;transition:.2s}
.планировки a:hover{border-color:var(--медь);transform:translateY(-2px)}
.планировки img{width:100%;height:100%;object-fit:contain;aspect-ratio:3/4}

/* Что рядом с домом. Колонки по темам, в каждой — названия с расстоянием.
   Название набрано обычным кеглем, а расстояние мелким и справа: человек
   ищет глазами знакомое имя школы или парка, а не число минут. */
/* Что рядом: слева карта, справа списки мест. До 5 августа 2026 списки шли
   во всю ширину сеткой auto-fit, и последний ряд почти всегда оставался
   неполным — справа внизу зияла пустота в треть экрана. Карта эту пустоту не
   затыкает, а отвечает на вопрос, которого списку не задать: «а это далеко?»
   Карта липнет к экрану, пока читаются списки, — так же, как кадры в
   разделах выше. */
.окружение-с-картой{display:grid;grid-template-columns:minmax(300px,7fr) 11fr;
  gap:clamp(22px,2.6vw,38px);align-items:start}
.окружение{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(20px,2.4vw,34px)}

.карта-дома{position:sticky;top:96px}
.карта-полотно{position:relative;overflow:hidden;border-radius:3px;
  border:1px solid var(--полоса-тём);background:#e8e3dc}
/* Квадратики разложены не в точках, а в долях полотна — карта тянется вместе
   с колонкой, и метка при этом не сползает с дома. */
.карта-полотно img{position:absolute;display:block;max-width:none;
  filter:saturate(.72) contrast(.96)}
.карта-метка{position:absolute;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;
  border-radius:50%;background:var(--медь);box-shadow:0 0 0 3px #fff,0 2px 8px rgba(0,0,0,.32);z-index:3}
.карта-круг{position:absolute;aspect-ratio:1;border-radius:50%;z-index:2;
  transform:translate(-50%,-50%);
  border:1px dashed rgba(166,90,52,.62);background:rgba(166,90,52,.09)}
.карта-дома figcaption{margin-top:9px;font-family:Jost,sans-serif;font-weight:300;
  font-size:11.5px;line-height:1.5;color:var(--серо)}

@media (max-width:900px){
  .окружение-с-картой{grid-template-columns:1fr}
  .карта-дома{position:static;order:-1}
}
.группа-мест h3{font-family:Jost,sans-serif;font-weight:400;font-size:12px;
  text-transform:uppercase;letter-spacing:.18em;color:var(--медь-тём);
  padding-bottom:10px;border-bottom:1px solid var(--полоса-тём)}
.группа-мест ul{list-style:none;margin-top:4px}
.группа-мест li{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;padding:10px 0;border-bottom:1px solid var(--полоса-тём)}
.группа-мест li b{font-weight:400;font-size:15.5px;line-height:1.45}
.группа-мест li span{font-family:Jost,sans-serif;font-weight:300;font-size:11.5px;
  color:var(--серо);white-space:nowrap}

/* Ход стройки. Лента с датами слева: колонка дат образует вертикаль, по
   которой видно, что работа идёт, ещё до того как прочитан первый отчёт. */
.лента-стройки{max-width:84ch;border-top:1px solid var(--полоса-тём)}
.отчёт{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:clamp(16px,2vw,32px);
  padding:20px 2px;border-bottom:1px solid var(--полоса-тём)}
.отчёт .когда{font-family:Jost,sans-serif;font-weight:300;font-size:12px;
  text-transform:uppercase;letter-spacing:.16em;color:var(--медь-тём);padding-top:3px}
.отчёт p{margin:0;line-height:1.75;color:#2a2d30}
@media(max-width:640px){.отчёт{grid-template-columns:1fr;gap:6px}}

.вопросы{border-top:1px solid var(--полоса-тём);max-width:88ch}
.вопросы details{border-bottom:1px solid var(--полоса-тём)}
.вопросы summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;
  position:relative;font-family:Playfair,Georgia,serif;font-size:clamp(17px,1.6vw,21px)}
.вопросы summary::-webkit-details-marker{display:none}
.вопросы summary::after{content:'+';position:absolute;right:6px;top:50%;
  transform:translateY(-50%);color:var(--медь-тём);font:300 24px Jost,sans-serif}
.вопросы details[open] summary::after{content:'−'}
.вопросы p{margin:0;padding:0 40px 24px 0;max-width:74ch;line-height:1.78;
  color:#2a2d30}

.сноска{margin:22px 0 0;font-size:12.5px;line-height:1.7;color:var(--серо);
  max-width:70ch}

/* виртуальный тур: не грузится, пока не попросили */
.тур{position:relative;margin-top:clamp(30px,4vw,48px);background:var(--ночь);
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden}
.тур img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.тур .кнопка{position:relative;z-index:2;background:rgba(8,9,10,.6)}
.тур iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ── заявка ──────────────────────────────────────────────────────────── */
.заявка{background:var(--уголь);color:var(--молоко);padding:clamp(48px,6vw,88px) 0}
.заявка form{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;margin-top:30px}
.заявка input{background:transparent;border:0;border-bottom:1px solid var(--полоса);
  color:var(--молоко);padding:14px 2px;font:300 15px Manrope,sans-serif}
.заявка input:focus{outline:0;border-color:var(--медь)}
.заявка input::placeholder{color:rgba(246,243,238,.38)}
.заявка .ловушка{position:absolute;left:-9999px;width:1px;height:1px}
@media(max-width:760px){.заявка form{grid-template-columns:1fr}}

/* Согласие на обработку данных. Галочка, а не строка мелким шрифтом под
   кнопкой: закон требует согласия осознанного, и доказывать его нам. Не
   предустановлена — предустановленная не считается согласием вовсе.
   Живёт во всех трёх формах сразу, поэтому стоит здесь, а не в каждой. */
.согласие{display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  font-size:12.5px;line-height:1.6;color:rgba(246,243,238,.55);margin-top:4px}
.согласие input{appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:17px;height:17px;margin:1px 0 0;border:1px solid var(--полоса);
  background:transparent;cursor:pointer;position:relative}
.согласие input:checked{border-color:var(--медь);background:var(--медь)}
.согласие input:checked::after{content:'';position:absolute;left:5px;top:1px;
  width:4px;height:9px;border:solid var(--графит);border-width:0 2px 2px 0;
  transform:rotate(42deg)}
.согласие input:focus-visible{outline:2px solid var(--медь);outline-offset:2px}
.согласие a{color:rgba(246,243,238,.8);border-bottom:1px solid rgba(194,139,113,.5)}
.согласие a:hover{color:var(--медь)}
.согласие.неверно{color:#C2716F}
.согласие.неверно input{border-color:#C2716F}

/* Спрятанное прячется всегда. Без этой строки блок «до-отправки» в зове
   оставался на месте после отправки: у него класс «лента», а у «.зов .лента»
   стоит display:flex, и он перебивал hidden. Человек видел разом и «спасибо»,
   и свою форму — и отправлял второй раз. В CRM от этого дубли. */
[hidden]{display:none!important}

/* Что не так — словами. Красная рамка вокруг поля говорит «здесь ошибка»,
   но не говорит какая: человек видел только, что кнопка не срабатывает. */
.строка-ответа{margin:0;font-size:13px;line-height:1.6;display:none}
.строка-ответа.видно{display:block}
.строка-ответа.плохо{color:#C2716F}
.строка-ответа.ход{color:rgba(246,243,238,.6)}

/* Страница о персональных данных: бумага, а не витрина. Одна колонка,
   крупный межстрочный, никаких кадров — её читают, а не разглядывают. */
.бумага{background:var(--молоко);color:var(--графит);
  padding:clamp(40px,5vw,72px) 0 clamp(56px,7vw,96px)}
.бумага .лента{max-width:76ch}
.бумага h2{margin:clamp(30px,4vw,46px) 0 14px;font-size:clamp(19px,2vw,25px)}
.бумага p,.бумага li{line-height:1.8;color:#2a2d30}
.бумага ul{margin:12px 0 0;padding-left:22px}
.бумага li{margin-bottom:8px}
.бумага .надстрочная{color:var(--медь-тём)}

/* ── мелочи ──────────────────────────────────────────────────────────── */
.черта{height:1px;background:var(--полоса-тём);border:0;margin:0}
.тёмный .черта{background:var(--полоса)}
.пусто{padding:60px 0;color:var(--серо);text-align:center}

/* ── окно заявки ─────────────────────────────────────────────────────── */
.окно{position:fixed;inset:0;z-index:80;display:flex;align-items:center;
  justify-content:center;padding:20px}
.окно[hidden]{display:none}
.окно .подложка{position:absolute;inset:0;background:rgba(8,9,10,.72);
  backdrop-filter:blur(6px)}
.окно .створка{position:relative;z-index:2;width:min(560px,100%);
  background:var(--графит);color:var(--молоко);border:1px solid var(--полоса);
  padding:clamp(28px,4vw,48px);max-height:92vh;overflow:auto}
.окно .закрыть{position:absolute;top:10px;right:14px;background:none;border:0;
  color:rgba(246,243,238,.5);font-size:28px;line-height:1;cursor:pointer;padding:6px}
.окно .закрыть:hover{color:var(--медь)}
.окно h3{margin-top:14px;font-size:clamp(24px,3vw,32px)}
.окно .лид{margin:14px 0 0;color:rgba(246,243,238,.62)}
.окно form{display:grid;gap:14px;margin-top:28px}
.окно input{background:transparent;border:0;border-bottom:1px solid var(--полоса);
  color:var(--молоко);padding:14px 2px;font:300 15px Manrope,sans-serif}
.окно input:focus{outline:0;border-color:var(--медь)}
.окно input::placeholder{color:rgba(246,243,238,.38)}
.окно input.неверно{border-color:#C2716F}
.окно .кнопка{justify-content:center;margin-top:8px}
.окно .ловушка{position:absolute;left:-9999px;width:1px;height:1px}
.окно .сноска{margin:18px 0 0;font-size:11.5px;line-height:1.6;
  color:rgba(246,243,238,.34)}
.окно .спасибо[hidden]{display:none}
.окно .спасибо a{color:var(--медь);border-bottom:1px solid rgba(194,139,113,.4)}

/* ── полоса действия на телефоне ─────────────────────────────────────────
   Появляется, когда первый экран уехал вверх (класс ставит механика), и
   уходит, когда человек добрался до зова внизу: две кнопки «оставить заявку»
   в одном экране выглядят как выпрашивание. */
.полоса-действия{display:none}
@media(max-width:760px){
  .полоса-действия{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    align-items:center;justify-content:space-between;gap:14px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(20,22,24,.94);backdrop-filter:blur(8px);
    border-top:1px solid var(--полоса);color:var(--молоко);
    transform:translateY(102%);transition:transform .28s cubic-bezier(.2,.7,.3,1)}
  .полоса-действия.видно{transform:none}
  .полоса-слово{min-width:0}
  .полоса-слово b{display:block;font-family:Playfair,serif;font-weight:400;font-size:17px}
  .полоса-слово span{display:block;margin-top:2px;font:300 11.5px Jost,sans-serif;
    color:rgba(246,243,238,.5);white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;max-width:44vw}
  .полоса-действия .кнопка{flex:0 0 auto;padding:11px 20px;font-size:13px}
}

/* ── опыты (А/Б) ─────────────────────────────────────────────────────────
   На странице лежат оба варианта, виден один. По умолчанию — «а», прежний:
   не отработал скрипт в голове (старый браузер, отключён JS) — человек всё
   равно видит рабочую страницу, а не пустое место. */
.вариант.б{display:none}
[data-опыт-зов="б"] .зов .вариант.а{display:none}
[data-опыт-зов="б"] .зов .вариант.б{display:grid}

/* ── зов к действию внизу страницы объекта ───────────────────────────── */
.зов{background:var(--уголь);color:var(--молоко);padding:clamp(48px,6vw,88px) 0}
.зов .лента{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(24px,4vw,56px);flex-wrap:wrap}
.зов h2{max-width:18ch}
.зов .лид{margin-top:14px;color:rgba(246,243,238,.62)}
.зов .зов-слово{flex:1 1 380px}
.зов .спасибо[hidden]{display:none}
.зов .спасибо a{color:var(--медь);border-bottom:1px solid rgba(194,139,113,.4)}
/* Открытая форма: два поля в строку и кнопка под ними. Поля во всю ширину
   колонки, а не узкой полоской — узкое поле читается как «необязательно». */
.зов-форма{flex:0 1 420px;gap:14px;align-content:start}
.зов-форма input{background:transparent;border:0;border-bottom:1px solid var(--полоса);
  color:var(--молоко);padding:14px 2px;font:300 15px Manrope,sans-serif;width:100%}
.зов-форма input:focus{outline:0;border-color:var(--медь)}
.зов-форма input::placeholder{color:rgba(246,243,238,.38)}
.зов-форма input.неверно{border-color:#C2716F}
.зов-форма .ловушка{position:absolute;left:-9999px;width:1px;height:1px}
.зов-форма .кнопка{justify-content:center;margin-top:8px}
.зов-форма .сноска{margin:4px 0 0;font-size:11.5px;line-height:1.6;
  color:rgba(246,243,238,.34)}