/* ============================================================
   ОРЛИНК — главная страница. Тёмная тема (как в дизайне).
   Базовый слой: токены, типографика, кнопки, формы, анимации.
   Секции добавляются ниже блоками с префиксами классов.
   ============================================================ */

/* ---------- Шрифты ---------- */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 600;font-display:swap;src:url("../fonts/golos-cyr.woff2") format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 600;font-display:swap;src:url("../fonts/golos-cyr-ext.woff2") format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 600;font-display:swap;src:url("../fonts/golos-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 600;font-display:swap;src:url("../fonts/golos-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0}
@font-face{font-family:'Montserrat Brand';font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/montserrat-extrabold.woff2") format('woff2')}
@font-face{font-family:'Montserrat Brand';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/montserrat-regular.woff2") format('woff2')}

/* ---------- Токены ---------- */
:root{
  --bg:#161616;
  --ink:#F2F2F2;
  --panel:#1E1E1E;
  --tile:rgba(255,255,255,.07);
  --tile-strong:rgba(24,24,24,.92);
  --sec-blue:#20262E;
  --sec-olive:#22251C;
  --sec-sand:#272219;
  --sec-warm:#211F1C;
  --acc:#EE7D00;
  --acc-hover:#ffb782;
  --dark:#181818;
  --ink-70:rgba(242,242,242,.70);
  --ink-55:rgba(242,242,242,.55);
  --ink-45:rgba(242,242,242,.45);
  --ink-30:rgba(242,242,242,.30);
  --ink-14:rgba(242,242,242,.14);
  --header-h:76px;
  --radius:8px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --fab-safe:96px; /* нижний отступ секций с CTA под плавающие кнопки на мобильных */
}

/* ---------- База ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Golos Text',system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto}
a{color:var(--ink);text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
::selection{background:var(--acc);color:var(--dark)}
::placeholder{color:var(--ink-30)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
h1,h2,h3,h4{margin:0;line-height:1.1}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

@media (hover:hover){
  a:hover{color:var(--acc)}
}

/* ---------- Контейнер и ритм секций ---------- */
.container{max-width:1440px;margin:0 auto;padding-left:clamp(20px,4vw,64px);padding-right:clamp(20px,4vw,64px)}
.section{scroll-margin-top:var(--header-h);position:relative}
.section__inner{padding-top:clamp(56px,6vw,80px);padding-bottom:clamp(56px,6vw,80px)}

/* Ярлык секции + заголовки */
.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);font-weight:500}
.h-display{font-family:'Montserrat Brand',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:1.04;overflow-wrap:break-word}
h2.h-display{font-size:clamp(28px,4.6vw,64px)}
.h-sub{font-weight:500;font-size:clamp(20px,2.2vw,32px);line-height:1.2}
.lede{font-size:clamp(16px,1.5vw,20px);line-height:1.55;color:var(--ink-70);text-wrap:pretty}

/* ---------- Кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--acc);color:var(--dark);font-weight:500;font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:17px 34px;border-radius:var(--radius);border:none;transition:background .2s ease,color .2s ease,transform .2s ease}
.btn--ghost{background:none;color:var(--ink);border:1px solid var(--ink-30)}
.btn--dark{background:var(--dark);color:var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
@media (hover:hover){
  .btn:hover{background:var(--dark);color:var(--ink);transform:translateY(-3px)}
  .btn--ghost:hover{background:var(--acc);border-color:var(--acc);color:var(--dark);transform:none}
  .btn--dark:hover{background:var(--acc);color:var(--dark)}
}
.btn:active{transform:translateY(0)}

/* Квадратные кнопки-иконки (слайдеры, крестики) */
.icon-btn{display:flex;align-items:center;justify-content:center;width:46px;height:46px;min-width:44px;min-height:44px;background:var(--tile);border:none;border-radius:var(--radius);color:var(--ink);transition:background .2s ease,color .2s ease}
@media (hover:hover){ .icon-btn:hover{background:var(--acc);color:var(--dark)} }

/* SVG-иконки (вместо шрифта Material Symbols) */
.ic{display:inline-block;width:1em;height:1em;font-size:24px;fill:currentColor;flex-shrink:0;vertical-align:-0.18em}
.ic--sm{font-size:20px}
.ic--lg{font-size:32px}

/* ---------- Формы ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field__label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-55)}
.field__input{width:100%;background:none;border:none;border-bottom:1px solid var(--ink-30);color:var(--ink);padding:12px 0;font-size:17px;outline:none;border-radius:0;transition:border-color .2s ease}
.field__input:focus{border-color:var(--acc)}
.field__input.is-error{border-color:#e05252}
textarea.field__input{resize:vertical;min-height:60px}
.form-error{display:none;font-size:13px;color:#e05252;margin-top:4px}
.form-error.is-visible{display:block}
.consent{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:13px;line-height:1.5;color:var(--ink-55)}
.consent input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--acc);flex-shrink:0}
.consent a{color:var(--ink-70);text-decoration:underline}
.hp-field{position:absolute;left:-9999px;opacity:0;pointer-events:none} /* honeypot */
.form-note{font-size:13px;line-height:1.5;color:var(--ink-45)}

/* ---------- Анимации появления ---------- */
.rv{opacity:0;transform:translateY(44px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.rv.in{opacity:1;transform:translateY(0)}
.rv-line{display:block;opacity:0;transform:translateY(100%);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.in .rv-line,.rv-line.in{opacity:1;transform:translateY(0)}
.rv-mask{overflow:hidden}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
/* На телефоне появление отключено: блок выезжает снизу на 44 px, заголовок —
   построчно на целую строку, и при быстрой прокрутке пальцем это читается как
   дёрганье вёрстки (сдвигов раскладки нет, CLS 0 — двигается только картинка).
   Заодно контент виден сразу, не дожидаясь main.js. Десктоп не трогаем. */
@media (max-width:760px){
  .rv,.rv-line{opacity:1;transform:none;transition:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.rv-line{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ---------- Обычные страницы (политика, 404) ---------- */
.page-plain{padding:calc(var(--header-h) + clamp(32px,6vw,72px)) 0 clamp(56px,6vw,80px)}
.page-plain__title{font-family:'Montserrat Brand',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(24px,4.5vw,48px);line-height:1.08;overflow-wrap:break-word;margin-bottom:clamp(24px,4vw,40px)}
.page-plain__content{max-width:760px}
.page-plain__content h2{font-weight:600;font-size:clamp(19px,2vw,26px);margin:32px 0 12px}
.page-plain__content p{margin:12px 0;color:var(--ink-70)}
.page-plain__content ul{margin:12px 0;padding-left:22px;color:var(--ink-70)}
.page-plain__content li{list-style:disc;margin:6px 0}
.page-plain__content a{color:var(--acc);text-decoration:underline}

/* ===== ПРЕЛОАДЕР (pl) ===== */
/* Полноэкранный оверлей: фон #101010, поверх всего (z-index 300), кликам не мешает */
.pl{position:fixed;inset:0;z-index:300;background:#101010;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;opacity:1;transition:opacity .55s ease;pointer-events:none}
.pl[hidden]{display:none}
/* Финальное затухание (.55s ease), после которого узел удаляется через 620 мс */
.pl.is-out{opacity:0}

/* Площадка логотипа 104×104 с отступом 34px до полосы прогресса */
.pl-logo{position:relative;width:104px;height:104px;margin-bottom:34px}
/* Невидимый источник картинки: даёт скрипту URL логотипа и предзагружает его */
.pl-seed{position:absolute;left:0;top:0;display:block;width:104px;height:104px;opacity:0}

/* Кирпичик сетки 8×8: 1/8 стороны, фон — логотип, увеличенный в 8 раз */
.pl-brick{position:absolute;width:12.5%;height:12.5%;background-size:800% 800%;background-repeat:no-repeat;opacity:0;transform:translateY(7px) scale(.6);transition:opacity .28s ease,transform .34s cubic-bezier(.2,.9,.3,1.2)}
/* Появившийся кирпичик: тонкая внутренняя обводка как в оригинале */
.pl-brick.is-on{opacity:1;transform:translateY(0) scale(1);box-shadow:inset 0 0 0 .5px rgba(16,16,16,.55)}

/* Полоса прогресса во всю ширину экрана, 2px */
.pl-bar{position:relative;width:100%;height:2px;overflow:hidden;background:rgba(242,242,242,.12)}
.pl-bar__fill{position:absolute;left:0;top:0;right:0;bottom:0;background:var(--acc,#EE7D00);transform:scaleX(0);transform-origin:center;transition:transform .12s linear}

/* Подпись NN% */
.pl-pct{margin-top:18px;font-size:13px;letter-spacing:.14em;font-weight:500;color:rgba(242,242,242,.65);font-variant-numeric:tabular-nums}

/* Reduce-motion: прелоадер не показываем вовсе (JS его ещё и удаляет) */
@media (prefers-reduced-motion: reduce){
  .pl{display:none}
}

/* ---------- Утилиты ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.no-scroll{overflow:hidden}

/* ===== ОБЩИЙ НИЖНИЙ БЛОК «НЕ НАШЛИ НУЖНОЕ НАПРАВЛЕНИЕ?» =====
   template-parts/srv-cta.php выводится на /uslugi/, /proizvodstvo/,
   /prezentatsii/ и /nashi-video/, поэтому стили живут в общем bundle,
   а не в css страницы услуг: иначе на трёх страницах блок был без стилей. */
/* ---------- Нижний CTA ---------- */
.srv-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 320px);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  margin-top: clamp(36px, 5vw, 72px);
  padding-top: clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--ink-14);
}
.srv-cta__title {
  font-family: 'Montserrat Brand', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: clamp(20px, 2.6vw, 34px); line-height: 1.1; margin-bottom: 14px;
}
.srv-cta__desc { font-size: 15px; line-height: 1.6; color: var(--ink-55); max-width: 56ch; margin-bottom: 22px; }
.srv-cta__row { display: flex; flex-wrap: wrap; gap: 12px; }

.srv-cta__links { display: grid; gap: 2px; }
.srv-cta__links-title {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-45); margin-bottom: 10px;
}
.srv-cta__links a {
  font-size: 15px; color: var(--ink-70);
  padding: 9px 0; border-bottom: 1px solid var(--ink-14);
}
.srv-cta__links a:last-child { border-bottom: none; }
@media (hover: hover) { .srv-cta__links a:hover { color: var(--acc); } }
@media (max-width: 1023px) {
  .srv-cta { grid-template-columns: 1fr; }
}



/* ===== ШАПКА ===== */
.header{position:sticky;top:0;z-index:100;background:rgba(22,22,22,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--ink-14)}
.header-bar{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:16px}

/* Логотип (статичный, без hover-масок) */
.header-logo{display:flex;align-items:center;gap:12px;color:var(--ink)}
.header-logo img{display:block;width:44px;height:44px}
.header-logo-badge{position:relative;display:flex;align-items:center;justify-content:center;width:50px;height:50px;background:var(--dark);border-radius:50%;flex-shrink:0}
.header-logo-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.header-logo-txt{font-weight:600;font-size:21px;line-height:1;letter-spacing:.04em;transition:color .25s ease}
.header-logo-sub{font-size:10px;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45);white-space:nowrap}
@media (hover:hover){
  .header-logo:hover{color:var(--ink)}
  .header-logo:hover .header-logo-txt{color:var(--acc)}
}

/* Десктоп-навигация */
.header-nav{display:flex;gap:32px;align-items:center}
.header-navlink{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-70);padding:24px 0}
.header-navlink--plain{padding:6px 0}
.header-nl-ic{font-size:16px}
.header-nl-mask{display:block;overflow:hidden;height:19px}
.header-nl-rows{display:flex;flex-direction:column;transition:transform .35s var(--ease-out)}
.header-nl-row{display:block;height:19px;line-height:19px;white-space:nowrap}
.header-nl-row--alt{color:var(--acc)}
@media (hover:hover){
  .header-navlink:hover{color:var(--acc)}
  .header-navlink:hover .header-nl-rows{transform:translateY(-19px)}
}

/* Выпадающие панели */
.header-drop-panel{visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out),visibility .35s;position:fixed;top:var(--header-h);left:0;right:0;background:var(--panel);border-bottom:1px solid var(--ink-14);box-shadow:0 32px 64px rgba(0,0,0,.14)}
@media (hover:hover){
  .header-drop:hover .header-drop-panel{visibility:visible;opacity:1;transform:translateY(0)}
}
.header-drop:focus-within .header-drop-panel,
.header-drop.is-open .header-drop-panel{visibility:visible;opacity:1;transform:translateY(0)}
/* Список услуг вырос до 10 пунктов: не даём панели уехать за нижний край экрана */
.header-drop-panel{max-height:calc(100vh - var(--header-h));overflow-y:auto;overscroll-behavior:contain}
.header-drop-inner{max-width:1440px;margin:0 auto;padding:clamp(28px,4vh,48px) clamp(20px,4vw,64px) clamp(32px,5vh,56px);display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,96px)}
.header-drop-col{flex:1.4;min-width:min(100%,320px);display:flex;flex-direction:column;align-items:flex-start}
.header-drop-aside{flex:1;min-width:min(100%,260px);display:flex;flex-direction:column;gap:16px}
.header-drop-link{font-family:'Montserrat Brand',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(20px,2.4vh,30px);line-height:1.15;letter-spacing:-.01em;color:var(--ink);padding:10px 0;border-bottom:1px solid var(--ink-14);width:100%;transition:color .2s,padding-left .25s ease,border-color .2s}
.header-drop-link--sm{font-size:clamp(18px,2.2vh,28px)}
.header-drop-all{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);padding:18px 0 0;transition:color .2s,letter-spacing .25s ease}
@media (hover:hover){
  .header-drop-link:hover{color:var(--acc);padding-left:14px;border-bottom-color:var(--acc)}
  .header-drop-all:hover{color:var(--ink);letter-spacing:.14em}
}
.header-drop-tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45)}
.header-drop-text{font-size:15px;line-height:1.6;color:var(--ink-55);max-width:380px;text-wrap:pretty}
.header-drop-mark{display:flex;align-items:center;justify-content:center;width:100%;max-width:380px;aspect-ratio:4/3;background:linear-gradient(160deg,#232323 0%,#171717 70%);border-radius:calc(var(--radius) * 2)}
.header-drop-mark img{width:52%;height:auto;display:block}

/* Правая часть: телефон, CTA, бургер */
.header-side{display:flex;align-items:center;gap:24px}
.header-phone{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.header-phone-tag{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45)}
.header-phone-link{font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap;padding:11px 0;margin:-11px 0}
.header-mail-link{font-size:12px;color:var(--ink-55);white-space:nowrap;padding:4px 0;margin:-2px 0 -4px}
@media (hover:hover){ .header-mail-link:hover{color:var(--acc)} }
.header-cta{padding:13px 26px;white-space:nowrap}
/* 1200–1359: после переименования раздела полное меню и кнопка в одну строку
   не помещались — кнопка ломалась на две строки. Поджимаем шаг и кегль. */
@media (min-width:1200px) and (max-width:1359px){
  .header-nav{gap:14px}
  .header-navlink{font-size:12px;letter-spacing:.03em}
  .header-cta{padding:13px 16px;font-size:12px}
  .header-bar{gap:12px}
}
.header-burger{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex-shrink:0;background:none;border:1px solid var(--ink-30);border-radius:var(--radius);color:var(--ink);transition:border-color .2s,color .2s}
@media (hover:hover){
  .header-burger:hover{border-color:var(--acc);color:var(--acc)}
}
@media (max-width:1199px){
  .header-nav,.header-phone,.header-cta{display:none}
}

/* Мобильное меню-оверлей */
.header-menu{position:fixed;inset:0;z-index:105;background:var(--dark);display:flex;flex-direction:column;overflow:auto;animation:menuIn .55s var(--ease-out) both}
.header-menu[hidden]{display:none}
.header-menu-top{max-width:1440px;width:100%;margin:0 auto;padding:0 clamp(20px,4vw,64px);height:var(--header-h);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--ink-14)}
.header-menu-body{max-width:1440px;width:100%;margin:0 auto;padding:clamp(16px,3vh,40px) clamp(20px,4vw,64px) 40px;display:flex;flex-direction:column;flex-grow:1}
.header-menu-nav{display:flex;flex-direction:column;width:100%}
.header-menu-nav>*{animation:fadeUp .55s var(--ease-out) both}
.header-menu-nav>:nth-child(1){animation-delay:0s}
.header-menu-nav>:nth-child(3){animation-delay:.05s}
.header-menu-nav>:nth-child(5){animation-delay:.1s}
.header-menu-nav>:nth-child(7){animation-delay:.15s}
.header-menu-nav>:nth-child(8){animation-delay:.2s}
.header-menu-acc,.header-menu-link{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;padding:clamp(14px,2.2vh,22px) 0;background:none;border:none;border-bottom:1px solid var(--ink-14);cursor:pointer;text-align:left;font-family:'Montserrat Brand',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(24px,4vh,44px);line-height:1.1;letter-spacing:-.01em;color:var(--ink);transition:color .2s,padding-left .25s ease}
@media (hover:hover){
  .header-menu-acc:hover,.header-menu-link:hover{color:var(--acc);padding-left:14px}
}
.header-acc-ic{font-size:28px;color:var(--ink-45);transition:transform .3s,color .3s}
.header-menu-acc[aria-expanded="true"]{border-bottom-color:transparent}
.header-menu-acc[aria-expanded="true"] .header-acc-ic{transform:rotate(45deg);color:var(--acc)}
.header-menu-sub{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:4px 0 20px;border-bottom:1px solid var(--ink-14)}
.header-menu-sub[hidden]{display:none}
.header-menu-sub a{font-size:clamp(15px,1.8vh,18px);color:var(--ink-70);padding:10px 0}
.header-menu-foot{margin-top:auto;padding-top:36px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;animation:fadeUp .6s ease .3s both}
.header-menu-contacts{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,72px)}
.header-menu-cgroup{display:flex;flex-direction:column;gap:4px}
.header-menu-ctag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45)}
.header-menu-clink{font-weight:500;font-size:clamp(18px,1.8vw,24px);color:var(--ink);padding:6px 0;margin:-6px 0}
@keyframes menuIn{from{opacity:0;transform:translateY(-4%)}to{opacity:1;transform:translateY(0)}}
@keyframes menuOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4%)}}

/* ===== ДРОВЕР «ОСТАВИТЬ ЗАЯВКУ» ===== */
.modal-request{position:fixed;inset:0;z-index:130;background:rgba(16,16,16,.6);animation:dimIn .3s ease both}
.modal-request[hidden]{display:none}
.modal-request-card{position:absolute;top:0;right:0;bottom:0;width:min(520px,100%);background:var(--dark);padding:clamp(28px,5vh,56px) clamp(24px,3vw,48px);overflow:auto;display:flex;flex-direction:column;gap:28px;animation:drawerIn .5s var(--ease-out) both}
.modal-request-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.modal-request-title{font-family:'Montserrat Brand',sans-serif;font-weight:800;font-size:clamp(26px,3.6vh,40px);line-height:1.05;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink)}
.modal-request-form{display:flex;flex-direction:column;gap:24px}
.modal-request-form .modal-chip{margin-bottom:-8px}
.modal-request-submit{align-self:flex-start;padding:17px 38px}
.modal-request .form-success{display:flex;flex-direction:column;gap:14px;padding:16px 0}
.modal-request .form-success[hidden]{display:none}
.modal-request-success-title{font-weight:500;font-size:clamp(22px,2.8vh,30px);line-height:1.25;color:var(--ink)}
.modal-request-success-note{font-size:15px;line-height:1.6;color:var(--ink-55)}
.modal-request-foot{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding-top:16px;border-top:1px solid var(--ink-14)}
.modal-request-foot-tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45)}
.modal-request-foot-link{font-weight:500;font-size:20px;color:var(--ink);padding:8px 0;margin:-4px 0}
@keyframes dimIn{from{opacity:0}to{opacity:1}}
@keyframes drawerIn{from{transform:translateX(100%)}to{transform:translateX(0)}}


/* ===== ЛОГОТИП: СБОРКА ИЗ КИРПИЧИКОВ (шапка) =====
   Вставлять в work/sections/10-header.css вместо блока «Логотип (статичный…)».
   Требуется .header-logo-badge{position:relative} — уже есть в сборке.
   Путь картинки указан относительно assets/css/main.css. */

/* Базовая картинка логотипа ВСЕГДА видна. Кирпичики — те же самые пиксели
   логотипа, они собираются точно поверх базы. Поэтому между кирпичиками
   никогда не просвечивает тёмный фон (логотип не «пикселит» по швам), а
   быстрые повторные наведения не сбивают анимацию: базовую картинку мы
   вообще не гасим и не кроссфейдим — нечему мигать и раздваиваться. */
.header-logo-base{opacity:1}

/* Слой кирпичиков: ровно поверх базовой картинки, 44x44 внутри бейджа 50x50 */
.header-logo-bricks{position:absolute;left:3px;top:3px;width:44px;height:44px;display:block}

/* Кирпичик — ровная клетка 11×11 сетки 4×4 (целые пиксели, без дробных швов).
   В покое скрыт и сдвинут на (8,-9); own-layer, чтобы повторные наведения
   не пересчитывали растр и не мылили картинку. */
.header-logo-bk{position:absolute;display:block;width:11px;height:11px;background-image:url("../img/logo.png");background-size:44px 44px;background-repeat:no-repeat;opacity:0;transform:translate(8px,-9px);transition:opacity .16s ease,transform .24s cubic-bezier(.2,.8,.3,1.04);backface-visibility:hidden}

@media (hover:hover){
  .header-logo:hover{color:var(--ink)}
  .header-logo:hover .header-logo-txt{color:var(--acc)}
  /* кирпичики собираются на местах: задержки — инлайном на каждом (шаг .03s) */
  .header-logo:hover .header-logo-bk{opacity:1;transform:translate(0,0)}
}

/* Reduce: анимацию не показываем — остаётся статичная картинка логотипа */
@media (prefers-reduced-motion:reduce){
  .header-logo-bricks{display:none}
}


/* ===== HERO (top) ===== */
.hero{background:#101010;overflow:hidden}

/* фоновые слайды */
.hero-media{position:absolute;inset:0;isolation:isolate}
.hero-slides{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;opacity:0;z-index:1;transition:opacity .9s ease}
.hero-slide.is-active{opacity:1;z-index:2}
.hero-slide video,
.hero-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#101010}
.hero-media__shade{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,rgba(16,16,16,.55) 0%,rgba(16,16,16,.18) 40%,var(--bg) 76%)}

/* контент */
.hero-inner{position:relative;padding-top:clamp(90px,16vh,180px);padding-bottom:clamp(48px,8vh,96px);display:flex;flex-direction:column;gap:clamp(40px,8vh,96px)}
.hero-head{display:flex;flex-direction:column;gap:20px;animation:fadeUp .7s ease both}
.hero-eyebrow{font-size:clamp(13px,1.2vw,16px);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
h1.hero-title{font-size:clamp(24px,8.5vw,84px);line-height:1.04;letter-spacing:-.02em;max-width:1320px}
.hero-title__acc{color:var(--acc)}

/* Невысокий экран (ноутбук 1920×1080 с масштабом Windows 125–150%, вьюпорт
   получается ~1536×730 или 1280×610): ужимаем первый экран, иначе цифры
   внизу уходят за край и до них надо скроллить. */
@media (min-width:901px) and (max-height:800px) and (pointer:fine){
  .hero-inner{padding-top:clamp(64px,10vh,104px);padding-bottom:clamp(24px,4vh,44px);gap:clamp(18px,3.2vh,38px)}
  h1.hero-title{font-size:clamp(24px,5.2vw,68px)}
  .hero-lede{font-size:16px;line-height:1.45}
  .hero-stat{padding-top:12px;gap:6px}
  .hero-stat__value{font-size:clamp(24px,2.4vw,34px)}
  .hero-stat__label{font-size:11px}
}
.hero-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px;animation:fadeUp .7s ease .15s both}
.hero-lede{font-size:clamp(16px,1.5vw,20px);line-height:1.5;color:var(--ink);max-width:480px;text-wrap:pretty}
.hero-actions{display:flex;flex-direction:column;align-items:flex-end;gap:20px}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px}
.hero-btns .btn--ghost{border-color:var(--ink)}
@media (hover:hover){
  .hero-btns .btn--ghost:hover{border-color:var(--acc);transform:translateY(-3px)}
}

/* управление слайдером */
.hero-ctl{display:flex;align-items:center;gap:16px}
.hero-arrow{display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid #8f8f8f;border-radius:var(--radius);background:var(--dark);color:var(--ink);transition:background .2s ease,color .2s ease,border-color .2s ease}
.hero-arrow .ic{font-size:15px}
@media (hover:hover){
  .hero-arrow:hover{background:var(--acc);border-color:var(--acc);color:var(--dark)}
}
.hero-dots{display:flex;align-items:center}
.hero-dots button{display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0;border:none;background:none;cursor:pointer}
.hero-dots button::before{content:"";display:block;width:18px;height:3px;border-radius:2px;background:#8f8f8f;transition:width .3s ease,background .3s ease}
.hero-dots button.is-active::before,
.hero-dots button[aria-current="true"]::before{width:34px;background:var(--acc)}
.hero-counter{font-size:12px;letter-spacing:.08em;font-weight:500;color:var(--ink);min-width:38px;text-align:right}

/* строка статистики */
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(20px,3vw,48px);animation:fadeUp .7s ease .3s both}
.hero-stat{min-width:0;border-top:2px solid var(--acc);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.hero-stat__label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);line-height:1.4}
.hero-stat__value{font-family:'Montserrat Brand',sans-serif;font-weight:800;font-size:clamp(28px,3vw,46px);line-height:1;letter-spacing:-.01em;color:var(--ink);overflow-wrap:break-word}
/* Цифры первого экрана — на одной линии, даже если подпись перенеслась. */
@supports (grid-template-rows: subgrid) {
  .hero-stats{grid-auto-rows:auto}
  .hero-stat{display:grid;grid-template-rows:subgrid;grid-row:span 2;align-content:start}
}

/* На мобильных плавающая кнопка «Заказать звонок» занимает правый нижний угол —
   уводим управление слайдером из-под неё */
@media (max-width:720px){
  /* Колонка кнопок занимает всю ширину: иначе они уже текста над ними */
  .hero-actions{align-items:stretch;width:100%}
  .hero-ctl{justify-content:flex-start;padding-right:76px}
  .hero-counter{margin-left:auto}
  .hero-lede{font-size:16px;line-height:1.5}
  /* Кнопки одинаковой ширины: вразнобой они выглядят как случайная вёрстка */
  .hero-btns{gap:10px;display:grid;grid-template-columns:minmax(0,1fr)}
  .hero-btns .btn{width:100%}
  .hero-title{margin-bottom:0}
}
/* На узких экранах точки не помещаются рядом со стрелками и счётчиком:
   навигация остаётся по стрелкам и свайпу, позиция видна по счётчику */
@media (max-width:520px){
  .hero-dots{display:none}
}

/* ---------- Первый экран и высота окна ----------
   ГЛАВНОЕ ПРАВИЛО: вертикальные размеры баннера НЕ должны зависеть от высоты
   вьюпорта. На телефоне адресная строка при прокрутке то прячется, то
   появляется, высота окна скачет на 60–90 px — и всё, что задано в vh или
   спрятано за @media (max-height), пересчитывается прямо во время прокрутки.
   Замер до правки: высота окна 812 → 740 меняла высоту баннера на 136 px,
   и весь контент ниже (о компании, объекты, услуги) прыгал на те же 136 px.
   Поэтому на тач-экранах меряем отступы от ШИРИНЫ — она при прокрутке
   постоянна. vh и height-медиазапросы остаются только мыши (pointer:fine). */
@media (pointer:coarse){
  .hero-inner{padding-top:clamp(28px,7vw,110px);padding-bottom:clamp(16px,3.2vw,60px);gap:clamp(16px,3.6vw,64px)}
}


/* ===== UTP (utp) ===== */
.utp-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(32px,5vw,64px)}
h2.utp-title{font-size:clamp(32px,4.6vw,66px);line-height:1.02;letter-spacing:-.01em}
.utp-note{max-width:400px;font-size:15px;line-height:1.55;color:var(--ink-55)}
.utp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(20px,2.5vw,32px)}
/* восемь карточек: на широком экране ровно 4+4, иначе последний ряд с дырой */
@media (min-width:1200px){.utp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.utp-card{border-top:3px solid var(--acc);padding:18px 12px 14px;display:flex;flex-direction:column;gap:10px;cursor:default;transition:opacity .9s var(--ease-out),transform .5s var(--ease-out),background .3s ease,border-top-color .3s ease}
@media (hover:hover){
  .utp-card:hover{background:var(--tile);transform:translateY(-6px);border-top-color:var(--ink)}
}
.utp-card:nth-child(1) .utp-card:nth-child(2) .utp-card:nth-child(3) .utp-card:nth-child(4) .utp-card:nth-child(5) .utp-card:nth-child(6) .utp-card:nth-child(7) .utp-card:nth-child(8) .utp-card__title{font-weight:500;font-size:clamp(18px,1.8vw,23px);line-height:1.25;color:var(--ink)}
.utp-card__desc{font-size:14.5px;line-height:1.55;color:var(--ink-55);text-wrap:pretty}
.utp-card__num{font-family:'Montserrat Brand',sans-serif;font-weight:800;font-size:14px;letter-spacing:.04em;line-height:1;color:var(--acc)}

/* ===== Фоновый канвас точек в секции «Почему ОРЛИНК» ===== */
/* Тот же эффект, что в «Как мы работаем»: инициализируется по data-canvas="dots" */
/* .section уже даёт position:relative, добавляем только обрезку по краям */
#utp{overflow:hidden}
/* Канвас — фон секции, кликов не ловит */
.utp-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;z-index:0}
/* Контент секции — выше канваса */
#utp > .container{position:relative;z-index:1}
/* При reduce канвас не рисуется скриптом, прячем и в разметке */
@media (prefers-reduced-motion: reduce){
  .utp-canvas{display:none}
}


/* ===== ABOUT — О КОМПАНИИ ===== */
.about{background:var(--sec-blue)}
.about__inner{border-top:1px solid var(--ink-14);display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px)}

/* Левая колонка: ярлык и логотип (без анимации — статичный знак) */
.about-side{width:220px;flex-shrink:0;display:flex;flex-direction:column;gap:28px}
.about-logo{width:clamp(96px,9vw,140px);aspect-ratio:1/1;align-self:flex-start}
.about-logo img{width:100%;height:100%;display:block}

/* Правая колонка */
.about-main{flex:1;min-width:min(100%,480px);display:flex;flex-direction:column;gap:clamp(28px,4vw,48px)}
.about-manifest{font-weight:500;font-size:clamp(22px,2.6vw,36px);line-height:1.25;letter-spacing:-.01em;color:var(--ink);max-width:900px;text-wrap:pretty}

/* Статистика */
.about-stats{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:clamp(20px,3vw,48px)}
.about-stat{border-top:1px solid var(--ink-30);padding:16px 12px 12px;display:flex;flex-direction:column;gap:8px;transition:border-color .3s ease,background .3s ease,transform .3s ease}
.about-stat__label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-55)}
.about-stat__value{margin:0;font-weight:500;font-size:clamp(28px,2.8vw,44px);line-height:1;color:var(--ink)}
/* Текстовое значение («Безопасность · развитие · качество») крупным кеглем
   не помещается — даём ему свой размер */
.about-stat__value--text{font-size:clamp(17px,1.5vw,21px);line-height:1.3}
/* То же для блока «О компании». */
@supports (grid-template-rows: subgrid) {
  .about-stats{grid-auto-rows:auto}
  .about-stat{display:grid;grid-template-rows:subgrid;grid-row:span 2;align-content:start}
}
@media (hover:hover){
  .about-stat:hover{border-top-color:var(--acc);background:var(--tile);transform:translateY(-6px)}
}

/* Заказчики */
.about-clients{display:flex;flex-direction:column;gap:16px}
.about-clients__label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-55)}
/* Логотипы заказчиков нарисованы под светлый фон: на тёмной плашке тёмные
   части знака пропадают, поэтому кладём их на белую подложку — так же, как
   логотип заказчика на странице объекта. Девять логотипов ложатся 3×3. */
.about-clients__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.about-client{min-height:96px;background:#fff;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;padding:16px 20px;transition:transform .3s ease,box-shadow .3s ease}
.about-client img{max-width:100%;max-height:60px;width:auto;height:auto;object-fit:contain;display:block}
@media (hover:hover){
  .about-client:hover{transform:translateY(-6px);box-shadow:0 16px 32px -20px rgba(0,0,0,.9)}
}
@media (max-width:560px){
  .about-clients__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-client{min-height:78px;padding:12px 14px}
  .about-client img{max-height:44px}
}


/* ===== SERVICES — УСЛУГИ ===== */
.services__inner{border-top:1px solid var(--ink-14)}
.services-title{margin:0 0 clamp(32px,5vw,64px);font-weight:500;font-size:clamp(34px,5vw,72px);line-height:1;letter-spacing:-.02em;text-transform:uppercase;color:var(--ink)}
/* Плитка по три карточки в ряд */
.services-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
.services-row{
  display:flex;flex-direction:column;
  background:var(--tile);border:1px solid transparent;border-radius:calc(var(--radius) * 2);
  overflow:hidden;
  transition:background .2s ease,border-color .2s ease,transform .25s var(--ease-out)
}
/* Вся карточка — одна ссылка на свой раздел в /uslugi/ */
.services-row__link{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;flex:1;
  padding:0 clamp(20px,2.2vw,28px) clamp(16px,1.8vw,20px);color:inherit
}
/* Заявка по услуге — под описанием; модальное окно подставит её название */
.services-row__btn{margin:0 clamp(20px,2.2vw,28px) clamp(20px,2.2vw,28px);padding:15px 20px;font-size:12.5px;font-weight:600;box-shadow:0 12px 26px -14px rgba(238,125,0,.7)}
.services-row__btn .ic{font-size:18px;transition:transform .25s var(--ease-out)}
@media (hover:hover){
  .services-row__btn:hover{background:var(--acc-hover);color:var(--dark);transform:translateY(-2px)}
  .services-row__btn:hover .ic{transform:translateX(4px)}
}
/* Фото услуги; пока его нет — знак компании на плашке, чтобы карточки в ряду
   были одной высоты и заголовки стояли на одной линии */
.services-row__media{
  display:block;width:calc(100% + 2 * clamp(20px,2.2vw,28px));
  margin:0 calc(-1 * clamp(20px,2.2vw,28px)) clamp(14px,1.6vw,18px);
  aspect-ratio:16/9;overflow:hidden;background:#141414
}
.services-row__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-out)}
.services-row__media--empty{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#232323 0%,#171717 70%)}
.services-row__media--empty img{width:21%;height:auto;object-fit:contain}
.services-row__idx{font-family:'Montserrat Brand',sans-serif;font-weight:800;font-size:13px;color:var(--acc)}
.services-row__title{transition:color .2s ease;font-weight:500;font-size:clamp(18px,1.6vw,22px);line-height:1.2;letter-spacing:-.01em;color:var(--ink)}

/* Описание прижато к низу — у карточек в ряду совпадают нижние края текста */
.services-row__desc{margin-top:auto;font-size:14.5px;line-height:1.55;color:var(--ink-55);text-wrap:pretty}
/* Переход на разводящую /uslugi/ */
.services-all{display:inline-flex;align-items:center;margin-top:clamp(24px,3vw,36px);border-top:1px solid var(--ink-14);padding:clamp(22px,3vw,36px) 0 0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-70);transition:color .2s ease}
@media (max-width:1100px){ .services-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:680px){ .services-list{grid-template-columns:minmax(0,1fr)} }

@media (hover:hover){
  .services-row:hover{background:rgba(242,242,242,.05);border-color:var(--ink-30);transform:translateY(-4px)}
  .services-row:hover .services-row__title{color:var(--acc)}
  .services-row:hover .services-row__media img{transform:scale(1.04)}
  .services-all:hover{color:var(--acc)}
}

/* ---------- «Показать больше» ----------
   На главной сразу видно шесть направлений, остальные разворачиваются по кнопке:
   семнадцать карточек подряд — это полтора экрана прокрутки до блока с расчётом.
   Свёрнутое состояние ставит скрипт, поэтому без него видно всё. */
.services-list.is-collapsed .services-row[data-more-item]{display:none}
.services-more{
  /* именно flex, а не inline-flex: иначе кнопка встаёт в одну строку
     со ссылкой «Все виды объектов и услуг» и они налезают друг на друга */
  display:flex;width:fit-content;align-items:center;gap:10px;margin-top:clamp(20px,2.6vw,32px);
  padding:14px 26px;border:1px solid var(--ink-30);border-radius:var(--radius);
  background:none;color:var(--ink);font-family:inherit;font-weight:500;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.services-more[hidden]{display:none}
.services-more__ic{font-size:18px;transform:rotate(180deg);transition:transform .25s var(--ease-out)}
.services-more[aria-expanded="true"] .services-more__ic{transform:rotate(0deg)}
@media (hover:hover){
  .services-more:hover{border-color:var(--acc);color:var(--acc)}
}
/* Кнопка и ссылка «Все виды объектов и услуг» идут друг за другом — разводим */
.services-more + .services-all{margin-top:clamp(20px,2.6vw,32px)}
@media (max-width:680px){
  .services-more{width:100%;justify-content:center}
}


/* ===== ОБЪЕКТЫ (галерея: один кадр, смена по очереди раз в 3,5 с) ===== */
.objects__wrap{border-top:1px solid var(--ink-14)}
.objects__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(32px,5vw,64px)}
.objects__head .h-display{font-size:clamp(28px,4.6vw,66px);letter-spacing:-.01em;line-height:1.02}
.objects__sim-link{background-image:linear-gradient(var(--acc),var(--acc));background-repeat:no-repeat;background-position:left bottom;background-size:0% 2px;background-color:transparent;border:none;cursor:pointer;border-bottom:1px solid var(--ink-45);padding:15px 0 12px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-70);transition:background-size .4s ease,color .2s}
@media (hover:hover){
  .objects__sim-link:hover{color:var(--acc);background-size:100% 2px}
}

.objects__slider{display:flex;flex-direction:column;gap:clamp(24px,3.5vw,40px)}

/* Кадр галереи: все фото лежат стопкой в потоке, видно только активное */
.objects__stage{position:relative;width:100%;aspect-ratio:16/8.2;min-height:300px;max-height:min(66vh,640px);border-radius:14px;overflow:hidden;background:var(--panel);box-shadow:0 18px 44px rgba(0,0,0,.34)}
/* Новый кадр проявляется ПОВЕРХ уходящего (z-index), поэтому фон не мигает между ними */
.objects__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:1;transition:opacity .55s ease;user-select:none;-webkit-user-drag:none}
.objects__shot.is-active{opacity:1;z-index:2}

/* Подпись и управление под колодой */
.objects__info{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:20px clamp(24px,4vw,48px)}
.objects__text{display:flex;flex-direction:column;gap:12px;max-width:680px;min-width:min(100%,320px);flex:1}
.objects__title{font-weight:500;font-size:clamp(22px,2.6vw,36px);line-height:1.15;letter-spacing:-.01em}
.objects__desc{font-size:15px;line-height:1.6;color:var(--ink-55);text-wrap:pretty}
.objects__chip{align-self:flex-start;font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-weight:500;color:var(--dark);background:linear-gradient(120deg,#ffb15c 0%,var(--acc) 100%);padding:7px 14px;border-radius:8px;white-space:nowrap}
.objects__side{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.objects__nav{display:flex;align-items:center;gap:16px}
.objects__counter{font-size:14px;color:var(--ink-45);font-variant-numeric:tabular-nums}
.objects__arrows{display:flex;gap:8px}
/* Переход на разводящую /obekty/ */
.objects__all{display:inline-flex;align-items:center;margin-top:clamp(24px,3vw,36px);border-top:1px solid var(--ink-14);padding:clamp(22px,3vw,36px) 0 0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-70);transition:color .2s ease}
@media (hover:hover){ .objects__all:hover{color:var(--acc)} }
.objects__more{align-self:flex-start;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-70);transition:color .2s ease}
.objects__more[hidden]{display:none}
@media (hover:hover){ .objects__more:hover{color:var(--acc)} }
.objects__dots{display:flex;align-items:center}
.objects__dots button{display:flex;align-items:center;justify-content:center;min-width:22px;height:44px;padding:0;border:none;background:none;cursor:pointer}
.objects__dots button::before{content:"";display:block;width:8px;height:8px;border-radius:50%;background:var(--ink-30);transition:width .3s ease,border-radius .3s ease,background .3s ease}
.objects__dots button.is-active::before{width:22px;border-radius:4px;background:var(--acc)}
@media (hover:hover){ .objects__dots button:hover::before{background:var(--ink-70)} }

@media (max-width:720px){
  .objects__side{align-items:flex-start}
  .objects__chip{white-space:normal}
}


/* ===== QUIZ — Подбор решения ===== */
.quiz{background:var(--sec-sand)}
.quiz__wrap{border-top:1px solid var(--ink-14)}
.quiz__grid{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px)}

/* Левая колонка: ярлык, счётчик, фото */
.quiz__side{flex:1;min-width:min(100%,320px);max-width:460px;display:flex;flex-direction:column;gap:16px}
.quiz__side-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.quiz__label{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-55)}
.quiz__counter{font-size:13px;color:var(--ink-45)}
.quiz__frame{position:relative;flex:1;min-height:320px;border-radius:14px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.35)}
.quiz__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s ease,transform 1.1s var(--ease-out)}

/* Правая колонка: прогресс, шаги, навигация, финал */
.quiz__panel{flex:1.3;min-width:min(100%,440px);display:flex;flex-direction:column;gap:28px}
.quiz__track{position:relative;height:1px;background:var(--ink-14)}
.quiz__bar{position:absolute;left:0;top:0;height:1px;width:14%;background:var(--acc);transition:width .4s ease}

.quiz__step{display:flex;flex-direction:column;gap:24px}
.quiz__step[hidden]{display:none}
.quiz__q{font-weight:500;font-size:clamp(24px,2.8vw,40px);line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
.quiz__opts{display:flex;flex-wrap:wrap;gap:10px}
.quiz__opt{min-height:44px;text-align:left;padding:14px 24px;font-size:15px;border-radius:var(--radius);background:none;color:var(--ink);border:1px solid var(--ink-30);transition:background .15s ease,color .15s ease,border-color .15s ease}
.quiz__opt.is-selected,
.quiz__opt[aria-pressed="true"]{background:var(--acc);color:var(--dark);border-color:var(--acc)}

.quiz__nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:4px}
.quiz__nav[hidden]{display:none}
.quiz__prev{min-height:44px;min-width:44px;background:none;border:none;font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-70);padding:12px 0;transition:color .2s ease}
.quiz__prev[disabled]{color:transparent;pointer-events:none;cursor:default}
.quiz__next{min-height:44px;background:var(--acc);color:var(--dark);border:none;font-weight:500;font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:15px 32px;border-radius:var(--radius);transition:background .15s ease,color .15s ease}
.quiz__next[disabled]{background:var(--ink-14);color:var(--ink-30);cursor:default}
@media (hover:hover){
  .quiz__prev:not([disabled]):hover{color:var(--acc)}
  .quiz__next:not([disabled]):hover{background:var(--acc-hover)}
}

/* Финал квиза */
.quiz__done{display:flex;flex-direction:column;gap:16px}
.quiz__done[hidden]{display:none}
.quiz__done-title{font-weight:500;font-size:clamp(24px,2.8vw,40px);line-height:1.1;color:var(--ink)}
.quiz__done-text{font-size:16px;line-height:1.6;color:var(--ink-55);max-width:520px}
.quiz__done-btn{align-self:flex-start}
.quiz__form{display:flex;flex-direction:column;gap:20px}
.quiz__form[hidden],.quiz__success[hidden]{display:none}
.quiz__form .quiz__done-text{margin-top:-8px}
.quiz__fields{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px;max-width:640px}
@media (max-width:560px){ .quiz__fields{grid-template-columns:1fr} }
.quiz__success{display:flex;flex-direction:column;gap:14px}
@media (hover:hover){
  .quiz__done-btn:hover{background:var(--acc-hover);color:var(--dark);transform:none}
}

/* Фикс аудита: плавающие кнопки не перекрывают «Далее» на мобильном */
@media (max-width:720px){
  .quiz .section__inner{padding-bottom:calc(clamp(56px,6vw,80px) + var(--fab-safe))}
}


/* ===== PROCESS — «Как мы работаем»: интерактивная шкала этапов =====
   Сцена слева собирает здание по мере прохождения шагов, справа — карточка
   активного этапа, снизу — шкала с отрезками, пропорциональными срокам.
   Ширины отрезков считает скрипт из data-days, чтобы разметка и шкала
   не разъезжались при правке сроков. */
.process{position:relative;overflow:hidden}
.process-canvas{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none}
.process-inner{position:relative;z-index:1;border-top:1px solid var(--ink-14)}

.process-head{max-width:900px;margin-bottom:clamp(28px,4vw,52px)}
.process-title{margin:12px 0 18px;font-size:clamp(30px,5vw,68px)}

/* ---------- Сцена + карточка ---------- */
.process-play{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(260px,26vw,360px);
  gap:clamp(20px,3vw,40px);
  /* карточка по высоте содержимого, а не вровень со сценой: текста в ней
     заметно меньше, и растянутая карточка давала пустой низ в треть блока */
  align-items:start;
  margin-bottom:clamp(28px,4vw,48px);
}

.process-scene{
  position:relative;display:grid;place-items:center;
  background:var(--panel);
  border:1px solid var(--ink-14);
  border-radius:calc(var(--radius)*2);
  padding:clamp(12px,2vw,24px);
  overflow:hidden;
}
.process-svg{display:block;width:100%;height:auto}

/* Общий вид линий сцены: тонкий контур, акцент — оранжевым */
.process-svg [data-layer]{fill:none;stroke:var(--ink-55);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.process-svg .stroke-acc{stroke:var(--acc)}
.process-svg .fill-acc{fill:var(--acc);stroke:none}
.process-svg .process-num{fill:var(--ink-70);stroke:none;font-family:'Golos Text',sans-serif;font-size:17px;font-weight:500}
.process-svg .process-grid{stroke:var(--ink-30);stroke-width:1}
.process-svg .process-dim{stroke:var(--acc);stroke-width:1.5}
.process-svg .process-dim-label{fill:var(--acc);stroke:none;font-family:'Golos Text',sans-serif;font-size:15px;font-weight:500}
/* размеры всплывают следом за зданием, а не вместе с ним */
.process-svg .process-dims{transition-delay:.4s}
.process-svg .process-keys rect{stroke-width:1.5;transition:fill .15s ease,stroke .15s ease}
.process-svg .process-keys rect.is-press{fill:var(--acc);stroke:var(--acc)}
.process-svg .process-keys rect.fill-acc.is-press{fill:var(--acc-hover);stroke:var(--acc-hover)}
.process-svg .process-calc__screen{fill:var(--acc);stroke:none}
.process-svg .process-calc__out{fill:var(--dark);stroke:none;font-family:'Golos Text',sans-serif;font-size:17px;font-weight:500;font-variant-numeric:tabular-nums}
.process-svg .process-beam{stroke:var(--ink-55)}
.process-svg .process-beam rect{fill:var(--tile)}
.process-svg .process-frame{stroke:var(--ink-70);stroke-width:2.5}
/* Стена непрозрачная: полупрозрачная пропускала связи каркаса, и на
   готовом здании они читались как случайные диагонали по фасаду. */
.process-svg .process-wall{fill:#232323;stroke:var(--ink-70);stroke-width:2.5}
/* Кровля — одна непрозрачная линия постоянной толщины: полоса-многоугольник
   давала разную толщину на коньке и на свесе, а конёк каркаса просвечивал. */
.process-svg .process-roof{fill:none;stroke:#2b2b2b;stroke-width:14;stroke-linejoin:round}
.process-svg .process-roof-edge{fill:none;stroke:var(--ink-70);stroke-width:2;stroke-linejoin:round}
.process-svg .process-panel{stroke:var(--ink-30);stroke-width:1.5}
.process-svg .process-gate{fill:rgba(0,0,0,.25);stroke:var(--acc);stroke-width:2}
.process-svg .process-gate-lines{stroke:var(--acc);stroke-width:1;opacity:.5}
.process-svg .process-ground{stroke:var(--ink-45);stroke-width:2.5;opacity:0;transition:opacity .4s ease}
.process-svg .process-ground.is-on{opacity:1}

/* ---------- Анимации сцен ----------
   Важное правило: в CSS по умолчанию задано КОНЕЧНОЕ состояние — всё на месте
   и дорисовано. Скрипт сам откатывает элементы в начальное (классы is-out,
   is-up, is-hot, инлайновый stroke-dashoffset) и потом отпускает. Если скрипт
   не отработал — при reduce-motion, в фоновой вкладке или при ошибке — сцена
   всё равно выглядит законченной, а не пустой. */

/* Договор: стопка листов, подпись и печать */
.process-svg .process-doc{transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.process-svg .process-doc.is-out{opacity:0;transform:translateY(22px)}
.process-svg .process-doc__sheet{fill:#202020;stroke:var(--ink-55);stroke-width:2}
.process-svg .process-doc__lines{stroke:var(--ink-45)}
.process-svg .process-sign{stroke:var(--acc);stroke-width:2.5;fill:none;transition:stroke-dashoffset .9s var(--ease-out)}
.process-svg .process-stamp{stroke:var(--acc);transform-box:fill-box;transform-origin:center;
  transition:opacity .3s var(--ease-out),transform .4s var(--ease-out)}
.process-svg .process-stamp.is-out{opacity:0;transform:scale(.55) rotate(-16deg)}

/* Проект: чертёж вычерчивается линия за линией */
.process-svg .dwg-sheet{stroke:var(--ink-45)}
.process-svg .dwg-axis{stroke:var(--ink-30);stroke-dasharray:9 5}
.process-svg .dwg-mark{stroke:var(--ink-45)}
.process-svg .dwg-mark-text,.process-svg .dwg-dim-text,.process-svg .dwg-stamp-text{
  fill:var(--ink-70);stroke:none;font-family:'Golos Text',sans-serif;font-size:12px;font-weight:500}
.process-svg .dwg-dim-text{fill:var(--acc)}
.process-svg .dwg-stamp-text{font-size:11px;fill:var(--ink-45)}
.process-svg .dwg-outline{stroke:var(--acc);stroke-width:2.5;fill:none}
.process-svg .dwg-col rect{fill:var(--acc);stroke:none}
.process-svg .dwg-brace{stroke:var(--acc);stroke-width:1.2;opacity:.7}
.process-svg .dwg-dim{stroke:var(--acc);stroke-width:1.2}
.process-svg .dwg-stamp{stroke:var(--ink-45);stroke-width:1.2}
/* штриховая ось не должна попадать под «вычерчивание»: две dasharray конфликтуют */
.process-svg .dwg-axis line{stroke-dasharray:9 5}

/* Изготовление: на стапеле варят ферму — горелка идёт по верхнему поясу,
   в узлах вспыхивает искра, от них вычерчиваются раскосы. В CSS лежит
   конечное состояние: ферма сварена, узлы на месте, горелки уже нет. */
.process-svg .fab-stand{stroke:var(--ink-45);stroke-width:2}
.process-svg .fab-chord{stroke:var(--ink-70);stroke-width:3}
.process-svg .fab-bar{stroke:var(--ink-70);stroke-width:2.5}
.process-svg .fab-node{fill:var(--acc);stroke:none;transform-box:fill-box;transform-origin:center;
  transition:opacity .25s ease,transform .3s var(--ease-out)}
.process-svg .fab-node.is-out{opacity:0;transform:scale(.3)}
/* Горелка: по умолчанию ушла за правый край пояса и погашена. Скрипт ставит
   is-away (вернуть в начало) и is-hot (зажечь дугу) — оба класса сбрасывает
   resetScene, поэтому сцена корректно перезапускается. Ход линейный: узлы
   вспыхивают по времени, и с ease-out дуга убегала бы вперёд. */
.process-svg .fab-torch{opacity:0;transform:translateX(460px);transition:transform 1.6s linear,opacity .3s ease}
.process-svg .fab-torch.is-away{transform:translateX(0)}
.process-svg .fab-torch.is-hot{opacity:1}
.process-svg .fab-torch__body{fill:var(--tile);stroke:var(--ink-55);stroke-width:2}
.process-svg .fab-torch__nozzle{fill:#1a1a1a;stroke:var(--ink-45);stroke-width:2}
.process-svg .fab-arc{fill:var(--acc);stroke:none}
.process-svg .fab-sparks{stroke:var(--acc);stroke-width:2}
.process-svg .fab-torch.is-hot .fab-sparks{animation:fabSpark .22s steps(2,end) infinite}
@keyframes fabSpark{0%,100%{opacity:1}50%{opacity:.25}}

/* Монтаж: машина, колонны, монтажники */
.process-svg .mnt-truck{fill:none;stroke:var(--ink-55);stroke-width:2;
  transition:transform .9s var(--ease-out),opacity .3s ease}
.process-svg .mnt-truck__body{fill:#232323}
.process-svg .mnt-truck__glass{fill:#101010;stroke:var(--ink-45)}
.process-svg .mnt-truck__wheel{fill:#181818}
.process-svg .mnt-truck__load rect{fill:var(--tile)}
.process-svg .mnt-truck.is-away{transform:translateX(-330px)}
.process-svg .mnt-truck__load{transition:opacity .35s ease}
.process-svg .mnt-truck__load.is-out{opacity:0}
.process-svg .mnt-col{transition:opacity .3s ease,transform .4s var(--ease-out)}
.process-svg .mnt-col.is-out{opacity:0;transform:translateY(26px)}
.process-svg .mnt-rafter,.process-svg .mnt-purlin,.process-svg .mnt-brace{
  transition:stroke-dashoffset .7s ease-out}

/* Слой появляется чуть снизу и растворяется при уходе */
.process-layer{opacity:0;transform:translateY(18px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.process-layer.is-on{opacity:1;transform:none}

/* ---------- Карточка активного этапа ---------- */
.process-card{
  display:flex;flex-direction:column;
  background:var(--tile);
  border-radius:calc(var(--radius)*2);
  padding:clamp(20px,2.4vw,30px);
}
.process-card__count{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);margin-bottom:14px}
.process-card__count b{color:var(--acc);font-weight:500}
.process-card__title{
  font-family:'Montserrat Brand',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(19px,2.2vw,28px);line-height:1.08;margin-bottom:12px;color:var(--ink);
  /* «МЕТАЛЛОКОНСТРУКЦИЙ» шире колонки карточки на ЛЮБОЙ ширине экрана (колонка
     максимум 360 px, слово — 390 px), поэтому разрешаем перенос по слогам.
     hyphenate-limit-chars 16 — чтобы слова покороче («ПРОЕКТИРОВАНИЕ») не
     рвались без нужды: без лимита браузер переносит их, просто чтобы плотнее
     набить строку. overflow-wrap — страховка там, где словаря переносов нет. */
  -webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:16 6 4;overflow-wrap:break-word;
}
.process-card__desc{font-size:15px;line-height:1.6;color:var(--ink-55);text-wrap:pretty}
.process-card__time{
  align-self:flex-start;margin-top:18px;
  font-size:13px;letter-spacing:.04em;text-transform:uppercase;font-weight:500;color:var(--acc);
}

/* ---------- Шкала ---------- */
.process-bar{position:relative;height:4px;background:var(--ink-14);border-radius:2px;overflow:hidden}
.process-bar__fill{
  display:block;height:100%;width:0;background:var(--acc);border-radius:2px;
  transition:width .5s var(--ease-out);
}

.process-steps{
  margin:0;padding:0;list-style:none;
  display:flex;align-items:stretch;
  gap:clamp(14px,1.8vw,28px);
}
/* Колонки равной ширины. Пропорцию срока показывает полоса прогресса и
   подпись в колонке: при ширине по data-days у длинных этапов оставался
   пустой хвост, и ряд выглядел разъехавшимся. */
.process-step{flex:1 1 0;min-width:0;position:relative}

/* Начало этапа отмечает короткая засечка под полосой, а не сплошная линия
   во всю высоту: с разделителями подписи упирались в них вплотную. */
.process-step::before{
  content:'';position:absolute;left:0;top:0;
  width:1px;height:10px;background:var(--ink-30);
  transition:background .25s ease;
}
.process-step.is-done::before,.process-step.is-active::before{background:var(--acc)}

.process-step__btn{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  width:100%;height:100%;min-height:44px;
  padding:24px 0 0;
  background:none;border:none;text-align:left;
  color:var(--ink-45);
  transition:color .25s ease;
}
/* Номер этапа: та же плитка, что была у иконки, но с цифрой — клиент попросил
   цифры (24.09.2026). Montserrat, как у всех числовых акцентов сайта. */
.process-step__num{display:flex;width:44px;height:44px;align-items:center;justify-content:center;
  border-radius:12px;background:var(--tile);color:var(--ink-70);flex-shrink:0;
  font-family:'Montserrat Brand',sans-serif;font-weight:800;font-size:16px;line-height:1;
  font-variant-numeric:tabular-nums;transition:background .25s ease,color .25s ease}
.process-step__name{font-size:14px;line-height:1.35;color:var(--ink-70);transition:color .25s ease}
/* срок прижат к низу: колонки в ряду одной высоты, поэтому сроки встают
   по одной линии и без искусственной min-height у названия */
.process-step__time{margin-top:auto;padding-top:2px;font-size:12px;letter-spacing:.04em;
  color:var(--ink-45);font-variant-numeric:tabular-nums;transition:color .25s ease}

/* Пройденные шаги гасим слабее, чем непройденные: видно, где ты сейчас */
.process-step.is-done .process-step__num{background:rgba(238,125,0,.14);color:var(--acc)}
.process-step.is-active .process-step__num{background:var(--acc);color:var(--dark)}
.process-step.is-active .process-step__name{color:var(--ink)}
.process-step.is-active .process-step__time{color:var(--acc)}
@media (hover:hover){
  .process-step__btn:hover .process-step__num{background:var(--acc);color:var(--dark)}
  .process-step__btn:hover .process-step__name{color:var(--ink)}
}

.process-total{
  margin-top:clamp(18px,2.4vw,26px);
  font-size:15px;line-height:1.6;color:var(--ink-55);
}
.process-total b{color:var(--ink);font-weight:500}

/* ---------- Адаптив ---------- */
@media (max-width:1023px){
  .process-play{grid-template-columns:1fr}
  /* карточка под сценой: в узкой колонке текст рядом со сценой не читается */
  .process-card{min-height:0}
}
@media (max-width:760px){
  /* Текст внутри сцены задан в единицах кадра, а кадр на телефоне ужимается
     до 0,5 — подписи выходили 5,5–8,5 px и не читались. Увеличиваем кегли
     так, чтобы на экране получилось 10–15 px, и заодно кружки осей: при
     радиусе 9 единиц цифра внутри превращалась в точку. */
  .process-svg .process-num{font-size:30px}
  /* Табло калькулятора ограничено рамкой экрана (104 ед. по ширине):
     при 30 ед. «1 500 м²» вылезало за левый край и «1 » срезалось.
     21 ед. — крупно и целиком помещается внутри экрана. */
  .process-svg .process-calc__out{font-size:21px}
  .process-svg .process-dim-label{font-size:28px}
  .process-svg .dwg-mark-text{font-size:22px}
  .process-svg .dwg-dim-text{font-size:24px}
  .process-svg .dwg-mark circle{r:15px}
  /* Штамп на телефоне убираем: в 9 px он всё равно не читается, а после
     укрупнения подпись «50 м» стала налезать на его рамку. */
  .process-svg .dwg-stamp,
  .process-svg .dwg-stamp-text{display:none}

  /* Шкала на телефоне — вертикальный список: шесть подписей в строку не
     помещаются, а с прокруткой вбок в экран попадали два этапа из шести,
     остальные приходилось листать. Полосу прогресса в столбце не рисуем —
     текущий этап виден по оранжевой иконке и подписи. */
  .process-bar{display:none}
  .process-steps{
    flex-direction:column;gap:0;overflow:visible;
    border-top:1px solid var(--ink-14);
  }
  .process-step{flex:none!important;width:100%;border-bottom:1px solid var(--ink-14)}
  /* засечка под полосой прогресса — вместе с полосой */
  .process-step::before{display:none}
  .process-step__btn{
    flex-direction:row;align-items:center;gap:14px;
    height:auto;min-height:64px;padding:12px 0;
  }
  .process-step__num{flex:0 0 40px;width:40px;height:40px;font-size:15px}
  .process-step__name{flex:1 1 auto;font-size:15px}
  .process-step__time{flex:0 0 auto;margin:0;padding:0;white-space:nowrap}
}

/* при reduce канвас не рисуется и слои не ездят */
@media (prefers-reduced-motion:reduce){
  .process-canvas{display:none}
  .process-layer{transition:opacity .01ms;transform:none}
}


/* ===== PRODUCTION — «Собственные заводы» ===== */
.production-inner{border-top:1px solid var(--ink-14)}
.production-head{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px);margin-bottom:clamp(32px,5vw,64px)}
.production-eyebrow{width:220px;flex-shrink:0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.production-head__body{flex:1;min-width:min(100%,480px);display:flex;flex-direction:column;gap:24px}
.production-title{margin:0;font-family:'Montserrat Brand','Montserrat',sans-serif;font-weight:800;font-size:clamp(26px,3.2vw,48px);line-height:1.08;letter-spacing:-.01em;color:var(--ink)}
.production-lede{margin:0;font-size:16px;line-height:1.6;color:var(--ink-70);max-width:720px;text-wrap:pretty}
.production-photo{display:block;width:100%;aspect-ratio:21/9;min-height:260px;object-fit:cover}
.production-stats{margin:clamp(28px,4vw,48px) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:clamp(20px,3vw,48px)}
.production-stat{border-top:1px solid var(--ink-30);padding-top:16px;display:flex;flex-direction:column;gap:8px}
.production-stat__label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-55);line-height:1.4}
.production-stat__value{margin:0;font-weight:500;font-size:clamp(28px,2.8vw,44px);line-height:1;color:var(--ink)}
/* Подпись из двух строк не должна опускать цифру ниже соседних: строки
   «подпись» и «значение» общие для всего ряда, поэтому цифры стоят на одной
   линии. Браузеры без subgrid остаются на обычной раскладке выше. */
@supports (grid-template-rows: subgrid) {
  .production-stats{grid-auto-rows:auto}
  .production-stat{display:grid;grid-template-rows:subgrid;grid-row:span 2;align-content:start}
}
.production-gallery{margin-top:clamp(28px,4vw,48px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.production-gallery__item{height:220px;overflow:hidden}
.production-gallery__item img{width:100%;height:100%;object-fit:cover}


/* ===== TEAM — «Сотрудники компании» ===== */
.team-inner{border-top:1px solid var(--ink-14)}
.team-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(32px,5vw,64px)}
.team-title{margin:0;font-family:'Montserrat Brand','Montserrat',sans-serif;font-weight:800;font-size:clamp(32px,4.6vw,66px);line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink)}
.team-note{margin:0;max-width:360px;font-size:15px;line-height:1.55;color:var(--ink-55)}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(20px,2.5vw,32px)}
.team-card{display:flex;flex-direction:column;gap:14px}
.team-card__photo{aspect-ratio:4/5;overflow:hidden}
.team-card__photo img{width:100%;height:100%;object-fit:cover}
/* Фото сразу в цвете. Ч/б-фильтр по наведению убран по просьбе владельца:
   лица людей читаются лучше, а на таче эффект и так не работал. */
.team-card__photo img{transition:transform .45s var(--ease-out)}
@media (hover:hover){
  .team-card:hover .team-card__photo img{transform:scale(1.03)}
}
.team-card__info{border-top:1px solid var(--ink-14);padding-top:12px;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.team-card__name{margin:0;font-weight:500;font-size:17px;line-height:1.3;color:var(--ink)}
.team-card__role{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-55);margin-bottom:8px}
.team-card__role--acc{color:var(--acc)}
/* Тач-таргет ≥44px: паддинги входят в кликабельную область, ссылки не «слипаются».
   На устройствах с мышью такой запас не нужен — контакты стоят плотнее. */
.team-card__link{display:inline-flex;align-items:center;min-height:44px;padding:10px 12px 10px 0;font-size:14px;color:var(--ink-70)}
@media (hover:hover) and (pointer:fine){
  .team-card__link{min-height:0;padding:3px 12px 3px 0}
}
.team-card__link--mail{color:var(--ink-55)}
.team-card__link--max{display:inline-flex;align-items:center;gap:7px;color:var(--acc);font-weight:500}
.team-card__link--max .ic{font-size:18px;width:1em;height:1em;fill:currentColor;flex-shrink:0}
@media (hover:hover){
  .team-card__link:hover{color:var(--acc)}
}

/* Ссылка на полный список: на главной показываем троих */
.team-all{margin-top:clamp(20px,2.6vw,30px)}
.team-all a{font-size:15px;color:var(--ink-70)}
@media (hover:hover){ .team-all a:hover{color:var(--acc)} }


/* ===== LIFE — «Корпоративная жизнь» ===== */
.life-inner{border-top:1px solid var(--ink-14)}
.life-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(28px,4vw,48px)}
.life-title{margin:0;font-family:'Montserrat Brand','Montserrat',sans-serif;font-weight:800;font-size:clamp(32px,4.6vw,66px);line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink)}
.life-note{margin:0;max-width:360px;font-size:15px;line-height:1.55;color:var(--ink-55)}

/* Колонок фиксированное число, а не auto-fill: десять фотографий ложатся
   ровно в два ряда и в конце не остаётся одинокого кадра. */
.life-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.life-item{overflow:hidden;border-radius:var(--radius);background:#141414;aspect-ratio:1/1}
.life-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-out)}
@media (hover:hover){
  .life-item:hover img{transform:scale(1.04)}
}
@media (max-width:1100px){ .life-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:820px){ .life-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){ .life-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }


/* ===== NEWS — «Новости» на главной ===== */
.news-inner{border-top:1px solid var(--ink-14)}
.news-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:clamp(24px,3vw,36px)}
.news-title{margin:0;font-family:'Montserrat Brand','Montserrat',sans-serif;font-weight:800;font-size:clamp(32px,4.6vw,66px);line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink)}
.news-all{font-size:15px;color:var(--ink-55);white-space:nowrap;transition:color .2s ease}

.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
.news-card{background:var(--tile);border:1px solid transparent;border-radius:calc(var(--radius) * 2);overflow:hidden;transition:background .2s ease,border-color .2s ease,transform .25s var(--ease-out)}
.news-card__link{display:flex;flex-direction:column;height:100%;color:inherit}
.news-card__media{display:block;aspect-ratio:16/9;overflow:hidden;background:#141414}
.news-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-out)}
.news-card__media--empty{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#232323 0%,#171717 70%)}
.news-card__media--empty img{width:21%;height:auto;object-fit:contain}
.news-card__body{display:flex;flex-direction:column;gap:8px;padding:clamp(18px,2vw,24px)}
.news-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45)}
.news-card__tag{color:var(--acc)}
.news-card__title{font-weight:500;font-size:clamp(17px,1.5vw,20px);line-height:1.25;color:var(--ink);transition:color .2s ease}
.news-card__desc{font-size:14.5px;line-height:1.55;color:var(--ink-55);text-wrap:pretty}

@media (hover:hover){
  .news-card:hover{background:rgba(242,242,242,.05);border-color:var(--ink-30);transform:translateY(-4px)}
  .news-card:hover .news-card__title{color:var(--acc)}
  .news-card:hover .news-card__media img{transform:scale(1.04)}
  .news-all:hover{color:var(--acc)}
}
@media (max-width:1100px){ .news-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:680px){ .news-grid{grid-template-columns:minmax(0,1fr)} }


/* ===== LEAD (Оставить заявку) ===== */
.lead{position:relative;overflow:hidden;background:var(--sec-warm)}
.lead-anchor{position:absolute;top:0}
.lead__inner{border-top:1px solid var(--ink-14)}
.lead-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(28px,5vw,96px);align-items:stretch}
.lead-left{display:flex;flex-direction:column;gap:28px}
.lead-title{font-size:clamp(32px,4.6vw,66px);line-height:1.02;letter-spacing:-.01em}
.lead-text{font-size:16px;line-height:1.6;color:var(--ink-70);max-width:520px;text-wrap:pretty}
.lead-perks{display:flex;flex-direction:column}
.lead-perks li{border-top:1px solid var(--ink-14);padding:14px 0;font-size:15px;color:var(--ink-70)}
.lead-perks li:last-child{border-bottom:1px solid var(--ink-14)}
/* обе колонки тянутся на одну высоту, а нижние ряды прижаты к низу —
   так кнопка слева и «Отправить» стоят на одной линии */
.lead-cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:auto}
.lead-phone{display:inline-flex;align-items:center;min-height:44px;font-weight:500;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.01em;color:var(--ink)}
.lead-form-col{display:flex;flex-direction:column}
.lead-form{display:flex;flex-direction:column;gap:26px;flex:1}
.lead-submit{align-self:flex-start;padding:17px 38px;margin-top:auto}
.lead-success:not([hidden]){display:flex;flex-direction:column;gap:14px;padding:24px 0}
.lead-success-title{font-weight:500;font-size:clamp(24px,2.8vw,40px);line-height:1.15}
.lead-success-note{font-size:15px;line-height:1.6;color:var(--ink-55)}
@media (hover:hover){
  .lead-cta-btn:hover{background:#f2f2f2;color:#181818;transform:translateY(-2px)}
  .lead-submit:hover{background:var(--acc-hover);color:var(--dark);transform:none}
}
@media (max-width:720px){
  .lead .section__inner{padding-bottom:calc(clamp(56px,6vw,80px) + var(--fab-safe))}
  /* одна колонка — выравнивать нечего, убираем авто-отступы */
  .lead-cta,.lead-submit{margin-top:0}
}

/* Поле файла: нативный input скрыт, кликабельна вся строка с кнопкой.
   Так поле выглядит как остальные и не ломается в разных браузерах. */
.filefield{display:flex;align-items:center;gap:12px;flex-wrap:wrap;cursor:pointer;padding:6px 0}
.filefield__input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.filefield__btn{display:inline-flex;align-items:center;min-height:44px;padding:11px 20px;border:1px solid var(--ink-30);border-radius:var(--radius);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);white-space:nowrap;transition:border-color .2s ease,color .2s ease}
.filefield__name{font-size:13px;line-height:1.4;color:var(--ink-45);overflow-wrap:anywhere}
.filefield__name.is-set{color:var(--ink-70)}
.filefield__input:focus-visible + .filefield__btn{outline:2px solid var(--acc);outline-offset:2px}
@media (hover:hover){
  .filefield:hover .filefield__btn{border-color:var(--acc);color:var(--acc)}
}


/* ===== FAQ (Частые вопросы) ===== */
.faq{background:var(--sec-sand)}
.faq__inner{border-top:1px solid var(--ink-14);display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px)}
.faq-eyebrow{width:220px;flex-shrink:0}
.faq-body{flex:1;min-width:min(100%,480px);display:flex;flex-direction:column}
.faq-title{margin-bottom:clamp(20px,3.5vw,48px)}
.faq-item{border-bottom:1px solid var(--ink-14)}
.faq-q{margin:0;line-height:1.35}
.faq-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:none;padding:22px 0;text-align:left;color:inherit}
.faq-q-text{font-weight:500;font-size:clamp(16px,1.6vw,20px);line-height:1.35;color:var(--ink)}
.faq-ic{font-size:24px;color:var(--ink-55)}
[data-faq-btn][aria-expanded="true"] .faq-ic--add{display:none}
[data-faq-btn][aria-expanded="false"] .faq-ic--remove{display:none}
.faq-a{padding:0 0 24px;font-size:15px;line-height:1.65;color:var(--ink-55);max-width:720px}
.faq-a a{padding:12px 0;text-decoration:underline;text-underline-offset:3px} /* вертикальный padding инлайн-ссылки не ломает строку, но расширяет тач-таргет */
@media (hover:hover){
  .faq-btn:hover .faq-ic{color:var(--acc)}
}


/* ===== CONTACTS ===== */
.contacts-inner{border-top:1px solid var(--ink-14);display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px)}
h2.contacts-label{width:220px;flex-shrink:0;font-family:inherit;font-weight:400;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);line-height:1.6}
.contacts-grid{flex:1;min-width:min(100%,480px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(28px,4vw,48px);align-items:stretch}

.contacts-list{margin:0;display:flex;flex-direction:column}
.contacts-list__row{border-top:1px solid var(--ink-14);padding:16px 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px}
.contacts-list__row:last-child{border-bottom:1px solid var(--ink-14)}
.contacts-list__key{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45);font-weight:400}
.contacts-list__val{margin:0;font-size:15px;line-height:1.5;color:var(--ink);text-align:right}
.contacts-list__val--wide{max-width:340px}
.contacts-list__val a{display:inline-block;color:var(--ink);padding:12px 0;margin:-12px 0} /* тач-таргет ≥44 без сдвига ритма */
@media (hover:hover){ .contacts-list__val a:hover{color:var(--acc)} }

.contacts-map{position:relative;background:var(--sec-blue);min-height:380px;overflow:hidden;border-radius:14px}
.contacts-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.contacts-map__badge{position:absolute;left:16px;bottom:16px;background:var(--tile-strong);padding:12px 18px;border-radius:2px;display:flex;flex-direction:column;gap:3px}
.contacts-map__badge-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.contacts-map__badge-addr{font-size:14px;color:var(--ink)}
.contacts-map__route{position:absolute;left:16px;top:16px;display:flex;align-items:center;gap:8px;background:var(--acc);color:var(--dark);font-weight:500;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:13px 20px;min-height:44px;border-radius:8px;transition:background .2s ease,color .2s ease}
.contacts-map__route .ic{font-size:18px}
@media (hover:hover){ .contacts-map__route:hover{background:var(--dark);color:var(--ink)} }

/* На узком экране подпись и значение не помещаются в одну строку: длинный
   адрес переносился и прижимался вправо рваным столбиком. Ставим их в стопку —
   подпись сверху, значение слева в полную ширину. */
@media (max-width:560px){
  .contacts-list__row{flex-direction:column;align-items:flex-start;gap:4px}
  .contacts-list__val,
  .contacts-list__val--wide{text-align:left;max-width:none}
}


/* ===== FOOTER ===== */
.footer{border-top:1px solid var(--ink-14)}
.footer-inner{padding-top:clamp(40px,6vw,80px);padding-bottom:32px;display:flex;flex-direction:column;gap:clamp(40px,6vw,72px)}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px}

.footer-brand{display:flex;flex-direction:column;gap:16px;max-width:320px}
.footer-brand__row{display:flex;align-items:center;gap:10px}
.footer-brand__logo{height:28px;width:auto;background:var(--dark);border-radius:50%;padding:3px;box-sizing:content-box}
.footer-brand__name{font-weight:600;font-size:16px;color:var(--ink);letter-spacing:.04em}
.footer-brand__desc{font-size:14px;line-height:1.6;color:var(--ink-45)}
.footer-brand__legal{font-size:12.5px;line-height:1.6;color:var(--ink-45)}

.footer-col{display:flex;flex-direction:column;gap:2px}
.footer-col__title{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-30);margin-bottom:10px}
.footer-col__link{font-size:14px;color:var(--ink-70);padding:11px 0;margin:-6px 0} /* тач-таргет ≥44 */
.footer-col__text{font-size:14px;color:var(--ink-70);padding:5px 0}
.footer-col__addr{font-size:14px;color:var(--ink-45);line-height:1.5;padding:5px 0}
@media (hover:hover){ .footer-col__link:hover{color:var(--acc)} }

.footer-bottom{border-top:1px solid var(--ink-14);padding-top:20px;display:flex;flex-direction:column;gap:14px}
.footer-bottom__note{font-size:12.5px;line-height:1.65;color:var(--ink-45);max-width:920px;text-wrap:pretty}
.footer-bottom__meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px}
.footer-bottom__copy{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-30)}
.footer-bottom__right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.footer-bottom__dev{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-30);padding:10px 0;margin:-6px 0} /* тач-таргет */
.footer-bottom__tagline{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-30)}
@media (hover:hover){ .footer-bottom__dev:hover{color:var(--acc)} }


/* ===== MISC: плавающие кнопки, модалки, куки-баннер ===== */

/* Кнопка «Наверх» */
.fab-top{position:fixed;bottom:22px;left:22px;z-index:110;width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:var(--dark);color:var(--ink);border:none;border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.22);animation:fadeUp .4s var(--ease-out) both;transition:background .2s ease,color .2s ease}
.fab-top[hidden]{display:none}
@media (hover:hover){ .fab-top:hover{background:var(--acc);color:var(--dark)} }

/* Плавающая кнопка звонка (56×56, разворот только при hover-устройствах) */
.fab-call-wrap{position:fixed;bottom:22px;right:22px;z-index:110;filter:drop-shadow(0 8px 28px rgba(0,0,0,.22));transition:transform .32s var(--ease-out),opacity .24s ease}
/* Прокрутка вверх и самый верх страницы — кнопка уезжает вниз и не мешает читать */
.fab-call-wrap.is-hidden{transform:translateY(140%);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){ .fab-call-wrap{transition:none} }
.fab-call{display:flex;align-items:center;justify-content:flex-start;gap:0;width:56px;height:56px;padding:0;background:var(--acc);color:var(--dark);border:none;border-radius:8px;overflow:hidden;white-space:nowrap;font-weight:500;font-size:13px;letter-spacing:.04em;text-transform:uppercase;transition:width .35s var(--ease-out),background .2s}
.fab-call__ic{flex-shrink:0;width:56px;display:flex;align-items:center;justify-content:center}
.fab-call .ic{font-size:22px}
.fab-call__text{padding-right:22px}
@media (hover:hover){ .fab-call:hover{width:218px;background:var(--ink)} }

/* Пока открыто мобильное меню или модалка, плавающие кнопки прячем: их z-index
   (110) выше меню (105), и на узком экране кнопка звонка ложится прямо на пункт
   меню. Признак берём тот же, что ставит скрипт при открытии, — body.no-scroll. */
body.no-scroll .fab-top,
body.no-scroll .fab-call-wrap{display:none}

/* Модалки: общий оверлей и карточка */
.modal-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-overlay[hidden]{display:none}
.modal-card{position:relative;box-sizing:border-box}
.modal-close{position:absolute;top:8px;right:8px;z-index:1;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:var(--ink-55);transition:color .2s ease}
.modal-close .ic{font-size:22px}
@media (hover:hover){ .modal-close:hover{color:var(--acc)} }
.modal-form{display:flex;flex-direction:column}
.modal-head{display:flex;flex-direction:column;gap:10px}
.modal-chip{align-self:flex-start;font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-weight:500;color:#181818;background:linear-gradient(120deg,#ffb15c 0%,#EE7D00 100%);padding:7px 14px;border-radius:8px}
.modal-chip:empty{display:none}
.modal-submit{align-self:flex-start;background:var(--acc);color:var(--dark);border:none;font-weight:500;font-size:13px;letter-spacing:.04em;text-transform:uppercase;border-radius:8px;transition:background .2s ease}
@media (hover:hover){ .modal-submit:hover{background:var(--acc-hover)} }
.modal-card .form-success{display:flex;flex-direction:column;gap:12px;padding:12px 0}
.modal-card .form-success[hidden]{display:none}
.modal-success__title{font-weight:500;font-size:24px;color:var(--ink);line-height:1.2}
.modal-success__text{font-size:15px;line-height:1.6;color:var(--ink-55)}
@keyframes dimIn{from{opacity:0}to{opacity:1}}

/* Модалка «Хочу похожий объект» */
.modal-sim{z-index:125;background:rgba(16,16,16,.7);animation:dimIn .25s ease both}
.modal-sim .modal-card{width:min(500px,100%);background:var(--bg);padding:clamp(28px,4vw,44px);animation:fadeUp .45s var(--ease-out) both}
.modal-sim__form{gap:22px}
.modal-sim__title{font-family:'Montserrat Brand',sans-serif;font-weight:800;font-size:clamp(22px,2.6vw,30px);line-height:1.1;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink)}
.modal-sim__text{font-size:14px;line-height:1.55;color:var(--ink-55)}
.modal-sim .modal-submit{padding:16px 34px}

/* Модалка «Заказать звонок» */
.modal-cb{z-index:120;background:rgba(16,16,16,.85)}
.modal-cb .modal-card{width:min(460px,100%);background:var(--sec-warm);padding:40px;border-radius:4px}
.modal-cb__form{gap:20px}
.modal-cb__title{font-weight:500;font-size:26px;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.modal-cb__text{font-size:15px;line-height:1.6;color:var(--ink-55)}
.modal-cb .modal-submit{padding:15px 32px}

/* Куки-баннер */
.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:115;display:flex;justify-content:center;animation:fadeUp .5s ease both}
.cookie-bar[hidden]{display:none}
.cookie-bar__card{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;max-width:920px;width:100%;box-sizing:border-box;background:var(--tile-strong);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--ink-14);padding:18px 24px;border-radius:10px}
.cookie-bar__ic{font-size:22px;color:var(--acc)}
.cookie-bar__text{flex:1;min-width:min(100%,300px);font-size:13.5px;line-height:1.55;color:var(--ink-70)}
.cookie-bar__text a{color:var(--acc);text-decoration:underline}
@media (hover:hover){ .cookie-bar__text a:hover{color:var(--ink)} }
.cookie-bar__actions{display:flex;flex-wrap:wrap;gap:10px}
.cookie-bar__btn{min-height:44px;font-weight:500;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:12px 24px;border-radius:8px;transition:all .25s ease}
.cookie-bar__btn--accept{background:var(--acc);color:var(--dark);border:none}
/* На невысоких экранах (ноутбук с масштабом Windows) плашка съедала нижнюю
   часть первого экрана — делаем её компактнее. */
@media (min-width:901px) and (max-height:800px) and (pointer:fine){
  .cookie-bar{left:12px;right:12px;bottom:12px}
  .cookie-bar__card{padding:12px 18px;gap:10px 18px}
  .cookie-bar__text{font-size:12.5px;line-height:1.45}
  .cookie-bar__btn{min-height:38px;padding:9px 18px;font-size:11px}
  .cookie-bar__ic{font-size:18px}
}
.cookie-bar__btn--decline{background:none;color:var(--ink-70);border:1px solid var(--ink-30)}
@media (hover:hover){
  .cookie-bar__btn--accept:hover{background:var(--dark);color:var(--ink)}
  .cookie-bar__btn--decline:hover{border-color:var(--ink);color:var(--ink)}
}
/* Компактный баннер на мобильных — не перекрывает CTA хиро */
@media (max-width:720px){
  .cookie-bar{left:10px;right:10px;bottom:10px}
  .cookie-bar__card{gap:10px 14px;padding:12px 14px;border-radius:8px}
  .cookie-bar__ic{display:none}
  .cookie-bar__text{font-size:12.5px}
  .cookie-bar__btn{padding:10px 18px}
}


/* ---------- Тач-цели ---------- */
/* Блок намеренно лежит в последней по алфавиту секции: bundle.css склеивается
   как main.css + sections/*.css по порядку имён, и правило из main.css
   проигрывало бы стилям секций при равной специфичности. */
/* Пальцем в ссылку высотой 21 px попасть трудно: рекомендованный минимум —
   44 px. Правило включается только там, где курсора нет, чтобы на десктопе
   ничего не раздувалось. Строчным ссылкам область нажатия наращиваем
   внутренним отступом и гасим его отрицательным внешним: попасть можно в
   45 px, а видимая высота строки и вся вёрстка остаются прежними. */
@media (hover:none){
  .abt-crumbs a,.blg-crumbs a,.faqp-crumbs a,.legal-crumbs a,.map-crumbs a,
  .obj-crumbs a,.pst-crumbs a,.srv-crumbs a,.stf-crumbs a,.vac-crumbs a,
  .srv-card__more,.abt-prod__more,.pst-back{padding-block:12px;margin-block:-12px}

  /* Контакты в карточках: по ним звонят и пишут — промах тут дороже всего.
     Здесь отрицательный отступ не годится (ссылки идут стопкой и наложились
     бы друг на друга), поэтому просто задаём высоту и убираем зазор. */
  .stf-card__link,.vac-card__phone,.vac-card__mail,
  .faqp-card__phone,.faqp-card__mail,
  .vac-links__item,.faqp-links__item{min-height:44px;display:flex;align-items:center}
  .stf-card__links,.vac-card__contacts,.faqp-card__contacts{gap:0}

  /* Кнопки и чипы: были 34–42 px — чуть ниже нормы */
  .obj-filter__btn,.blg-filter__btn,
  .srv-jump__item,.legal-toc__item,.game__sound{min-height:44px}
  .srv-jump__item,.legal-toc__item{display:inline-flex;align-items:center}

  /* Списки ссылок в футерах блоков не дотягивали до нормы 1–5 px.
     Высоту задаём напрямую, а не отступом: у списков разный кегль,
     и подобранный на глаз padding каждый раз промахивался на пару пикселей. */
  .obj-cta__links a,.stf-cta__links a,.blg-cta__links a,.abt-cta__links a,
  .srv-cta__links a,.legal-foot__links a,.e404-links__list a,
  .pst-more a,.map-list a{min-height:44px;display:flex;align-items:center}

  /* Отдельно стоящие ссылки в реквизитах и карте сайта — 17–21 px */
  .abt-req__list dd a,.map-tech dd a,
  .map-block__title a{display:inline-flex;align-items:center;min-height:44px}

  /* Подпись разработчика в подвале — 39 px */
  .footer-bottom__dev{padding-block:13px;margin-block:-13px}

  /* Ссылки внутри предложения (почта в тексте оферты и политики) намеренно
     не трогаем: WCAG 2.5.8 выводит строчные ссылки из-под требования 44 px,
     а растягивание порвало бы межстрочный интервал абзаца. */
}