/* ═══════════════════════════════════════════════════════════
   АВАНГАРД v5 — sections: stats · configurator · services ·
   process · passport · projects · reviews · faq · contacts
   ═══════════════════════════════════════════════════════════ */

/* ═══ STATS — instrument panel ═══ */
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--av-line-soft);background:var(--av-panel);
}
@media (max-width:880px){ .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
.stat-cell{
  padding:clamp(24px,3vw,44px);position:relative;
  border-right:1px solid var(--av-line-soft);border-bottom:1px solid var(--av-line-soft);
}
.stat-cell::before{
  content:attr(data-ix);position:absolute;top:12px;right:14px;
  font-family:var(--font-m);font-size:9.5px;color:var(--av-muted);letter-spacing:.12em;
}
.stat-num{
  font-family:var(--font-d);font-weight:700;
  font-size:clamp(36px,4.4vw,68px);line-height:1;color:var(--av-snow);
  font-variant-numeric:tabular-nums;
}
.stat-num em{font-style:normal;color:var(--av-signal);}
/* text-transform:uppercase убран по просьбе Chase на всех разрешениях —
   подписи плиток читаются строчными, капслок тут не добавлял смысла. */
.stat-lbl{font-family:var(--font-m);font-size:11px;letter-spacing:.18em;color:var(--av-signal);margin-top:14px;}
.stat-sub{font-size:14px;color:var(--av-muted);margin-top:6px;line-height:1.5;}

/* ═══ CONFIGURATOR ═══ */
.config-wrap{
  display:grid;grid-template-columns:minmax(0,1fr) 380px;
  border:1px solid var(--av-line);background:var(--av-panel);
}
@media (max-width:980px){ .config-wrap{grid-template-columns:1fr;} }
.config-view{position:relative;min-height:420px;overflow:hidden;}
#config-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:pan-y;}
#config-canvas:active{cursor:grabbing;}
.config-dims{
  position:absolute;left:20px;top:16px;pointer-events:none;
  font-family:var(--font-m);font-size:11px;letter-spacing:.14em;color:var(--av-signal);
  text-transform:uppercase;line-height:2;
}
.config-dims .dim-sub{color:var(--av-muted);}
.config-hint{
  position:absolute;right:20px;bottom:14px;pointer-events:none;
  font-family:var(--font-m);font-size:10px;letter-spacing:.14em;color:var(--av-muted);text-transform:uppercase;
}
.config-panel{
  border-left:1px solid var(--av-line);padding:clamp(24px,3vw,36px);
  display:flex;flex-direction:column;gap:26px;background:var(--av-steel);
}
@media (max-width:980px){ .config-panel{border-left:0;border-top:1px solid var(--av-line);} }
.cfg-field label{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--font-m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--av-body);margin-bottom:12px;
}
.cfg-field label output{color:var(--av-signal);font-size:13px;font-family:var(--font-m);}
.cfg-range{
  -webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;cursor:pointer;
}
.cfg-range::-webkit-slider-runnable-track{height:2px;background:var(--av-line);}
.cfg-range::-moz-range-track{height:2px;background:var(--av-line);}
.cfg-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;margin-top:-8px;
  background:var(--av-void);border:2px solid var(--av-signal);border-radius:0;
  transform:rotate(45deg);
}
.cfg-range::-moz-range-thumb{
  width:14px;height:14px;background:var(--av-void);border:2px solid var(--av-signal);border-radius:0;transform:rotate(45deg);
}
.cfg-types{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.cfg-type{
  font-family:var(--font-m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:11px 8px;border:1px solid var(--av-line);color:var(--av-body);text-align:center;
  transition:all .2s var(--ease);
}
.cfg-type:hover{border-color:var(--av-snow);color:var(--av-snow);}
.cfg-type.act{border-color:var(--av-signal);color:var(--av-signal);background:color-mix(in srgb,var(--av-signal) 6%,transparent);}
.cfg-out{
  border-top:1px solid var(--av-line);padding-top:20px;
  display:grid;grid-template-columns:1fr 1fr;gap:14px 10px;
}
.cfg-out .co .cov{font-family:var(--font-d);font-weight:600;font-size:21px;color:var(--av-snow);font-variant-numeric:tabular-nums;}
.cfg-out .co .cov em{font-style:normal;color:var(--av-signal);}
.cfg-out .co .cok{font-family:var(--font-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--av-muted);margin-top:3px;}
.cfg-cta{width:100%;justify-content:center;margin-top:4px;}
.cfg-micro{font-family:var(--font-m);font-size:9.5px;letter-spacing:.1em;color:var(--av-muted);text-transform:uppercase;text-align:center;}

/* ═══ SERVICES — system modules ═══ */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--av-line-soft);border:1px solid var(--av-line-soft);}
@media (max-width:980px){ .svc-grid{grid-template-columns:1fr;} }
.svc{
  background:var(--av-void);padding:clamp(24px,2.8vw,40px);position:relative;overflow:hidden;
  transition:background .25s var(--ease);min-height:230px;display:flex;flex-direction:column;
}
.svc:hover{background:var(--av-panel);}
.svc::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--av-signal);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.svc:hover::after{transform:scaleX(1);}
.svc-ix{font-family:var(--font-m);font-size:11px;letter-spacing:.16em;color:var(--av-signal);}
.svc-name{font-family:var(--font-d);font-weight:600;font-size:clamp(19px,1.8vw,24px);text-transform:uppercase;margin-top:14px;line-height:1.2;}
.svc-desc{font-size:14.5px;color:var(--av-body);margin-top:12px;line-height:1.65;max-width:42ch;}
.svc-tail{margin-top:auto;padding-top:18px;font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--av-muted);}
.svc.svc-wide{grid-column:span 3;flex-direction:row;align-items:center;gap:32px;min-height:0;}
@media (max-width:980px){ .svc.svc-wide{grid-column:span 1;flex-direction:column;align-items:flex-start;} }
.svc-wide .svc-name{margin-top:0;}
.svc-wide .svc-desc{margin-top:0;}

/* ═══ PROCESS — 90-day rail ═══ */
.proc-day{
  font-family:var(--font-d);font-weight:700;font-size:clamp(54px,8vw,120px);
  line-height:1;color:var(--av-snow);font-variant-numeric:tabular-nums;
}
.proc-day em{font-style:normal;color:var(--av-signal);}
.proc-day .pd-cap{font-family:var(--font-m);font-size:11px;letter-spacing:.2em;color:var(--av-muted);display:block;margin-bottom:10px;font-weight:400;}
.proc-rail{position:relative;height:2px;background:var(--av-line);margin:clamp(36px,5vw,56px) 0 0;}
/* width:100% + scaleX вместо анимации самой width: transform идёт на композиторе
   и не вызывает reflow на каждом кадре скролла (JS пишет scaleX в av9.js/procScrub) */
.proc-fill{position:absolute;left:0;top:0;bottom:0;background:var(--av-signal);width:100%;transform:scaleX(0);transform-origin:left center;box-shadow:0 0 14px color-mix(in srgb,var(--av-signal) 50%,transparent);}
.proc-cursor{
  position:absolute;top:50%;width:14px;height:14px;background:var(--av-void);
  border:2px solid var(--av-signal);transform:translate(-50%,-50%) rotate(45deg);left:0%;
}
.proc-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--av-line-soft);border:1px solid var(--av-line-soft);border-top:0;}
@media (max-width:880px){ .proc-steps{grid-template-columns:1fr;} }
.proc-step{background:var(--av-void);padding:clamp(22px,2.6vw,36px);transition:background .3s var(--ease);}
.proc-step.act{background:var(--av-panel);}
.proc-step .ps-days{font-family:var(--font-m);font-size:10.5px;letter-spacing:.16em;color:var(--av-signal);}
.proc-step .ps-name{font-family:var(--font-d);font-weight:600;font-size:20px;text-transform:uppercase;margin-top:10px;}
.proc-step .ps-desc{font-size:14.5px;color:var(--av-body);margin-top:10px;line-height:1.65;}
.proc-step .ps-out{font-family:var(--font-m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--av-muted);margin-top:16px;}
.proc-step .ps-out::before{content:"→ ";color:var(--av-signal);}

/* ═══ PASSPORT — dark theme default (light theme overrides in av5-base.css) ═══
   Импортировано из DesignSync "About Final.dc.html" (claude.ai/design, проект Avangard),
   структура и текст — из дизайна, все размеры шрифтов — наши существующие токены:
   .pass-h/.stat-num/.stat-lbl уже были в проекте, .pf-h/.pf-n/.pass-feat p зеркалят
   .psvc-name/.psvc-num/.psvc-desc (соседний блок, тот же приём «нумерованная карточка»). */
.sec-passport{color:var(--av-snow);}
.sec-passport .sec-tag .t{color:var(--av-snow);}
.sec-passport .sec-tag .t::before,.sec-passport .sec-tag .t::after,.sec-passport .sec-tag .ix{color:rgba(237,242,238,.4);}
.sec-passport .sec-tag .ln{background:rgba(237,242,238,.12);}

/* .pass-h больше НЕ задаёт свой шрифт — <h2 class="h2 pass-h"> в HTML, вся типографика (включая
   wide-tier рост на 1920/2560px) наследуется от канонического .h2 (av5-base.css), .pass-h тут
   только layout-роль. Раньше был свой clamp(28,3.4vw,50) без wide-tier — на 2560px .h2 растёт до
   90px, а .pass-h упирался в потолок 50px и выглядел мельче остального сайта. */
.pass-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px 48px;align-items:end;margin-bottom:40px;}
@media (max-width:760px){ .pass-head{grid-template-columns:minmax(0,1fr);} }
.pass-h{margin:0;}
.pass-lead{margin:0;font-size:clamp(14px,1.1vw,16px);line-height:1.7;color:var(--av-body);text-wrap:pretty;}

.pass-stats{margin-bottom:40px;}
/* .52em, не .42em: при stat-num 26px давало 10.9px — самое мелкое на десктопе */
.pass-unit{font-size:.52em;font-weight:600;}
/* .stat-num/.stat-lbl (реактивированный .stats-grid) НЕ имели живого аналога на сайте — растили до
   84-108px, ломали перенос строки. Настоящий живой аналог «крупное число + подпись» — .tele-cell
   .tv/.tk в hero (av5-base.css:247-254, реально используется, content идентичен: "200 000 м²").
   Переопределяю size 1:1 под .tv/.tk, а не под собственную неиспользуемую шкалу .stat-num/.stat-lbl. */
.pass-stats .stat-num{font-family:var(--font-d);font-weight:600;font-size:clamp(19px,1.9vw,26px);line-height:1.1;}
/* потолок поднят 13px→16px: 0.85vw/13px-потолок брался у .tele-cell .tk 1:1, но сам .tk на 4K тоже не растёт —
   источник был правильный, но сам не тестирован на экстремально широких экранах (не проверил эталон) */
.pass-stats .stat-lbl{font-size:clamp(11px,0.7vw,16px);letter-spacing:.1em;color:var(--av-muted);margin-top:6px;}
@media (min-width:1920px){ .pass-stats .stat-num{font-size:clamp(23px,1.6vw,32px);} }
@media (min-width:2560px){ .pass-stats .stat-num{font-size:clamp(30px,1.7vw,42px);} }
/* .stat-cell::before (индекс 01-04) — внутри ЭТОЙ секции рядом с .pf-n (тот же приём на .pass-feat),
   выравниваю с ним для консистентности внутри секции, а не оставляю третий несовпадающий вариант. */
.pass-stats .stat-cell::before{font-size:10.5px;color:var(--av-signal);}
/* .stats-grid/.stat-cell в light theme раньше уходили в border-color:transparent (av5-base.css:451-453) —
   это было рассчитано на другой контекст (тот же приём, что и у .svc-grid). Внутри #about рядом лежат
   .pass-feat с видимой рамкой в обеих темах — рамка должна остаться видимой и здесь, как у живого
   аналога .hero-tele/.tele-cell (av5-base.css:370: border-right-color виден в light, не transparent). */
html[data-theme="light"] .stats-grid.pass-stats,
html[data-theme="light"] .stats-grid.pass-stats .stat-cell{border-color:var(--av-line);background:var(--av-panel);}

.pass-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,2.4vw,32px);align-items:stretch;}
@media (max-width:980px){ .pass-body{grid-template-columns:1fr;} }

.pass-feats{display:flex;flex-direction:column;gap:clamp(16px,1.8vw,22px);height:100%;}
.pass-feat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.8vw,22px);flex:1;}
@media (max-width:560px){ .pass-feat-grid{grid-template-columns:1fr;} }
.pass-feat{border:1px solid var(--av-line);background:var(--av-panel);padding:clamp(16px,1.8vw,22px);display:flex;flex-direction:column;gap:10px;}
.pf-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
/* pf-h = .how-name/.dlv2-note-title шкала (унификация из 4480189/13c668c) — было font-m/700/13px, чужой мёртвый эталон */
.pf-h{font-family:var(--font-d);font-weight:600;font-size:clamp(15px,1.3vw,19px);letter-spacing:-.01em;text-transform:uppercase;color:var(--av-snow);}
.pf-n{font-family:var(--font-m);font-size:clamp(10.5px,0.55vw,14px);letter-spacing:.12em;color:var(--av-signal);}
.pass-feat p{margin:0;font-size:clamp(14px,1.1vw,16px);color:var(--av-body);line-height:1.65;}

.pass-note{
  background:color-mix(in srgb, var(--av-signal) 6%, transparent);border-left:3px solid var(--av-signal);
  padding:14px 18px;font-size:clamp(14px,1.1vw,16px);color:var(--av-snow);line-height:1.7;
}
.pass-note strong{font-weight:500;}

.pass-photo-col{display:flex;flex-direction:column;gap:clamp(16px,1.8vw,22px);}
.pass-photo{position:relative;flex:1;min-height:400px;border:1px solid var(--av-line);overflow:hidden;}
@media (min-width:1600px){ .pass-photo{min-height:520px;} }
@media (min-width:2560px){ .pass-photo{min-height:640px;} }
/* bleed 64px сверху/снизу — запас хода для параллакса (JS ниже), паттерн 1:1 из .dlv2-hero (коммит 4480189) */
.pass-photo image-slot{position:absolute;left:0;right:0;top:-96px;bottom:-96px;width:100%;height:calc(100% + 192px);will-change:transform;}
.pass-photo-tag{position:absolute;left:12px;background:rgba(4,7,10,.72);font-family:var(--font-m);font-size:clamp(9.5px,0.55vw,13px);letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;}
.pass-photo-tag--top{top:12px;color:var(--av-signal);}
.pass-photo-tag--bottom{bottom:12px;color:var(--av-snow);letter-spacing:.14em;}
.pass-photo-meta{
  display:flex;flex-wrap:wrap;gap:8px 18px;padding:12px 14px;border:1px solid var(--av-line);background:var(--av-panel);
  font-family:var(--font-m);font-size:clamp(10.5px,0.55vw,14px);letter-spacing:.12em;text-transform:uppercase;color:var(--av-body);
}
.pass-photo-meta .dot{color:var(--av-muted);}
.pass-photo-meta .hl{color:var(--av-signal);}

/* ═══ CASE DETAIL (внутри #projects, между картой и «Выполненные объекты») — DesignSync Case Detail.dc.html ═══
   Живые эталоны, не мёртвый код: .h2 (заголовок), .how-name/.dlv2-note-title (подзаголовки),
   .dlv2-kicker/.dlv2-intro/.dlv2-quote/.dlv2-body/.dlv2-left (уже в Process-секции), .how-steps/.how-num
   (тоже Process), .pass-stats (только что откалиброван под .tele-cell в секции «О компании»),
   .dlv2-footer (CTA-плашка). Только полосы сравнения/большое число — новый, не имеющий аналога компонент. */
/* Под-секция: отступ сверху = ровно var(--sec-pad) — половина межсекционного разрыва.
   Явно крупнее внутриблочных 24–64px и явно меньше межсекционных 259/352px, поэтому
   кейс читается как отдельный уровень иерархии и масштабируется на всех тирах.
   margin-bottom НЕ задаём: секция #projects уже даёт свой padding-bottom, лишний margin
   разрывал ритм #projects→#process (332px вместо 259px). */
.cd{margin-top:var(--sec-pad);}
.cd-hero{position:relative;overflow:hidden;height:clamp(220px,28vw,400px);}
/* wide-tier: фиксированная высота с потолком превращала баннер в полосу — на 3440px
   ширина 2559 при height 520 давала 4.9:1. Переходим на пропорцию: высота растёт
   вместе с шириной, max-height страхует от «баннера в полтора экрана». */
@media (min-width:1800px){
  .cd-hero{height:auto;aspect-ratio:3/1;max-height:min(72vh,900px);}
}
/* запас хода 96px (было 64) — амплитуда параллакса поднята до ±72px, край картинки не должен обнажаться */
.cd-hero image-slot{position:absolute;left:0;right:0;top:-96px;bottom:-96px;width:100%;height:calc(100% + 192px);display:block;will-change:transform;}
/* hyphens:auto обязателен вместе с .h2{overflow-wrap:break-word}: на телефоне
   «ЛЕСОПЕРЕРАБАТЫВАЮЩЕЕ» требует 411px при доступных 309px, и break-word рвал слово
   ПОСЕРЕДИНЕ БЕЗ ДЕФИСА («ЛЕСОПЕРЕРАБАТЫВ / АЮЩЕЕ»). С hyphens:auto и lang="ru"
   браузер переносит по слогам с дефисом: «ЛЕСОПЕРЕРА- / БАТЫВАЮЩЕЕ». */
.cd-h{margin:0;max-width:26ch;color:var(--av-snow);-webkit-hyphens:auto;hyphens:auto;}

/* Кикер поверх фото — светлая подложка + тёмный текст вместо надежды на градиент-затемнение снизу:
   на светлых/пёстрых участках фото (небо, светлый металл) `color:var(--av-snow)` без своего фона
   читался плохо. Тот же селектор чинит .dlv2-kicker и здесь, и в Process-секции ("До начала работ",
   index.html — оба используют один и тот же .dlv2-hero-ov). */
.dlv2-hero-ov .dlv2-kicker{display:inline-flex;width:fit-content;background:rgba(237,242,238,.94);color:#1A2011;opacity:1;padding:6px 12px;}
.dlv2-hero-ov .dlv2-kicker::before{background:#1A2011;opacity:.45;}

/* .cd-subh = шкала .how-name (живой эталон подзаголовков), но с отступом от заголовка колонки:
   раньше кикер .dlv2-kicker + .how-name + .dlv2-intro + .dlv2-check-head давали 4 разных микро-стиля
   в одной горизонтали — обе колонки теперь открываются одинаковым .dlv2-check-head */
.cd-subh{font-family:var(--font-d);font-weight:600;font-size:clamp(15px,1.3vw,19px);text-transform:uppercase;letter-spacing:-.01em;color:var(--av-snow);margin:clamp(16px,1.8vw,24px) 0 clamp(12px,1.2vw,16px);max-width:36ch;}
/* первый .how-step в кейсе: .dlv2-check-head уже даёт синюю линию сверху — border-top шага удваивал её */
.cd-body .how-step:first-child{border-top:0;}

.cd-result{margin-top:clamp(32px,4vw,48px);border:1px solid var(--av-line);background:var(--av-panel);padding:clamp(24px,3.4vw,48px);}
/* вывод кейса — уровень секционного заголовка, не карточного: .how-name (19px max) был мелок
   для утверждения на пол-экрана. Шкала = 0.65 от .h2, чтобы не спорить с заголовком баннера. */
/* max-width снят: заголовок должен занимать всю колонку, равную ширине блока с фото ниже */
.cd-result-h{font-family:var(--font-d);font-weight:600;font-size:clamp(22px,2.4vw,38px);line-height:1.1;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;color:var(--av-snow);margin:0;}
@media (min-width:1920px){ .cd-result-h{font-size:clamp(34px,2.4vw,46px);} }
@media (min-width:2560px){ .cd-result-h{font-size:clamp(42px,2.4vw,58px);} }
/* .pass-head — тот же приём, что и в шапке «О компании»: кикер+заголовок слева, текст справа,
   вместо одной узкой колонки текста в широкой панели (дыра в пол-экрана справа). */
/* Колонки шапки те же, что у сетки с фото ниже (.cd-result-grid = 1fr 1fr):
   заголовок ровно по ширине блока с моделью КМ, текст — по ширине графика.
   Было унаследованное от .pass-head 1.35fr/1fr — заголовок вылезал за фото на 108px
   и строки рвались раньше, чем нужно. */
.cd-result-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,48px);margin-bottom:clamp(24px,2.8vw,36px);align-items:start;}
/* Обязателен: правило выше объявлено ПОСЛЕ мобильного оверрайда .pass-head и перебивало
   его — на телефоне оставались две колонки, блок расползался за экран на 35px. */
@media (max-width:760px){ .cd-result-head{grid-template-columns:minmax(0,1fr);} }
.cd-result-p{margin:0;max-width:none;font-size:clamp(15.4px,1.21vw,17.6px);}
.cd-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px);align-items:stretch;}
@media (max-width:760px){ .cd-result-grid{grid-template-columns:1fr;} }

/* фон рамки — белый (не панельный var(--av-panel)): фото 3D-модели само на белом, contain оставляет
   поля по бокам/сверху-снизу — рамка должна сливаться с фото, а не спорить с ним цветом темы */
.cd-km-frame{border:1px solid var(--av-line);background:#fff;display:flex;flex-direction:column;}
.cd-km-frame image-slot{width:100%;height:clamp(200px,20vw,320px);display:block;background:#fff;}
@media (min-width:1800px){ .cd-km-frame image-slot{height:auto;aspect-ratio:2/1;} }
/* image-slot рисует внутри shadow DOM .frame{background:rgba(0,0,0,.04)} — серая подложка компонента
   ложилась поверх белого фона рамки и оставляла серые поля по бокам contain-картинки.
   Пробивается только через ::part(frame) — у .frame в image-slot.js есть part="frame". */
.cd-km-frame image-slot::part(frame){background:#fff;}
.cd-km-cap{font-family:var(--font-m);font-size:clamp(10.5px,0.55vw,14px);letter-spacing:.14em;text-transform:uppercase;color:var(--av-muted);background:var(--av-steel);padding:9px 14px;border-top:1px solid var(--av-line);}

.cd-bars{display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,2vw,26px);}
.cd-bar-lbl{display:flex;justify-content:space-between;gap:12px;font-family:var(--font-m);font-size:clamp(11px,0.55vw,14px);letter-spacing:.12em;color:var(--av-muted);margin-bottom:8px;}
.cd-bar-lbl .sig{color:var(--av-signal);}
.cd-bar-rail{height:12px;background:var(--av-line);}
.cd-bar-fill{height:100%;width:0;background:var(--av-signal);transition:width 1s var(--ease) .15s;}
.cd-result.in .cd-bar-fill{width:var(--w);}
.cd-bar-delta{font-family:var(--font-m);font-size:clamp(11px,0.55vw,14px);letter-spacing:.12em;color:var(--av-signal);margin-top:8px;}
.cd-money-box{border-top:1px solid var(--av-line);padding-top:clamp(16px,1.8vw,22px);}
.cd-money-eq{font-family:var(--font-m);font-size:clamp(11px,0.75vw,15px);letter-spacing:.08em;color:var(--av-muted);margin-bottom:10px;}
.cd-money{font-family:var(--font-d);font-weight:800;font-size:clamp(28px,3.2vw,48px);line-height:1;color:var(--av-signal);}
.cd-money-cap{font-size:14px;color:var(--av-body);line-height:1.6;margin-top:10px;}

.cd-gallery-wrap{margin-top:clamp(28px,3.4vw,48px);}
.cd-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin-top:clamp(14px,1.6vw,20px);}
@media (max-width:760px){ .cd-gallery{grid-template-columns:1fr 1fr;} .cd-gallery figure:last-child{grid-column:1 / -1;} }
@media (max-width:480px){ .cd-gallery{grid-template-columns:1fr;} .cd-gallery figure:last-child{grid-column:auto;} }
.cd-gallery figure{margin:0;}
.cd-gallery image-slot{width:100%;height:clamp(180px,16vw,240px);display:block;border:1px solid var(--av-line);}
@media (min-width:1800px){ .cd-gallery image-slot{height:auto;aspect-ratio:3/2;} }
.cd-gallery figcaption{font-family:var(--font-m);font-size:clamp(10.5px,0.55vw,14px);letter-spacing:.12em;text-transform:uppercase;color:var(--av-muted);padding-top:8px;}

.cd-foot{margin-top:clamp(18px,2vw,26px);}

/* ═══ PROJECTS — registry ═══ */
.reg{border:1px solid var(--av-line-soft);}
.reg-head,.reg-row{
  display:grid;grid-template-columns:64px 1.6fr 1fr 1fr .7fr 28px;
  gap:16px;align-items:center;padding:18px 22px;
}
@media (max-width:880px){
  .reg-head{display:none;}
  .reg-row{grid-template-columns:48px 1fr 28px;}
  .reg-row .rg-city,.reg-row .rg-dims{display:none;}
}
.reg-head{
  font-family:var(--font-m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--av-muted);border-bottom:1px solid var(--av-line-soft);padding-block:12px;
}
.reg-item{border-bottom:1px solid var(--av-line-soft);}
.reg-item:last-child{border-bottom:0;}
.reg-row{cursor:pointer;transition:background .2s var(--ease);width:100%;text-align:left;}
.reg-row:hover{background:var(--av-panel);}
.reg-row .rg-id{font-family:var(--font-m);font-size:11px;color:var(--av-signal);letter-spacing:.1em;}
.reg-row .rg-name{font-family:var(--font-d);font-weight:500;font-size:clamp(15px,1.5vw,19px);text-transform:uppercase;}
.reg-row .rg-city,.reg-row .rg-dims{font-family:var(--font-m);font-size:12px;color:var(--av-body);letter-spacing:.06em;}
.reg-row .rg-year{font-family:var(--font-m);font-size:12px;color:var(--av-muted);text-align:right;}
.reg-row .rg-x{
  font-family:var(--font-m);font-size:14px;color:var(--av-muted);text-align:center;
  transition:transform .3s var(--ease),color .2s;
}
.reg-item.open .rg-x{transform:rotate(45deg);color:var(--av-signal);}
.reg-body{
  display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease);
}
.reg-item.open .reg-body{grid-template-rows:1fr;}
.reg-body-in{overflow:hidden;}
.reg-detail{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;
  padding:6px 22px 26px;
}
@media (max-width:880px){ .reg-detail{grid-template-columns:1fr;} }
.reg-photo image-slot{width:100%;height:240px;}
.reg-specs{display:flex;flex-direction:column;gap:0;border:1px solid var(--av-line-soft);align-self:start;}
.reg-specs .rs{
  display:flex;justify-content:space-between;gap:12px;padding:11px 16px;
  border-bottom:1px solid var(--av-line-soft);
}
.reg-specs .rs:last-child{border-bottom:0;}
.reg-specs .rsk{font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--av-muted);}
.reg-specs .rsv{font-family:var(--font-m);font-size:12px;color:var(--av-snow);}

/* ═══ REVIEWS — comms log ═══ */
.log-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--av-line-soft);border:1px solid var(--av-line-soft);}
@media (max-width:980px){ .log-grid{grid-template-columns:1fr;} }
.log{background:var(--av-void);padding:clamp(24px,2.8vw,38px);display:flex;flex-direction:column;gap:20px;}
.log-head{
  display:flex;justify-content:space-between;gap:12px;
  font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--av-muted);
}
.log-head .sig{color:var(--av-signal);}
.log-quote{font-size:16.5px;line-height:1.7;color:var(--av-snow);font-weight:300;text-wrap:pretty;}
.log-who{margin-top:auto;}
.log-who .lw-name{font-family:var(--font-d);font-weight:500;font-size:14px;text-transform:uppercase;letter-spacing:.04em;}
.log-who .lw-role{font-family:var(--font-m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--av-muted);margin-top:5px;}

/* ═══ FAQ — terminal ═══ */
.faq-list{border:1px solid var(--av-line-soft);}
.faq-item{border-bottom:1px solid var(--av-line-soft);}
.faq-item:last-child{border-bottom:0;}
.faq-q{
  width:100%;display:flex;align-items:baseline;gap:16px;text-align:left;
  padding:22px 24px;transition:background .2s var(--ease);
}
.faq-q:hover{background:var(--av-panel);}
.faq-q .fq-pr{font-family:var(--font-m);font-size:13px;color:var(--av-signal);}
.faq-q .fq-t{font-family:var(--font-d);font-weight:500;font-size:clamp(15px,1.6vw,19px);text-transform:uppercase;flex:1;}
.faq-q .fq-x{font-family:var(--font-m);color:var(--av-muted);transition:transform .3s var(--ease);}
.faq-item.open .fq-x{transform:rotate(45deg);color:var(--av-signal);}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease);}
.faq-item.open .faq-a{grid-template-rows:1fr;}
.faq-a-in{overflow:hidden;}
/* padding-top 16px: ответ начинался вплотную под вопросом, без воздуха между ними. */
.faq-a p{padding:16px 24px 24px 53px;color:var(--av-body);font-size:15.5px;line-height:1.7;max-width:75ch;text-wrap:pretty;}
@media (min-width:1920px){ .faq-a p{max-width:95ch;} }
@media (min-width:2560px){ .faq-a p{max-width:110ch;} }

/* ═══ CONTACTS ═══ */
.sec-contacts{border-top:1px solid var(--av-line-soft);background:var(--av-panel);}
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);}
/* minmax(0,1fr), не 1fr — тот же grid blowout, что был у .rec-band: кнопка «Получить КП
   бесплатно» с white-space:nowrap (299.8px) распирала auto-колонку до 337.8px при
   контейнере 290px и давала горизонтальный скролл на экранах уже ~353px. */
@media (max-width:980px){ .ct-grid{grid-template-columns:minmax(0,1fr);} }
@media (max-width:980px){ .ct-grid input,.ct-grid textarea,.ct-grid select,.ct-grid .btn{min-width:0;} }
.ct-h{font-family:var(--font-d);font-weight:700;font-size:clamp(34px,4.4vw,68px);line-height:1.02;text-transform:uppercase;letter-spacing:-.01em;}
.ct-h .hl{color:var(--av-signal);}
.ct-data{margin-top:36px;display:flex;flex-direction:column;}
.ct-row{
  display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--av-line-soft);
}
.ct-row .ck{font-family:var(--font-m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--av-muted);}
.ct-row .cv{font-family:var(--font-m);font-size:13.5px;color:var(--av-snow);text-align:right;}
.ct-row .cv a:hover{color:var(--av-signal);}
.ct-form{
  background:var(--av-steel);border:1px solid var(--av-line);
  padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:20px;
}
.ct-form .ff label{
  display:block;font-family:var(--font-m);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--av-muted);margin-bottom:9px;
}
.ct-form input,.ct-form textarea{
  width:100%;background:var(--av-void);border:1px solid var(--av-line);
  color:var(--av-snow);font-family:var(--font-b);font-weight:300;font-size:16px;
  padding:14px 16px;border-radius:0;transition:border-color .2s;
}
.ct-form input::placeholder,.ct-form textarea::placeholder{color:var(--av-muted);}
.ct-form input:focus,.ct-form textarea:focus{outline:none;border-color:var(--av-signal);}
.ct-form textarea{resize:vertical;min-height:84px;}
.ct-micro{font-family:var(--font-m);font-size:9.5px;letter-spacing:.1em;color:var(--av-muted);text-transform:uppercase;text-align:center;}
.ct-done{display:none;text-align:center;padding:40px 0;}
.ct-form.sent .ct-done{display:block;}
.ct-form.sent .ct-live{display:none;}
.ct-done .cd-t{font-family:var(--font-d);font-weight:600;font-size:24px;text-transform:uppercase;color:var(--av-signal);}
.ct-done p{color:var(--av-body);margin-top:12px;font-size:15px;}

/* ═══ FOOTER ═══ */
/* padding задаётся в index.html (calc(var(--sec-pad)*.55)) — здесь только не-конфликтующее,
   иначе два источника правды на один отступ */
.foot-grid{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;}
.foot-logo{height:18px;width:auto;opacity:.9;}
.foot-meta{font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--av-muted);line-height:2;}
.foot-meta a:hover{color:var(--av-signal);}

/* ═══ WIDE SCREEN ADAPTIVE (sections) — 1920 / 2560 ═══ */

@media (min-width:1920px){
  .stat-num{font-size:clamp(60px,4.2vw,84px);}
  .config-wrap{grid-template-columns:minmax(0,1fr) 480px;}
  .ct-h{font-size:clamp(52px,4.6vw,84px);}
}

@media (min-width:2560px){
  .stat-num{font-size:clamp(84px,4.4vw,108px);}
  .config-wrap{grid-template-columns:minmax(0,1fr) 600px;}
  .ct-h{font-size:clamp(80px,4.8vw,104px);}
  .proc-day{font-size:clamp(120px,7vw,156px);}
}