/* ===== Кластер - каталог лотов, шаттл, инженерия, брокерам =====
   Палитра и классы взяты у style.css сайта: --amber, --ink, --line, --muted,
   .wrap, .sec-pad, .eyebrow, .lead, .btn. Своей темы здесь нет, иначе новые
   разделы читались бы как чужая вставка.
   Тёмного фона нет нигде: клиент запретил прямым текстом, ассоциация со
   старыми заводами. */

/* ── общая шапка раздела ──────────────────────────────────────────────── */
.kl-head{position:relative;margin-bottom:38px}
.kl-head .eyebrow{display:block;margin-bottom:10px}
.kl-head h2{margin-bottom:14px}
.kl-num{position:absolute;right:0;top:-26px;font-family:var(--ff-d);font-weight:700;
  font-size:clamp(56px,10vw,124px);line-height:.8;color:var(--line);z-index:0;user-select:none;pointer-events:none}
.kl-head .eyebrow,.kl-head h2,.kl-head .lead{position:relative;z-index:1}
.kl-foot{margin-top:28px;color:var(--muted);font-size:15px}
.kl-foot a{color:var(--ink);border-bottom:1px solid var(--amber);padding-bottom:1px}
.kl-foot a:hover{color:var(--amber-ink)}

/* ── общий план этажа ─────────────────────────────────────────────────── */
.kplan{margin:0 0 26px}
.kplan-box{background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh);padding:14px;overflow-x:auto}
.kplan-img{position:relative;min-width:680px}
.kplan-img img{display:block;width:100%;height:auto}
.kplan figcaption{margin-top:12px;color:var(--muted);font-size:14px}
.kplan-zona{position:absolute;border:2px solid transparent;border-radius:6px;
  background:transparent;cursor:pointer;padding:0;transition:.22s;
  display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px}
.kplan-zona i{font-style:normal;font-family:var(--ff-d);font-weight:700;font-size:13px;
  color:var(--ink);background:var(--amber);border-radius:999px;padding:3px 10px;
  opacity:0;transform:scale(.85);transition:.22s;white-space:nowrap}
/* Зона видна и до наведения: иначе человек не догадается, что по плану
   можно нажимать, и подпись под ним прочитают как украшение. */
.kplan-zona{border-color:rgba(232,164,0,.34);border-style:dashed}
.kplan-zona:hover,.kplan-zona.on{border-color:var(--amber);border-style:solid;
  background:rgba(232,164,0,.22)}
.kplan-zona:hover i,.kplan-zona.on i{opacity:1;transform:none}
.kplan-zona:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.klot.on{box-shadow:0 0 0 2px var(--amber),var(--sh-lg)}

/* ── подбор ───────────────────────────────────────────────────────────── */
.klot-filter{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh);padding:20px 24px;margin-bottom:24px;
  display:grid;grid-template-columns:1fr 1fr auto;gap:16px 28px;align-items:center}
.lf-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.lf-row label{font-family:var(--ff-d);font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;font-size:12px;color:var(--muted);white-space:nowrap}
.lf-row input[type=range]{accent-color:var(--amber);width:100%;height:22px;cursor:pointer}
.lf-row output{font-family:var(--ff-d);font-weight:700;font-size:16px;
  min-width:64px;text-align:right;white-space:nowrap;color:var(--ink)}
.lf-count{font-size:13px;color:var(--muted);white-space:nowrap;text-align:right}
.lf-count b{font-family:var(--ff-d);font-size:26px;color:var(--ink);margin-right:7px;display:inline-block;min-width:22px}

/* ── карточка лота ────────────────────────────────────────────────────── */
.klots{display:grid;gap:18px}
.klot{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh);overflow:hidden;display:grid;grid-template-columns:minmax(0,42%) 1fr;
  transition:box-shadow .25s}
.klot[hidden]{display:none}
.klot:hover{box-shadow:var(--sh-lg)}
.klot-plan{position:relative;background:var(--bg);display:flex;align-items:center;
  justify-content:center;padding:18px;max-height:340px}
.klot-plan img{max-width:100%;max-height:300px;min-height:180px;width:auto;height:auto;
  object-fit:contain;mix-blend-mode:multiply}
.klot-badge{position:absolute;left:16px;top:16px;background:var(--amber);color:var(--ink);
  font-family:var(--ff-d);font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  font-size:11px;padding:6px 13px;border-radius:999px}
.klot-body{padding:26px 28px 24px}
.klot-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-bottom:18px}
.klot-head h3{font-size:23px;color:var(--ink)}
.klot-area{font-family:var(--ff-d);font-weight:700;font-size:32px;line-height:1;color:var(--ink);white-space:nowrap}
.klot-area small{font-size:16px;color:var(--muted);font-weight:500}
.klot-specs{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;margin:0 0 18px}
.klot-specs>div{border-top:1px solid var(--line);padding-top:9px}
.klot-specs dt{font-family:var(--ff-d);font-weight:500;text-transform:uppercase;
  letter-spacing:.13em;font-size:11px;color:var(--muted)}
.klot-specs dd{margin-top:3px;font-size:15px;font-weight:600;color:var(--ink)}
.klot-opex{border:1px solid var(--line);border-radius:var(--r);padding:13px 17px;margin-bottom:20px;background:var(--bg)}
.klot-opex summary{cursor:pointer;font-size:14.5px;font-weight:700;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:14px;list-style:none}
.klot-opex summary::-webkit-details-marker{display:none}
.klot-opex summary::after{content:"+";font-family:var(--ff-d);font-size:19px;color:var(--amber-ink);line-height:1}
.klot-opex[open] summary::after{content:"−"}
.klot-opex-sum{margin-left:auto;margin-right:12px;color:var(--muted);font-weight:500;font-size:13px}
.klot-opex table{width:100%;border-collapse:collapse;margin-top:13px;font-size:14px}
.klot-opex td{padding:7px 0;border-top:1px solid var(--line);color:var(--muted)}
.klot-opex td:last-child{text-align:right;font-weight:700;white-space:nowrap;color:var(--ink)}
.klot-note{margin-top:12px;font-size:13.5px;color:var(--muted);line-height:1.5}
.klot-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.klot-actions .btn{font-size:14px;padding:13px 22px}
.klots-empty{grid-column:1/-1;background:var(--amber-soft);border-radius:var(--r);
  padding:22px 24px;color:var(--amber-ink);font-size:15px;line-height:1.55}

/* ── шаттл ────────────────────────────────────────────────────────────── */
.sh-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);padding:30px 28px}
.sh-line{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;margin-bottom:14px}
.sh-dot{width:15px;height:15px;border-radius:50%;background:var(--amber);flex:none;
  box-shadow:0 0 0 5px var(--amber-soft)}
.sh-track{position:relative;height:2px;background:var(--line);border-radius:2px}
.sh-bus{position:absolute;top:-10px;left:0;width:22px;height:22px;border-radius:7px;
  background:var(--amber);box-shadow:0 3px 10px rgba(232,164,0,.42);
  animation:sh-ride 8s cubic-bezier(.5,0,.5,1) infinite}
@keyframes sh-ride{0%{left:0}44%{left:calc(100% - 22px)}56%{left:calc(100% - 22px)}100%{left:0}}
@media(prefers-reduced-motion:reduce){.sh-bus{animation:none}}
.sh-ends{display:flex;justify-content:space-between;gap:20px;margin-bottom:26px}
.sh-ends b{display:block;font-family:var(--ff-d);font-size:16px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink)}
.sh-ends span{font-size:13.5px;color:var(--muted)}
.sh-ends div:last-child{text-align:right}
.sh-times{list-style:none;display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:0}
.sh-times li{background:var(--bg);border:1px solid var(--line);border-radius:11px;
  padding:9px 14px;font-family:var(--ff-d);font-weight:600;font-size:15px;color:var(--ink)}
.sh-times li.sh-eve{background:var(--amber-soft);border-color:#F3E3B8;color:var(--amber-ink)}

/* ── инженерия ─────────────────────────────────────────────────────────
   Оформление таймлайна живёт в engine.css: карточки на вертикальной линии,
   год вынесен влево абсолютом. Здесь раньше стояла старая сетка в две
   колонки, и она перебивала его: год выпадал из грида, а весь текст
   сжимался в колонку шириной сто тридцать два пикселя. Осталась только
   типографика, которая ничего не ломает. */
.eng-item h3{font-size:16px;margin-bottom:4px;color:var(--ink)}
.eng-item p{color:var(--muted);font-size:13.5px;line-height:1.55}

/* ── инфраструктура ───────────────────────────────────────────────────── */
.inf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.inf-tile{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:22px;box-shadow:var(--sh);position:relative}
.inf-tile h3{font-size:17px;margin-bottom:7px;color:var(--ink)}
.inf-soon h3{padding-right:54px}
.inf-tile p{color:var(--muted);font-size:14.5px;line-height:1.5}
.inf-soon{background:var(--amber-soft);border-color:#F3E3B8;box-shadow:none}
.inf-soon h3{color:var(--amber-ink)}
.inf-year{position:absolute;right:18px;top:18px;font-family:var(--ff-d);font-weight:700;
  font-size:13px;color:var(--amber-ink)}
.inf-next{margin:38px 0 16px;font-family:var(--ff-d);font-weight:500;text-transform:uppercase;
  letter-spacing:.2em;font-size:13px;color:var(--muted)}

/* ── брокерам ─────────────────────────────────────────────────────────── */
.brk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.brk-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;box-shadow:var(--sh)}
.brk-card h3{font-size:17px;margin-bottom:9px;color:var(--ink)}
.brk-card p{color:var(--muted);font-size:15px;line-height:1.55}
.brk-big{background:var(--amber);border-color:var(--amber)}
.brk-big p{color:var(--ink);opacity:.82}
.brk-num{font-family:var(--ff-d);font-weight:700;font-size:58px;line-height:.9;
  color:var(--ink);margin-bottom:12px}

/* ── согласие в форме ─────────────────────────────────────────────────── */
.form-agree{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;
  color:var(--muted);line-height:1.5;margin:4px 0 18px;cursor:pointer;
  min-height:44px;padding:6px 0}
.form-agree input{margin-top:1px;accent-color:var(--amber);width:24px;height:24px;flex:none;cursor:pointer}
.form-agree a{color:var(--ink);border-bottom:1px solid var(--amber)}

@media(max-width:980px){
  .klot{grid-template-columns:1fr}
  .klot-plan{min-height:0}
  .klot-filter{grid-template-columns:1fr}
  .lf-count{text-align:left}
}
@media(max-width:560px){
  .klot-specs{grid-template-columns:1fr}
  .klot-body{padding:22px 20px}
  .sh-ends{flex-direction:column;gap:14px}
  .sh-ends div:last-child{text-align:left}
  .kl-num{display:none}
}

/* ── тёмные блоки движка в светлое ────────────────────────────────────
   Схема мощности и разрез пола были залиты графитом var(--ink). Клиент
   запретил тёмный визуал прямым текстом: «ассоциация со старыми заводами».
   Приёмы и анимация те же, меняется только палитра. lots.css подключается
   последним, поэтому перебивает engine.css без правки самого движка. */
.pwr{background:var(--bg);border:1px solid var(--line);color:var(--ink)}
.pwr-title{color:var(--muted)}
.pwr-left{color:var(--ink)}
.pwr-left small{color:var(--muted)}
.pwr .bus{stroke:rgba(232,164,0,.9)}
.pwr .lbl{fill:var(--muted)}
.pwr .pulse{stroke:var(--amber)}
.pwr-ctl label{color:var(--muted)}
.pwr-ctl input[type=range]{background:linear-gradient(90deg,var(--amber) var(--p,20%),var(--line) var(--p,20%))}
.pwr-ctl input[type=range]::-webkit-slider-thumb{border-color:#fff;box-shadow:0 2px 8px rgba(20,23,28,.25)}
.pwr-ctl input[type=range]::-moz-range-thumb{border-color:#fff;box-shadow:0 2px 8px rgba(20,23,28,.25)}
.pwr-val{color:var(--ink)}

.floor{background:var(--bg);border:1px solid var(--line);color:var(--ink)}
.floor-l span,.floor-l b{color:var(--ink)}
.floor-num{color:var(--ink)}
.floor-num small{color:var(--muted)}
.floor-hatch{background-image:repeating-linear-gradient(var(--light-angle),rgba(20,23,28,.09) 0 2px,transparent 2px 7px)}

/* ── объём и движение ─────────────────────────────────────────────────
   Клиент просит «мир», а не плоскую страницу. Объём здесь делается светом
   и глубиной, а не тенями по всему подряд: карточка чуть поднимается к
   курсору, план этажа живёт лёгким параллаксом, цифры досчитываются при
   появлении. Всё это выключается у тех, кто просил меньше движения. */

/* карточка лота: наклон к курсору, свет по грани */
.klot{transform-style:preserve-3d;will-change:transform;
  transition:box-shadow .25s var(--e-in,ease),transform .35s var(--e-in,ease)}
.klot::after{content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:var(--r-lg);opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--мx,50%) var(--мy,0%),
    rgba(255,255,255,.55),transparent 62%)}
.klot:hover::after{opacity:1}
.klot:hover{transform:translateY(-3px)}

/* план этажа: слой глубины под чертежом */
.kplan-box{position:relative}
.kplan-box::before{content:"";position:absolute;inset:0;border-radius:var(--r-lg);
  pointer-events:none;box-shadow:inset 0 22px 44px -30px rgba(20,23,28,.34)}
.kplan-img{transition:transform .5s var(--e-in,ease)}

/* счётчик: цифра добегает до своего значения, а не появляется готовой */
.kl-schet{font-variant-numeric:tabular-nums}

/* линия раздела: тонкая золотая нить, которая прочерчивается при подходе */
.kl-nit{height:1px;background:var(--line);position:relative;margin:0 0 34px}
.kl-nit::after{content:"";position:absolute;left:0;top:0;height:1px;width:0;
  background:var(--amber);transition:width 1.1s var(--e-draw,ease)}
.kl-nit.in::after{width:100%}

/* блок «сверх аренды»: раскрытие с ходом, а не рывком */
.klot-opex[open] table,.klot-opex[open] .klot-note{animation:kl-vniz .38s var(--e-in,ease) both}
@keyframes kl-vniz{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* шаттл: пульс у точек маршрута */
.sh-dot{animation:kl-puls 3.4s ease-in-out infinite}
.sh-dot:last-of-type{animation-delay:1.7s}
@keyframes kl-puls{0%,100%{box-shadow:0 0 0 5px var(--amber-soft)}
  50%{box-shadow:0 0 0 11px rgba(232,164,0,.14)}}

/* тем, кто просил меньше движения, страница остаётся спокойной */
@media(prefers-reduced-motion:reduce){
  .klot,.kplan-img,.klot-opex[open] table,.klot-opex[open] .klot-note,.sh-dot{
    transition:none!important;animation:none!important;transform:none!important}
  .klot::after{display:none}
  .kl-nit::after{transition:none;width:100%}
}

/* ── читаемость и попадание пальцем ───────────────────────────────────
   Мерено на боевой странице, не на глаз: серый текст давал 4.47 при норме
   4.5, а половина мелких целей была меньше сорока четырёх пикселей, в
   которые попадает палец. */
:root{--muted:#646B79}
/* Ссылка почты и лого в шапке были 24 и 32 пикселя в высоту */
.mail-link,.hd-logo,.kl-foot a,.ft a{min-height:44px;display:inline-flex;align-items:center}
.ft-bot a{min-height:44px}
/* Чекбоксы калькулятора мощности: квадратик 13 пикселей мимо пальца */
#shemy .sh-item{min-height:48px;align-items:center}
#shemy .sh-item input{width:22px;height:22px;flex:none}
/* Подписи внутри схем: одиннадцать пикселей серым читались с трудом */
#shemy svg text{font-size:12px}
.pwr .lbl{font-size:12px}

/* ── аудит: контраст, цели нажатия, вылет за край ────────────────────
   Замеряно на боевой странице шириной 495: подписи разреза не читались
   совсем, иконки соцсетей и ползунки были меньше сорока четырёх точек,
   а свечение шапки уезжало за правый край. */

/* Разрез пола стал светлым, значит и тень под слоем должна быть мягкой:
   чёрная полоса под каждым слоем на светлом читается грязью. */
.floor-l{box-shadow:0 3px 0 rgba(20,23,28,.10)}
.floor-l span{color:var(--ink);opacity:.78}
/* Подписи слоёв стоят прямо на заливке слоя, приглушать их цветом
   нельзя: на песке и грунте серое пропадает. Приглушаем прозрачностью,
   контраст при этом остаётся выше четырёх с половиной. */
.floor-l b{color:var(--ink)}

/* Палец не попадает в тридцать точек. Сорок четыре это не прихоть,
   это размер подушечки пальца в рекомендациях площадок. */
.hero-soc a{width:44px;height:44px}
.ft-soc a{width:44px;height:44px}
.form-agree a{display:inline-block;padding:6px 0}

/* Ползунок подбора: сама дорожка тонкая, а трогают её пальцем. Даём
   прозрачный запас сверху и снизу, вид при этом не меняется. */
.klot-filter input[type=range],.pwr-ctl input[type=range]{
  height:44px;background-clip:content-box;padding:11px 0}

/* Свечение декоративное, но оно раздвигало страницу вправо. */
.mo-glow{max-width:100%;right:auto}

/* Строка чек-листа шаттла: нажимают по всей строке, а не по квадратику. */
.sh-item{min-height:44px;display:flex;align-items:center;gap:10px}
.form-agree a{padding:12px 0}

.kplan-zona{align-items:flex-start;justify-content:flex-start;padding:4px}

/* ── удобства двумя списками ──────────────────────────────────────────
   Клиент попросил развести удобства для сотрудников и для компаний: это
   разные вопросы у разных людей, и в одной куче они мешали друг другу. */
.inf-para{margin:0 0 6px;color:var(--muted);font-size:14px;letter-spacing:.02em;
  text-transform:uppercase}
.inf-part{margin:34px 0 0}
.inf-part:first-of-type{margin-top:10px}
.inf-part h3{font-family:var(--ff-d);font-size:clamp(19px,2.2vw,25px);
  margin:0 0 4px;letter-spacing:.01em}
.inf-part .inf-pod{color:var(--muted);margin:0 0 16px;font-size:15px}
/* Плитка с кадром: фото проявляется при наведении и не занимает место,
   пока на него не смотрят. С телефона наводить нечем, там оно всегда видно. */
.inf-tile{position:relative;overflow:hidden}
.inf-tile .inf-foto{position:absolute;inset:0;opacity:0;transition:opacity .28s;
  pointer-events:none}
.inf-tile .inf-foto img{width:100%;height:100%;object-fit:cover;display:block}
.inf-tile .inf-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,23,28,0) 40%,rgba(20,23,28,.62) 100%)}
.inf-tile.has-foto:hover .inf-foto,.inf-tile.has-foto:focus-within .inf-foto{opacity:1}
/* Правка собственника 9 сентября: «может при наведении убрать текст? за
   текстом не видно». Раньше подпись оставалась поверх кадра белым по
   затемнению и занимала середину плитки. Теперь описание уходит совсем,
   а название садится мелкой строкой в нижний угол, чтобы кадр читался. */
.inf-tile.has-foto h3,.inf-tile.has-foto p,.inf-tile.has-foto .inf-ico{
  transition:opacity .28s ease, transform .28s ease}
.inf-tile.has-foto:hover p,.inf-tile.has-foto:focus-within p,
.inf-tile.has-foto:hover .inf-ico,.inf-tile.has-foto:focus-within .inf-ico{
  opacity:0; transform:translateY(6px)}
.inf-tile.has-foto:hover h3,.inf-tile.has-foto:focus-within h3{
  position:absolute; left:18px; right:18px; bottom:14px; z-index:2; margin:0;
  color:#fff; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  text-shadow:0 1px 10px rgba(0,0,0,.7)}
@media (hover:none){
  .inf-tile.has-foto .inf-foto{opacity:1}
  .inf-tile.has-foto h3,.inf-tile.has-foto p{position:relative;z-index:2;color:#fff}
}

/* ── что внутри блока: числа вместо рисованных картинок ────────────────
   Клиент назвал визуализации обманом и был прав: рядом с настоящей съёмкой
   они читаются подделкой. Пока нет кадров изнутри, показываем параметры. */
.vis-para{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0 16px}
.vis-p{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px}
.vis-p b{display:block;font-family:var(--ff-d);font-size:clamp(24px,3vw,34px);
  line-height:1;color:var(--ink)}
.vis-p span{display:block;color:var(--muted);font-size:14px;margin-top:8px}
.vis-note{color:var(--muted);font-size:15px;margin:0}
.vis-note a{color:var(--amber-d);text-decoration:none;
  border-bottom:1px solid rgba(232,164,0,.4);
  display:inline-block;padding:11px 0;min-height:44px}
@media(max-width:900px){.vis-para{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.vis-para{grid-template-columns:1fr}}

/* ── схема транспорта в светлом ────────────────────────────────────────
   Карта была графитовой посреди светлой страницы, а станции показывались
   только при перетаскивании ползунка годов. Ползунок убран, схема светлая,
   всё видно сразу. */
.geo{background:#EEF1F4;border:1px solid var(--line)}
.geo-blocks rect{fill:#dfe4ea}
.geo.on .geo-blocks rect{opacity:1}
.geo-roads path{stroke:#cfd6de}
.geo-rd{fill:#8a919b}
.geo-t2{fill:var(--ink)}
.geo-t3{fill:#6f7681}
.geo-obj rect{fill:#fff;stroke:var(--amber);stroke-width:2}
.geo-t1{fill:var(--amber-d)}
.geo-halo{fill:rgba(232,164,0,.18)}
.geo-ring{fill:none;stroke:rgba(232,164,0,.55)}
.geo-dot{fill:var(--amber)}
.geo-dot.grey{fill:#8a919b}
.geo-route{stroke:#b9c1ca}
.geo-route.live{stroke:var(--amber)}
.geo-route.hi{stroke:var(--amber-d)}

/* Легенда вместо ползунка: две строки словами, без интерактива, который
   надо разгадывать. */
.geo-ctl{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:10px 6px 4px;font-size:13px;color:var(--muted)}
.geo-leg{display:inline-flex;align-items:center;gap:7px}
.geo-leg i{width:10px;height:10px;border-radius:50%;display:inline-block}
.geo-leg .l-now{background:#8a919b}
.geo-leg .l-soon{background:var(--amber)}
.geo-note{margin-left:auto;color:var(--ink)}
.geo-note b{font-family:var(--ff-d);font-size:16px;color:var(--amber-d)}


/* ── шапка: помещаемся в экран ────────────────────────────────────────
   Проверено замером ширины документа на 1440, 1280 и 390. */
.hd-in{min-width:0}
.nav{min-width:0;flex-wrap:wrap;row-gap:2px}
@media(max-width:1200px){.hd-cta .mail-link{display:none}}
@media(max-width:1400px){.hd-cta .hd-phone{display:none}}
@media(max-width:520px){.hd-cta .btn{padding:11px 14px;font-size:13px}}
@media(max-width:400px){.hd-cta .btn{display:none}}

/* ── знак Кластера ────────────────────────────────────────────────────
   На сайте стоял знак «Активити». Фирменный знак бизнес-парка это
   шестерёнка с фигурой и листом, из бренд-пака клиента, контур золотом на
   прозрачном фоне. Горизонтальный лок с плашкой не ставим нигде. */
.hd-logo{height:auto;padding:6px 0;gap:12px}
.hd-logo img.hd-mark{height:46px;width:auto;max-width:none;
  transition:height .35s var(--mo-ease,ease)}
.hd.mo-stuck .hd-logo{height:auto}
.hd.mo-stuck .hd-logo img.hd-mark{height:36px}
.hd-name{display:flex;flex-direction:column;line-height:1}
@media(max-width:1090px){.hd-logo img.hd-mark{height:40px}}
@media(max-width:700px){.hd-logo img.hd-mark{height:34px}}

.ft-mark{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.ft-mark img{height:52px;width:auto}
.ft-name{display:flex;flex-direction:column;line-height:1;color:#fff}
.ft-name b{font-family:var(--ff-d);font-weight:700;font-size:21px;
  letter-spacing:.06em;text-transform:uppercase}
.ft-name i{font-style:normal;font-family:var(--ff-d);font-weight:500;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:4px}

/* Ссылки подвала шли в строку и слипались в «О паркеТранспортПараметры». */
.ft-grid > div > a{display:block;margin:0 0 10px}
.ft-grid > div > a.btn{display:inline-flex}

/* ── шапка: помещаемся в экран ────────────────────────────────────────
   Проверено замером ширины документа на 1440, 1280 и 390. */
.hd-in{min-width:0}
.nav{min-width:0;flex-wrap:wrap;row-gap:2px}
@media(max-width:1200px){.hd-cta .mail-link{display:none}}
@media(max-width:1400px){.hd-cta .hd-phone{display:none}}
@media(max-width:520px){.hd-cta .btn{padding:11px 14px;font-size:13px}}
@media(max-width:400px){.hd-cta .btn{display:none}}

/* ─── Тизер помещения ───────────────────────────────────────────────
   Собственник прислал образец частной продажи участка и спросил, почему
   помещения нельзя оформить так же. До этого здесь стояла таблица определений
   мелким серым: «инфо по помещениям как будто бабка из цифровой пенсии делала».

   Разобрала его образец по слоям и повторила структуру:
   крупный визуал объекта сверху, площадь главной цифрой, ключевые показатели
   в рамке с заголовком, деньги отдельной строкой, блок применения иконками,
   метка статуса. Визуал честный: настоящий кадр свободного блока площадки,
   план блока лежит карточкой поверх. Палитра из бренда клиента: янтарь
   #E8A400, тёмный #0E1116, шрифт заголовков Oswald. */

.klot{
  position:relative; display:block; border-radius:24px; overflow:hidden;
  margin:0 0 30px; background:#0E1116; color:#F2F2F0;
  box-shadow:0 20px 54px rgba(14,17,22,.24);
  border:1px solid rgba(232,164,0,.26);
}

/* ── визуал сверху: настоящий кадр блока ── */
.klot-plan{
  position:relative; min-height:330px; padding:0; overflow:hidden;
  display:block; background:#1a1e24;
}
/* кадр блока оживает роликом, посчитанным на своей видеокарте */
.klot-plan .ozhiv-v{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  display:block; pointer-events:none; opacity:0; transition:opacity .9s ease; z-index:1;
  filter:none;
}
.klot-plan.ozhiv-on .ozhiv-v{opacity:1}
.klot-plan > picture{display:block; width:100%; height:100%; min-height:330px}
.klot-plan > img,
.klot-plan > picture > img{
  width:100%; height:100%; min-height:330px; object-fit:cover; display:block;
  filter:none;
}
/* подпись оживления у тизера своя подача, чужая метка тут лишняя */
.klot-plan.ozhiv-on::after{content:none}
.klot-plan::after{   /* затемнение поверх кадра и ролика, но под текстом */
  content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(180deg,rgba(14,17,22,0) 0%,rgba(14,17,22,0) 46%,rgba(14,17,22,.30) 68%,rgba(14,17,22,.72) 86%,rgba(14,17,22,.9) 100%);
}
.klot-shapka{
  position:absolute; left:0; right:0; bottom:0; z-index:3; padding:46px 32px 28px;
  /* своя подложка под текстом: кадр цеха светлый от окон, без неё заголовок
     лота и подпись тонут в стекле */
  background:linear-gradient(180deg,rgba(14,17,22,0) 0%,rgba(14,17,22,.66) 44%,rgba(14,17,22,.95) 100%);
}
.klot-head{display:flex; align-items:baseline; gap:12px; margin:0 0 2px}
.klot-head h3{
  margin:0; font-family:var(--ff-d,'Oswald',sans-serif);
  font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  color:#FFC53D; font-weight:600; text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.klot-etazh{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(242,242,240,.75);
  text-shadow:0 1px 10px rgba(0,0,0,.6)}
.klot-area{display:flex; align-items:baseline; gap:10px; margin:0}
.klot-area span{
  font-family:var(--ff-d,'Oswald',sans-serif);
  font-size:64px; line-height:.94; font-weight:600; letter-spacing:.01em;
  color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.klot-area small{font-size:22px; color:#E8A400; font-weight:600}
.klot-pod{margin:9px 0 0; font-size:13.5px; color:rgba(242,242,240,.86); max-width:46ch;
  text-shadow:0 1px 10px rgba(0,0,0,.55)}

.klot-badge{
  position:absolute; left:24px; top:24px; z-index:4;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 15px; border-radius:999px; background:#E8A400; color:#231800;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.klot-badge::before{content:''; width:7px; height:7px; border-radius:50%; background:#231800}

/* план блока карточкой в углу визуала */
.klot-mini{
  position:absolute; right:22px; top:22px; z-index:4; width:190px;
  background:rgba(255,255,255,.94); border-radius:14px; padding:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}



/* ── тело карточки ── */
.klot-body{padding:26px 32px 30px}

.klot-ramka{
  border:1px solid rgba(232,164,0,.3); border-radius:16px; padding:16px 18px 18px;
  margin:0 0 16px; background:rgba(255,255,255,.03);
}
.klot-ramka > i{
  display:block; font-style:normal; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:#E8A400; text-align:center; margin:0 0 14px;
  font-weight:700;
}







/* деньги отдельной строкой, как в образце */
.klot-money{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0;
  border:1px solid rgba(232,164,0,.3); border-radius:16px; margin:0 0 16px;
  background:linear-gradient(120deg,rgba(232,164,0,.14),rgba(232,164,0,.05));
}
.klot-money > div{padding:15px 18px; text-align:center; border-right:1px solid rgba(232,164,0,.24)}
.klot-money > div:last-child{border-right:none}
.klot-money b{
  display:block; font-family:var(--ff-d,'Oswald',sans-serif);
  font-size:26px; line-height:1.05; font-weight:600; color:#FFC53D; letter-spacing:.01em;
}
.klot-money small{display:block; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:rgba(242,242,240,.58); margin-top:3px}






.klot .klot-opex{margin:0 0 18px; font-size:13px; color:rgba(242,242,240,.78); background:none; border:none}
.klot .klot-opex summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:12px;
  padding:12px 16px; border-radius:12px; background:rgba(255,255,255,.05);
  color:rgba(242,242,240,.88); border:1px solid rgba(255,255,255,.08);
}
.klot-opex summary::-webkit-details-marker{display:none}
.klot .klot-opex-sum{color:#E8A400; font-weight:700}
.klot .klot-opex table{width:100%; border-collapse:collapse; margin:10px 0 0}
.klot .klot-opex td{padding:8px 16px; border-bottom:1px solid rgba(255,255,255,.07)}
.klot .klot-opex td:last-child{text-align:right; color:#F2F2F0}
.klot .klot-note{margin:10px 0 0; font-size:12px; line-height:1.5; color:rgba(242,242,240,.6)}

.klot-actions{display:flex; gap:12px; flex-wrap:wrap}
.klot .btn-p{background:#E8A400; color:#231800; border:none; font-weight:700}
.klot .btn-p:hover{background:#FFB715}
.klot .btn-o{background:transparent; color:#F2F2F0; border:1px solid rgba(242,242,240,.35)}
.klot .btn-o:hover{border-color:#E8A400; color:#E8A400}

@media (max-width:900px){
  .klot-body{padding:20px 18px 24px}
  .klot-shapka{padding:0 20px 20px}
  .klot-area span{font-size:44px}
  .klot-mini{width:130px; right:14px; top:14px}
  .klot-kpi{grid-template-columns:1fr 1fr; gap:16px 0}
  .klot-kpi > div:nth-child(2){border-right:none}
  .klot-dlya{grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 0}
  .klot-dlya > div:nth-child(3n){border-right:none}
}
@media (max-width:520px){
  .klot-money{grid-template-columns:1fr}
  .klot-money > div{border-right:none; border-bottom:1px solid rgba(232,164,0,.24)}
  .klot-money > div:last-child{border-bottom:none}
  .klot-mini{display:none}
}


/* ─── Ставка на фоне рынка ──────────────────────────────────────────
   Собственник дважды спрашивал: «А кто верифицирует эти цифры?» и
   «Вакансия производственных помещений 19.4%? Откуда эти цифры?».
   Поэтому здесь каждая цифра рынка идёт с источником и периодом прямо
   в блоке, а наша ставка стоит рядом для честного сравнения. */

.rynok{
  margin:30px 0 34px; padding:26px 28px 22px; border-radius:22px;
  background:linear-gradient(140deg,#FFFBF0 0%,#FFF7E4 55%,#FFF3D8 100%);
  border:1px solid rgba(232,164,0,.34);
}
.rynok > h3{
  margin:0 0 4px; font-family:var(--ff-d,'Oswald',sans-serif);
  font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:#8A6200;
}
.rynok > p.rynok-lead{margin:0 0 20px; font-size:14.5px; line-height:1.55; color:#3C3C3B; max-width:78ch}
.rynok-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.rynok-grid > div{
  background:#fff; border-radius:16px; padding:16px 18px;
  border:1px solid rgba(60,60,59,.08); box-shadow:0 6px 18px rgba(60,60,59,.05);
}
.rynok-grid b{
  display:block; font-family:var(--ff-d,'Oswald',sans-serif);
  font-size:27px; line-height:1.05; color:#14171C; letter-spacing:.01em; margin-bottom:5px;
}
.rynok-grid.rynok-nash b{color:#8A6200}
.rynok-grid > div.nash{background:#14171C; border-color:#14171C}
.rynok-grid > div.nash b{color:#FFC53D}
.rynok-grid > div.nash span{color:rgba(255,255,255,.72)}
.rynok-grid span{display:block; font-size:12.5px; line-height:1.4; color:#6B7280}
.rynok-vyvod{
  margin:18px 0 0; padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.7);
  font-size:14px; line-height:1.55; color:#3C3C3B; border:1px solid rgba(232,164,0,.25);
}
.rynok-ist{margin:12px 0 0; font-size:11.5px; line-height:1.5; color:#8A8F98}
.rynok-ist a{color:#8A6200; text-decoration:none; border-bottom:1px solid rgba(138,98,0,.35)}
.rynok-ist a:hover{color:#14171C}

@media (max-width:900px){
  .rynok{padding:20px 18px 18px}
  .rynok-grid{grid-template-columns:1fr 1fr; gap:10px}
  .rynok-grid b{font-size:23px}
}
@media (max-width:520px){
  .rynok-grid{grid-template-columns:1fr}
}


/* ─── Схема блока: план сверху и разрез по высоте, нарисованы кодом ──────
   Раздел «Что внутри блока» повторял цифры карточек каталога слово в слово:
   площадь, потолки, нагрузка, ворота, мощность, лифты. Человек читал одно и
   то же дважды. Вместо таблицы здесь схема, которой на сайте больше нигде
   нет: где ворота, где вход, где офис и санузел, какая высота под краном.
   Цифры остались там, где им место, в карточках помещений. */
.blk{
  display:grid; grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);
  gap:26px; align-items:start; margin:24px 0 18px; padding:22px 24px 18px;
  background:#FBFAF8; border:1px solid var(--line,#E6E3DD); border-radius:22px;
}
.blk-plan svg, .blk-rez svg{display:block; width:100%; height:auto; overflow:visible}
.blk-cap{margin:10px 2px 0; font-size:12.5px; line-height:1.45; color:var(--muted,#8A8F98)}

.blk-pol{fill:#fff}
.blk-sten{fill:none; stroke:#0E1116; stroke-width:8}
.blk-zona{stroke:none}
.blk-z1{fill:rgba(232,164,0,.13)}
.blk-z2{fill:#EFECE4}
.blk-z3{fill:#E4E7EA}
.blk-vorota{fill:#E8A400}
.blk-dver{fill:#0E1116}
.blk-duga{fill:none; stroke:#0E1116; stroke-width:1.6; stroke-dasharray:4 4; opacity:.5}
.blk-put{fill:none; stroke:#E8A400; stroke-width:2; stroke-dasharray:6 7; opacity:.55}
.blk-gruz rect{fill:#0E1116}
.blk-gruz path{stroke:#E8A400; fill:none}
.blk-mark circle{fill:#0E1116}
.blk-mark text{fill:#fff; font-family:var(--ff-d,'Oswald',sans-serif); font-size:17px; text-anchor:middle}

.blk-leg{list-style:none; counter-reset:blkn; margin:0 0 20px; padding:0}
.blk-leg li{
  counter-increment:blkn; position:relative; padding:0 0 0 40px; margin:0 0 13px;
  font-size:14.5px; line-height:1.5; color:var(--muted,#6B7280);
}
.blk-leg li::before{
  content:counter(blkn); position:absolute; left:0; top:-1px;
  width:26px; height:26px; border-radius:50%; background:#0E1116; color:#fff;
  font-family:var(--ff-d,'Oswald',sans-serif); font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.blk-leg b{color:var(--ink,#14171C); font-weight:600}

.blk-rez{border-top:1px solid var(--line,#E6E3DD); padding-top:16px}
.blk-rez-kont{fill:none; stroke:#0E1116; stroke-width:3}
.blk-rez-veshi rect{fill:#0E1116}
.blk-rez-veshi circle{fill:#0E1116}
.blk-rez-veshi path{fill:none; stroke:#0E1116; stroke-width:3; stroke-linecap:round}
.blk-rez-razmer path{fill:#E8A400; stroke:none}
.blk-rez-razmer path.blk-rez-line{fill:none; stroke:#E8A400; stroke-width:2}
.blk-rez-razmer text{fill:#8A6200; font-family:var(--ff-d,'Oswald',sans-serif); font-size:26px}

/* движение: линии рисуются, зоны наливаются, груз заезжает через ворота */
html.js .blk .blk-sten{stroke-dasharray:1900; stroke-dashoffset:1900}
html.js .blk .blk-zona{opacity:0}
html.js .blk .blk-gruz, html.js .blk .blk-put{opacity:0}
html.js .blk .blk-rez-line{transform:scaleY(0); transform-origin:64px 220px}
html.js .blk .blk-rez-razmer text{opacity:0}
html.js .blk.in .blk-sten{animation:blkRis 1.5s ease forwards}
html.js .blk.in .blk-z1{animation:blkNaliv .7s .5s ease forwards}
html.js .blk.in .blk-z2{animation:blkNaliv .7s .75s ease forwards}
html.js .blk.in .blk-z3{animation:blkNaliv .7s .95s ease forwards}
html.js .blk.in .blk-put{animation:blkNaliv .6s 1.2s ease forwards}
html.js .blk.in .blk-gruz{animation:blkGruz 7.5s 1.4s ease-in-out infinite}
html.js .blk.in .blk-rez-line{animation:blkRost .9s .6s ease forwards}
html.js .blk.in .blk-rez-razmer text{animation:blkNaliv .6s 1.3s ease forwards}
@keyframes blkRis{to{stroke-dashoffset:0}}
@keyframes blkNaliv{to{opacity:1}}
@keyframes blkRost{to{transform:scaleY(1)}}
@keyframes blkGruz{
  0%{opacity:0; transform:translate(0,26px)}
  10%{opacity:1; transform:translate(0,16px)}
  38%{opacity:1; transform:translate(0,-104px)}
  62%{opacity:1; transform:translate(-35px,-190px)}
  76%{opacity:1; transform:translate(-35px,-190px)}
  90%,100%{opacity:0; transform:translate(-35px,-206px)}
}
@media (prefers-reduced-motion: reduce){
  html.js .blk .blk-sten{stroke-dashoffset:0}
  html.js .blk .blk-zona, html.js .blk .blk-put, html.js .blk .blk-rez-razmer text{opacity:1}
  html.js .blk .blk-gruz{opacity:1; transform:translate(0,-104px)}
  html.js .blk .blk-rez-line{transform:scaleY(1)}
  html.js .blk.in *{animation:none !important}
}
@media (max-width:980px){
  .blk{grid-template-columns:1fr; gap:20px; padding:18px 16px 14px}
  .blk-rez{max-width:340px}
}



/* ─── Карточка помещения: фото и план на одном визуале ───────────────────
   Правка собственника 9 сентября: «планировка тоже должна быть не из
   бабушкиного экселя, добавьте фото. вы очень много места отдали цифрам.
   в присланном мною примере привлекло одновременное расположение всей
   информации, в том числе плана и фото на одном визуале».
   Раньше план лежал маленькой карточкой в углу кадра, а под кадром шли три
   рамки цифр подряд. Теперь кадр блока и планировка стоят рядом в одном
   блоке, показатели идут одной строкой под планом, а ниже остаются только
   деньги, назначение и кнопки. */
.klot-verh{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:0; align-items:stretch}
.klot-foto{min-height:430px}
.klot-shema{
  margin:0; display:flex; flex-direction:column; justify-content:center; gap:12px;
  background:#F7F6F3; padding:26px 24px 22px; border-left:1px solid rgba(232,164,0,.24);
}
.klot-shema img{
  width:100%; height:auto; max-height:320px; object-fit:contain; display:block;
  background:#fff; border-radius:12px; padding:10px;
}
.klot-shema figcaption{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#6B7280; font-weight:700;
}
.klot-shema figcaption a{color:#8A6200; text-decoration:none; border-bottom:1px solid rgba(138,98,0,.4)}
.klot-shema figcaption a:hover{color:#14171C}
.klot-fakty{
  font-size:12.5px; line-height:1.75; color:#6B7280;
  border-top:1px solid rgba(60,60,59,.12); padding-top:12px;
}
.klot-fakty b{
  font-family:var(--ff-d,'Oswald',sans-serif); font-size:15px; color:#14171C;
  font-weight:600; letter-spacing:.01em;
}

.klot-dlya-str{
  margin:0 0 16px; font-size:13px; line-height:1.5; color:rgba(242,242,240,.62);
  letter-spacing:.01em;
}

@media (max-width:1000px){
  .klot-verh{grid-template-columns:1fr}
  .klot-foto{min-height:340px}
  .klot-shema{border-left:none; border-top:1px solid rgba(232,164,0,.24); padding:20px 18px 18px}
  .klot-shema img{max-height:260px}
}

.klot-shema{position:relative}
.klot-nomer{
  position:absolute; left:34px; top:36px; z-index:2; display:flex; flex-direction:column; gap:2px;
}
.klot-nomer b{
  font-family:var(--ff-d,'Oswald',sans-serif); font-size:30px; line-height:1;
  color:#14171C; letter-spacing:.02em;
}
.klot-nomer span{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#8A6200; font-weight:700}
@media (max-width:1000px){ .klot-nomer{left:26px; top:26px} .klot-nomer b{font-size:24px} }


/* ─── Наведение на карточку: текст уходит, кадр открывается ──────────────
   Правка собственника 9 сентября: «это гуд, прям аккуратненько. может при
   наведении убрать текст? или фото показывать рядом? за текстом не видно».
   Фото и план уже стоят рядом, осталось открыть сам кадр: под курсором
   подпись блока плавно уезжает вниз, а затемнение почти снимается. */
@media (hover:hover){
  .klot-foto .klot-shapka{transition:opacity .4s ease, transform .4s ease}
  .klot-plan::after{transition:opacity .4s ease}
  .klot:hover .klot-foto .klot-shapka,
  .klot:focus-within .klot-foto .klot-shapka{opacity:0; transform:translateY(18px)}
  .klot:hover .klot-plan::after,
  .klot:focus-within .klot-plan::after{opacity:.2}
  .klot-badge{transition:opacity .4s ease}
  .klot:hover .klot-badge{opacity:.35}
}
@media (prefers-reduced-motion: reduce){
  .klot-foto .klot-shapka, .klot-plan::after{transition:none}
}


/* строка про ставку вместо снятого сравнения с рынком */
.kl-stavka{margin:22px 0 26px; font-size:15px; line-height:1.6; color:var(--muted,#6B7280); max-width:70ch}


/* ─── Объём блока без фона: свет, тень и въезд в кадр ────────────────────
   Белая панель под схемой выглядела вставкой из другого макета. Фон у
   объёма снят, он стоит прямо на тёмной карточке: снизу тёплое янтарное
   свечение как от прожектора, под объектом мягкая тень, при появлении в
   окне объём въезжает с лёгким наклоном, дальше едва заметно дышит. */
.klot-shema{
  background:radial-gradient(120% 90% at 50% 118%, rgba(232,164,0,.20) 0%, rgba(232,164,0,.05) 42%, rgba(14,17,22,0) 72%),
             linear-gradient(180deg,#121519 0%,#0E1116 100%);
  border-left:1px solid rgba(232,164,0,.18);
  padding:28px 26px 22px; overflow:hidden;
}
.klot-shema img{
  background:none; padding:0; border-radius:0; max-height:none;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.55)) drop-shadow(0 2px 0 rgba(255,255,255,.06));
  transform-origin:50% 70%;
}
.klot-shema figcaption{color:rgba(242,242,240,.55)}
.klot-shema figcaption a{color:#FFC53D; border-bottom-color:rgba(255,197,61,.4)}
.klot-shema figcaption a:hover{color:#fff}
.klot-fakty{color:rgba(242,242,240,.62); border-top-color:rgba(255,255,255,.10)}
.klot-fakty b{color:#fff}
.klot-nomer b{color:#fff}
.klot-nomer span{color:#FFC53D}

/* въезд объёма: как в монтаже, объект приходит в кадр, а не просто проявляется */
html.js .klot-shema img{opacity:0; transform:translateY(34px) scale(.9) rotate(-1.6deg)}
html.js .klot.in .klot-shema img{animation:objVezd 1.15s cubic-bezier(.2,.8,.24,1) .12s forwards}
@keyframes objVezd{
  60%{opacity:1; transform:translateY(-6px) scale(1.015) rotate(.4deg)}
  100%{opacity:1; transform:translateY(0) scale(1) rotate(0)}
}
html.js .klot.in .klot-shema figcaption,
html.js .klot.in .klot-fakty{animation:objTekst .7s ease .55s both}
@keyframes objTekst{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){
  html.js .klot-shema img{opacity:1; transform:none; animation:none !important}
  html.js .klot.in .klot-shema figcaption, html.js .klot.in .klot-fakty{animation:none}
}
@media (max-width:1000px){
  .klot-shema{border-left:none; border-top:1px solid rgba(232,164,0,.18); padding:22px 18px 18px}
}


/* показываем светлую часть кадра: окна и пол, а не тёмный потолок */
.klot-foto > picture > img, .klot-foto > img{object-position:50% 72%}
.klot-foto .ozhiv-v{object-position:50% 72%}


.klot-foto{position:relative; overflow:hidden}
.klot-foto > picture{position:absolute; inset:0; display:block; width:100%; height:100%; min-height:0}
.klot-foto > picture > img{width:100%; height:100%; min-height:0; object-fit:cover; object-position:50% 68%}


/* ─── Схема окружения: рисуется кодом, оживает при наведении ─────────────
   «Графика провал, я по ней ничего не понимаю» и «вырезанные скриншоты с их
   презентации это ужасно». Скриншот заменён на свою схему: улицы, кварталы,
   железная дорога, контур площадки и маршруты. Наводишь на строку слева -
   на схеме загорается объект и его маршрут, остальное приглушается. */
.tr-karta{position:relative; margin:0; border-radius:22px; overflow:hidden;
  background:#F7F6F3; border:1px solid rgba(60,60,59,.10); box-shadow:0 14px 40px rgba(60,60,59,.07)}
.tr-karta svg{display:block; width:100%; height:auto}
.k-fon{fill:#F4F2ED}
.k-kvartaly rect{fill:#E9E6DF}
.k-zelen path{fill:#E2E9DC}
.k-ulicy path{fill:none; stroke:#fff; stroke-width:14; stroke-linecap:round}
.k-zd-l{fill:none; stroke:#3C3C3B; stroke-width:7}
.k-zd-shpaly{fill:none; stroke:#F4F2ED; stroke-width:5; stroke-dasharray:2 11}

.k-klaster-svet{fill:rgba(232,164,0,.16)}
.k-klaster-korpus{fill:#E8A400; stroke:#B98F00; stroke-width:2}
.k-klaster-dvor{fill:#F4F2ED; opacity:.5}

.k-put{fill:none; stroke-linecap:round; stroke-width:4; opacity:.55;
  stroke-dasharray:9 9; transition:opacity .3s, stroke-width .3s}
.k-put-pesh, .k-put-pesh2{stroke:#B98F00}
.k-put-shattl{stroke:#3C3C3B}
.k-put-estakada{stroke:#B98F00; stroke-dasharray:16 8}
.k-put-mkad, .k-put-ttk{stroke:#8A8F98; stroke-dasharray:4 10}

.k-metka{position:absolute; transform:translate(-50%,-50%); z-index:3;
  display:flex; flex-direction:column; gap:2px; align-items:flex-start;
  padding:9px 13px; border-radius:12px; background:#fff; border:1px solid rgba(60,60,59,.12);
  box-shadow:0 8px 22px rgba(60,60,59,.14); cursor:default; text-align:left;
  font:inherit; transition:transform .28s cubic-bezier(.2,.8,.24,1), box-shadow .28s, background .28s}
.k-metka i{font-style:normal; font-family:var(--ff-d,'Oswald',sans-serif); font-size:14px;
  letter-spacing:.02em; color:var(--ink,#14171C); white-space:nowrap}
.k-metka span{font-size:11.5px; color:var(--muted,#6B7280); white-space:nowrap}
.k-tochka{cursor:pointer}
.k-tochka::after{content:''; position:absolute; left:-9px; top:50%; width:10px; height:10px;
  margin-top:-5px; border-radius:50%; background:#E8A400; box-shadow:0 0 0 4px rgba(232,164,0,.25)}
.k-m-klaster{background:#14171C; border-color:#14171C}
.k-m-klaster i{color:#fff} .k-m-klaster span{color:rgba(255,255,255,.68)}
.k-verh, .k-niz{background:rgba(255,255,255,.92)}

/* подсветка: активный объект вперёд, остальные назад */
.tr-karta.k-est .k-put{opacity:.16}
.tr-karta.k-est .k-metka.k-tochka{opacity:.45}
.tr-karta .k-put.k-on{opacity:1; stroke-width:6}
.tr-karta .k-metka.k-on{opacity:1; transform:translate(-50%,-50%) scale(1.08);
  box-shadow:0 14px 30px rgba(232,164,0,.35); background:#FFFBF0}
.tr-karta .k-metka.k-on i{color:#8A6200}

.map-grid .route{cursor:default; border-radius:12px; transition:background .25s, transform .25s}
.map-grid .route[data-uzel]{cursor:pointer}
.map-grid .route[data-uzel]:hover, .map-grid .route[data-uzel].k-on{
  background:rgba(232,164,0,.10); transform:translateX(4px)}
.map-grid .route[data-uzel]:focus-visible{outline:2px solid #E8A400; outline-offset:2px}

/* появление: маршруты прорисовываются, метки всплывают по очереди */
html.js .tr-karta .k-put{stroke-dashoffset:420}
html.js .tr-karta.in .k-put{animation:kPut 1.5s ease forwards}
@keyframes kPut{to{stroke-dashoffset:0}}
html.js .tr-karta .k-metka{opacity:0}
html.js .tr-karta.in .k-metka{animation:kMet .55s ease forwards}
html.js .tr-karta.in .k-m-klaster{animation-delay:.15s}
html.js .tr-karta.in .k-tochka:nth-of-type(2){animation-delay:.35s}
html.js .tr-karta.in .k-tochka:nth-of-type(3){animation-delay:.45s}
html.js .tr-karta.in .k-tochka:nth-of-type(4){animation-delay:.55s}
html.js .tr-karta.in .k-tochka:nth-of-type(5){animation-delay:.65s}
html.js .tr-karta.in .k-tochka:nth-of-type(6){animation-delay:.75s}
html.js .tr-karta.in .k-tochka:nth-of-type(7){animation-delay:.85s}
@keyframes kMet{from{opacity:0; transform:translate(-50%,-40%)} to{opacity:1; transform:translate(-50%,-50%)}}
@media (prefers-reduced-motion: reduce){
  html.js .tr-karta .k-put{stroke-dashoffset:0}
  html.js .tr-karta .k-metka{opacity:1; animation:none !important}
}
.tr-karta figcaption{padding:14px 18px 16px; font-size:12.5px; line-height:1.5; color:var(--muted,#6B7280)}

@media (max-width:900px){
  .k-metka{padding:7px 10px}
  .k-metka i{font-size:12px} .k-metka span{font-size:10.5px}
}
@media (max-width:560px){
  .k-metka span{display:none}
  .k-metka i{font-size:11px}
}


/* холст карты: метки позиционируются от него, а не от всей фигуры с подписью */
.k-holst{position:relative; display:block}
.k-put{opacity:.7; stroke-width:5}
.k-put-mkad, .k-put-ttk{opacity:.5}


/* ─── План этажа кодом ───────────────────────────────────────────────────
   Был кадр из презентации, собственник назвал такие вставки ужасными.
   Теперь этаж рисуется по тем же координатам, что и кликабельные зоны:
   свободные блоки янтарём, они проявляются по очереди и дышат, занятая
   площадь идёт единым полем, потому что её разбивку мы не знаем. */
.kp-svg{display:block; width:100%; height:auto}
.kp-etazh{fill:#F4F2ED; stroke:#3C3C3B; stroke-width:3}
.kp-zanyato{fill:#E9E6DF}
.kp-podpis{fill:#8A8F98; font-size:34px; letter-spacing:.06em; text-anchor:middle;
  font-family:var(--ff,'Manrope',sans-serif)}
.kp-svob rect{fill:#E8A400; stroke:#B98F00; stroke-width:3}
.kp-nom{fill:#231800; font-family:var(--ff-d,'Oswald',sans-serif); font-size:56px;
  text-anchor:middle; letter-spacing:.02em}
.kp-pl{fill:rgba(35,24,0,.72); font-size:30px; text-anchor:middle;
  font-family:var(--ff,'Manrope',sans-serif)}
html.js .kp-svob{opacity:0; transform:translateY(14px)}
html.js .kplan.in .kp-svob, html.js .in .kp-svob{
  animation:kpVhod .6s cubic-bezier(.2,.8,.24,1) forwards; animation-delay:calc(var(--i) * .09s)}
@keyframes kpVhod{to{opacity:1; transform:none}}
.kplan-zona:hover ~ .kp-svg .kp-svob rect{stroke-width:3}
@media (prefers-reduced-motion: reduce){
  html.js .kp-svob{opacity:1; transform:none; animation:none !important}
}


/* страховка: без класса появления блоки всё равно должны быть видны */
html.js .kp-svob{animation:kpVhod .6s cubic-bezier(.2,.8,.24,1) forwards;
  animation-delay:calc(var(--i) * .09s)}
html:not(.js) .kp-svob{opacity:1; transform:none}
/* kpStrahovka */


/* выделение ворот на живом кадре */
.vg-holst{position:relative; display:block; line-height:0}
.vg-holst picture,.vg-holst img{display:block; width:100%; height:auto}
.vg-ramka{position:absolute; border:2px solid rgba(232,164,0,.9); border-radius:4px;
  box-shadow:0 0 0 2px rgba(20,23,28,.35), 0 10px 26px rgba(0,0,0,.3);
  background:linear-gradient(180deg, rgba(232,164,0,.10), rgba(232,164,0,.02));
  pointer-events:none}
html.js .rv .vg-ramka{opacity:0; transform:scale(.94)}
html.js .rv.in .vg-ramka{animation:vgVhod .7s cubic-bezier(.2,.8,.24,1) forwards}
html.js .rv.in .vg-ramka.vg-glav{animation-delay:.16s}
@keyframes vgVhod{from{opacity:0; transform:scale(.94)} to{opacity:1; transform:scale(1)}}
.vg-ramka i{position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%);
  white-space:nowrap; font-style:normal; font-weight:700; font-size:13px; line-height:1;
  padding:7px 11px; border-radius:999px; color:#14171C; background:#E8A400;
  box-shadow:0 8px 20px rgba(0,0,0,.32)}
.vg-ramka i::after{content:''; position:absolute; left:50%; top:100%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:#E8A400}
.vg-harakt{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:8px}
.vg-harakt b{display:inline-flex; align-items:baseline; gap:6px; font-size:13px; color:#14171C}
.vg-harakt b::before{content:''; width:6px; height:6px; border-radius:50%; background:#E8A400}
@media (max-width:640px){
  .vg-ramka i{font-size:11px; padding:5px 8px}
  .vg-harakt{gap:4px 10px}
  .vg-harakt b{font-size:12px}
}


/* блок ворот со своей разметкой */
.vg-blok{margin:34px 0 0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh);
  background:#fff}
.vg-blok .vg-holst{border-radius:0}
.vg-blok img{width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover}
.vg-blok figcaption{padding:12px 18px; font-size:13px; color:var(--muted);
  background:#fff; border-top:1px solid var(--line)}


/* тизер лота: подача образца, палитра наша */
.tiz{position:relative; margin:0 0 26px; border-radius:20px; overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(232,164,0,.16) 0%, rgba(232,164,0,0) 55%),
    linear-gradient(168deg,#1A1E24 0%,#14171C 46%,#0E1116 100%);
  color:#F7F4EC; box-shadow:0 26px 60px rgba(0,0,0,.30); isolation:isolate}
.tiz::before{content:''; position:absolute; inset:0 0 auto; height:2px;
  background:linear-gradient(90deg,transparent,#E8A400 22%,#FFCE5A 50%,#E8A400 78%,transparent)}

.tiz-verh{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:26px; padding:26px 26px 8px}
.tiz-levo{min-width:0; display:flex; flex-direction:column}

.tiz-status{align-self:flex-start; display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:999px; background:rgba(232,164,0,.14);
  border:1px solid rgba(232,164,0,.45); color:#FFCE5A;
  font:700 11px/1 Manrope,system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase}
.tiz-status svg{width:13px; height:13px}
.tiz-status.zanyat{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.2); color:#C7CBD3}

.tiz-nadzag{margin:16px 0 2px; font:600 12px/1.3 Manrope,system-ui,sans-serif;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(247,244,236,.62)}
.tiz-cifra{display:flex; align-items:baseline; gap:10px; margin:2px 0 0}
.tiz-cifra span{font:700 clamp(52px,7.4vw,92px)/.92 Oswald,Impact,sans-serif;
  letter-spacing:-.01em; color:#E8A400;
  background:linear-gradient(180deg,#FFD979 0%,#E8A400 58%,#B87F00 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 18px rgba(232,164,0,.28))}
.tiz-cifra i{font:600 clamp(20px,2.4vw,30px)/1 Oswald,Impact,sans-serif;
  font-style:normal; color:rgba(247,244,236,.8)}
.tiz-lot{margin:8px 0 0; font:600 14px/1.4 Manrope,system-ui,sans-serif;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(247,244,236,.78)}
.tiz-pod{margin:10px 0 0; font:400 14px/1.55 Manrope,system-ui,sans-serif;
  color:rgba(247,244,236,.66); max-width:38ch}

.tiz-spisok{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column}
.tiz-spisok li{display:grid; grid-template-columns:26px minmax(0,1fr); gap:12px;
  padding:11px 0; border-top:1px solid rgba(247,244,236,.09)}
.tiz-spisok li:first-child{border-top:0; padding-top:2px}
.tiz-spisok svg{width:24px; height:24px; color:#E8A400; margin-top:1px}
.tiz-spisok b{display:block; font:700 14px/1.25 Manrope,system-ui,sans-serif;
  letter-spacing:.06em; text-transform:uppercase; color:#F7F4EC}
.tiz-spisok small{display:block; margin-top:3px; font:400 12.5px/1.45 Manrope,system-ui,sans-serif;
  color:rgba(247,244,236,.58)}

.tiz-pravo{position:relative; min-width:0; display:flex; flex-direction:column; gap:12px}
.tiz-foto{position:relative; border-radius:14px; overflow:hidden; line-height:0;
  box-shadow:0 18px 40px rgba(0,0,0,.42)}
.tiz-foto picture,.tiz-foto img{display:block; width:100%; height:100%}
.tiz-foto img{aspect-ratio:16/10; object-fit:cover; object-position:50% 58%}
.tiz-foto::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(14,17,22,0) 42%, rgba(14,17,22,.72) 100%)}
.tiz-ramka{position:absolute; inset:9px; border:2px solid rgba(232,164,0,.85); border-radius:10px;
  box-shadow:0 0 0 1px rgba(14,17,22,.45), 0 0 26px rgba(232,164,0,.35) inset; pointer-events:none}
html.js .rv .tiz-ramka{opacity:0; transform:scale(.965)}
html.js .rv.in .tiz-ramka{animation:tizRam .8s cubic-bezier(.2,.8,.24,1) .15s forwards}
@keyframes tizRam{to{opacity:1; transform:scale(1)}}
.tiz-vynos{position:absolute; left:18px; bottom:16px; z-index:2}
.tiz-vynos b{display:block; font:700 13px/1 Manrope,system-ui,sans-serif;
  letter-spacing:.16em; text-transform:uppercase; color:#FFCE5A}
.tiz-vynos span{display:block; margin-top:5px; font:600 15px/1 Manrope,system-ui,sans-serif;
  color:#F7F4EC}

.tiz-shema{margin:0; position:relative; border-radius:14px; padding:10px 12px 8px;
  background:linear-gradient(180deg, rgba(247,244,236,.05), rgba(247,244,236,.02));
  border:1px solid rgba(247,244,236,.1)}
.tiz-shema img{display:block; width:100%; height:auto; max-height:210px; object-fit:contain;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.5))}
.tiz-shema figcaption{display:flex; justify-content:space-between; align-items:center;
  margin-top:6px; font:400 12px/1.3 Manrope,system-ui,sans-serif; color:rgba(247,244,236,.55)}
.tiz-shema figcaption a{color:#E8A400; text-decoration:none; border-bottom:1px solid rgba(232,164,0,.4)}
.tiz-shema figcaption a:hover{color:#FFCE5A}

.tiz-karta{margin:14px 26px 0; border-radius:16px; padding:16px 18px 18px;
  background:linear-gradient(180deg, rgba(247,244,236,.045), rgba(247,244,236,.015));
  border:1px solid rgba(232,164,0,.24)}
.tiz-zag{display:flex; align-items:center; gap:14px; margin:0 0 14px;
  font:700 12px/1 Manrope,system-ui,sans-serif; letter-spacing:.22em;
  text-transform:uppercase; color:#E8A400; white-space:nowrap}
.tiz-zag::before,.tiz-zag::after{content:''; flex:1 1 auto; height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,164,0,.45),transparent)}

.tiz-kpi{display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
.tiz-kpi > div{position:relative; text-align:center; padding:4px 8px}
.tiz-kpi > div + div::before{content:''; position:absolute; left:0; top:14%; bottom:14%;
  width:1px; background:rgba(247,244,236,.12)}
.tiz-kpi svg{width:26px; height:26px; color:#E8A400; margin:0 auto 8px; display:block}
.tiz-kpi b{display:block; font:700 clamp(20px,2.5vw,28px)/1.05 Oswald,Impact,sans-serif;
  color:#F7F4EC; letter-spacing:.01em}
.tiz-kpi small{display:block; margin-top:6px; font:400 11.5px/1.35 Manrope,system-ui,sans-serif;
  letter-spacing:.06em; text-transform:uppercase; color:rgba(247,244,236,.55)}

.tiz-proizv{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:14px; padding-top:14px; border-top:1px solid rgba(247,244,236,.1)}
.tiz-proizv > div{position:relative; text-align:center; padding:0 8px}
.tiz-proizv > div + div::before{content:''; position:absolute; left:0; top:6%; bottom:6%;
  width:1px; background:rgba(247,244,236,.12)}
.tiz-proizv b{display:block; font:700 clamp(17px,2vw,22px)/1.1 Oswald,Impact,sans-serif; color:#FFCE5A}
.tiz-proizv small{display:block; margin-top:5px; font:400 11.5px/1.35 Manrope,system-ui,sans-serif;
  letter-spacing:.05em; text-transform:uppercase; color:rgba(247,244,236,.55)}

.tiz-ispo{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px}
.tiz-ispo > div{text-align:center; padding:2px 4px}
.tiz-ispo svg{width:26px; height:26px; color:#E8A400; margin:0 auto 8px; display:block}
.tiz-ispo span{display:block; font:600 11px/1.3 Manrope,system-ui,sans-serif;
  letter-spacing:.05em; text-transform:uppercase; color:rgba(247,244,236,.72)}

.tiz-niz{display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:16px 26px 24px}
.tiz .klot-opex{flex:1 1 260px; margin:0; background:rgba(247,244,236,.04);
  border:1px solid rgba(247,244,236,.12); border-radius:12px; color:#F7F4EC}
.tiz .klot-opex summary{color:#F7F4EC}
.tiz .klot-opex table td{color:rgba(247,244,236,.8); border-color:rgba(247,244,236,.1)}
.tiz .klot-opex .klot-note{color:rgba(247,244,236,.6)}
.tiz .klot-opex-sum{color:#E8A400}
.tiz .btn-o{border-color:rgba(232,164,0,.5); color:#FFCE5A}
.tiz .btn-o:hover{background:rgba(232,164,0,.12)}

@media (max-width:900px){
  .tiz-verh{grid-template-columns:1fr; gap:18px; padding:20px 18px 6px}
  .tiz-karta{margin:12px 18px 0; padding:14px 14px 16px}
  .tiz-kpi{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 0}
  .tiz-kpi > div:nth-child(3)::before,.tiz-kpi > div:nth-child(odd)::before{display:none}
  .tiz-ispo{grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 6px}
  .tiz-niz{padding:14px 18px 20px}
}
@media (max-width:520px){
  .tiz-cifra span{font-size:56px}
  .tiz-ispo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiz-spisok li{grid-template-columns:22px minmax(0,1fr); gap:10px}
}


/* схема окружения на подложке ППМ */
.tr-karta .k-holst{position:relative; border-radius:16px; overflow:hidden; line-height:0;
  background:#F7F4EC; box-shadow:0 18px 44px rgba(20,23,28,.16)}
.tr-karta .k-holst picture,.tr-karta .k-holst img{display:block; width:100%; height:auto}
.tr-karta .k-sloi{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}

.k-sloi .k-put path{fill:none; stroke:#E8A400; stroke-width:5; stroke-linecap:round;
  stroke-linejoin:round; stroke-dasharray:11 9; opacity:.55;
  filter:drop-shadow(0 2px 4px rgba(20,23,28,.35)); transition:opacity .25s, stroke-width .25s}
.k-sloi .k-obvod rect{fill:rgba(232,164,0,.10); stroke:#E8A400; stroke-width:4;
  filter:drop-shadow(0 0 10px rgba(232,164,0,.5)); transition:fill .25s, stroke-width .25s}
html.js .rv .k-sloi .k-obvod rect{stroke-dasharray:1200; stroke-dashoffset:1200}
html.js .rv.in .k-sloi .k-obvod rect{animation:kObv 1.5s cubic-bezier(.2,.8,.24,1) .2s forwards}
@keyframes kObv{to{stroke-dashoffset:0}}
html.js .rv .k-sloi .k-put path{opacity:0}
html.js .rv.in .k-sloi .k-put path{animation:kPut 1.1s ease .5s forwards}
@keyframes kPut{to{opacity:.55}}

.tr-karta.k-est .k-sloi .k-put path{opacity:.16}
.tr-karta.k-est .k-put.k-on path{opacity:1; stroke-width:7}
.tr-karta.k-est .k-obvod rect{fill:rgba(232,164,0,.05); stroke-width:3}
.tr-karta.k-est .k-obvod.k-on rect{fill:rgba(232,164,0,.20); stroke-width:6}

.tr-karta .k-metka{position:absolute; transform:translate(-50%,-50%); z-index:3;
  display:inline-flex; flex-direction:column; gap:2px; padding:8px 12px;
  border:0; cursor:pointer; text-align:left; border-radius:12px;
  background:rgba(20,23,28,.9); color:#F7F4EC; box-shadow:0 10px 24px rgba(0,0,0,.34);
  transition:transform .22s cubic-bezier(.2,.8,.24,1), background .22s, box-shadow .22s}
.tr-karta .k-metka i{font-style:normal; font:700 12.5px/1.15 Manrope,system-ui,sans-serif;
  letter-spacing:.02em; white-space:nowrap}
.tr-karta .k-metka span{font:400 11px/1.25 Manrope,system-ui,sans-serif;
  color:rgba(247,244,236,.72); white-space:nowrap}
.tr-karta .k-metka::after{content:''; position:absolute; left:50%; top:100%;
  transform:translateX(-50%); border:6px solid transparent; border-top-color:rgba(20,23,28,.9)}
.tr-karta .k-metka.k-verh::after{top:auto; bottom:100%;
  border-top-color:transparent; border-bottom-color:rgba(20,23,28,.9)}
.tr-karta .k-metka.k-glav{background:#E8A400; color:#14171C; z-index:4;
  box-shadow:0 12px 30px rgba(232,164,0,.45)}
.tr-karta .k-metka.k-glav i{font-size:15px; letter-spacing:.06em; text-transform:uppercase}
.tr-karta .k-metka.k-glav span{color:rgba(20,23,28,.72)}
.tr-karta .k-metka.k-glav::after{border-top-color:#E8A400}
.tr-karta .k-metka:hover,.tr-karta .k-metka:focus-visible{transform:translate(-50%,-50%) scale(1.06)}
.tr-karta.k-est .k-metka{opacity:.45}
.tr-karta.k-est .k-metka.k-on,.tr-karta.k-est .k-metka.k-glav{opacity:1}
.tr-karta.k-est .k-metka.k-on{background:#E8A400; color:#14171C}
.tr-karta.k-est .k-metka.k-on span{color:rgba(20,23,28,.75)}
.tr-karta.k-est .k-metka.k-on::after{border-top-color:#E8A400}

html.js .rv .tr-karta .k-metka,html.js .tr-karta.rv .k-metka{opacity:0; transform:translate(-50%,-40%)}
html.js .tr-karta.rv.in .k-metka{animation:kMet .55s cubic-bezier(.2,.8,.24,1) forwards}
.tr-karta.rv.in .k-metka:nth-of-type(2){animation-delay:.75s}
.tr-karta.rv.in .k-metka:nth-of-type(3){animation-delay:.85s}
.tr-karta.rv.in .k-metka:nth-of-type(4){animation-delay:.95s}
.tr-karta.rv.in .k-metka:nth-of-type(5){animation-delay:1.05s}
.tr-karta.rv.in .k-metka:nth-of-type(6){animation-delay:1.15s}
@keyframes kMet{to{opacity:1; transform:translate(-50%,-50%)}}

.tr-karta figcaption{margin-top:12px; font:400 13px/1.55 Manrope,system-ui,sans-serif;
  color:var(--muted)}
.map-grid .route.k-on{background:rgba(232,164,0,.12); border-radius:10px}

@media (max-width:720px){
  .tr-karta .k-metka{padding:6px 9px}
  .tr-karta .k-metka i{font-size:11px}
  .tr-karta .k-metka span{font-size:9.5px}
  .tr-karta .k-metka.k-glav i{font-size:12.5px}
}


/* метки схемы: пилюля с раскрытием */
.tr-karta .k-metka{padding:6px 11px; gap:0; border-radius:999px}
.tr-karta .k-metka i{font-size:12px}
.tr-karta .k-metka small{display:block; max-height:0; overflow:hidden; opacity:0;
  font:400 10.5px/1.3 Manrope,system-ui,sans-serif; color:rgba(247,244,236,.72);
  white-space:nowrap; transition:max-height .22s ease, opacity .22s ease, margin .22s ease}
.tr-karta .k-metka:hover small,.tr-karta .k-metka:focus-visible small,
.tr-karta .k-metka.k-on small{max-height:22px; opacity:1; margin-top:3px}
.tr-karta .k-metka.k-glav{border-radius:12px}
.tr-karta .k-metka.k-glav small{max-height:22px; opacity:1; margin-top:3px;
  color:rgba(20,23,28,.72)}
.tr-karta .k-metka.k-lev{transform:translate(0,-50%)}
.tr-karta .k-metka.k-lev::after{left:22px}
.tr-karta .k-metka.k-lev:hover,.tr-karta .k-metka.k-lev:focus-visible{transform:translate(0,-50%) scale(1.06)}
.tr-karta .k-metka.k-prav{transform:translate(-100%,-50%)}
.tr-karta .k-metka.k-prav::after{left:auto; right:22px}
.tr-karta .k-metka.k-prav:hover,.tr-karta .k-metka.k-prav:focus-visible{transform:translate(-100%,-50%) scale(1.06)}
html.js .tr-karta.rv .k-metka.k-lev{transform:translate(0,-40%)}
html.js .tr-karta.rv.in .k-metka.k-lev{animation:kMetL .55s cubic-bezier(.2,.8,.24,1) forwards}
@keyframes kMetL{to{opacity:1; transform:translate(0,-50%)}}
html.js .tr-karta.rv .k-metka.k-prav{transform:translate(-100%,-40%)}
html.js .tr-karta.rv.in .k-metka.k-prav{animation:kMetR .55s cubic-bezier(.2,.8,.24,1) forwards}
@keyframes kMetR{to{opacity:1; transform:translate(-100%,-50%)}}
.tr-karta.k-est .k-metka.k-on{box-shadow:0 12px 30px rgba(232,164,0,.5)}


/* карта слева, список справа */
.map-grid{grid-template-columns:minmax(0,1.28fr) minmax(0,.92fr); gap:34px; align-items:start}
.map-grid > *:first-child{order:2}
.map-grid .tr-karta{order:1; margin-top:0}
.map-grid .route{padding:13px 10px}
.map-grid .route b{font-size:16px}
@media (max-width:900px){
  .map-grid{grid-template-columns:1fr; gap:22px}
  .map-grid > *:first-child{order:2}
  .map-grid .tr-karta{order:1}
}


/* доводка меток и маршрутов схемы */
.tr-karta .k-metka{padding:5px 9px}
.tr-karta .k-metka i{font-size:11px; letter-spacing:0}
.tr-karta .k-metka small{font-size:10px}
.tr-karta .k-metka.k-glav{padding:7px 12px}
.tr-karta .k-metka.k-glav i{font-size:13px}
.k-sloi .k-put path{stroke-width:7; opacity:.8;
  paint-order:stroke; stroke-linecap:round}
.k-sloi .k-put{filter:drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 0 6px rgba(255,255,255,.8))}
html.js .rv.in .k-sloi .k-put path{animation:kPut2 1.1s ease .5s forwards}
@keyframes kPut2{to{opacity:.8}}
.tr-karta.k-est .k-sloi .k-put path{opacity:.18}
.tr-karta.k-est .k-put.k-on path{opacity:1; stroke-width:9}


/* маршруты: кант и линия */
.k-sloi .k-put{filter:none}
.k-sloi .k-put path{fill:none; stroke-linecap:round; stroke-linejoin:round}
.k-sloi .k-put .k-kant{stroke:#14171C; stroke-width:13; stroke-dasharray:none; opacity:.85}
.k-sloi .k-put .k-liniya{stroke:#FFC23A; stroke-width:7; stroke-dasharray:12 10; opacity:1}
html.js .rv .k-sloi .k-put path{opacity:0}
html.js .rv.in .k-sloi .k-put .k-kant{animation:kKant 1s ease .45s forwards}
html.js .rv.in .k-sloi .k-put .k-liniya{animation:kLin 1s ease .55s forwards}
@keyframes kKant{to{opacity:.85}}
@keyframes kLin{to{opacity:1}}
.tr-karta.k-est .k-sloi .k-put .k-kant{opacity:.2}
.tr-karta.k-est .k-sloi .k-put .k-liniya{opacity:.22}
.tr-karta.k-est .k-put.k-on .k-kant{opacity:.9}
.tr-karta.k-est .k-put.k-on .k-liniya{opacity:1; stroke-width:9}


/* видео объекта */
.vid-obzor{margin:0 0 26px; border-radius:18px; overflow:hidden;
  background:#14171C; box-shadow:0 22px 50px rgba(20,23,28,.22)}
.vid-obzor video{display:block; width:100%; height:auto; aspect-ratio:848/464;
  background:#0E1116}
.vid-obzor figcaption{padding:14px 18px 16px; background:#14171C; color:rgba(247,244,236,.72);
  font:400 13.5px/1.55 Manrope,system-ui,sans-serif}
.vid-obzor figcaption b{display:block; margin-bottom:4px; color:#F7F4EC;
  font:700 15px/1.3 Manrope,system-ui,sans-serif; letter-spacing:.02em}

.eng-ryad{display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:34px;
  align-items:start}
.eng-video{position:relative}
.eng-video video{display:block; width:100%; height:auto; aspect-ratio:464/848;
  border-radius:16px; background:#0E1116; object-fit:cover;
  box-shadow:0 22px 46px rgba(20,23,28,.28)}
.eng-video p{margin:12px 0 0; font:400 13px/1.55 Manrope,system-ui,sans-serif; color:var(--muted)}
.eng-video p b{display:block; margin-bottom:4px; color:var(--ink);
  font:700 14.5px/1.3 Manrope,system-ui,sans-serif}
@media (max-width:900px){
  .eng-ryad{grid-template-columns:1fr; gap:22px}
  .eng-video{max-width:320px; margin:0 auto}
}


/* фото тизера: градиент мягче */
.tiz-foto::after{background:linear-gradient(180deg, rgba(14,17,22,0) 58%, rgba(14,17,22,.55) 100%)}
.tiz-foto img{object-position:50% 52%}
.tiz-shema{background:linear-gradient(180deg, rgba(247,244,236,.10), rgba(247,244,236,.04))}


/* ролик прохода по площадке */
.vid-prolet{margin:34px 0 0; border-radius:18px; overflow:hidden; background:#14171C;
  box-shadow:0 22px 50px rgba(20,23,28,.22)}
.vid-prolet video{display:block; width:100%; height:auto; aspect-ratio:16/9; background:#0E1116}
.vid-prolet figcaption{padding:14px 18px 16px; background:#14171C; color:rgba(247,244,236,.72);
  font:400 13.5px/1.55 Manrope,system-ui,sans-serif}
.vid-prolet figcaption b{display:block; margin-bottom:4px; color:#F7F4EC;
  font:700 15px/1.3 Manrope,system-ui,sans-serif; letter-spacing:.02em}


/* живая петля в шапке */
.hero-media{position:relative; isolation:isolate}
.hero-media picture,.hero-media img{display:block}
.hero-video{position:absolute; inset:0; width:100%; height:100%;
  border-radius:var(--r-lg); object-fit:cover; aspect-ratio:4/3;
  box-shadow:var(--sh-lg); opacity:0; transition:opacity .8s ease; z-index:1}
.hero-video[data-gotov="1"]{opacity:1}
.hero-media .hero-badge{z-index:3}
.hero-media::after{content:''; position:absolute; inset:0; z-index:2;
  border-radius:var(--r-lg); pointer-events:none;
  background:linear-gradient(180deg, rgba(20,23,28,0) 62%, rgba(20,23,28,.28) 100%)}
@media (max-width:760px){
  .hero-video{display:none}
}
@media (prefers-reduced-motion: reduce){
  .hero-video{display:none}
}


/* при живой петле обмерная рамка не нужна */
.hero-media.video-on .dim,
.hero-media.video-on .mo-rule,
.hero-media.video-on picture{opacity:0; transition:opacity .5s ease; pointer-events:none}


/* карточки параметров: кадр вместо чертежа */
.sh-card.sh-foto{padding:0; overflow:hidden; border-radius:16px; background:#fff;
  border:1px solid var(--line); box-shadow:0 14px 34px rgba(20,23,28,.10);
  display:flex; flex-direction:column}
.sh-card.sh-foto picture{display:block; line-height:0}
.sh-card.sh-foto img{display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover}
.sh-card.sh-foto figcaption{padding:16px 18px 18px}
.sh-card.sh-foto figcaption b{display:block; margin-bottom:6px;
  font:700 17px/1.25 Oswald,Impact,sans-serif; letter-spacing:.01em; color:var(--ink)}
.sh-card.sh-foto figcaption span{display:block; font:400 14px/1.55 Manrope,system-ui,sans-serif;
  color:var(--muted)}

/* Три параметра в ряд. Раньше карточек было две, и высота, которую лид
   называет первой цифрой, на странице отсутствовала совсем. */
.sh-grid.sh-grid-3{grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width:1020px){ .sh-grid.sh-grid-3{grid-template-columns:1fr 1fr} }
@media (max-width:700px){ .sh-grid.sh-grid-3{grid-template-columns:1fr} }
.sh-card.sh-foto figcaption span{color:var(--muted,#6B7280)}

/* План блока: вместо цветных прямоугольников кадр разреза. */
.blk-plan.blk-foto picture{display:block; line-height:0}
.blk-plan.blk-foto img{
  display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  border-radius:16px; border:1px solid var(--line,#E6E3DD); background:#fff;
}
.blk-side .blk-leg{margin-bottom:0}

/* Витрина предмета: подпись уходит ПОД предмет, облёт перестаёт его резать.
   Подпись лежала абсолютом поверх нижней части кадра, на тёмном предмете
   расплывалась и обрезалась на второй строке. Облёт стоял на object-fit:cover
   и срезал предмету верх и низ, хотя сама вырезка целая. */
.vit{aspect-ratio:auto; display:grid; grid-template-rows:1fr auto}
.vit > picture{grid-area:1/1; aspect-ratio:1/1; min-height:0}
.vit .vit-v{
  grid-area:1/1; position:relative; inset:auto;
  width:100%; height:100%; aspect-ratio:1/1; object-fit:contain;
}
.vit-hint{
  grid-area:1/1; position:relative; inset:auto;
  justify-self:end; align-self:start; margin:14px 14px 0;
}
.vit-cap{
  grid-area:2/1; position:relative; inset:auto; padding:14px 18px 16px;
  background:#fff; border-top:1px solid var(--line,#E6E3DD);
  color:var(--ink,#14171C);
}
.vit-cap b{margin-bottom:3px}

/* Ворота: кадр вместо контурного грузовика, затемнять его незачем. */
.gate.gate-foto img{opacity:1}
.gate.gate-foto figcaption{background:var(--ink,#14171C)}

/* Витрина: холст под пропорцию облёта, иначе предмет вписывался в квадрат
   и висел в белом поле. Облёты сняты 16:9, вырезки почти квадратные, 4:3
   держит и то и другое без крупных полей. */
.vit > picture{aspect-ratio:4/3}
.vit > picture img{padding:3%}
.vit .vit-v{aspect-ratio:4/3}

/* Свой запуск ролика: панель браузера показываем только после старта. */
.kino{position:relative}
.kino video{display:block; width:100%; height:auto}
.kino-pusk{
  position:absolute; inset:0; z-index:3; display:flex; gap:14px;
  align-items:center; justify-content:center; flex-direction:column;
  border:0; cursor:pointer; color:#fff; font:inherit;
  background:linear-gradient(180deg, rgba(14,17,22,.10) 0%, rgba(14,17,22,.42) 100%);
  transition:opacity .35s ease, visibility .35s;
}
.kino-krug{
  display:grid; place-items:center; width:78px; height:78px; border-radius:50%;
  background:var(--amber,#E8A400); color:#14171C;
  box-shadow:0 14px 34px rgba(14,17,22,.42);
  transition:transform .35s cubic-bezier(.16,.84,.36,1);
}
.kino-krug svg{width:30px; height:30px; fill:currentColor; margin-left:3px}
.kino-pusk:hover .kino-krug{transform:scale(1.07)}
.kino-txt{
  font-family:var(--ff-d,'Oswald',sans-serif); font-size:13px;
  letter-spacing:.16em; text-transform:uppercase;
  text-shadow:0 2px 14px rgba(14,17,22,.75);
}
.kino-dl{margin-left:10px; opacity:.72; font-weight:400}
.kino-dl:empty{display:none}
.kino.kino-on .kino-pusk{opacity:0; visibility:hidden}
@media (max-width:700px){
  .kino-krug{width:62px; height:62px}
  .kino-krug svg{width:24px; height:24px}
}

/* Ряд холста задаёт сама картинка: на 1fr он растягивался по соседней
   колонке текста, и метка облёта повисала над предметом в пустоте. */
.vit{grid-template-rows:auto auto}

/* Пилюля метки на карте была шире своего названия: свёрнутая строка пояснения
   держала ширину по себе, хотя по высоте схлопнута. Плашки налезали на карту
   и уезжали за край. Ширину теперь задаёт название, пояснение раскрывается
   вместе с высотой. */
.tr-karta .k-metka small{max-width:0; transition:max-height .26s ease, max-width .26s ease, opacity .2s ease}
.tr-karta .k-metka:hover small,
.tr-karta .k-metka:focus-visible small,
.tr-karta .k-metka.k-on small,
.tr-karta .k-metka.k-glav small{max-width:260px}

/* Схема окружения показывается целиком или никак. Подложка на телефоне
   приезжает позже разметки, и метки успевали повисеть в пустом поле: ровно
   тот кадр, который владелец прислал как «детский сад». */
.tr-karta .k-holst:not(.k-gotov) .k-metka,
.tr-karta .k-holst:not(.k-gotov) .k-sloi{display:none}
.tr-karta .k-holst:not(.k-gotov){background:#EFEDE7; aspect-ratio:900/827}
/* На телефоне схема мелкая, а плашки оставались настольного размера и
   закрывали собой полкарты. Здесь у метки только название. */
@media (max-width:620px){
  .tr-karta .k-metka{padding:4px 8px; border-radius:999px}
  .tr-karta .k-metka i{font-size:9.5px; letter-spacing:0}
  .tr-karta .k-metka small{display:none}
  .tr-karta .k-metka.k-glav{padding:5px 10px}
  .tr-karta .k-metka.k-glav i{font-size:10.5px}
  .tr-karta .k-metka::after{border-width:4px}
}

/* Плитка с кадром на телефоне: кадр сверху, текст под ним.
   Наводить с телефона нечем, поэтому фото стояло подложкой, а название и
   описание лежали на нём белым. На светлых кадрах, а их большинство, текст
   расплывался в кашу. Теперь кадр занимает верх плитки, текст живёт на белом
   и читается при любом снимке. */
@media (hover:none){
  .inf-tile.has-foto{padding-top:0; overflow:hidden}
  .inf-tile.has-foto .inf-foto{
    position:relative; inset:auto; opacity:1; display:block;
    margin:0 -22px 16px; aspect-ratio:16/10;
  }
  .inf-tile.has-foto .inf-foto::after{display:none}
  .inf-tile.has-foto .inf-ico,
  .inf-tile.has-foto h3,
  .inf-tile.has-foto p{position:relative; z-index:2}
  .inf-tile.has-foto h3{color:var(--ink,#14171C)}
  .inf-tile.has-foto p{color:var(--muted,#6B7280)}
}

/* Ряд с предметом, выходящим за край блока. Механика лежала готовой, но со
   страницы не вызывалась ни разу: ни одного узла с классом и скрипт не
   подключён. Здесь шаттл выезжает из-за левого поля раздела расписания. */
.kray-ryad{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:30px; align-items:center; margin:0 0 26px;
}
.kray-txt b{display:block; font:600 19px/1.25 Manrope,system-ui,sans-serif;
  color:var(--ink,#14171C); margin-bottom:8px}
.kray-txt p{margin:0; color:var(--muted,#6B7280); font-size:15px; line-height:1.6}
@media (max-width:900px){
  .kray-ryad{grid-template-columns:1fr; gap:14px}
}

/* Своя схема окружения: подложка наша, поэтому лучи ложатся точно.
   Конец луча это якорь метки, а не украшение. */
.tr-karta .k-sloi .k-put .k-kant{fill:none; stroke:#14171C; stroke-width:9;
  opacity:.42; stroke-linecap:round}
.tr-karta .k-sloi .k-put .k-liniya{fill:none; stroke:#FFC23A; stroke-width:4.5;
  stroke-dasharray:12 9; stroke-linecap:round}
.tr-karta .k-sloi .k-put .k-konec{fill:#14171C; stroke:#F7F4EC; stroke-width:3}
.tr-karta.k-est .k-sloi .k-put{opacity:.2}
.tr-karta .k-sloi .k-put.k-on{opacity:1}
.tr-karta .k-sloi .k-put.k-on .k-liniya{stroke:#E8A400; stroke-width:6}
.tr-karta .k-sloi .k-put.k-on .k-konec{fill:#E8A400; r:9}
/* Метка встаёт НАД своей точкой, хвостик снизу показывает на неё.
   Раньше плашка сидела ровно на точке и закрывала её собой, а главная метка
   накрывала янтарную рамку участка, из-за чего площадка терялась. */
.tr-karta .k-holst .k-metka.k-tochka{transform:translate(-50%,-152%)}
.tr-karta .k-holst .k-metka.k-tochka.k-lev{transform:translate(-14%,-152%)}
.tr-karta .k-holst .k-metka.k-tochka.k-prav{transform:translate(-86%,-152%)}
.tr-karta .k-holst .k-metka.k-tochka.k-verh{transform:translate(-50%,52%)}
.tr-karta .k-holst .k-metka.k-glav{transform:translate(-50%,44%)}
.tr-karta .k-holst .k-metka.k-tochka:hover,
.tr-karta .k-holst .k-metka.k-tochka:focus-visible,
.tr-karta .k-holst .k-metka.k-tochka.k-on{transform:translate(-50%,-152%) scale(1.06)}
.tr-karta .k-holst .k-metka.k-glav:hover{transform:translate(-50%,44%) scale(1.04)}
html.js .tr-karta.rv .k-holst .k-metka{opacity:0}
html.js .tr-karta.rv.in .k-holst .k-metka{animation:kMetka .5s cubic-bezier(.2,.8,.24,1) forwards}
@keyframes kMetka{from{opacity:0} to{opacity:1}}

/* Мощность без калькулятора: киловатты по видам оборудования были нашими, а
   не клиента, и на прямой вопрос «откуда этот калькулятор» ответить было
   нечем. Осталось то, что подтверждено паспортом объекта. */
.sh-moshch{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr); gap:26px;
  margin-top:26px; padding:26px 28px; border-radius:22px;
  background:#FBFAF8; border:1px solid var(--line,#E6E3DD); align-items:center;
}
.sh-moshch h3{margin:0 0 10px; font:600 20px/1.25 Manrope,system-ui,sans-serif; color:var(--ink,#14171C)}
.sh-moshch p{margin:0 0 10px; color:var(--muted,#6B7280); font-size:15px; line-height:1.6}
.sh-moshch .sh-moshch-p{margin:0; color:var(--ink,#14171C)}
.sh-moshch-r{display:grid; gap:12px}
.sh-moshch-cifra{
  display:flex; align-items:baseline; gap:10px; padding:12px 16px; border-radius:14px;
  background:var(--amber-soft,#FDF6E3); border:1px solid #F3E3B8;
}
.sh-moshch-cifra b{font:700 30px/1 Oswald,system-ui,sans-serif; color:var(--ink,#14171C)}
.sh-moshch-cifra span{font-size:13px; color:var(--muted,#6B7280)}
.sh-moshch .btn{justify-content:center}
@media (max-width:900px){ .sh-moshch{grid-template-columns:1fr; padding:22px} }

/* Блоки, стоящие прямо в секции без обёртки, растягивались во всю ширину
   экрана, пока соседние секции держали колонку в 1200. Клиент это и увидел:
   «почему где-то сайт форматирован по ширине, а где-то растекается».
   Ширину держим той же переменной, что и обёртка, чтобы колонка была одна. */
section > .ob3d-ryad,
section > .vg-blok,
section > .gt-card,
section > .vit-ryad,
section > .klot-filter,
section > .klots,
section > .sh-moshch,
section > .kray-ryad,
section > .vid-prolet,
section > .vid-obzor{
  max-width:var(--wrap); margin-left:auto; margin-right:auto;
  padding-left:24px; padding-right:24px;
}
section > .vid-prolet, section > .vid-obzor{
  padding-left:0; padding-right:0; width:calc(100% - 48px);
}
section > .vg-blok{padding-left:0; padding-right:0; width:calc(100% - 48px)}
@media (max-width:760px){
  section > .ob3d-ryad,
  section > .vg-blok,
  section > .gt-card,
  section > .vit-ryad,
  section > .klot-filter,
  section > .klots,
  section > .sh-moshch,
  section > .kray-ryad,
  section > .vid-prolet,
  section > .vid-obzor{padding-left:18px; padding-right:18px}
  section > .vg-blok,
  section > .vid-prolet,
  section > .vid-obzor{padding:0; width:calc(100% - 36px)}
}

/* Тизер лота: план и фото на одном визуале.
   Клиент про свой образец сказал прямо: «привлекло одновременное расположение
   всей информации, в том числе плана и фото на одном визуале», а про наш
   вариант: «планировка не из бабушкиного экселя, добавьте фото, вы очень
   много места отдали цифрам». План уходит врезкой в угол кадра, кадр
   становится крупнее, подпись плана переезжает под визуал строкой. */
.tiz-pravo{position:relative; display:block; align-self:start}
.tiz-pravo .tiz-foto{border-radius:16px}
.tiz-pravo .tiz-foto img{aspect-ratio:16/11}
.tiz-pravo .tiz-shema{
  position:absolute; right:14px; bottom:14px; z-index:3;
  width:39%; min-width:150px; max-width:230px; margin:0;
  padding:8px 9px 6px; border-radius:12px;
  background:rgba(247,244,236,.96); border:1px solid rgba(232,164,0,.45);
  box-shadow:0 14px 30px rgba(14,17,22,.45);
}
.tiz-pravo .tiz-shema img{max-height:140px}
.tiz-pravo .tiz-shema figcaption{
  display:block; margin-top:5px; font-size:10px; line-height:1.3;
  letter-spacing:.02em; color:#5C5A54;
}
.tiz-pravo .tiz-shema figcaption a{display:inline-block; margin-top:2px; font-size:10px}
.tiz-pravo .tiz-podpis{
  margin:8px 2px 0; font-size:12px; line-height:1.45; color:rgba(247,244,236,.62);
}
@media (max-width:760px){
  .tiz-pravo .tiz-shema{
    position:relative; right:auto; bottom:auto; width:auto; max-width:none;
    margin-top:12px; box-shadow:none;
  }
  .tiz-pravo .tiz-shema img{max-height:190px}
}

/* Калькулятор выгоды по НДС. Клиент попросил его сам: «калькулятор выгоды при
   аренде у упрощенца и у компании, использующей ОСНО, это наука точная». */
.nds{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:26px;
  margin-top:18px; padding:26px 28px; border-radius:22px;
  background:linear-gradient(168deg,#1A1E24 0%,#14171C 46%,#0E1116 100%);
  border:1px solid rgba(232,164,0,.24); color:#F7F4EC;
}
.nds h3{margin:0 0 10px; font:600 20px/1.25 Manrope,system-ui,sans-serif; color:#F7F4EC}
.nds p{margin:0 0 14px; font-size:14.5px; line-height:1.6; color:rgba(247,244,236,.72)}
.nds-polya{display:grid; grid-template-columns:repeat(auto-fit,minmax(176px,1fr)); gap:12px}
.nds-polya label{display:grid; gap:5px; min-width:0}
.nds-polya span{font-size:12px; line-height:1.35; letter-spacing:.04em; overflow-wrap:anywhere; color:rgba(247,244,236,.6)}
.nds-polya input,.nds-polya select{
  padding:11px 13px; border-radius:11px; font:600 16px/1 Manrope,system-ui,sans-serif;
  color:#14171C; background:#F7F4EC; border:1px solid rgba(232,164,0,.35);
}
.nds-polya input:focus,.nds-polya select:focus{outline:2px solid #E8A400; outline-offset:1px}
.nds-sn{margin:12px 0 0; font-size:12px; color:rgba(247,244,236,.45)}
.nds-r{display:grid; gap:12px; align-content:start}
.nds-para{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.nds-para div{padding:12px 14px; border-radius:12px; background:rgba(247,244,236,.06)}
.nds-para span{display:block; font-size:11.5px; color:rgba(247,244,236,.55); margin-bottom:4px}
.nds-para b{font:700 17px/1.1 Manrope,system-ui,sans-serif; color:#F7F4EC}
.nds-itog{
  display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:baseline;
  padding:16px 18px; border-radius:14px;
  background:rgba(232,164,0,.12); border:1px solid rgba(232,164,0,.4);
}
.nds-itog span{font-size:12px; letter-spacing:.04em; color:rgba(247,244,236,.7)}
.nds-itog b{font:700 26px/1 Oswald,system-ui,sans-serif; color:#FFC23A; justify-self:end}
.nds-itog b.nds-god{font-size:18px; color:rgba(255,194,58,.8)}
.nds-vyvod{margin:0; font-size:13.5px; line-height:1.55; color:rgba(247,244,236,.78)}
.nds .btn{justify-content:center}
@media (max-width:900px){ .nds{grid-template-columns:1fr; padding:22px 18px} }

.nds-formula{margin:10px 0 0; font-size:13px; line-height:1.5; color:rgba(247,244,236,.55)}

/* Нарисованное честно называется нарисованным: посетитель должен
   понимать, что перед ним иллюстрация параметра, а не снимок. */
.risunok{display:block; margin:0 0 6px; font-size:11px; letter-spacing:.08em;
 text-transform:uppercase; color:rgba(20,23,28,.45)}
.blk-foto .risunok,.sh-moshch .risunok{color:rgba(247,244,236,.5)}

/* ── Живая схема окружения ───────────────────────────────────────────
   Подложка вектором: каждая группа своя, поэтому район можно приглушить,
   когда человек выбрал объект, и не мешать ему смотреть на маршрут.
   Геометрия настоящая, собрана по геоданным района. */
.k-vektor{position:absolute; inset:0; z-index:0; pointer-events:none}
.k-vektor svg{width:100%; height:100%; display:block}
.k-holst.k-vek > picture{opacity:0}          /* растр уступает место вектору */

.k-vektor .km-zelen path{fill:#E8EFE6; stroke:none}
.k-vektor .km-voda path{fill:#DCE7F0; stroke:none}
.k-vektor .km-dom path{fill:#DFDBD0; stroke:#D2CDC0; stroke-width:.4}
.k-vektor .km-ulica path{fill:none; stroke:#C6C1B6; stroke-width:1.7}
.k-vektor .km-doroga path{fill:none; stroke:#BEB9AE; stroke-width:3.2;
 stroke-linecap:round}
.k-vektor .km-zd path{fill:none; stroke:#8E887C; stroke-width:2.2;
 stroke-dasharray:10 6}
.k-vektor .km-park path{fill:#E8A400; stroke:#8A5F00; stroke-width:2}
.k-vektor svg > g{transition:opacity .45s ease}
.k-est .k-vektor .km-dom,
.k-est .k-vektor .km-zelen,
.k-est .k-vektor .km-voda{opacity:.42}      /* выбрали объект - район отходит */

/* Маршрут прочерчивается по своему же лучу, а не появляется разом.
   Второй линии поверх нет: геометрия у схемы одна и она настоящая. */
.k-vedet{animation:k-vesti .8s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes k-vesti{to{stroke-dashoffset:0}}

/* Площадка дышит: точка, от которой считаются все расстояния. */
.k-tochka.km-kl{animation:k-puls 2.6s ease-in-out infinite}
@keyframes k-puls{0%,100%{r:12} 50%{r:14.5}}

@media (prefers-reduced-motion: reduce){
  .k-vedet{animation:none; stroke-dashoffset:0 !important}
  .k-tochka.km-kl{animation:none}
}

/* ── Схема на телефоне: подписи по выбору, а не все сразу ──────────────
   Пять плашек на узком экране перекрывают и друг друга, и схему. Оставляем
   точки, а название показываем у выбранного объекта и у самой площадки. */
@media (max-width:700px){
  .k-holst .k-metka.k-tochka{padding:0; width:22px; height:22px; border-radius:50%;
    display:grid; place-items:center; overflow:hidden}
  .k-holst .k-metka.k-tochka b,
  .k-holst .k-metka.k-tochka i,
  .k-holst .k-metka.k-tochka span{display:none}
  .k-holst .k-metka.k-tochka.k-on{width:auto; height:auto; border-radius:12px;
    padding:6px 11px; overflow:visible; z-index:6}
  .k-holst .k-metka.k-tochka.k-on i{display:block; font-style:normal}
  .k-holst .k-metka.k-tochka.k-on small{display:none}
  .k-holst .k-metka.k-glav{z-index:5}
}

/* подпись на луче схемы: сколько идти или ехать */
.k-podpis rect{fill:#141414;opacity:.92}
.k-podpis text{fill:#f5b301;font:600 13px/1 Onest,system-ui,sans-serif;dominant-baseline:middle}
.k-podpis{opacity:0;animation:k-vsplyt .35s .25s forwards}
@keyframes k-vsplyt{to{opacity:1}}

/* Немая метка на схеме района: подписи уже нарисованы на самой карте,
   наша задача показать, о каком объекте идёт речь. Пока не выбрали, метки
   не видно вовсе. */
.k-metka.k-nem{width:34px;height:34px;padding:0;border:0;background:transparent;
  border-radius:50%;transform:translate(-50%,-50%);cursor:pointer}
.k-metka.k-nem::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--yantar,#F5B301);opacity:0;transform:scale(.55);
  transition:opacity .25s ease,transform .25s ease}
.k-metka.k-nem.k-on::after{opacity:1;transform:scale(1)}
.k-metka.k-nem.k-on{box-shadow:0 0 0 6px rgba(245,179,1,.18)}
.k-metka.k-nem:focus-visible{outline:2px solid var(--yantar,#F5B301);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.k-metka.k-nem::after{transition:none}}

/* k-nem-pravka: прежнее правило рисовало плашку с фоном и тенью, поверх карты
   это читалось жёлтым пятном. Немая метка не имеет ни фона, ни тени: только
   кольцо, и только когда объект выбран. */
.k-metka.k-nem, .k-metka.k-nem:hover{background:none!important;box-shadow:none!important;
  color:transparent!important;font-size:0!important;min-width:0!important;
  min-height:0!important;padding:0!important;border:0!important}
.k-metka.k-nem::before{display:none!important}
.k-metka.k-nem.k-on{box-shadow:0 0 0 5px rgba(245,179,1,.16)!important}
.k-metka.k-nem i, .k-metka.k-nem small{display:none!important}

/* Подпись у метки: сколько идти или ехать. Текст берётся из строки маршрута. */
.k-podpis-html{position:absolute;transform:translate(-50%,-230%);z-index:6;
  background:#141414;color:#F5B301;font:600 12px/1 Onest,system-ui,sans-serif;
  padding:6px 10px;border-radius:999px;white-space:nowrap;pointer-events:none;
  opacity:0;animation:k-vsplyt .3s .1s forwards}

/* vit-vyhod: предмет витрины выходит из-за края при появлении раздела.
   Механика та же, что в роликах: объект приезжает, а не проявляется.
   Двигаем саму картинку предмета внутри `.vit`, подпись догоняет следом. */
.vit img{will-change:transform, opacity}
.rv .vit img{
  transform:translate3d(-13%,0,0) scale(.94) rotate(-2.5deg);
  opacity:0;
  transition:transform 1.05s cubic-bezier(.16,.84,.24,1), opacity .8s ease;
}
.rv.vit-stol .vit img{transform:translate3d(13%,0,0) scale(.94) rotate(2.5deg)}
.rv.in .vit img{transform:translate3d(0,0,0) scale(1) rotate(0);opacity:1}
.rv .vit-cap{opacity:0;transform:translate3d(0,10px,0);
  transition:opacity .6s ease .4s, transform .6s ease .4s}
.rv.in .vit-cap{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv .vit img, .rv .vit-cap{transition:none;transform:none;opacity:1}
}

/* Переключатель подложки схемы: спутник или плоская карта. */
.k-perek{position:absolute;left:14px;top:14px;z-index:6;display:flex;gap:2px;
  padding:3px;border-radius:999px;background:rgba(20,20,20,.72);
  backdrop-filter:blur(6px)}
.k-perek-b{appearance:none;border:0;cursor:pointer;border-radius:999px;
  padding:7px 14px;font:600 12px/1 Onest,system-ui,sans-serif;color:#f2f2f0;
  background:transparent;transition:background .2s ease,color .2s ease}
.k-perek-b.k-on{background:#F5B301;color:#141414}
.k-perek-b:focus-visible{outline:2px solid #F5B301;outline-offset:2px}
@media (max-width:700px){.k-perek{left:10px;top:10px}
  .k-perek-b{padding:6px 11px;font-size:11px}}

/* Разрез производственного блока: контур цеха, зоны и высота до балки.
   Зоны проявляются по очереди, каждая со своей задержкой. */
.inf-razrez{margin:34px 0 0}
.inf-razrez .inf-svg{width:100%;height:auto;display:block}
.inf-rz-korpus{fill:#F4F2EE;stroke:#C9C6BF;stroke-width:2}
.inf-rz-pol{stroke:#3C3C3B;stroke-width:3}
.inf-rz-zona{opacity:0;transform:translateY(14px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.16,.84,.24,1)}
.inf-rz-zona.inf-rz-on{opacity:1;transform:none}
.inf-rz-zal{fill:rgba(245,179,1,.22);stroke:#F5B301;stroke-width:2}
.inf-rz-cap{font:600 13px/1 Onest,system-ui,sans-serif;fill:#3C3C3B}
.inf-rz-strelka{stroke:#3C3C3B;stroke-width:1.5;stroke-dasharray:5 4}
.inf-rz-cifra{font:700 16px/1 Unbounded,Onest,system-ui,sans-serif;fill:#141414}
@media (prefers-reduced-motion:reduce){
  .inf-rz-zona{opacity:1;transform:none;transition:none}
}
@media (max-width:700px){.inf-rz-cap{font-size:11px}}

/* Главная зона подсвечена сильнее: она и есть предмет разговора. */
.inf-rz-zal.inf-rz-glav{fill:rgba(245,179,1,.14)}
.inf-rz-zal:not(.inf-rz-glav){fill:rgba(60,60,59,.10);stroke:#8d8a84}
.inf-rz-glav + .inf-rz-cap{font-size:14px}

/* kray-txt-svet: на тёмной секции заголовок вырезанного блока берёт светлый
   цвет. Раньше он оставался чернильным и пропадал в фоне. */
.why .kray-txt b, .dark .kray-txt b, [data-tema="dark"] .kray-txt b{color:#F4F3F0}
.why .kray-txt p, .dark .kray-txt p, [data-tema="dark"] .kray-txt p{color:#C7C5BF}

/* ── Схема планировки: слой поверх листа собственника ────────────────
   Подложка это его же схема, с неё сняты только служебные слои проекта.
   Всё, что мы добавляем от себя, живёт отдельным слоем сверху и лист не
   переписывает: контур площадки, пеший маршрут, указатели направлений. */
.k-sloy{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2}
.k-uchastok{fill:rgba(223,171,0,.26); stroke:#DFAB00; stroke-width:6; stroke-linejoin:round}
.k-pesh{fill:none; stroke:#B98F00; stroke-width:11; stroke-linecap:round;
  stroke-dasharray:22 18; opacity:.95;
  /* Лист широкий, а на экране он ужимается втрое: тонкая линия на нём
     пропадала совсем, поэтому маршрут ведём заметно толще обычного. */
  filter:drop-shadow(0 1px 2px rgba(255,255,255,.85))}

/* Указатели на то, что лежит за краем листа. МКАД, ТТК и шоссе в кадр не
   помещаются, а собственник просил показать и их: ставим стрелку у нужного
   края с расстоянием из паспорта объекта. */
.k-napr{position:absolute; z-index:3; display:flex; align-items:center; gap:6px;
  padding:6px 11px; border-radius:999px; background:rgba(255,255,255,.94);
  border:1px solid rgba(60,60,59,.16); box-shadow:0 6px 18px rgba(0,0,0,.1);
  font-size:11.5px; color:var(--muted,#6B7280); white-space:nowrap;
  transition:opacity .25s ease, transform .25s ease}
.k-napr b{font-family:var(--ff-d,'Oswald',sans-serif); font-size:13px;
  color:var(--ink,#3C3C3B); font-weight:600}
.k-napr::after{content:''; width:0; height:0; border:6px solid transparent}
.k-napr-verh{left:50%; top:10px; transform:translateX(-50%)}
.k-napr-verh::after{border-bottom-color:#B98F00; margin-bottom:6px}
.k-napr-niz{left:50%; bottom:10px; transform:translateX(-50%)}
.k-napr-niz::after{border-top-color:#B98F00; margin-top:6px}
.k-napr-lev{left:10px; top:50%; transform:translateY(-50%)}
.k-napr-lev::after{border-right-color:#B98F00}
.k-napr-prav{right:10px; top:50%; transform:translateY(-50%)}
.k-napr-prav::after{border-left-color:#B98F00}
/* Пока человек ведёт по строкам маршрута, гаснет всё, кроме выбранного */
.tr-karta.k-est .k-napr{opacity:.35}
.tr-karta .k-napr.k-on{opacity:1; box-shadow:0 10px 26px rgba(185,143,0,.3)}
.tr-karta .k-napr-verh.k-on{transform:translateX(-50%) scale(1.07)}
.tr-karta .k-napr-niz.k-on{transform:translateX(-50%) scale(1.07)}
.tr-karta .k-napr-lev.k-on{transform:translateY(-50%) scale(1.07)}
.tr-karta .k-napr-prav.k-on{transform:translateY(-50%) scale(1.07)}
/* Маршрут и контур тоже отзываются на выбор строки */
.tr-karta.k-est .k-pesh{opacity:.3}
.tr-karta .k-pesh.k-on{opacity:1; stroke-width:8}
@media (max-width:640px){
  .k-napr{font-size:10.5px; padding:5px 9px}
  .k-napr b{font-size:12px}
}

/* ── Как груз попадает в блок: карточки шагов ────────────────────────
   Собственник написал повторно: «вас не смущает, что окошки друг на друга
   залезают?». Смущает. У этих карточек не было ни одного своего правила,
   кроме ширины: голый текст шёл сразу под подписью кадра въездной группы и
   налезал на неё. Теперь это нормальные карточки со своим полем и отступом.
   Номер шага рисуем кружком, как в остальных разделах сайта. */
.gt-card{
  position:relative; margin:16px auto 0; padding:20px 22px 20px 66px;
  background:var(--card,#FFFFFF); border:1px solid rgba(60,60,59,.1);
  border-radius:var(--r-lg,18px); box-shadow:var(--sh,0 8px 26px rgba(0,0,0,.07));
}
.gt-card:first-of-type{margin-top:22px}
.gt-card b{display:block; font-family:var(--ff-d,'Oswald',sans-serif);
  font-size:18px; color:var(--ink,#3C3C3B); margin-bottom:6px}
.gt-card p{margin:0; font-size:14.5px; line-height:1.55; color:var(--muted,#6B7280)}
.gt-num{
  position:absolute; left:20px; top:20px; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--gold,#DFAB00); color:#3C3C3B;
  font-family:var(--ff-d,'Oswald',sans-serif); font-size:16px; font-weight:600;
}
/* Кадр въездной группы и первая карточка стояли впритык, подпись уходила под
   текст. Разводим их полем. */
.vg-blok{margin-bottom:6px}
@media (max-width:760px){
  .gt-card{padding:16px 16px 16px 56px}
  .gt-num{left:14px; top:16px; width:28px; height:28px; font-size:15px}
  .gt-card b{font-size:16.5px}
}


/* ── Калькулятор НДС: сравниваем налог с налогом ──────────────────────
   Правка собственника 11.09: «сравнивается НДС с НДС», «НДС, подлежащий
   зачету». В плашках теперь сама сумма налога, под ней ставка за метр и
   процент, по которому она посчитана. */
.nds-para em{display:block; margin-top:5px; font-style:normal;
  font:400 11px/1.35 Manrope,system-ui,sans-serif; color:rgba(247,244,236,.5)}
.nds-para div{min-width:0}
.nds-itog{align-items:center}


/* ── Ключевые показатели: пять цифр на всю ширину ─────────────────────
   Правка собственника 11.09: «так задумано, что информация не
   отцентрована?». Полоса набиралась через auto-fit, и на широком экране
   раскладка давала шесть колонок под пять цифр. Шестая оставалась пустой,
   весь ряд уезжал влево, справа зияла дыра. Колонок теперь ровно столько,
   сколько показателей. */
.stats-grid{grid-template-columns:repeat(5,minmax(0,1fr)); justify-content:center}
.stats-grid .stat{text-align:center}
@media (max-width:1100px){ .stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:700px){ .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:420px){ .stats-grid{grid-template-columns:1fr} }


/* ═══ Транспортная схема: правки собственника 11 сентября ═══════════════
   Разбор по его сообщениям:
   · «отсутствуют станции МЦД и МЖД, которые есть на присланной Вам схеме» -
     станции на листе были, их закрывали наши же метки. На телефоне метка
     сжималась в чёрный кружок 22 пикселя и садилась ровно на красную
     подпись станции. Метка теперь кольцо: середина пустая, подпись под ним
     читается.
   · «навёл курсор на метро каспийская, пусть выделится... можно pop-up» -
     у кольца карточка с названием и временем, всплывает по наведению,
     фокусу и касанию.
   · «новая эстокада для автотранспорта обозначена?» - обозначена. Линия
     обведена по самой дороге на его листе, включая голубой мост через пути.
   · «маршрут к станциям жд?» - прочерчен, по дороге и через тот же мост.
   · «при нажатии на каширское шоссе уменьшите масштаб и покажите где
     шоссе» - указатели стали кнопками, открывают обзорную карту. */

/* маршрут к станции МЦД: тот же пунктир, что к метро, но тоном темнее */
.k-put-zd{fill:none; stroke:#8A6200; stroke-width:9; stroke-linecap:round;
  stroke-linejoin:round; stroke-dasharray:6 16; opacity:.9;
  filter:drop-shadow(0 1px 2px rgba(255,255,255,.85))}

/* новая эстакада: сплошная линия по дороге с листа, белая подложка снизу */
.k-est-svet{fill:none; stroke:rgba(255,255,255,.92); stroke-width:14;
  stroke-linecap:round; stroke-linejoin:round}
.k-est{fill:none; stroke:#D4361F; stroke-width:7; stroke-linecap:round;
  stroke-linejoin:round; opacity:.95}
.tr-karta.k-est-vybor .k-est{stroke-width:9}

/* кольцо вместо плашки: подпись станции на листе остаётся видна */
.k-koltso{position:absolute; z-index:4; width:42px; height:42px; padding:0;
  margin:0; border:0; background:none; cursor:pointer;
  transform:translate(-50%,-50%); -webkit-tap-highlight-color:transparent}
/* Кольцо до наведения не видно: метки станций и маршруты уже нарисованы
   на самой подложке, второе кольцо поверх читалось как дубль. Кольцо это
   теперь только зона наведения, оно проявляется под курсором. */
.k-koltso::after{content:''; position:absolute; inset:0; border-radius:50%;
  border:3px solid #B98F00; box-shadow:0 0 0 2px rgba(255,255,255,.9),
  inset 0 0 0 2px rgba(255,255,255,.55); opacity:0;
  transition:opacity .2s ease, transform .22s ease}
.k-koltso:hover::after,.k-koltso:focus-visible::after,.k-koltso.k-on::after{
  opacity:1; transform:scale(1.12)}
.k-koltso:focus-visible{outline:2px solid #E8A400; outline-offset:6px; border-radius:50%}
.k-koltso-est::after{border-color:#D4361F;
  box-shadow:0 0 0 2px rgba(255,255,255,.9), inset 0 0 0 2px rgba(255,255,255,.5)}

/* карточка станции: то, что собственник назвал pop-up */
.k-vsplyv{position:absolute; left:50%; bottom:calc(100% + 12px); z-index:6;
  display:block; min-width:150px; padding:9px 13px; border-radius:12px;
  background:rgba(20,23,28,.94); color:#F7F4EC; text-align:left; font-weight:400;
  box-shadow:0 14px 32px rgba(0,0,0,.34); pointer-events:none;
  opacity:0; visibility:hidden; transform:translate(-50%,6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s}
.k-vsplyv::after{content:''; position:absolute; left:50%; top:100%;
  transform:translateX(-50%); border:6px solid transparent;
  border-top-color:rgba(20,23,28,.94)}
.k-vsplyv i{display:block; font-style:normal;
  font:700 12.5px/1.2 Manrope,system-ui,sans-serif; white-space:nowrap}
.k-vsplyv span{display:block; margin-top:3px;
  font:400 11px/1.3 Manrope,system-ui,sans-serif; color:rgba(247,244,236,.7);
  max-width:200px}
.k-koltso:hover .k-vsplyv,.k-koltso:focus-visible .k-vsplyv,
.k-koltso.k-on .k-vsplyv{opacity:1; visibility:visible; transform:translate(-50%,0)}

/* кольцо у самого края листа: карточка по центру уезжает за рамку,
   поэтому у края она цепляется левым краем за само кольцо */
.k-koltso.k-kraj .k-vsplyv{left:-14px; transform:translate(0,6px)}
.k-koltso.k-kraj:hover .k-vsplyv,.k-koltso.k-kraj:focus-visible .k-vsplyv,
.k-koltso.k-kraj.k-on .k-vsplyv{transform:translate(0,0)}
.k-koltso.k-kraj .k-vsplyv::after{left:22px}

/* при выборе строки маршрута гаснет всё, кроме выбранного объекта */
.tr-karta.k-est .k-koltso{opacity:.5}
.tr-karta.k-est .k-koltso.k-on{opacity:1}
.tr-karta.k-est .k-put-zd,.tr-karta.k-est .k-est,.tr-karta.k-est .k-est-svet{opacity:.22}
.tr-karta .k-put-zd.k-on{opacity:1; stroke-width:11}
.tr-karta .k-est.k-on{opacity:1; stroke-width:9}
.tr-karta .k-est-svet.k-on{opacity:1}

/* указатели за краем листа стали кнопками */
.k-napr{border:1px solid rgba(60,60,59,.16); cursor:pointer; font-family:inherit}
.k-napr:focus-visible{outline:2px solid #E8A400; outline-offset:3px}
.k-napr:hover{box-shadow:0 10px 26px rgba(185,143,0,.3)}

@media (max-width:700px){
  .k-koltso{width:34px; height:34px}
  .k-vsplyv{min-width:120px; padding:7px 10px}
  .k-vsplyv i{font-size:11.5px}
  .k-vsplyv span{font-size:10px; max-width:150px; white-space:normal}
}


/* ── Обзорная карта: где именно эта дорога ────────────────────────────
   «при нажатии на каширское шоссе - уменьшите масштаб и покажите где
   шоссе. несложная штука». Карта района тянется с севера на юг на
   двадцать километров, в рамку схемы планировки она не влезает, поэтому
   открывается отдельным окном поверх страницы. */
.k-obzor{position:fixed; inset:0; z-index:9000; display:grid; place-items:center;
  padding:18px; background:rgba(10,12,15,.82); -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px)}
.k-obzor[hidden]{display:none}
html.k-obzor-otkryt{overflow:hidden}
.k-obzor-okno{position:relative; display:grid; grid-template-rows:auto 1fr auto;
  gap:10px; width:min(760px,100%); height:min(88vh,100%); padding:16px;
  overflow:hidden;
  border-radius:18px; background:#14171C; color:#F7F4EC; line-height:1.4;
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.k-obzor-shapka{display:grid; gap:3px; padding-right:110px}
.k-obzor-shapka b{font:700 16px/1.2 Manrope,system-ui,sans-serif; color:#F7F4EC}
.k-obzor-shapka span{font:400 12.5px/1.4 Manrope,system-ui,sans-serif;
  color:rgba(247,244,236,.66)}
.k-obzor-holst{min-height:0; overflow:hidden; display:grid; place-items:center}
.k-obzor-ramka{position:relative; height:100%; max-width:100%; margin-inline:auto;
  border-radius:12px; overflow:hidden; background:#EDE9E0}
.k-obzor-ramka img{display:block; width:100%; height:100%; object-fit:contain}
.k-obzor-sloy{position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none}
.k-obzor-put{fill:none; stroke:#E8A400; stroke-width:7; stroke-linecap:round;
  stroke-linejoin:round; filter:drop-shadow(0 0 4px rgba(255,255,255,.9))}
.k-obzor-tochka{fill:#D4361F; stroke:#fff; stroke-width:4}
.k-obzor-zakryt{position:absolute; top:16px; right:16px; z-index:2;
  padding:8px 15px; border:0; border-radius:999px; cursor:pointer;
  background:#E8A400; color:#14171C; font:600 13px/1 Manrope,system-ui,sans-serif}
.k-obzor-zakryt:focus-visible{outline:2px solid #fff; outline-offset:2px}
.k-obzor-istok{margin:0; font:400 11px/1.35 Manrope,system-ui,sans-serif;
  color:rgba(247,244,236,.45)}
@media (max-width:700px){
  .k-obzor{padding:10px}
  .k-obzor-okno{padding:12px; height:min(96vh,100%)}
  .k-obzor-shapka{padding-right:88px}
  .k-obzor-shapka b{font-size:14px}
  .k-obzor-zakryt{top:12px; right:12px; padding:6px 12px; font-size:12px}
}


/* ── Вертикальная механизация отдельным разделом ──────────────────────
   Собственник 11.09: «вертикальная механизация, те каким образом и как
   быстро арендаторы могут поднимать товар, продукцию, все что угодно на
   верхние этажи - это супер важный параметр для арендаторов. Поэтому
   логично вертикальную механизацию вынести в отдельный раздел».
   И про сам подъёмный стол: «ну посреди площади. ни к селу ни к городу.
   не к месту тут» - он стоял в транспортном разделе, теперь здесь. */
.pd-set{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;
  margin:26px 0 8px}
.pd-card{padding:20px 18px 18px; border-radius:16px;
  background:rgba(20,23,28,.04); border:1px solid rgba(60,60,59,.1)}
.pd-num{display:inline-block; margin-bottom:10px; padding:5px 11px;
  border-radius:999px; background:#E8A400; color:#14171C;
  font:700 14px/1 Oswald,system-ui,sans-serif; letter-spacing:.04em}
.pd-card b{display:block; margin-bottom:6px;
  font:600 15.5px/1.25 Manrope,system-ui,sans-serif; color:var(--ink,#14171C)}
.pd-card p{margin:0; font:400 13.5px/1.55 Manrope,system-ui,sans-serif;
  color:var(--muted,#6B7280)}
#podjem .vit-ryad{margin-top:26px}
@media (max-width:1000px){ .pd-set{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .pd-set{grid-template-columns:1fr} }


/* ── План этажа: настоящий чертёж, а не коробки ───────────────────────
   Собственник дважды: «по поводу планировки уже писал. исправьте», и
   раньше: «как понять, что это планировка, а не коробки DHL вид сверху»,
   «не из бабушкиного экселя». Рисованный этаж убран, подложкой идёт
   поэтажный план корпуса. Наш слой теперь только подсветка свободных
   блоков по тем же координатам, что и кликабельные зоны. */
.kplan-img{position:relative}
.kp-chertezh{display:block; width:100%; height:auto; border-radius:12px}
.kplan-img .kp-svg{position:absolute; inset:0; width:100%; height:100%}
.kp-svob rect{fill:rgba(232,164,0,.42); stroke:#B45309; stroke-width:6}
.kp-nom{fill:#2A1A00; paint-order:stroke; stroke:rgba(255,255,255,.85); stroke-width:6}
.kp-pl{fill:#3A2600; paint-order:stroke; stroke:rgba(255,255,255,.8); stroke-width:5}
.kplan-zona:hover ~ .kp-svg .kp-svob rect,
.kplan-zona:focus-visible ~ .kp-svg .kp-svob rect{stroke-width:6}


/* ── Выезды на магистрали строкой под схемой ──────────────────────────
   Правка собственника 11.09: «И вы перепутали МКАД И ТТК». Указатели со
   стрелками стояли по краям листа планировки, а лист повёрнут относительно
   севера: любая стрелка на нём читается неверно, и спор об этом бесконечен.
   Магистрали вынесены отдельной строкой без всяких направлений, а где
   дорога на самом деле, показывает обзорная карта по нажатию. */
.k-vyezdy{margin-top:14px}
.k-vyezdy-nad{display:block; margin-bottom:8px;
  font:400 12px/1.35 Manrope,system-ui,sans-serif; color:var(--muted,#6B7280)}
.k-vyezdy-ryad{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.k-vyezd{display:grid; gap:2px; padding:10px 12px; border-radius:12px; cursor:pointer;
  text-align:left; font-family:inherit; background:rgba(232,164,0,.10);
  border:1px solid rgba(185,143,0,.28);
  transition:background .22s ease, transform .22s ease, box-shadow .22s ease}
.k-vyezd b{font:600 14px/1.2 Manrope,system-ui,sans-serif; color:var(--ink,#14171C)}
.k-vyezd em{font-style:normal; font:400 11.5px/1.3 Manrope,system-ui,sans-serif;
  color:var(--muted,#6B7280)}
.k-vyezd:hover{background:rgba(232,164,0,.2); transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(185,143,0,.22)}
.k-vyezd:focus-visible{outline:2px solid #E8A400; outline-offset:2px}
@media (max-width:700px){
  .k-vyezdy-ryad{grid-template-columns:repeat(2,minmax(0,1fr))}
  .k-vyezd{padding:9px 10px}
}
/* Подпись блока не должна спорить с подписью самого чертежа: на листе у
   каждого блока уже стоит свой номер и площадь мелким шрифтом, и наша
   надпись поверх читалась как двойник. Под неё кладём плашку. */
.kp-svob rect.kp-plashka{fill:rgba(255,255,255,.92); stroke:#B45309; stroke-width:3}
.kp-svob.kp-malo .kp-nom{font-size:38px}
.kp-svob.kp-malo .kp-pl{font-size:22px}
.kp-nom, .kp-pl{stroke:none}


/* ── связь строки и объекта на схеме ──────────────────────────────────
   Собственник 9 сентября: «навел человек курсор на "метро каспийская" -
   пусть на картинке выделится это», «то же самое с МЦД и МЖД», и следом
   «никакой связи между появляющимися элементами и инфраструктурой нет».
   Связи не было потому, что у строк слева стояли ключи, которых на картинке
   не существовало: строка «МЦД Котляково» искала объект mcd, а его не было.
   Теперь у каждой строки свой объект. Слой погашен до наведения, поэтому
   поверх нарисованных линий ничего не двоится. */
.k-sloy{position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:3}
/* Имена свои: класс k-put занят маршрутами прежней карты, там opacity .55,
   и линии слоя светились ещё до наведения. */
.k-sloy .k-sv{opacity:0; transition:opacity .22s ease}
.k-sloy .k-sv-put{fill:none; stroke:#FFC53D; stroke-width:20;
  stroke-linecap:round; stroke-linejoin:round}
.k-sloy .k-sv-doroga{fill:none; stroke:#E8922E; stroke-width:18;
  stroke-linecap:round; stroke-linejoin:round}
.k-sloy .k-sv-cel{fill:none; stroke:#FFC53D; stroke-width:9}
.k-sloy .k-sv.k-on{opacity:.75}
.k-sloy .k-sv-cel.k-on{opacity:1; animation:k-puls 1.4s ease-out infinite}
/* На телефоне наведения нет, поэтому связи там видны сразу, а выбранная ярче. */
@media (max-width:900px){
  .k-sloy .k-sv{opacity:.4}
  .k-sloy .k-sv-cel{opacity:.55}
  .k-sloy .k-sv.k-on{opacity:.85}
}
@keyframes k-puls{
  0%{stroke-width:9; opacity:1}
  70%{stroke-width:3; opacity:.25}
  100%{stroke-width:3; opacity:0}}

/* строка маршрута стала ссылкой на карту выездов: вид не меняется */
a.route{text-decoration:none; color:inherit; display:flex}
a.k-vyezd{text-decoration:none; color:inherit}

/* Метка площадки лежит прямо на корпусе, а корпуса на листе стали янтарными.
   Цвет метки фирменный и остаётся, от здания её отделяют кант и тень. */
.k-metka.k-glav{border:2px solid rgba(255,255,255,.92) !important;
  box-shadow:0 10px 26px rgba(20,23,28,.28) !important}

/* ── Карточка объекта схемы ───────────────────────────────────────────────
   Собственник 09.09: «можно даже картинку pop up сделать». Картинка здесь
   его собственный лист, увеличенный вокруг нужной точки, поэтому на ней
   ровно то, что напечатано в проекте планировки. */
.k-karta-obj{position:fixed; inset:0; z-index:120; display:flex;
  align-items:center; justify-content:center; padding:20px}
.k-karta-obj[hidden]{display:none}
.k-ko-fon{position:absolute; inset:0; background:rgba(20,23,28,.55);
  backdrop-filter:blur(3px); animation:k-ko-fade .2s ease}
.k-ko-telo{position:relative; width:min(680px,100%); background:#fff;
  border-radius:20px; overflow:hidden; box-shadow:0 30px 80px rgba(20,23,28,.35);
  animation:k-ko-up .26s cubic-bezier(.2,.8,.24,1)}
@keyframes k-ko-fade{from{opacity:0}to{opacity:1}}
@keyframes k-ko-up{from{opacity:0; transform:translateY(14px) scale(.98)}
  to{opacity:1; transform:none}}
.k-ko-zum{height:300px; background-repeat:no-repeat; background-size:300%;
  background-color:#F7F4EC}
.k-ko-text{padding:18px 22px 22px; display:flex; flex-direction:column; gap:5px}
.k-ko-text b{font-family:var(--ff-d,'Oswald',sans-serif); font-size:20px;
  letter-spacing:.01em; color:var(--ink,#14171C)}
.k-ko-sub{font-size:14.5px; color:var(--muted,#6B7280)}
.k-ko-add{font-size:13.5px; color:var(--amber,#E8A400); font-weight:600}
.k-ko-x{position:absolute; top:12px; right:12px; width:38px; height:38px;
  border:0; border-radius:50%; background:rgba(255,255,255,.92); color:#14171C;
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 6px 18px rgba(20,23,28,.18); transition:transform .2s ease}
.k-ko-x:hover{transform:scale(1.06)}
.k-ko-x svg{width:18px; height:18px}
@media (max-width:640px){
  .k-ko-zum{height:220px; background-size:260%}
  .k-ko-text b{font-size:18px}
}

/* Строка, у которой есть что показать, ведёт себя как кнопка. */
.route[data-kx]{cursor:pointer}
.route[data-kx]:hover .dot, .route.k-on .dot{box-shadow:0 0 0 6px rgba(232,164,0,.18)}

/* Маршрут показывает направление: штрихи идут от площадки к станции. */
.k-sloy .k-sv-put{stroke-dasharray:34 22}
.k-sloy .k-sv-put.k-on{animation:k-beg 1.15s linear infinite}
@keyframes k-beg{to{stroke-dashoffset:-56}}
.k-sloy .k-sv-doroga.k-on{animation:k-dyh 1.6s ease-in-out infinite}
@keyframes k-dyh{0%,100%{opacity:.75}50%{opacity:.42}}

/* Пока объект выделен, остальной лист мягко гаснет: связь видно сразу. */
.k-holst::after{content:''; position:absolute; inset:0; z-index:2;
  background:rgba(247,244,236,0); pointer-events:none;
  transition:background .26s ease}
.tr-karta.k-est .k-holst::after{background:rgba(247,244,236,.36)}

/* Выбранная строка списка держит выделение. */
.route.k-on{background:rgba(232,164,0,.08); border-radius:12px}

/* Маршрут подходит к «Каспийской» сверху, поэтому подсказка уходит вбок:
   иначе она ложится ровно на тот путь, ради которого её и открыли. */
.k-koltso[data-uzel="kaspiyskaya"] .k-vsplyv,
.k-koltso[data-uzel="mzd"] .k-vsplyv{left:calc(100% + 14px); bottom:auto;
  top:50%; transform:translate(6px,-50%)}
.k-koltso[data-uzel="kaspiyskaya"].k-on .k-vsplyv,
.k-koltso[data-uzel="kaspiyskaya"]:hover .k-vsplyv,
.k-koltso[data-uzel="mzd"].k-on .k-vsplyv,
.k-koltso[data-uzel="mzd"]:hover .k-vsplyv{transform:translate(0,-50%)}
.k-koltso[data-uzel="kaspiyskaya"] .k-vsplyv::after,
.k-koltso[data-uzel="mzd"] .k-vsplyv::after{left:-12px; top:50%;
  transform:translateY(-50%); border-top-color:transparent;
  border-right-color:rgba(20,23,28,.94)}