/* ============================================================
   Страница отдельного сервиса (корпуса со схемы).
   Живёт на токенах и шрифтах главной - assets/styles.css грузится
   первым и даёт палитру, шапку, подвал и кнопки. Здесь только то,
   чего на главной нет.

   --hue задаётся в разметке: у каждого корпуса на сцене свой неон,
   и страница носит его же. Это метка «вы в этом корпусе», поэтому
   она достаётся заголовку и рамке снимка, а не кнопкам: действие
   на всём сайте янтарное.
   ============================================================ */

.svc-back-top{ margin-left: auto; }
@media (max-width: 720px){ .svc-back-top{ display: none; } }

.svc-main{ padding: clamp(30px, 5vw, 64px) 0 clamp(40px, 6vw, 90px); }
.svc-wrap{ display: flex; flex-direction: column; gap: clamp(28px, 4vw, 52px); }

/* ---------- заголовок страницы ---------- */
.svc-head{ display: flex; flex-direction: column; gap: 14px; }
.svc-head h1{
  font-size: clamp(32px, 4.4vw, 58px);
  max-width: 20ch;
}
.svc-head .lead{ max-width: 58ch; }

/* ---------- снимок продукта: он и есть главный довод ---------- */
.svc-shot{ margin: 0; display: flex; flex-direction: column; gap: 12px; }
.svc-shot a{
  display: block; border: 1px solid var(--line);
  border-top: 3px solid var(--hue, var(--acc));
  background: #060A0E; overflow: hidden;
  transition: border-color .3s var(--ease);
}
.svc-shot a:hover{ border-color: var(--hue, var(--acc)); }
.svc-shot img{ display: block; width: 100%; height: auto; }

/* ---------- три блока разбора: тот же порядок, что в карточке зоны ---------- */
.svc-text{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
}
.svc-text section{ display: flex; flex-direction: column; gap: 10px; }
.svc-text h2{
  font-family: var(--f-mono); font-weight: 500;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}
.svc-text p{ color: var(--ink-2); max-width: 46ch; }
.svc-ex p{ color: var(--ink-3); }

/* Куда дальше. Два соседних раздела с объяснением, зачем туда идти:
   ссылка без довода - это меню, а меню в конце страницы никто не читает.
   Цвет рамки берётся у раздела, КУДА ведёт ссылка, а не у текущего:
   так переход заранее показывает, куда попадёшь. */
.svc-next{
  display: flex; flex-direction: column; gap: 14px;
  margin-top: clamp(32px, 4vw, 56px);
}
.svc-next-k{
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.svc-next-row{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 14px;
}
.svc-next-card{
  display: flex; flex-direction: column; gap: 7px;
  padding: clamp(16px, 1.8vw, 22px);
  border: 1px solid var(--line); background: var(--panel);
  transition: border-color .25s var(--ease), background .25s var(--ease),
              transform .25s var(--ease);
}
.svc-next-card b{
  font-family: var(--f-disp); font-weight: 700; font-size: clamp(16px, 1.5vw, 19px);
  letter-spacing: -.02em; color: var(--ink);
}
.svc-next-card span{
  font-size: 16.2px; line-height: 1.45;
  color: #C8D2DB;
  color: color-mix(in srgb, var(--ink) 52%, var(--ink-2));
}
.svc-next-card:hover{
  border-color: var(--hue, var(--acc)); background: var(--panel-2);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce){
  .svc-next-card{ transition: none; }
  .svc-next-card:hover{ transform: none; }
}

/* ---------- низ: кнопка возврата и призыв ---------- */
.svc-foot{
  display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch;
  padding-top: clamp(10px, 2vw, 24px); border-top: 1px solid var(--line-2);
}
.btn-back{
  /* по содержимому, а не во всю строку: внутри одно слово,
     и растянутая на треть экрана панель выглядела пустой */
  flex: 0 0 auto; margin-right: auto;
  display: flex; align-items: center; gap: 14px;
  padding: clamp(14px, 1.6vw, 18px) clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line); background: var(--panel);
  transition: border-color .25s var(--ease), background .25s var(--ease),
              transform .25s var(--ease);
}
.btn-back:hover{
  border-color: var(--acc); background: var(--panel-2); transform: translateY(-2px);
}
.btn-back-arw{
  font-size: 26px; line-height: 1; color: var(--acc); flex: none;
  transition: transform .25s var(--ease);
}
.btn-back:hover .btn-back-arw{ transform: translateX(-5px); }
.btn-back b{
  display: block; font-family: var(--f-disp); font-weight: 700;
  font-size: clamp(17px, 1.6vw, 21px); letter-spacing: -.02em;
}
.svc-cta{ align-self: center; }

@media (prefers-reduced-motion: reduce){
  .btn-back, .btn-back-arw, .svc-shot a{ transition: none; }
  .btn-back:hover{ transform: none; }
  .btn-back:hover .btn-back-arw{ transform: none; }
}

/* ---------- галерея снимков с ручным переключением ---------- */
.svc-gal{ margin: 0; display: flex; flex-direction: column; gap: 14px; }
/* Кадр держит высоту сам, независимо от формата снимка. Одной пропорции мало:
   она задаёт лишь желаемую высоту, а картинка большего формата всё равно
   растягивает блок - и содержимое под галереей прыгает при переключении.
   Поэтому снимки выводятся абсолютно: тогда они не участвуют в расчёте высоты. */
.gal-frame{
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
  background: #060A0E; aspect-ratio: 16 / 10;
}
/* Кадры разного формата - от почти квадратного лендинга до широкой CRM.
   contain вместо cover: лучше поля по краям, чем срезанная половина экрана. */
.gal-img{
  display: none; position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
}
.gal-img.is-on{ display: block; }

/* Стрелки под кадром, а не поверх него: на снимке интерфейса они закрывают
   как раз то, что человек пришёл рассмотреть. */
/* Стрелки разведены по краям, точки ровно посередине. Именно
   space-between, а не отступы: стрелки одинаковой ширины, поэтому
   середина получается настоящей и не съезжает при смене числа точек. */
.gal-bar{
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
}
.gal-arw{
  width: 54px; height: 44px; display: grid; place-items: center;
  cursor: pointer; font-size: 22px; line-height: 1;
  background: none; border: 1px solid var(--line); color: var(--ink);
  transition: border-color .2s var(--ease), color .2s var(--ease),
              background .2s var(--ease);
}
.gal-arw:hover{ border-color: var(--acc); color: var(--acc); background: var(--panel); }
.gal-arw:focus-visible{ outline: 2px solid var(--acc); outline-offset: 3px; }
/* Подпись к кадру и строка «Открыть полностью» убраны 23.09. Подпись
   дублировала то, что видно на снимке; текст остался в alt - его читают
   поиск и программа чтения с экрана. Полный размер теперь открывает сам
   снимок: ссылка-накладка на весь кадр. */
.gal-zoom{
  position: absolute; inset: 0; cursor: zoom-in;
}
.gal-zoom:focus-visible{ outline: 2px solid var(--acc); outline-offset: -4px; }

/* Точки: место в строке занимает вся цель нажатия 24x24, а видимая
   точка рисуется псевдоэлементом - иначе по ней трудно попасть пальцем. */
.gal-dots{ display: flex; gap: 2px; }
.gal-dot{
  width: 24px; height: 24px; padding: 0; border: 0; background: none;
  cursor: pointer; display: grid; place-items: center;
}
.gal-dot::after{
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-3); opacity: .5;
  transition: background .2s var(--ease), opacity .2s var(--ease), transform .2s var(--ease);
}
.gal-dot:hover::after{ opacity: 1; }
.gal-dot.is-on::after{
  background: var(--hue, var(--acc)); opacity: 1; transform: scale(1.25);
}
.gal-dot:focus-visible{ outline: 2px solid var(--acc); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce){ .gal-arw, .gal-dot::after{ transition: none; } }

/* Рассказ о работе под галереей.

   Мера - 54ch, это около 65 знаков в строке. Единица `ch` считается по
   ширине нуля, а кириллическая буква уже: 62ch дали 75 знаков, глаз терял
   начало следующей строки. Прежние 46ch, как у соседнего блока, наоборот
   читались обрывком под картинкой во всю ширину.

   Первый абзац отличается только цветом: он вводит, остальные раскрывают.
   Размер не меняем - разница в пять процентов не читается как иерархия,
   зато выглядит как случайность. */
.svc-story{
  display: flex; flex-direction: column; gap: 16px;
  max-width: 54ch;
}
.svc-story p{ color: var(--ink-2); }
.svc-story-lead{ color: var(--ink); }

/* Врезка: одна мысль, которую нельзя пропустить, между рассказом и перечнем.
   Рамка целиком, а не одна черта слева: черта у нас уже занята - ею помечены
   пункты перечня и карточки переходов, и третье значение размыло бы приём. */
.svc-note{
  margin-top: 26px; max-width: 62ch;
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 26px);
  /* Без color-mix рамка остаётся, но без подкраски в цвет раздела. */
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--hue, var(--acc)) 45%, var(--line));
  background: var(--panel);
  font-size: 17.4px; line-height: 1.5; color: var(--ink);
}

/* Перечень возможностей. Кружок вместо точки - тот же приём, что у списков
   в карточке зоны: маркер не спорит с текстом, но держит левый край. */
.svc-list{
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 22px; max-width: 62ch;
}
.svc-list li{
  position: relative; padding-left: 22px;
  color: #C8D2DB;
  color: color-mix(in srgb, var(--ink) 52%, var(--ink-2));
}
.svc-list li::before{
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border: 1.5px solid var(--hue, var(--acc));
  border-radius: 50%;
}
/* Подзаголовок держится начертанием, а не яркостью: чистый белый
   на чёрном фоне бьёт по глазам, а полужирного и так достаточно. */
.svc-list b{
  color: #DBE3EA;
  color: color-mix(in srgb, var(--ink) 82%, var(--ink-2));
  font-weight: 600;
}

/* Блок «Было / Стало» убран со страницы 29.09: пара описывает отдельный
   проект, а страница описывает раздел, где проектов несколько. Поля
   before и after в данных ОСТАВЛЕНЫ - это настоящий кейс по сайту завода,
   он понадобится, когда страницы разложим по проектам. */

/* ============================================================
   Лендинг /proizvodstvo/ (tools/page-proizvodstvo.js).
   Снимки идут внутри рассказа: номер, заголовок, текст, затем снимок
   именно того, о чём текст. Карусели здесь нет - она отрывает картинку
   от абзаца, который её объясняет.
   ============================================================ */
.lnd-lead{
  max-width: 60ch; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5;
  color: var(--ink); margin-top: -12px;
}
.lnd-cta-row{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Оговорка в рамке перед разбором экранов. Рамку берём у .svc-note, чтобы на
   странице не заводить второй вид выноски: он читался бы как другой по весу.
   margin-top снимаем - у .lnd-block свой отступ через gap, иначе складываются. */
.lnd-note{
  margin-top: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(14px, 1.6vw, 18px);
}
.lnd-note p{ margin: 0; }
/* Кнопка здесь нарочно меньше обычной: это не призыв страницы, а предложение
   по ходу чтения. Полноразмерная спорила бы с кнопками блока «Покажу систему». */
.btn-sm{ padding: 9px 16px; font-size: 12.6px; }

.lnd-block{ display: flex; flex-direction: column; gap: clamp(22px, 3vw, 36px); }
.lnd-block > h2, .lnd-meet h2{
  font-size: clamp(26px, 3vw, 38px); max-width: 24ch;
  padding-top: clamp(18px, 3vw, 34px); border-top: 1px solid var(--line-2);
}
.lnd-intro{ max-width: 62ch; color: var(--ink-2); }
.lnd-after{ max-width: 62ch; color: var(--ink); }

/* Три боли - короткие карточки, их пробегают глазами. */
.lnd-pains{
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.lnd-pain{
  display: flex; flex-direction: column; gap: 8px;
  padding: clamp(16px, 1.8vw, 22px);
  border: 1px solid var(--line); border-top: 3px solid var(--hue, var(--acc));
  background: var(--panel);
}
.lnd-pain b{
  font-family: var(--f-disp); font-weight: 700; font-size: clamp(17px, 1.5vw, 19px);
  letter-spacing: -.02em; color: var(--ink);
}
.lnd-pain span{ color: var(--ink-2); line-height: 1.45; }

/* Шаг рассказа. Текст сверху узкой колонкой, снимок под ним во всю ширину. */
.lnd-step{ display: flex; flex-direction: column; gap: 18px; }
.lnd-step + .lnd-step{ margin-top: clamp(14px, 2.4vw, 30px); }
.lnd-step-txt{ display: flex; flex-direction: column; gap: 12px; max-width: 62ch; }
.lnd-step-txt p{ color: var(--ink-2); }
.lnd-step h3{
  font-family: var(--f-disp); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(20px, 2vw, 26px); color: var(--ink);
}
.lnd-num{
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em;
  color: var(--hue, var(--acc));
}

/* Высокий снимок (панель поста) - рядом с текстом, а не под ним:
   во всю ширину он занял бы три экрана. */
@media (min-width: 900px){
  .lnd-split{
    display: grid; grid-template-columns: minmax(0, 1fr) 360px;
    gap: clamp(28px, 4vw, 56px); align-items: start;
  }
}
.lnd-fig{ margin: 0; display: flex; flex-direction: column; gap: 10px; }
.lnd-fig a{
  display: block; overflow: hidden; cursor: zoom-in;
  border: 1px solid var(--line); border-top: 3px solid var(--hue, var(--acc));
  background: #060A0E;
  transition: border-color .3s var(--ease);
}
.lnd-fig a:hover{ border-color: var(--hue, var(--acc)); }
.lnd-fig img{ display: block; width: 100%; height: auto; }
.lnd-fig figcaption{ font-size: 14.5px; line-height: 1.45; color: var(--ink-3); }
.lnd-fig-tall{ max-width: 360px; }

/* Пилот: три шага с крупным номером. */
.lnd-plan{
  counter-reset: plan; display: flex; flex-direction: column; gap: 18px;
  max-width: 68ch;
}
.lnd-plan li{
  counter-increment: plan; position: relative;
  padding-left: 52px; display: flex; flex-direction: column; gap: 6px;
}
.lnd-plan li::before{
  content: counter(plan, decimal-leading-zero); position: absolute; left: 0; top: 1px;
  font-family: var(--f-mono); font-size: 14px; letter-spacing: .08em;
  color: var(--hue, var(--acc));
}
.lnd-plan b{
  font-family: var(--f-disp); font-weight: 700; font-size: clamp(17px, 1.6vw, 20px);
  letter-spacing: -.02em; color: var(--ink);
}
.lnd-plan span{ color: var(--ink-2); }

/* Призыв к встрече - единственная панель с рамкой во весь блок. */
.lnd-meet{
  display: flex; flex-direction: column; gap: 18px;
  padding: clamp(22px, 3vw, 40px);
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--hue, var(--acc)) 45%, var(--line));
  background: var(--panel);
  scroll-margin-top: 90px;
}
.lnd-meet h2{ padding-top: 0; border-top: 0; }
.lnd-meet p{ max-width: 60ch; color: var(--ink-2); }
#kak{ scroll-margin-top: 90px; }

@media (prefers-reduced-motion: reduce){ .lnd-fig a{ transition: none; } }
/* Снимок планшета во всю ширину выходит выше экрана - держим его уже. */
.lnd-fig-tab{ max-width: 880px; }
/* У снимков с планшетов рамка своя - корпус устройства. Рамку сайта поверх
   неё снимаем: две рамки подряд читаются как ошибка вёрстки. Увеличение по
   щелчку остаётся, поэтому курсор-лупа на месте. */
.lnd-fig-tab a{ border: 0; background: transparent; }
.lnd-fig-tab a:hover{ border: 0; }
/* Рядом с высокой панелью поста текст едет вместе с ней, чтобы слева
   не оставалась пустая колонна. */
@media (min-width: 900px){
  .lnd-split .lnd-step-txt{ position: sticky; top: 100px; }
}
/* Карточки контактов из главной; там они по центру, здесь - по левому краю блока. */
.lnd-meet .contacts{ justify-content: flex-start; }
/* Одинаковая ширина: на телефоне карточки стоят столбиком, и разная длина
   адресов давала лесенку. */
.lnd-meet .contact{ flex: 1 1 230px; max-width: 320px; }