/* Стили страницы «Про нас» (information_id=4).
   С 17.09.2026 лежат ЗДЕСЬ, а не инлайном в описании страницы: модуль микроразметки
   кладёт описание целиком в свои данные для Google, из-за чего 34 КБ стилей уезжали
   в HTML дважды на каждой загрузке. Теперь файл кэшируется браузером.
   Источник правок: docs/deploy_scripts/about_2026-09-16/about.css (оттуда копируется).
   Подключается в information.tpl по условию information_id == 4. */
/* Про нас (information_id=4), редакция 16.09.2026 (вторая, плотная).
   Стили живут внутри описания страницы в БД (инлайн <style>), а не в style.css:
   вся вёрстка этой страницы и так лежит в oc_information_description, поэтому
   выкатка на прод = один UPDATE, без деплоя файлов и без правки твинов.

   ВСЁ скоуплено под body.information-information-4. Ни одного глобального селектора:
   без скоупа стиль утечёт на весь сайт.

   Что важно знать про этот файл:
   1. H1 рисует шаблон information.tpl НАД описанием, текст берётся из meta_h1.
      Мы его вклеиваем в тёмный герой: h1 получает тот же фон, скругление только
      сверху, margin-bottom:0, а .ab-hero скруглён только снизу. Шва не видно.
      В самом шаблоне ниже по коду стоит незаскоупленный <style> h1{...} со
      специфичностью 0,0,1, наши правила 0,1,1 и выигрывают в любом порядке.
   2. Контент лежит в .container > .row > .col-lg-12 (полезная ширина 1296 px на 1440).
      Своего .container нет и не должно быть, во всю ширину экрана выйти нельзя:
      отрицательные отступы дают горизонтальный скролл на телефоне.
   3. Жёлтый #FFD800 на белом даёт контраст ~1.7:1, поэтому жёлтым НЕ пишем текст на
      светлом. Жёлтый на светлых секциях = плашка (тёмный текст на жёлтом) или линия.
      Жёлтый текст разрешён только на почти-чёрном #040810, там контраст 15:1.
   4. Шрифт один, Nunito 200-900, его уже грузит тема. Своих шрифтов не подключаем,
      вид вытягиваем весами (300 на крупных лидах, 800 на заголовках), разрядкой
      капса и волосяными линейками, а не второй гарнитурой.
   5. Под нашим контентом движок выводит карусель живых отзывов (ex_reviews_carousel).
      Поэтому страница заканчивается тёмным блоком реквизитов: он бэкендит герой и даёт
      белой карусели чистый старт. Стили карусели не трогаем. */

.information-information-4 {
  --ab-ink: #040810;
  --ab-ink-2: #0B111C;
  --ab-yellow: #FFD800;
  --ab-yellow-d: #F0C800;
  --ab-line: #E5E7EB;
  --ab-line-dk: rgba(255, 255, 255, .13);
  --ab-mute: #6B7280;
  --ab-mute-dk: rgba(255, 255, 255, .62);
  --ab-text: #374151;
  --ab-soft: #F3F4F6;
  --ab-r: 22px;
  --ab-r-sm: 16px;
  --ab-sec: clamp(26px, 2.7vw, 46px);   /* владелец 17.09: воздух между блоками вдвое меньше */
  --ab-pad: clamp(22px, 3.1vw, 52px);
}

/* ---------- H1 из шаблона: становится крышей тёмного героя ---------- */
.information-information-4 h1 {
  margin: 0;
  padding: clamp(26px, 3.2vw, 50px) var(--ab-pad) 0;
  background: var(--ab-ink);
  border-radius: var(--ab-r) var(--ab-r) 0 0;
  color: #fff;
  font-size: clamp(26px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.06;
}

/* ---------- сброс внутри своей обёртки ---------- */
.information-information-4 .ab,
.information-information-4 .ab *,
.information-information-4 .ab *::before,
.information-information-4 .ab *::after { box-sizing: border-box; }
.information-information-4 .ab { font-size: 16px; line-height: 1.6; color: var(--ab-text); }
.information-information-4 .ab p { margin: 0; }
.information-information-4 .ab ul,
.information-information-4 .ab ol { margin: 0; padding: 0; list-style: none; }
.information-information-4 .ab dl,
.information-information-4 .ab dt,
.information-information-4 .ab dd { margin: 0; }
.information-information-4 .ab figure { margin: 0; }
.information-information-4 .ab img { display: block; max-width: 100%; height: auto; }
.information-information-4 .ab h2,
.information-information-4 .ab h3 { margin: 0; font-weight: 700; }
.information-information-4 .ab a { text-decoration: none; }
.information-information-4 .ab svg { display: block; }

/* ---------- общая типографика секций ---------- */
.information-information-4 .ab-sec { margin: 0 0 var(--ab-sec); }
.information-information-4 .ab-head { margin: 0 0 clamp(22px, 2.6vw, 38px); }
.information-information-4 .ab-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 13px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ab-mute);
}
.information-information-4 .ab-eyebrow::before {
  content: "";
  flex: none;
  width: 26px;
  height: 2px;
  background: var(--ab-yellow);
}
.information-information-4 .ab-h2 {
  font-size: clamp(23px, 2.7vw, 39px);
  line-height: 1.13;
  color: var(--ab-ink);
}
.information-information-4 .ab-lead {
  margin-top: 14px;
  max-width: 64ch;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.68;
  color: var(--ab-text);
}
.information-information-4 .ab-dark .ab-eyebrow { color: var(--ab-mute-dk); }
.information-information-4 .ab-dark .ab-h2 { color: #fff; }
.information-information-4 .ab-dark .ab-lead { color: var(--ab-mute-dk); }

/* ---------- кнопки и текстовые ссылки ---------- */
.information-information-4 .ab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  padding: 0 30px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.information-information-4 .ab-btn svg { width: 18px; height: 18px; }
.information-information-4 .ab-btn--primary { background: var(--ab-yellow); border-color: var(--ab-yellow); color: var(--ab-ink); }
.information-information-4 .ab-btn--primary:hover,
.information-information-4 .ab-btn--primary:focus { background: var(--ab-yellow-d); border-color: var(--ab-yellow-d); color: var(--ab-ink); }
.information-information-4 .ab-btn--ghost { border-color: rgba(255, 255, 255, .34); color: #fff; }
.information-information-4 .ab-btn--ghost:hover,
.information-information-4 .ab-btn--ghost:focus { border-color: var(--ab-yellow); color: var(--ab-yellow); }
.information-information-4 .ab-btn--dark { background: var(--ab-ink); border-color: var(--ab-ink); color: #fff; }
.information-information-4 .ab-btn--dark:hover,
.information-information-4 .ab-btn--dark:focus { background: #fff; color: var(--ab-ink); }

.information-information-4 .ab-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ab-ink);
  border-bottom: 2px solid var(--ab-yellow);
  padding-bottom: 2px;
  transition: border-color .2s, color .2s;
}
.information-information-4 .ab-link svg { width: 16px; height: 16px; transition: transform .2s; }
.information-information-4 .ab-link:hover { color: var(--ab-ink); border-bottom-color: var(--ab-ink); }
.information-information-4 .ab-link:hover svg { transform: translateX(3px); }
.information-information-4 .ab-links { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 24px; }

/* иконки-стрелки и галочки: один набор на всю страницу */
.information-information-4 .ab i[data-ico] { display: block; }
.information-information-4 .ab svg.ab-ic { stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ======================================================================
   01. ГЕРОЙ. Тёмный, во всю колонку, с жёлтым свечением, плашкой на фото
   и полосой цифр внутри. Цифры больше не отдельные серые плитки.
   ====================================================================== */
.information-information-4 .ab-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 var(--ab-sec);
  padding: clamp(18px, 2.1vw, 30px) var(--ab-pad) clamp(24px, 2.6vw, 36px);
  background: var(--ab-ink);
  border-radius: 0 0 var(--ab-r) var(--ab-r);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055);
  color: #fff;
}
/* свечение бренда: пятно жёлтого за фотографией, чтобы чёрный не был плоским */
.information-information-4 .ab-hero::before {
  content: "";
  position: absolute;
  right: -6%;
  top: -18%;
  width: 62%;
  height: 128%;
  background: radial-gradient(closest-side, rgba(255, 216, 0, .18), rgba(255, 216, 0, 0) 72%);
  pointer-events: none;
}
.information-information-4 .ab-hero > * { position: relative; }

.information-information-4 .ab-hero__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-top: 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.information-information-4 .ab-hero__kicker span { display: inline-flex; align-items: center; gap: 16px; }
.information-information-4 .ab-hero__kicker span::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ab-yellow);
}
.information-information-4 .ab-hero__kicker span:last-child::after { display: none; }

.information-information-4 .ab-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: center;
  margin-top: clamp(22px, 2.6vw, 38px);
}
.information-information-4 .ab-hero__lead {
  font-size: clamp(18px, 1.55vw, 23px);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, .88);
  max-width: 46ch;
}
.information-information-4 .ab-hero__lead b { font-weight: 700; color: #fff; }
.information-information-4 .ab-hero__sub {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--ab-line-dk);
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .62);
}
.information-information-4 .ab-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* В герое стоит вертикальное видео (съёмка 9:16), а не горизонтальное фото.
   Тема даёт видео `.cv-bg { position:absolute; inset:0 }` — значит высоту держит
   КОНТЕЙНЕР, иначе видео схлопнется в ноль. Отсюда aspect-ratio на .ab-hero__media.
   Источники подставляет script.js темы по data-cv-src (та же механика, что на
   главной): до этого момента и при выключенном JS виден постер. */
.information-information-4 .ab-hero__media {
  position: relative;
  align-self: start;
  /* кикер («ARCH.CLOCK · З 2023 РОКУ · ТРИ СКЛАДИ») лежит над гридом: поднимаем
     кадр на его высоту плюс отступ грида, чтобы верх видео встал на одну линию
     с этой строкой. Снизу остаётся воздух до полосы цифр (её margin + padding). */
  margin-top: calc(-1 * (clamp(22px, 2.6vw, 38px) + 16px));
  /* ⚠️ Высота НЕ через aspect-ratio. Грид не учитывает её при расчёте строки:
     строку держала текстовая колонка, кадр свисал ниже неё и налезал на полосу
     цифр, а margin-top у .ab-facts отсчитывался от конца текста и «не работал».
     padding-top в процентах даёт настоящую высоту в потоке, и грид её видит. */
  width: 100%;
  height: 0;
  padding-top: 100%;
  overflow: hidden;
  border-radius: var(--ab-r-sm);
  background: #0c0e13;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1);
}
.information-information-4 .ab-hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 64%;   /* кадр подтянут вверх: сверху в съёмке пустой воздух, а внизу водяной знак ARCH.CLOCK — режем верх, низ оставляем целым */
  border-radius: inherit;
}
.information-information-4 .ab-hero__media img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 52% 42%;
  border-radius: var(--ab-r-sm);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1);
}
/* стеклянная плашка поверх фото: мелкая деталь, которая и делает вид дорогим */
/* плашка переехала из нижнего угла в верхний: в кадре видео внизу стоит
   водяной знак ARCH.CLOCK, и плашка садилась ровно на него */
.information-information-4 .ab-hero__chip {
  position: absolute;
  z-index: 2;
  left: 14px;
  top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(4, 8, 16, .72);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}
.information-information-4 .ab-hero__chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ab-yellow);
}

/* полоса цифр внутри героя */
.information-information-4 .ab-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: start;
  /* отступ больше исходного: кадр в герое подтянут вверх и опускается ниже
     текстовой колонки, при прежних 44px полоса цифр липла к нижнему краю видео */
  margin-top: clamp(15px, 1.7vw, 26px);
  padding-top: clamp(20px, 2.2vw, 30px);
  border-top: 1px solid var(--ab-line-dk);
}
/* ⚠️ Отступ полосы цифр задаём ЗДЕСЬ, с тегом в селекторе. Сброс списков выше
   (`.ab ul, .ab ol { margin: 0 }`) специфичнее, чем `.ab-facts`, и молча съедал
   margin-top: полоса цифр липла к нижнему краю кадра. */
.information-information-4 .ab ul.ab-facts { margin-top: clamp(15px, 1.7vw, 26px); }
.information-information-4 .ab-facts li { padding: 2px 22px; border-left: 1px solid var(--ab-line-dk); }
.information-information-4 .ab-facts li:first-child { padding-left: 0; border-left: 0; }
.information-information-4 .ab-facts b {
  display: block;
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--ab-yellow);
  white-space: nowrap;
}
/* подпись держим в одну строку даже у самой длинной («підписників в Instagram»),
   иначе четвёртая колонка разъезжается на три строки и ломает ряд */
.information-information-4 .ab-facts span {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
/* ВНИМАНИЕ. Тема навязывает всем ссылкам a{font-size:20px;font-weight:700}, и это
   правило бьёт наследование: любая наша ссылка БЕЗ явного размера вырастает до 20 px
   и жирнеет. Поэтому у каждой ссылки на странице размер задан явно, а там, где нужен
   размер родителя, стоит inherit. Проверено живым замером: подпись «підписників в
   Instagram» ехала 20 px вместо 10 px.
   Подчёркивание здесь текстом, а не border-bottom: при переносе рвётся аккуратно. */
.information-information-4 .ab-facts a {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: inherit;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .32);
  text-underline-offset: 3px;
}
.information-information-4 .ab-facts a:hover { color: #fff; text-decoration-color: var(--ab-yellow); }

/* ======================================================================
   02. УСЛОВИЯ. Шесть карточек с иконками вместо мелких серых пилюль.
   ====================================================================== */
.information-information-4 .ab-feats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.information-information-4 .ab-feat {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  background: #fff;
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-r-sm);
  transition: border-color .22s, transform .22s, box-shadow .22s;
}
.information-information-4 .ab-feat:hover {
  border-color: var(--ab-ink);
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -22px rgba(4, 8, 16, .55);
}
.information-information-4 .ab-feat__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 13px;
  background: var(--ab-yellow);
  color: var(--ab-ink);
}
.information-information-4 .ab-feat__ico svg { width: 23px; height: 23px; }
.information-information-4 .ab-feat h3 { font-size: 18px; line-height: 1.25; color: var(--ab-ink); margin-bottom: 8px; }
.information-information-4 .ab-feat p { font-size: 15px; line-height: 1.6; color: var(--ab-mute); }
.information-information-4 .ab-feat .ab-link { margin-top: auto; padding-top: 16px; font-size: 14px; border-bottom: 0; }
.information-information-4 .ab-feat .ab-link span { border-bottom: 2px solid var(--ab-yellow); padding-bottom: 2px; }
.information-information-4 .ab-feat .ab-link:hover span { border-bottom-color: var(--ab-ink); }

/* ======================================================================
   03. ПРОВЕРКА. Асимметрия: слева текст и три пронумерованных шага,
   справа мозаика из трёх кадров. Ритм отличается от карточек выше.
   ====================================================================== */
.information-information-4 .ab-check {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(26px, 3.6vw, 60px);
  align-items: start;
}
.information-information-4 .ab-check__text { position: sticky; top: 118px; }
.information-information-4 .ab-points { margin-top: 26px; }
.information-information-4 .ab-points li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 16px;
  padding: 17px 0;
  border-top: 1px solid var(--ab-line);
}
.information-information-4 .ab-points li:last-child { border-bottom: 1px solid var(--ab-line); }
.information-information-4 .ab-points b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--ab-yellow);
  color: var(--ab-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
.information-information-4 .ab-points strong { display: block; font-size: 18px; font-weight: 700; color: var(--ab-ink); }
.information-information-4 .ab-points span { display: block; margin-top: 5px; font-size: 15px; line-height: 1.6; color: var(--ab-mute); }

.information-information-4 .ab-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.information-information-4 .ab-mosaic__col { display: flex; flex-direction: column; gap: 12px; }
.information-information-4 .ab-shot {
  position: relative;
  overflow: hidden;
  border-radius: var(--ab-r-sm);
  background: var(--ab-ink-2);
}
.information-information-4 .ab-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.information-information-4 .ab-shot:hover img { transform: scale(1.04); }
.information-information-4 .ab-shot--tall { aspect-ratio: 4 / 5; }
.information-information-4 .ab-mosaic__col .ab-shot { flex: 1 1 0; min-height: 0; }
.information-information-4 .ab-shot figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 44px 16px 14px;
  background: linear-gradient(to top, rgba(4, 8, 16, .92), rgba(4, 8, 16, 0));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
}

/* ======================================================================
   04. ТЁМНАЯ ПОЛОСА С ФОТО. Пауза в ритме, приём со страницы /individual/.
   ====================================================================== */
/* Кадр НЕ растягиваем на всю полосу и не топим под вуалью: съёмки f_*.webp тёмные,
   часы на них чёрные, и под градиентом 0.7+ от кадра остаётся чёрный прямоугольник.
   Поэтому фото занимает левые 58% полосы (752x430 из 1920x1072, почти без обрезки),
   а текст сидит справа на чистом #040810. Вуаль работает только на стыке. */
.information-information-4 .ab-pause {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: clamp(300px, 30vw, 430px);
  border-radius: var(--ab-r);
  background: var(--ab-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055);
}
.information-information-4 .ab-pause img {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 42%;
  width: auto;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: brightness(1.14) contrast(1.03);
}
.information-information-4 .ab-pause__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(4, 8, 16, 0) 26%, rgba(4, 8, 16, .55) 44%, #040810 60%);
}
.information-information-4 .ab-pause__in {
  position: relative;
  width: 48%;
  margin-left: auto;
  padding: var(--ab-pad) var(--ab-pad) var(--ab-pad) 0;
}
.information-information-4 .ab-pause__line {
  max-width: 24ch;
  font-size: clamp(21px, 2.7vw, 38px);
  font-weight: 300;
  line-height: 1.24;
  color: #fff;
}
.information-information-4 .ab-pause__line b { font-weight: 700; color: var(--ab-yellow); }
.information-information-4 .ab-pause__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  margin-top: clamp(22px, 2.6vw, 38px);
  padding-top: 20px;
  border-top: 1px solid var(--ab-line-dk);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.information-information-4 .ab-pause__facts b { color: #fff; }

/* ======================================================================
   05. ХОД ЗАКАЗА. Таблица строк на волосяных линейках, одна строка
   подсвечена жёлтым. Прямая пересадка приёма .step/.is-key с /individual/.
   ====================================================================== */
.information-information-4 .ab-flow {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-r);
}
.information-information-4 .ab-flow__row {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 236px) minmax(0, 1fr) 208px;
  gap: 22px;
  align-items: baseline;
  padding: 22px clamp(20px, 2.4vw, 34px);
  border-top: 1px solid var(--ab-line);
}
.information-information-4 .ab-flow__row:first-child { border-top: 0; }
.information-information-4 .ab-flow__n { font-size: 13px; font-weight: 700; letter-spacing: .16em; color: #9CA3AF; }
.information-information-4 .ab-flow__t { font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--ab-ink); }
.information-information-4 .ab-flow__d { font-size: 16px; line-height: 1.6; color: var(--ab-mute); }
.information-information-4 .ab-flow__x {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ab-mute);
  text-align: right;
}
.information-information-4 .ab-flow__row--key {
  background: linear-gradient(90deg, rgba(255, 216, 0, .22), rgba(255, 216, 0, 0) 74%);
}
.information-information-4 .ab-flow__row--key::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ab-yellow);
}
.information-information-4 .ab-flow__row--key .ab-flow__n,
.information-information-4 .ab-flow__row--key .ab-flow__x { color: var(--ab-ink); }
.information-information-4 .ab-flow__row--key .ab-flow__d { color: var(--ab-text); }

/* ======================================================================
   06. ИНДИВИДУАЛЬНЫЕ. Тёмный блок с коллажем из четырёх работ.
   ====================================================================== */
.information-information-4 .ab-ind {
  position: relative;
  overflow: hidden;
  padding: var(--ab-pad);
  background: var(--ab-ink);
  border-radius: var(--ab-r);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055);
  color: #fff;
}
.information-information-4 .ab-ind::before {
  content: "";
  position: absolute;
  left: -10%;
  bottom: -60%;
  width: 55%;
  height: 130%;
  background: radial-gradient(closest-side, rgba(255, 216, 0, .13), rgba(255, 216, 0, 0) 72%);
  pointer-events: none;
}
.information-information-4 .ab-ind__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
  gap: clamp(26px, 3.4vw, 56px);
  align-items: center;
}
.information-information-4 .ab-ind__list { margin-top: 24px; }
.information-information-4 .ab-ind__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--ab-line-dk);
  font-size: 16px;
  color: rgba(255, 255, 255, .78);
}
.information-information-4 .ab-ind__list li:last-child { border-bottom: 1px solid var(--ab-line-dk); }
.information-information-4 .ab-ind__list svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--ab-yellow); }
.information-information-4 .ab-ind__pics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.information-information-4 .ab-ind__pics .ab-shot { aspect-ratio: 1 / 1; }
.information-information-4 .ab-ind .ab-btn { margin-top: 28px; }

/* ======================================================================
   07. КАТАЛОГ. Плитки с подписью и стрелкой вместо серых пилюль.
   ====================================================================== */
.information-information-4 .ab-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
/* плитки компактные: название и подпись слева, стрелка справа. Высокая колонка
   со стрелкой внизу давала полкартинки пустоты в каждой из шести плиток */
.information-information-4 .ab-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-r-sm);
  font-size: 16px;
  font-weight: 400;
  color: var(--ab-ink);
  transition: background .2s, border-color .2s, transform .2s;
}
.information-information-4 .ab-cat:hover { background: var(--ab-yellow); border-color: var(--ab-yellow); color: var(--ab-ink); transform: translateY(-3px); }
.information-information-4 .ab-cat > div { flex: 1 1 auto; min-width: 0; }
.information-information-4 .ab-cat__go { flex: none; }
.information-information-4 .ab-cat b { display: block; font-size: 20px; font-weight: 700; line-height: 1.2; }
.information-information-4 .ab-cat b + span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ab-mute); }
.information-information-4 .ab-cat:hover b + span { color: rgba(4, 8, 16, .72); }
.information-information-4 .ab-cat__go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--ab-line);
  transition: border-color .2s, background .2s, transform .2s;
}
.information-information-4 .ab-cat__go svg { width: 17px; height: 17px; }
.information-information-4 .ab-cat:hover .ab-cat__go { border-color: var(--ab-ink); background: var(--ab-ink); color: #fff; transform: translateX(4px); }

/* ======================================================================
   08. РЕКВИЗИТЫ И ДОКУМЕНТЫ. Тёмный блок: бэкендит герой и даёт белой
   карусели отзывов под собой чистый старт.
   ====================================================================== */
.information-information-4 .ab-legal {
  padding: var(--ab-pad);
  margin-bottom: clamp(36px, 4vw, 64px);
  background: var(--ab-ink);
  border-radius: var(--ab-r);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055);
  color: #fff;
}
.information-information-4 .ab-legal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(26px, 3.4vw, 56px);
}
.information-information-4 .ab-legal dl { margin-top: 4px; }
.information-information-4 .ab-legal dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  padding-top: 14px;
}
.information-information-4 .ab-legal dd {
  font-size: 16px;
  line-height: 1.55;
  color: #fff;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ab-line-dk);
}
.information-information-4 .ab-legal dd a { font-size: inherit; font-weight: inherit; line-height: inherit; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.information-information-4 .ab-legal dd a:hover { color: var(--ab-yellow); border-bottom-color: var(--ab-yellow); }
.information-information-4 .ab-docs { margin-top: 4px; }
.information-information-4 .ab-docs li { border-bottom: 1px solid var(--ab-line-dk); }
.information-information-4 .ab-docs a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 0;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
  transition: color .2s, padding .2s;
}
.information-information-4 .ab-docs svg { width: 17px; height: 17px; flex: none; transition: transform .2s; }
.information-information-4 .ab-docs a:hover { color: var(--ab-yellow); }
.information-information-4 .ab-docs a:hover svg { transform: translateX(4px); }
.information-information-4 .ab-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.information-information-4 .ab-chips a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid var(--ab-line-dk);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  transition: border-color .2s, background .2s, color .2s;
}
.information-information-4 .ab-chips svg { width: 17px; height: 17px; }
.information-information-4 .ab-chips a:hover { background: var(--ab-yellow); border-color: var(--ab-yellow); color: var(--ab-ink); }

/* ======================================================================
   ПЛАНШЕТ
   ====================================================================== */
@media (max-width: 1199px) and (min-width: 769px) {
  .information-information-4 .ab-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .information-information-4 .ab-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .information-information-4 .ab-check { grid-template-columns: minmax(0, 1fr); }
  .information-information-4 .ab-check__text { position: static; }
  .information-information-4 .ab-flow__row { grid-template-columns: 50px minmax(0, 210px) minmax(0, 1fr); }
  .information-information-4 .ab-flow__x { grid-column: 2 / -1; text-align: left; margin-top: -8px; }
  .information-information-4 .ab-ind__grid { grid-template-columns: minmax(0, 1fr); }
  .information-information-4 .ab-legal__grid { grid-template-columns: minmax(0, 1fr); }
  /* колонка на планшете уже, поэтому кадру в тёмной полосе отдаём больше места */
  .information-information-4 .ab-pause img { right: 36%; }
  .information-information-4 .ab-pause__in { width: 56%; }
  .information-information-4 .ab-pause__line { max-width: none; }
}

/* ======================================================================
   ТЕЛЕФОН
   ====================================================================== */
@media (max-width: 768px) {
  .information-information-4 h1 {
    padding: 24px 20px 0;
    border-radius: var(--ab-r-sm) var(--ab-r-sm) 0 0;
    font-size: 27px;
  }
  .information-information-4 .ab-hero {
    padding: 14px 20px 24px;
    border-radius: 0 0 var(--ab-r-sm) var(--ab-r-sm);
  }
  .information-information-4 .ab-hero__kicker { padding-top: 14px; font-size: 10px; letter-spacing: .15em; }
  .information-information-4 .ab-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 20px; }
  /* на телефоне фото идёт первым: оно и есть первый экран */
  .information-information-4 .ab-hero__media { order: -1; }
  .information-information-4 .ab-hero__media img { aspect-ratio: 4 / 3; }
  /* на телефоне кадр почти квадратный: вертикаль 4/5 на всю ширину экрана
     отталкивает кнопки и цифры за первый экран */
  .information-information-4 .ab-hero__media { height: 0; padding-top: 100%; margin-top: 0; }
  .information-information-4 .ab-hero__lead { font-size: 18px; }
  .information-information-4 .ab-hero__sub { font-size: 15px; }
  .information-information-4 .ab-hero__actions { flex-direction: column; margin-top: 24px; }
  .information-information-4 .ab-btn { width: 100%; height: 52px; }

  .information-information-4 .ab-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
  .information-information-4 .ab-facts li { padding: 0 14px; }
  .information-information-4 .ab-facts li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .information-information-4 .ab-facts b { font-size: 24px; }
  .information-information-4 .ab-facts span { font-size: 10px; letter-spacing: .1em; }

  .information-information-4 .ab-feats { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .information-information-4 .ab-feat { padding: 22px 20px; }

  .information-information-4 .ab-check { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .information-information-4 .ab-check__text { position: static; }
  /* мозаика на телефоне: высокий кадр на всю ширину, два квадрата в ряд под ним */
  .information-information-4 .ab-mosaic { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .information-information-4 .ab-mosaic__col { flex-direction: row; gap: 10px; }
  .information-information-4 .ab-mosaic__col .ab-shot { aspect-ratio: 1 / 1; }
  .information-information-4 .ab-shot figcaption { padding: 34px 12px 11px; font-size: 10px; letter-spacing: .1em; }

  .information-information-4 .ab-pause { display: block; min-height: 0; }
  /* кадр почти квадратный: при cover это вырезает из широкой съёмки ровно центр,
     где и лежат часы. На 4/3 в полосу попадала пустая чернота по краям кадра */
  .information-information-4 .ab-pause img {
    position: static;
    right: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    object-position: 50% 44%;
    filter: brightness(1.22) contrast(1.06);
  }
  .information-information-4 .ab-pause__veil {
    top: auto;
    bottom: 0;
    height: 42%;
    background: linear-gradient(to top, #040810 52%, rgba(4, 8, 16, 0));
  }
  .information-information-4 .ab-pause__in { width: auto; margin: -13% 0 0; padding: 20px; }
  .information-information-4 .ab-pause__line { max-width: none; font-size: 21px; }
  .information-information-4 .ab-pause__facts { gap: 8px 20px; font-size: 10px; letter-spacing: .1em; }

  .information-information-4 .ab-flow__row {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 4px 14px;
    padding: 18px 20px;
  }
  .information-information-4 .ab-flow__n { grid-row: span 3; }
  .information-information-4 .ab-flow__t { font-size: 18px; }
  .information-information-4 .ab-flow__d { font-size: 15px; }
  .information-information-4 .ab-flow__x { text-align: left; margin-top: 6px; }

  .information-information-4 .ab-ind__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .information-information-4 .ab-ind__pics { order: -1; gap: 8px; }
  .information-information-4 .ab-ind__list li { font-size: 15px; }

  .information-information-4 .ab-cats { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .information-information-4 .ab-cat { gap: 16px; padding: 18px 20px; }
  .information-information-4 .ab-cat b { font-size: 19px; }

  .information-information-4 .ab-legal__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .information-information-4 .ab-legal dd { font-size: 15px; }
  .information-information-4 .ab-docs a { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .information-information-4 .ab *,
  .information-information-4 .ab *::before { transition: none !important; }
}