/* ══ asfp.art — услуги станков ═════════════════════════════════════════════
   Тёмная сцена. Товар здесь — металл, искры и цех: на светлом фоне кадры
   заказчика выцветают, а вырезанные станки теряют контур. Светлыми делаем
   две полосы — изделия и работы: там смотрят на фотографии, и белый фон
   работает как стена галереи.

   Цвета только из токенов. Светлые полосы переопределяют семантический
   слой целиком, а не по одному свойству: иначе унаследованный светлый текст
   становится невидимым — ровно то, на чём мы обожглись на прошлом сайте. */

.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.wrap--narrow {
  max-width: var(--container-narrow);
}

.eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--asp-teal);
}

.btn--sm {
  padding: 0.55rem 1.1rem;
  font-size: var(--fs-sm);
}

/* ── Шапка ────────────────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgb(14 20 36 / 88%);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.topbar__in {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 4rem;
}

.topbar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex: none;
}

.topbar__logo img {
  width: 7.5rem;
  height: auto;
}

.topbar__dept {
  padding-left: var(--space-3);
  border-left: 1px solid var(--line-strong);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  white-space: nowrap;
}

.nav {
  display: flex;
  gap: clamp(var(--space-3), 1.4vw, var(--space-5));
  margin-inline: auto;
}

.nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  padding-block: 0.3rem;
  border-bottom: 2px solid transparent;
}

.nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--asp-teal);
}

.topbar__act {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: none;
}

.topbar__tel {
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.topbar__tel:hover {
  color: var(--asp-teal);
}

/* ── Первый экран ─────────────────────────────────────────────────────────── */

.first {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Высота от ширины окна, но через clamp, а не aspect-ratio: с заданной
     min-height пропорция начинает задавать ещё и ширину, и на телефоне
     блок распирает страницу вбок. */
  min-height: clamp(30rem, calc(100vw / 2.37), 46rem);
  display: flex;
  align-items: center;
  padding-block: var(--space-8);
  background: var(--asp-navy-deep);
}

.first__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}

/* Затемнение — градиентом слева направо: текст лежит слева, искры справа.
   Сплошная заливка убила бы кадр целиком. */
.first::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgb(13 20 36 / 94%) 0%, rgb(13 20 36 / 82%) 42%, rgb(13 20 36 / 30%) 100%),
    radial-gradient(60rem 30rem at 12% 40%, var(--glow-blue), transparent 70%);
}

.first__in {
  display: grid;
  gap: var(--space-7);
  width: 100%;
}

.first__text h1 {
  margin-bottom: var(--space-4);
  max-width: 18ch;
}

.first__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Лента из шести плашек вместо абзаца-лида: плашки идут в строку и сами
   переносятся, поэтому первый экран по высоте почти не растёт. */
.first__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: 40rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.first__chips li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.45rem var(--space-3);
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}

.first__chip-icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--asp-teal);
}

.first__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.first__facts li {
  padding: var(--space-4);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
}

.first__facts b {
  display: block;
  font-size: var(--fs-lg);
  color: var(--asp-teal-light);
}

.first__facts span {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.45;
}

/* ── Полосы ───────────────────────────────────────────────────────────────── */

.band {
  padding-block: clamp(var(--space-7), 7vw, var(--space-9));
  border-top: 1px solid var(--line);
}

.band--dark {
  background: var(--asp-navy-deep);
}

/* Светлая полоса меняет весь семантический слой, а не отдельные свойства:
   вложенные компоненты берут цвета из этих же переменных и перекрашиваются
   сами. Забытая переменная — это белый текст на белом фоне. */
.band--light {
  --ink: var(--lt-ink);
  --ink-2: var(--lt-ink-2);
  --ink-muted: var(--lt-ink-muted);
  --line: var(--lt-line);
  --line-strong: rgb(15 26 46 / 24%);
  --glass-bg: #fff;
  --glass-line: var(--lt-line);

  background: var(--lt-bg);
  color: var(--lt-ink);
  border-top-color: transparent;
}

/* Две светлые полосы подряд: вторая белая, чтобы граница читалась. */
.band--light-2 {
  --glass-bg: var(--lt-bg);
  background: var(--lt-bg-2);
  border-top: 1px solid var(--lt-line);
}

.band--light .faq__item summary::marker {
  color: var(--asp-blue-deep);
}

.band--light .eyebrow {
  color: var(--asp-blue-deep);
}

.band h2 {
  max-width: 22ch;
}

.band .lead {
  margin-bottom: var(--space-7);
}

/* ── Изделия ──────────────────────────────────────────────────────────────── */

.izd__note {
  margin-top: var(--space-6);
  margin-bottom: 0;
  color: var(--lt-ink-2);
}

/* ── Работы: карусель кейсов ──────────────────────────────────────────────── */

/* Основа — лента на scroll-snap: без JavaScript она прокручивается сама и все
   восемь работ доступны. Эффект «фокуса» включает класс keysy--js. */
.keysy {
  --keys-w: min(36rem, 78vw);
  --keys-gap: var(--space-5);
}

.keysy__list {
  position: relative;
  display: flex;
  gap: var(--keys-gap);
  margin: 0;
  padding: var(--space-4) calc(50% - var(--keys-w) / 2) var(--space-5);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--lt-ink-muted) var(--lt-line);
}

.keysy__list:focus-visible {
  outline: 2px solid var(--asp-blue-deep);
  outline-offset: -2px;
}

.keysy__list--drag {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.keys {
  flex: 0 0 var(--keys-w);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scroll-snap-align: center;
  border: 1px solid var(--lt-line);
  border-radius: var(--radius-lg);
  background: var(--lt-bg-2);
  color: var(--lt-ink);
  box-shadow: 0 0.75rem 2rem -1.25rem rgb(19 26 45 / 35%);
}

.keys__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.keys__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}

.keys__who {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--asp-blue-deep);
}

.keys h3 {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--lt-ink);
}

.keys__body p:not(.keys__who) {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--lt-ink-2);
}

.keys__nums {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin: auto 0 0;
  padding: var(--space-4) 0 0;
  list-style: none;
  border-top: 1px solid var(--lt-line);
}

.keys__nums li {
  display: flex;
  flex-direction: column;
}

.keys__nums b {
  font-size: var(--fs-xl);
  line-height: 1.1;
  color: var(--lt-ink);
}

.keys__nums span {
  font-size: var(--fs-sm);
  color: var(--lt-ink-2);
}

/* Фокус: дальше от центра — меньше, бледнее и мягче. --p ставит keysy.js.
   Размывается только снимок, текст остаётся резким. Кадры за пределами экрана
   размывать нечем и незачем, так что нагрузка небольшая даже на телефоне. */
.keysy--js .keys {
  cursor: pointer;
  opacity: calc(1 - var(--p, 0) * 0.45);
  transform: scale(calc(1 - var(--p, 0) * 0.09));
  transition: opacity var(--dur) var(--ease-out-quart), transform var(--dur) var(--ease-out-quart);
  will-change: transform, opacity;
}

.keysy--js .keys--on {
  cursor: default;
}

.keysy--js .keys__img {
  filter: blur(calc(var(--p, 0) * 2.5px)) saturate(calc(1 - var(--p, 0) * 0.5));
}

.keysy__bar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-4);
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-3) clamp(1.25rem, 4vw, 2.5rem) 0;
}

.keysy__count {
  margin: 0;
  font-variant-numeric: tabular-nums;
  color: var(--lt-ink-2);
}

.keysy__count b {
  color: var(--lt-ink);
}

.keysy__btns {
  display: flex;
  gap: var(--space-2);
}

.keysy__btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--lt-ink-muted);
  border-radius: var(--radius-pill);
  background: var(--lt-bg-2);
  color: var(--lt-ink);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.keysy__btn:hover:not(:disabled) {
  background: var(--lt-ink);
  color: var(--lt-bg-2);
}

.keysy__btn:focus-visible {
  outline: 2px solid var(--asp-blue-deep);
  outline-offset: 2px;
}

.keysy__btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.keysy__track {
  grid-column: 1 / -1;
  height: 2px;
  overflow: hidden;
  background: var(--lt-line);
}

.keysy__track i {
  display: block;
  height: 100%;
  background: var(--asp-blue-deep);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out-quart);
}

/* Без анимации: состояние «фокуса» остаётся, но не движется само. */
@media (prefers-reduced-motion: reduce) {
  .keysy--js .keys,
  .keysy__track i,
  .keysy__btn {
    transition: none;
  }

  .keysy--js .keys {
    will-change: auto;
  }
}

@media (max-width: 40rem) {
  .keys__body {
    padding: var(--space-4);
  }
}

/* ── Вопросы ──────────────────────────────────────────────────────────────── */

.faq {
  display: grid;
  gap: var(--space-3);
}

.faq__item {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass-bg);
}

.faq__item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: 1.35;
}

.faq__item summary::marker {
  color: var(--asp-teal);
}

.faq__item p {
  margin: var(--space-3) 0 0;
  color: var(--ink-2);
}

/* ── Заявка ───────────────────────────────────────────────────────────────── */

/* Общая карточка вокруг обеих колонок — как на вывесках и аренде: она
   собирает заявку в один предмет, а не в две колонки на полосе. */
.zayavka {
  display: grid;
  gap: var(--space-7);
  align-items: start;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  scroll-margin-top: 6rem;
}

.zayavka__pitch,
.zayavka__form {
  min-width: 0;
}

.zayavka__form {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

/* Четыре проверяемых факта: год, площадка, документы, реквизиты. */
.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(45%, 11rem), 1fr));
  gap: var(--space-3);
  margin: var(--space-6) 0;
  padding: 0;
  list-style: none;
}

.proof li {
  display: grid;
  gap: 0.15rem;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass-bg);
}

.proof__icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-bottom: 0.35rem;
  color: var(--asp-teal);
}

.proof b {
  display: block;
  font-size: var(--fs-sm);
}

.proof span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-2);
  line-height: 1.45;
}

/* Прямые контакты: пунктир, потому что это приписка к фактам, а не карточка. */
.zayavka__direct {
  padding: var(--space-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}

.zayavka__direct p {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}

.zayavka__direct ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zayavka__direct a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px; /* по этим ссылкам звонят с телефона */
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out-quart);
}

.zayavka__direct a:hover {
  color: var(--asp-teal-light);
}

.zayavka__ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--glass-bg);
  color: var(--asp-teal);
}

.zayavka__ico svg {
  width: 1rem;
  height: 1rem;
}

/* ── Подборщик ────────────────────────────────────────────────────────────── */

.pick {
  display: grid;
  gap: var(--space-5);
}

.pick__h {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-heading);
  color: var(--ink);
}

.pick__q {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.pick__q legend {
  padding: 0;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.pick__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Кнопки вместо списков: выбор одним касанием, все варианты на виду. */
.pick__opts label {
  position: relative;
  display: inline-flex;
}

/* display выше перебивает атрибут hidden — возвращаем скрытие. */
.pick__opts label[hidden] { display: none; }

.pick__opts input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.pick__opts span {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  transition: border-color var(--dur-fast) var(--ease-out-quart),
    background var(--dur-fast) var(--ease-out-quart),
    color var(--dur-fast) var(--ease-out-quart);
}

.pick__opts label:hover span {
  border-color: var(--line-strong);
  color: var(--ink);
}

.pick__opts input:checked + span {
  border-color: var(--asp-teal);
  background: color-mix(in srgb, var(--asp-teal) 14%, transparent);
  color: var(--ink);
}

/* Сам кружок спрятан — клавиатурный фокус должен быть виден на подписи. */
.pick__opts input:focus-visible + span {
  outline: 2px solid var(--asp-teal-light);
  outline-offset: 2px;
}

.pick__out {
  display: grid;
  gap: 0.3rem;
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--asp-teal) 40%, transparent);
  background: color-mix(in srgb, var(--asp-teal) 8%, transparent);
  font-size: var(--fs-sm);
}

/* display: grid перебивает атрибут hidden — возвращаем его силу. */
.pick__out[hidden] { display: none; }

.pick__out b { color: var(--asp-teal-light); }
.pick__out span { color: var(--ink); line-height: var(--lh-body); }

.pick__hint {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

@media (prefers-reduced-motion: reduce) {
  .pick__opts span,
  .zayavka__direct a { transition: none; }
}

.b24-mount {
  padding: var(--space-6);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
}

/* ── Форма Битрикса на тёмной полосе ───────────────────────────────────────
   Форма приходит со своим светлым оформлением, рассчитанным на белую страницу:
   на тёмной полосе она встаёт белым прямоугольником с невидимыми подписями.
   Перекрашиваем через `!important`: Битрикс раздаёт стили инлайном и своей
   таблицей, загруженной после нашей. Правила держим узкими, по классам самой
   формы. Поля формы (в том числе e-mail) настраиваются в кабинете Битрикс24,
   а не здесь: скрытое обязательное поле сломало бы отправку. Единственное
   исключение — необязательный e-mail, см. правило ниже. */
.b24-mount {
  color-scheme: dark;
}

/* Карточку уже нарисовала страница — своя подложка форме не нужна. */
.b24-mount .b24-form,
.b24-mount .b24-form-wrapper,
.b24-mount .b24-form-content,
.b24-mount .b24-form-padding-side,
.b24-mount .b24-form-header-padding {
  background: transparent !important;
  box-shadow: none !important;
}

/* E-mail в форме необязательный (required: false в настройках формы), а
   заказчица просит оставить Имя, Телефон и согласие. Прячем у себя, а не
   удаляем в Битрикс24: так поле можно вернуть без правки кабинета.
   Если e-mail станет обязательным — это правило нужно снять, иначе заявку
   не удастся отправить. */
.b24-mount .b24-form-field-email {
  display: none !important;
}

.b24-mount .b24-form-control {
  /* Именно `background-color`: сокращённая запись сбросила бы и стрелку
     раскрывающихся списков, которую Битрикс рисует фоновой картинкой. */
  background-color: rgb(255 255 255 / 6%) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink);
}

.b24-mount .b24-form-control::placeholder {
  color: var(--ink-muted) !important;
}

/* Автозаполнение: браузер красит такое поле своим светлым стилем. Цвет
   перебиваем через text-fill-color, заливку — внутренней тенью. */
.b24-mount .b24-form-control:-webkit-autofill,
.b24-mount .b24-form-control:-webkit-autofill:hover,
.b24-mount .b24-form-control:-webkit-autofill:focus,
.b24-mount .b24-form-control:autofill {
  -webkit-text-fill-color: var(--ink) !important;
  box-shadow: 0 0 0 1000px color-mix(in srgb, var(--bg) 90%, #fff) inset !important;
  transition: background-color 9999s ease-out 0s;
}

.b24-mount .b24-form-control:focus {
  border-color: var(--asp-teal) !important;
  outline: none !important;
}

/* Подписи — только по своим классам. Цвет обязательной звёздочки не трогаем:
   он несёт смысл, а не оформление. */
.b24-mount .b24-form-control-label,
.b24-mount .b24-form-control-desc,
.b24-mount .b24-form-control-comment,
.b24-mount .b24-form-field-agreement {
  color: var(--ink-2) !important;
}

.b24-mount .b24-form-field-agreement a {
  color: var(--asp-teal-light) !important;
}

.b24-mount input[type='checkbox'],
.b24-mount input[type='radio'] {
  accent-color: var(--asp-teal);
}

.b24-mount button {
  background: var(--asp-blue-deep) !important;
  border-color: var(--asp-blue-deep) !important;
  color: #fff !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
}

.b24-mount button:hover {
  background: var(--asp-navy-calm) !important;
  border-color: var(--asp-navy-calm) !important;
}

.b24-mount,
.b24-mount input,
.b24-mount textarea,
.b24-mount select,
.b24-mount button {
  font-family: var(--font) !important;
}

/* Раскрытый список рисует браузер поверх страницы: прозрачный фон там
   превращается в белый текст на белом. Ставим явно. */
.b24-mount select option {
  background: var(--bg-deep);
  color: var(--ink);
}

/* ── Подвал ───────────────────────────────────────────────────────────────── */

.foot {
  padding-block: var(--space-8) var(--space-6);
  background: var(--asp-navy-deep);
  border-top: 1px solid var(--line);
}

.foot__in {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-6);
}

.foot__logo {
  width: 8rem;
  height: auto;
  margin-bottom: var(--space-4);
}

.foot__name {
  margin-bottom: var(--space-2);
  font-weight: 600;
}

.foot__small {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: 1.5;
}

.foot__head {
  margin-bottom: var(--space-3);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.foot__list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

.foot__list a {
  text-decoration: none;
  color: var(--ink-2);
}

.foot__list a:hover {
  color: var(--asp-teal);
}

.foot__bottom {
  margin: var(--space-7) 0 0;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  text-align: center;
}

/* ── Раскладка пошире ─────────────────────────────────────────────────────── */

@media (min-width: 60rem) {
  .first__in {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: var(--space-8);
  }

  .first__facts {
    grid-template-columns: 1fr 1fr;
  }

  .zayavka {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

/* ── Телефон ──────────────────────────────────────────────────────────────── */

/* На 1024 логотип, меню, телефон и кнопка вместе не помещались — кнопка
   вылезала за правый край на 23 px. Меню в этой ширине полезнее кнопки:
   заявка есть в каждом разделе, а навигация только здесь. */
@media (max-width: 72rem) {
  .topbar__act .btn {
    display: none;
  }
}

@media (max-width: 60rem) {
  .topbar__tel {
    font-size: var(--fs-sm);
  }

  /* Без JavaScript меню остаётся второй строкой под логотипом. */
  .topbar__in {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .topbar__act {
    margin-left: auto;
  }

  .nav {
    order: 3;
    flex: 1 0 100%;
    flex-wrap: wrap;
    margin-inline: 0;
    padding-bottom: var(--space-3);
  }

  /* С JavaScript — бургер и выпадающая панель; закрытая панель вне Tab-порядка. */
  .nav.nav--js {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: var(--space-2) var(--space-4) var(--space-4);
    background: var(--asp-navy-deep);
    border-bottom: 1px solid var(--line-strong);
  }

  .nav.nav--js.nav--open {
    display: flex;
  }

  .nav--js a {
    padding-block: var(--space-3);
    font-size: var(--fs-base);
    border-bottom: 1px solid var(--line);
  }

  .nav--js a:last-child {
    border-bottom-color: transparent;
  }

  .topbar__act .menu-btn {
    display: inline-flex;
  }
}

.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--asp-teal);
}

/* Кнопку создаёт menu.js; на широком экране она не нужна. */
.menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.menu-btn__bars,
.menu-btn__bars::before,
.menu-btn__bars::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: currentcolor;
  border-radius: 1px;
}

.menu-btn__bars {
  position: relative;
}

.menu-btn__bars::before,
.menu-btn__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-btn__bars::before {
  top: -0.4rem;
}

.menu-btn__bars::after {
  top: 0.4rem;
}

.menu-btn[aria-expanded="true"] .menu-btn__bars {
  background: transparent;
}

.menu-btn[aria-expanded="true"] .menu-btn__bars::before {
  top: 0;
  transform: rotate(45deg);
}

.menu-btn[aria-expanded="true"] .menu-btn__bars::after {
  top: 0;
  transform: rotate(-45deg);
}

@media (max-width: 40rem) {
  .topbar__dept {
    display: none;
  }

  .topbar__tel {
    font-size: var(--fs-base);
  }

  .first {
    min-height: auto;
    padding-block: var(--space-7);
  }
}

/* ── Внутренние страницы ──────────────────────────────────────────────────── */

.page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(var(--space-7), 6vw, var(--space-9));
  background: var(--asp-navy-deep);
}

.page-head__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-head::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Затемнение только слева, под текстом: правая часть кадра остаётся
     открытой. Белый текст читается по левому краю, где градиент плотнее. */
  background: linear-gradient(100deg, rgb(13 20 36 / 92%) 0%, rgb(13 20 36 / 84%) 42%, rgb(13 20 36 / 46%) 68%, rgb(13 20 36 / 10%) 92%);
}

/* На телефоне текст занимает всю ширину, поэтому затемнение идёт сверху вниз. */
@media (max-width: 47.99rem) {
  .page-head::after {
    background: linear-gradient(180deg, rgb(13 20 36 / 82%) 0%, rgb(13 20 36 / 70%) 60%, rgb(13 20 36 / 50%) 100%);
  }
}

/* Страницы без своего кадра: каталог услуг и «О компании». Фон тот же
   тёмный, но без картинки — рисовать сюда случайный станок нечестно. */
.page-head--plain::after {
  background: radial-gradient(50rem 26rem at 12% 20%, var(--glow-blue), transparent 72%);
}

.page-head__in h1 {
  max-width: 20ch;
}

/* Мягкая тень держит белый текст на светлых местах кадра (жёлтый лист, искры). */
.page-head:not(.page-head--plain) :is(h1, .lead) {
  text-shadow: 0 1px 14px rgb(13 20 36 / 70%);
}

.page-head__in .lead {
  margin-bottom: var(--space-6);
}

/* «О компании»: здание фоном во всю ширину. Кадр уже обрезан под шапку
   (небо срезано), здание в нижней части. Текст и плашки лежат слева. */
.page-head--about .page-head__bg {
  object-position: 50% 80%;
}

.page-head--about::after {
  background: linear-gradient(100deg, rgb(13 20 36 / 86%) 0%, rgb(13 20 36 / 70%) 40%, rgb(13 20 36 / 28%) 68%, rgb(13 20 36 / 4%) 92%);
}

.page-head__in--about h1 {
  max-width: none;
  font-size: var(--fs-h2);
}

.about-head__text {
  max-width: 44rem;
}

.about-head__text .lead {
  max-width: 40rem;
}

@media (max-width: 47.99rem) {
  .page-head--about .page-head__bg {
    object-position: 62% 100%;
  }

  .page-head--about::after {
    background: linear-gradient(180deg, rgb(13 20 36 / 84%) 0%, rgb(13 20 36 / 66%) 55%, rgb(13 20 36 / 42%) 100%);
  }
}

/* Четыре довода под лидом: плитки со значком, заголовком и строкой пояснения. */
.preim {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-3);
  max-width: 62rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.preim li {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  background: rgb(14 20 36 / 62%);
  backdrop-filter: blur(var(--glass-blur));
}

.preim__icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: var(--space-1);
  color: var(--asp-teal);
}

.preim b {
  font-size: var(--fs-base);
  line-height: 1.3;
}

.preim span {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink-2);
}

.crumbs {
  margin-bottom: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

.crumbs a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}

.crumbs a:hover {
  color: var(--asp-teal);
}

/* Сводка параметров: цена, толщина, габариты — то, ради чего человек
   и открыл страницу услуги. Стоит до всех текстов. */
.svodka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  max-width: 46rem;
}

.svodka li {
  padding: var(--space-4);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
}

.svodka b {
  display: block;
  font-size: var(--fs-lg);
  color: var(--asp-teal-light);
}

.svodka span {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

/* ── Карточки услуг ───────────────────────────────────────────────────────── */

.usl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.usl__card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(180deg, rgb(41 121 255 / 10%), rgb(255 255 255 / 3%));
  transition: border-color var(--dur) var(--ease-out-quart);
}

.usl__card:hover {
  border-color: var(--asp-teal-deep);
}

/* Ссылкой сделана вся карточка, а не одно слово «Подробнее»: попасть
   в маленькую ссылку пальцем на телефоне трудно. */
.usl__card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.usl__card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.usl__card h3 {
  margin: var(--space-4) var(--space-5) var(--space-2);
  font-size: var(--fs-lg);
}

.usl__card p {
  margin: 0 var(--space-5);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.5;
}

.usl__ot {
  margin-top: auto !important;
  padding: var(--space-4) 0 var(--space-5);
  font-weight: 700;
  color: var(--asp-teal) !important;
}

.band--light .usl__card {
  background: var(--lt-bg-2);
  border-color: var(--lt-line);
}

.band--light .usl__ot {
  color: var(--asp-blue-deep) !important;
}

/* ── Списки и колонки на страницах услуг ──────────────────────────────────── */

.dvoe {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

.spisok {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

/* Первая строка списка по верхнему краю фотографии: гасим полуинтерлиньяж. */
.dvoe > div:first-child > .spisok {
  margin-top: -0.3em;
}

.spisok li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--ink-2);
}

.spisok li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--asp-teal);
}

.band--light .spisok li::before {
  background: var(--asp-blue-deep);
}

.proc {
  margin: 0;
}

.proc img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.proc figcaption {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

.pochemu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pochemu li {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
}

.pochemu h3 {
  margin-bottom: var(--space-2);
  font-size: var(--fs-lg);
}

.pochemu p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.55;
}

/* Карточки с визуальной вставкой сверху: тёмный вариант образца feature.
   Вставка рисуется CSS: сетка-чертёж, свечение и крупный номер. */
.pochemu--cards li {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: var(--asp-navy-soft);
}

.pochemu--cards h3,
.pochemu--cards p {
  padding-inline: var(--space-5);
}

.pochemu--cards h3 {
  margin-top: var(--space-5);
}

.pochemu--cards p {
  padding-bottom: var(--space-5);
}

.pochemu__vis {
  position: relative;
  display: grid;
  place-items: center;
  height: 8.5rem;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 1.5rem 1.5rem,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 1.5rem 1.5rem,
    radial-gradient(14rem 8rem at 30% 20%, var(--glow-blue), transparent 70%),
    var(--asp-navy-deep);
}

.pochemu__vis span {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--asp-teal);
}

.pochemu--cards li:nth-child(2n) .pochemu__vis {
  background-position: 0 0, 0 0, 0 0, 0 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    radial-gradient(14rem 8rem at 70% 80%, var(--glow-teal), transparent 70%);
}

.pochemu--cards li:nth-child(3n) .pochemu__vis {
  background-size: 1rem 1rem, 1rem 1rem, auto, auto;
}

/* Те же карточки на светлой полосе: белая плитка, вставка — светлый чертёж
   с цифрой синим. Каждый слой берёт цвет из переменных полосы, тёмных
   значений здесь нет. */
.band--light .pochemu--cards li {
  background: var(--lt-bg-2);
  border-color: var(--line);
}

.band--light .pochemu__vis {
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 1.5rem 1.5rem,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 1.5rem 1.5rem,
    radial-gradient(14rem 8rem at 30% 20%, rgb(41 121 255 / 14%), transparent 70%),
    var(--lt-bg);
}

.band--light .pochemu--cards li:nth-child(2n) .pochemu__vis {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    radial-gradient(14rem 8rem at 70% 80%, rgb(0 191 165 / 16%), transparent 70%);
}

.band--light .pochemu__vis span {
  color: var(--asp-blue-deep);
}

.gde {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gde li {
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--asp-teal-deep);
}

.gde__icon {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: var(--space-3);
  color: var(--asp-teal);
}

.gde b {
  display: block;
}

.gde span {
  display: block;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

/* ── Таблицы цен ──────────────────────────────────────────────────────────── */

.price {
  margin: 0 0 var(--space-6);
}

.price__cap {
  margin-bottom: var(--space-3);
  font-weight: 700;
  font-size: var(--fs-lg);
}

/* На телефоне таблица из пяти колонок не помещается. Прокрутка вбок
   у самой таблицы, а не у страницы: страницу вбок двигать нельзя. */
.price__scroll {
  overflow-x: auto;
  border: 1px solid var(--lt-line);
  border-radius: var(--radius);
  background: var(--lt-bg-2);
}

.price table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.price th,
.price td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--lt-line);
}

.price thead th {
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lt-ink-muted);
  background: var(--lt-bg);
}

.price tbody th {
  font-weight: 600;
}

.price tbody tr:last-child th,
.price tbody tr:last-child td {
  border-bottom: 0;
}

/* ── Шаги: срок ───────────────────────────────────────────────────────────── */

.shagi__srok {
  margin-top: var(--space-3) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--asp-teal) !important;
}

@media (min-width: 60rem) {
  .dvoe {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

/* ── Юридические документы ────────────────────────────────────────────────── */

.doc h2 {
  max-width: none;
  margin: var(--space-7) 0 var(--space-4);
  font-size: var(--fs-h3);
}

.doc p,
.doc li {
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.doc p {
  margin: 0 0 var(--space-4);
}

.doc ul {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}

.doc strong {
  color: var(--ink);
}

.doc__center {
  text-align: center;
}

.doc__right {
  text-align: right;
}

.doc__table {
  margin: 0 0 var(--space-5);
  overflow-x: auto;
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.doc th,
.doc td {
  padding: var(--space-3);
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  color: var(--ink-2);
}

.doc th {
  color: var(--ink);
}

/* ── Производство под ключ: колода плашек и стопка фото ───────────────────── */

/* Основа — сетка из карточек: без JavaScript все девять изделий с фото на месте.
   izdk.js прячет её и строит колоду (класс izdk--js). */
.izdk__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.izdk__list[hidden] {
  display: none;
}

.izdk__card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--asp-navy-soft);
}

.izdk__card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.izdk__card h3 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4);
  font-size: var(--fs-lg);
}

.izdk__ico {
  flex: none;
  color: var(--asp-teal);
}

.izdk__note {
  color: var(--ink-2);
}

@media (min-width: 64rem) {
  .izdk__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Колода: слева синее поле с плашками, справа тёмное со стопкой фотографий. */
.izdk__ui {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--asp-navy);
}

.izdk__side {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-4) 0 var(--space-4) var(--space-4);
  background: var(--asp-navy-calm);
  color: #fff;
}

/* Телефон: плашки — горизонтальная лента сверху, фото под ней. */
.izdk__deck {
  position: relative;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4) var(--space-3) 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.izdk__tab {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgb(255 255 255 / 40%);
  border-radius: var(--radius-pill);
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease-out-quart),
    color var(--dur) var(--ease-out-quart);
}

.izdk__tab:hover {
  background: rgb(255 255 255 / 14%);
}

.izdk__tab[aria-selected='true'] {
  background: #fff;
  border-color: #fff;
  color: var(--asp-navy);
}

.izdk__tab:focus-visible {
  outline: 2px solid var(--asp-teal-light);
  outline-offset: 3px;
}

.izdk__tab-ico {
  flex: none;
  color: #fff;
  width: 1.25rem;
  height: 1.25rem;
}

.izdk__tab[aria-selected='true'] .izdk__tab-ico {
  color: var(--asp-blue-deep);
}

.izdk__pause {
  align-self: flex-start;
  margin: var(--space-1) 0 0;
  padding: var(--space-1) 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: var(--fs-xs);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.izdk__pause[hidden] {
  display: none;
}

.izdk__stage {
  position: relative;
  min-height: 27rem;
  overflow: hidden;
  background: var(--asp-navy-soft);
}

.izdk__photo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(17rem, 70%);
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  border: 6px solid var(--asp-navy-deep);
  border-radius: var(--radius-lg);
  background: var(--asp-navy-deep);
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
  filter: grayscale(1);
  pointer-events: none;
  transition:
    transform var(--dur-slow) var(--ease-out-expo),
    opacity var(--dur-slow) var(--ease-out-quart),
    filter var(--dur-slow) var(--ease-out-quart);
}

.izdk__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.izdk__photo[data-pos='active'] {
  z-index: 3;
  opacity: 1;
  filter: none;
  transform: translate(-50%, -50%) scale(1);
}

.izdk__photo[data-pos='prev'],
.izdk__photo[data-pos='next'] {
  z-index: 2;
  opacity: 0.55;
  filter: grayscale(1) blur(2px);
  pointer-events: auto;
  cursor: pointer;
}

.izdk__photo[data-pos='prev'] {
  transform: translate(-96%, -50%) scale(0.82) rotate(-3deg);
}

.izdk__photo[data-pos='next'] {
  transform: translate(-4%, -50%) scale(0.82) rotate(3deg);
}

.izdk__cap {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4) var(--space-4);
  background: linear-gradient(to top, rgb(14 20 36 / 94%) 20%, rgb(14 20 36 / 0%));
  color: #fff;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out-quart);
}

.izdk__photo[data-pos='active'] .izdk__cap {
  opacity: 1;
}

.izdk__badge {
  padding: 0.15rem var(--space-3);
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: var(--radius-pill);
  background: rgb(14 20 36 / 85%);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.izdk__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.2;
}

/* Компьютер: колода вертикальная. Каждая плашка стоит по центру и сдвигается
   на --d рядов от активной; чем дальше (--a), тем бледнее. */
@media (min-width: 56rem) {
  .izdk__ui {
    grid-template-columns: 1fr 1fr;
    min-height: 32rem;
  }

  .izdk__side {
    justify-content: center;
    padding: var(--space-5) 0 var(--space-5) var(--space-6);
  }

  .izdk__deck {
    display: block;
    flex: 1;
    min-height: 27rem;
    padding: 0;
    overflow: visible;
  }

  .izdk__tab {
    position: absolute;
    top: 50%;
    left: 0;
    max-width: 100%;
    opacity: calc(1 - var(--a, 0) * 0.28);
    transform: translateY(calc(var(--d, 0) * 4rem - 50%));
    transition:
      transform var(--dur-slow) var(--ease-out-expo),
      opacity var(--dur-slow) var(--ease-out-quart),
      background-color var(--dur) var(--ease-out-quart),
      color var(--dur) var(--ease-out-quart);
  }

  .izdk__tab[data-far='1'] {
    pointer-events: none;
  }

  .izdk__pause {
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .izdk__photo,
  .izdk__cap,
  .izdk__tab {
    transition: none;
  }
}

/* ── Как проходит заказ: аккордеон-галерея ────────────────────────────────── */

.etapy-band__head {
  margin-bottom: var(--space-7);
  text-align: center;
}

.etapy-band__head h2 {
  max-width: 30ch;
  margin-inline: auto;
}

/* Основа — обычный список карточек: без JavaScript виден каждый этап с фото,
   названием, текстом и сроком. etapy.js включает аккордеон (класс etapy--js). */
.etapy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.etapy__item {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--asp-navy-soft);
}

.etapy__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.etapy__h {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) var(--space-4) 0;
  font-size: var(--fs-lg);
}

.etapy__num {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgb(255 255 255 / 40%);
  border-radius: 50%;
  background: rgb(14 20 36 / 70%);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.etapy__body {
  padding: var(--space-2) var(--space-4) var(--space-5);
}

.etapy__body p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

/* Аккордеон. Телефон: вертикальный, раскрывается по высоте. */
.etapy--js {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.etapy--js .etapy__item {
  height: 4.5rem;
  justify-content: flex-end;
  cursor: pointer;
  transition: height var(--dur-slow) var(--ease-out-expo);
}

.etapy--js .etapy__item.is-open {
  height: 27rem;
  cursor: default;
}

.etapy--js .etapy__item img {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: 100%;
  aspect-ratio: auto;
}

/* Затемнение под текстом: белый на фото без него не читается. */
.etapy--js .etapy__item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgb(14 20 36 / 94%) 15%, rgb(14 20 36 / 45%) 70%, rgb(14 20 36 / 35%));
}

.etapy--js .etapy__h,
.etapy--js .etapy__body {
  position: relative;
  z-index: 2;
  color: #fff;
}

.etapy--js .etapy__h {
  padding: var(--space-3) var(--space-4);
}

.etapy--js .etapy__body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition:
    max-height var(--dur-slow) var(--ease-out-expo),
    opacity var(--dur) var(--ease-out-quart),
    visibility 0s var(--dur-slow);
}

.etapy--js .is-open .etapy__body {
  max-height: 14rem;
  padding-bottom: var(--space-5);
  visibility: visible;
  opacity: 1;
  transition:
    max-height var(--dur-slow) var(--ease-out-expo),
    opacity var(--dur) var(--ease-out-quart) 0.15s,
    visibility 0s;
}

.etapy--js .etapy__body p {
  color: #fff;
  font-size: var(--fs-base);
}

.etapy--js .etapy__body .shagi__srok {
  color: var(--asp-teal-light) !important;
  font-size: var(--fs-xs) !important;
}

.etapy__btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.etapy__btn:focus-visible {
  outline: 2px solid var(--asp-teal-light);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.etapy--js .is-open .etapy__num {
  background: #fff;
  border-color: #fff;
  color: var(--asp-navy);
}

/* Компьютер: горизонтальная полоса. Раскрытая панель шире соседних в шесть раз. */
@media (min-width: 48rem) {
  .etapy--js {
    flex-direction: row;
    height: 30rem;
  }

  .etapy--js .etapy__item,
  .etapy--js .etapy__item.is-open {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    transition: flex-grow var(--dur-slow) var(--ease-out-expo);
  }

  .etapy--js .etapy__item.is-open {
    flex-grow: 6;
  }

  .etapy--js .etapy__h {
    padding: var(--space-4);
  }

  /* Свёрнутая панель: номер внизу, название вертикально над ним. */
  .etapy--js .etapy__btn {
    flex-direction: column-reverse;
    justify-content: flex-start;
    width: auto;
    gap: var(--space-3);
  }

  .etapy--js .etapy__name {
    font-size: var(--fs-base);
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }

  .etapy--js .is-open .etapy__btn {
    flex-direction: row;
    width: 100%;
    white-space: nowrap;
  }

  .etapy--js .is-open .etapy__name {
    font-size: var(--fs-xl);
    writing-mode: horizontal-tb;
    transform: none;
  }

  .etapy--js .etapy__body {
    width: clamp(20rem, 40vw - 4rem, 32rem);
    padding-inline: var(--space-4);
  }
}

.etapy--js .etapy__item:has(.etapy__btn:focus-visible) {
  outline: 2px solid var(--asp-teal-light);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .etapy--js .etapy__item,
  .etapy--js .etapy__body {
    transition: none !important;
  }
}

/* ── Соседние сайты компании ──────────────────────────────────────────────── */

/* Блок стоит на светлой полосе: цвета — только из её переменных. Карточка
   целиком ссылка, поэтому цвет и подчёркивание наследуются, а не берутся
   у `a` по умолчанию. */
.sosedi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sosedi__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--lt-bg-2);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease-out-quart), transform var(--dur) var(--ease-out-quart);
}

.sosedi__card:hover {
  border-color: var(--asp-blue-deep);
  transform: translateY(-2px);
}

.sosedi__card:focus-visible {
  outline: 2px solid var(--asp-blue-deep);
  outline-offset: 3px;
}

.sosedi__card img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.sosedi__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-1);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.sosedi__arr {
  color: var(--asp-blue-deep);
  transition: transform var(--dur) var(--ease-out-quart);
}

.sosedi__card:hover .sosedi__arr {
  transform: translateX(4px);
}

.sosedi__text {
  padding: 0 var(--space-4);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-2);
}

.sosedi__site {
  margin-top: auto;
  padding: var(--space-3) var(--space-4) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--asp-blue-deep);
}

@media (prefers-reduced-motion: reduce) {
  .sosedi__card,
  .sosedi__arr { transition: none; }
  .sosedi__card:hover { transform: none; }
}

/* На телефоне длинное слово «металлообработки» в 40-пиксельном заголовке шире
   экрана и срезается краем шапки. Заголовок шапки там чуть мельче. */
@media (max-width: 30rem) {
  .page-head__in h1 {
    font-size: 2.15rem;
    overflow-wrap: break-word;
  }
}

/* ── Появление плашек при прокрутке (assets/js/rv.js) ─────────────────────────
   Начальное состояние задаёт сам скрипт, добавляя класс rv. Без скрипта
   и при prefers-reduced-motion элементы остаются обычными и видимыми. */
@media (prefers-reduced-motion: no-preference) {
  .rv {
    opacity: 0;
    transform: translateY(var(--space-3));
  }

  .rv.rv--in {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--dur-slow) var(--ease-out-quart) var(--rv-d, 0ms),
      transform var(--dur-slow) var(--ease-out-quart) var(--rv-d, 0ms);
  }
}

/* ── Страница 404 ─────────────────────────────────────────────────────────── */

.err__links {
  margin: var(--space-5) 0;
  padding-left: var(--space-5);
}

.err__links li {
  margin-bottom: var(--space-2);
}