/* ============================================================
   БЛОК «О КОМПАНИИ» — вариант B1 «Лента доверия».
   Рекламная группа БАРС, главная страница, второй экран после блока
   «Форматы». Во всю ширину окна: секция — прямой потомок .theme-page
   (как соседние .row.full-width), фон на всю ширину, контент в контейнере
   --ba-max. Все селекторы живут ТОЛЬКО под корневым классом .bars-about —
   в тему WP ничего не протекает, глобальные теги не трогаются.
   0 внешних CDN и шрифтов: только системный стек.

   Тема задаётся атрибутом data-theme="light" | "dark" на корне.
   ОСНОВНАЯ — СВЕТЛАЯ (выбор владельца 09.09.2026), в разметке стоит
   data-theme="light". Тёмная сохранена целиком: меняете атрибут на "dark" —
   блок переключается, дублировать правила не нужно.
   Палитра — только CSS-переменные ниже; светлая тема = переопределение
   переменных в .bars-about[data-theme="light"].
   Токены (оранжевый, ink, paper, кривые) — те же, что в formats-block.css.

   Высота: блок помещается в окно под фиксированной шапкой (149px) на
   1440×900 и выше; на низких окнах берёт высоту от контента — текст
   не режется, сжимаются отступы и кегль (clamp по vh).
   ============================================================ */

.bars-about {
  /* базовые токены (общие с блоком «Форматы») */
  --ba-orange: #BF5724;
  --ba-orange-hot: #FF6A2C;
  --ba-orange-soft: #E0824E;
  --ba-ink: #0a0805;
  --ba-paper: #f4ece4;
  --ba-paper-dim: #c3b8ab;
  --ba-max: 1320px;
  --ba-ease: cubic-bezier(.16,.84,.34,1);
  --ba-ease-slow: cubic-bezier(.22,1,.36,1);
  --ba-radius-in: 18px;
  /* высота фиксированной шапки сайта (замер боевого 02.09.2026) — якорь #about и расчёт высоты */
  --ba-header: 149px;

  /* ---- ТЁМНАЯ ТЕМА (запасная, включается data-theme="dark") ---- */
  --ba-bg: var(--ba-ink);
  --ba-glow: rgba(191,87,36,.20);          /* тёплый отсвет в углу */
  --ba-fg: var(--ba-paper);                /* основной текст */
  --ba-fg-strong: #ffffff;                 /* заголовки карточек, цифры */
  --ba-fg-dim: var(--ba-paper-dim);        /* вторичный текст */
  --ba-accent: var(--ba-orange-hot);       /* линии, точки, черта киккера, иконки */
  --ba-accent-text: var(--ba-orange-soft); /* оранжевый ТЕКСТ: номера карточек, число рейтинга */
  --ba-kicker: var(--ba-orange-hot);       /* текст киккер-тега */
  --ba-h-a: var(--ba-orange-hot);          /* градиент заголовка: 3 остановки */
  --ba-h-b: var(--ba-orange-soft);
  --ba-h-c: #ffd0a8;
  --ba-card: rgba(244,236,228,.05);        /* стеклянная подложка карточек */
  --ba-card-hover: rgba(244,236,228,.09);
  --ba-line: rgba(191,87,36,.26);          /* тонкий оранжевый бордер (как в «Форматах») */
  --ba-line-hover: rgba(255,106,44,.6);
  --ba-card-shadow: 0 18px 40px rgba(0,0,0,.38);
  --ba-ghost: rgba(244,236,228,.16);       /* контурные номера карточек */
  --ba-how-bg: rgba(244,236,228,.085);     /* подложка ленты «как мы работаем»: светлее карточек (.05) — отдельный слой */
  --ba-btn-shadow: rgba(191,87,36,.35);
  --ba-btn-shadow-hover: rgba(191,87,36,.5);
  --ba-dot-glow: rgba(255,106,44,.7);

  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  /* во всю ширину: прямой потомок .theme-page, как секции .row.full-width рядом.
     Не 100vw и не отрицательные поля: 100vw включает полосу прокрутки и даёт
     горизонтальный скролл на Windows. */
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--ba-bg);
  color: var(--ba-fg);
  overflow: hidden;              /* клип декоративного кольца в углу */
  overflow: clip;                /* не добавлять вынесенное кольцо в scrollWidth на узких экранах */
  scroll-margin-top: var(--ba-header);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
  /* один экран: не ниже «окно − шапка» (контент центрируется), но не выше 900;
     если контент выше окна (низкие окна, телефон) — высота от контента */
  display: flex; flex-direction: column; justify-content: center;
  min-height: min(calc(100vh - var(--ba-header)), 900px);
  min-height: min(calc(100svh - var(--ba-header)), 900px);
}

/* ---- СВЕТЛАЯ ТЕМА: только переменные ----
   Оранжевый текст здесь темнее (#9a4217 / градиент #7a3410→#a84a1c):
   #BF5724 на бумаге даёт 3,85:1, ниже порога 4,5 для обычного текста. */
.bars-about[data-theme="light"] {
  --ba-bg: var(--ba-paper);
  --ba-glow: rgba(191,87,36,.05);   /* .09 давало под первой строкой H1 на 900px #efddd1 → 4,35:1 */
  --ba-fg: var(--ba-ink);
  --ba-fg-strong: var(--ba-ink);
  --ba-fg-dim: #5b4e43;
  --ba-accent: var(--ba-orange);
  --ba-accent-text: #9a4217;
  --ba-kicker: #9a4217;
  --ba-h-a: #7a3410;
  --ba-h-b: #8f3d13;
  --ba-h-c: #a04519;                /* светлая остановка градиента H1: 4,83 на бумаге было мало под свечением */
  --ba-card: rgba(10,8,5,.035);
  --ba-card-hover: rgba(10,8,5,.06);
  --ba-line: rgba(191,87,36,.28);
  --ba-line-hover: rgba(191,87,36,.7);
  --ba-card-shadow: 0 18px 40px rgba(10,8,5,.12);
  --ba-ghost: rgba(10,8,5,.14);
  --ba-how-bg: #e7d9cb;             /* лента «как мы работаем»: теплее бумаги и заметно темнее карточек (#ece4dc) */
  --ba-btn-shadow: rgba(191,87,36,.28);
  --ba-btn-shadow-hover: rgba(191,87,36,.4);
  --ba-dot-glow: rgba(191,87,36,.45);
}

/* ---- локальный сброс — только внутри блока, тему не трогаем ----
   Через :where(): специфичность правила = один класс корня (0,1,0). Этого
   хватает, чтобы перебить теговые правила темы (p, h3, ul — (0,0,1)), и НЕ
   хватает, чтобы перебить собственные правила блока: они все идут ниже и
   написаны с префиксом `.bars-about .x` (0,2,0). Сброс вида `.bars-about p`
   (0,1,1) трижды глушил отступы/цвет одиночных классов (замер 08.09). */
.bars-about *, .bars-about *::before, .bars-about *::after { box-sizing: border-box; }
.bars-about--b1 :where(h1, h2, h3, p, ul, li, figure, figcaption) {
  margin: 0; padding: 0; text-transform: none; letter-spacing: normal; text-align: left;
  background: none; border: 0;
}
.bars-about--b1 :where(ul) { list-style: none; }
.bars-about--b1 :where(a) { text-decoration: none; color: inherit; }
.bars-about--b1 :where(em) { font-style: normal; }
.bars-about--b1 :where(img) { border: 0; box-shadow: none; border-radius: 0; max-width: none; }
.bars-about--b1 :where(b, strong) { font-weight: 800; }
.bars-about--b1 :where(svg) { display: block; }

/* тёплый отсвет в верхнем правом углу + тонкое кольцо (приём «Форматов») */
.bars-about::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 52% at 88% -6%, var(--ba-glow), transparent 64%);
}
.bars-about-ring {
  position: absolute; top: -80px; right: -40px; width: 280px; height: 280px; z-index: -1;
  pointer-events: none; opacity: .55;
}
.bars-about-ring svg { display: block; width: 100%; height: 100%; }
.bars-about-ring circle { fill: none; stroke: var(--ba-accent); stroke-opacity: .32; stroke-width: 1; }
/* орб на дуге у верхнего края (угол 200°) — выше правой колонки, не под текстом */
.bars-about-ring .orb {
  position: absolute; top: 33%; left: 3%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: var(--ba-accent); box-shadow: 0 0 12px 2px var(--ba-dot-glow);
}
/* светлая тема: кольцо проходит под правой колонкой шапки (кнопка, строка рейтинга) —
   штрих .32 давал под текстом #e6c6b3 и 4,14:1 (замер 08.09). Здесь кольцо едва заметно
   и без свечения, любой текст поверх него держит ≥4,5. */
.bars-about[data-theme="light"] .bars-about-ring { opacity: .2; }
.bars-about[data-theme="light"] .bars-about-ring .orb { box-shadow: none; }

/* ---------- внутренний контейнер ---------- */
.bars-about-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--ba-max); margin: 0 auto;
  /* вертикаль — от высоты окна: на 900 ≈ 27/25px (контент ≈ 715 при окне 751 —
     запас под более широкие шрифты Windows), на 1080 доходит до потолков */
  padding: clamp(22px, 3vh, 40px) clamp(20px, 3.4vw, 48px) clamp(20px, 2.8vh, 36px);
}

/* ---------- шапка блока: слева киккер → H1 → линия; справа кнопка + рейтинг ---------- */
.bars-about-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  gap: 18px clamp(24px, 4vw, 64px);
  margin-bottom: clamp(16px, 2.4vh, 26px);
}
.bars-about-title { min-width: 0; }

/* киккер-тег с чертой */
.bars-about .bars-about-tag {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ba-kicker); font-weight: 800; margin: 0 0 clamp(10px, 1.5vh, 16px);
}
.bars-about .bars-about-tag::before { content: ""; width: 26px; height: 1px; background: var(--ba-accent); flex: none; }

/* единственный H1 страницы: строка бренда + большая строка-заявление */
.bars-about .bars-about-h1 {
  display: block; margin: 0; font-weight: 900; letter-spacing: -.03em; line-height: 1;
  color: var(--ba-fg-strong);
  /* потолок 44px: при 46 строка «Крупнейший оператор рекламы» на 1536+ ломалась на три */
  font-size: min(clamp(30px, 3.1vw, 44px), 5.4vh);
}
.bars-about .bars-about-h1 .bars-about-brand {
  display: block; font-size: .46em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.2; color: var(--ba-fg); margin-bottom: .34em;
}
.bars-about .bars-about-h1 em {
  display: block; font-style: normal; line-height: 1.02;
  background: linear-gradient(100deg, var(--ba-h-a), var(--ba-h-b) 60%, var(--ba-h-c));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .06em; /* нижние выносные «р», «у» не режутся клипом фона */
}

/* акцент-линия с точкой */
.bars-about-ln {
  display: block; position: relative; width: clamp(64px, 8vw, 110px); height: 2px;
  margin: clamp(12px, 1.7vh, 20px) 0 0;
  background: linear-gradient(90deg, var(--ba-accent), transparent); transform-origin: left center;
}
.bars-about-ln .dot {
  position: absolute; top: 50%; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ba-accent); box-shadow: 0 0 14px 2px var(--ba-dot-glow);
  transform: translate(-50%, -50%);
}

/* Правая колонка шапки — один узел «действие + доказательство»: кнопка, под ней
   строкой рейтинг Яндекс Карт. Колонка выровнена по низу шапки (align-items:end
   у грида), поэтому рейтинг встаёт на линию акцент-черты слева, а кнопка — на
   оптическую линию последней строки H1. Пустого столбца в правом углу больше нет. */
.bars-about-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 11px;
  max-width: 460px; padding-bottom: 2px;
}
/* рейтинг подписью, а не плашкой: без рамки, фона и блюра — иначе читается наклейкой */
.bars-about .bars-about-rating {
  display: flex; align-items: baseline; flex-wrap: wrap; justify-content: flex-end; gap: 2px 8px;
  margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .01em; line-height: 1.3;
  color: var(--ba-fg-dim); text-align: right;
}
.bars-about .bars-about-rating b {
  color: var(--ba-accent-text); font-weight: 800; font-size: 15.5px;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.bars-about .bars-about-rating .star { font-size: .82em; margin-left: 3px; }

/* ссылки-кнопки — с префиксом (сброс `a {color:inherit}` иначе перекрасит) */
.bars-about .bars-about-btn {
  display: inline-flex; align-items: center; gap: 11px;
  background: linear-gradient(120deg, var(--ba-orange-hot), var(--ba-orange));
  color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .02em;
  padding: clamp(12px, 1.6vh, 14px) 28px; border-radius: 60px; border: 0;
  box-shadow: 0 10px 30px var(--ba-btn-shadow);
  transition: transform .25s var(--ba-ease), box-shadow .4s var(--ba-ease);
}
.bars-about .bars-about-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 38px var(--ba-btn-shadow-hover); color: #fff; }
.bars-about-btn .arr { font-size: 18px; transition: transform .4s var(--ba-ease); }
.bars-about-btn:hover .arr { transform: translateX(5px); }

/* ---------- середина: фото | карточки 2×2 ---------- */
.bars-about-grid {
  display: grid; gap: 14px; align-items: stretch;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
}

/* фото-панель: осветлённый кадр, подложка только под подписью (низ) */
.bars-about .bars-about-photo {
  position: relative; min-height: 280px; margin: 0;
  border-radius: var(--ba-radius-in); overflow: hidden; isolation: isolate;
  border: 1px solid var(--ba-line); background: var(--ba-ink);
}
.bars-about .bars-about-photo img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%; display: block;
  filter: saturate(.96);
  transform: scale(1.04);
  transition: transform 1.4s var(--ba-ease-slow);
}
/* тонировка: верх и середина свободны, низ уходит в ink под подпись и факт */
.bars-about-photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,8,5,.06) 0%, rgba(10,8,5,0) 22%, rgba(10,8,5,0) 46%, rgba(10,8,5,.66) 70%, rgba(10,8,5,.93) 100%),
    linear-gradient(90deg, rgba(10,8,5,.16), transparent 50%);
}
.bars-about .bars-about-photo figcaption {
  position: absolute; left: clamp(16px, 1.8vw, 24px); right: clamp(16px, 1.8vw, 24px); bottom: clamp(14px, 1.9vh, 22px);
  z-index: 1; color: #fff; margin: 0; padding: 0;
}
.bars-about .bars-about-photo .bars-about-tag { color: var(--ba-orange-hot); margin-bottom: 8px; }
.bars-about .bars-about-photo .bars-about-tag::before { background: var(--ba-orange-hot); }
/* единственное упоминание года на блоке — одной строкой (правка владельца 09.09) */
.bars-about .bars-about-fact {
  margin: 0; color: #fff; font-size: clamp(15px, 1.2vw, 17px); font-weight: 800;
  letter-spacing: -.01em; line-height: 1.25; font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
  .bars-about .bars-about-photo:hover img { transform: scale(1.08); }
}

/* четыре карточки-пункта: 2×2 */
.bars-about .bars-about-cards {
  display: grid; gap: 14px; margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bars-about .bars-about-card {
  position: relative; display: flex; flex-direction: column; gap: 8px; margin: 0;
  padding: clamp(15px, 1.9vh, 20px) clamp(16px, 1.6vw, 20px) clamp(16px, 2vh, 21px);
  border-radius: var(--ba-radius-in); border: 1px solid var(--ba-line); background: var(--ba-card);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  overflow: hidden; isolation: isolate;
  transition: transform .35s var(--ba-ease), border-color .35s, background .35s, box-shadow .45s var(--ba-ease);
}
/* контурный номер в углу карточки (приём «Форматов», декор) */
.bars-about-ghost {
  position: absolute; top: 4px; right: 12px; z-index: -1; pointer-events: none;
  font-size: 54px; font-weight: 900; line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px var(--ba-ghost); font-variant-numeric: tabular-nums;
}
.bars-about .bars-about-num {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; letter-spacing: .2em; font-weight: 800; color: var(--ba-accent-text);
  font-variant-numeric: tabular-nums;
}
.bars-about .bars-about-num::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ba-accent); flex: none; }
.bars-about .bars-about-card h3 {
  margin: 0; font-size: clamp(16px, 1.2vw, 18px); font-weight: 800; letter-spacing: -.01em; line-height: 1.15;
  color: var(--ba-fg-strong);
}
.bars-about .bars-about-card p {
  margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ba-fg-dim); font-weight: 500;
}
/* наведение — через transform; появление карточки идёт через translate (другое
   свойство), поэтому правила не спорят в каскаде */
@media (hover: hover) {
  .bars-about .bars-about-card:hover {
    transform: translateY(-4px); border-color: var(--ba-line-hover);
    background: var(--ba-card-hover); box-shadow: var(--ba-card-shadow);
  }
}

/* ---------- лента «Индивидуальный подход»: как мы работаем ----------
   Отдельный смысловой слой (правка владельца 09.09): собственная тёплая подложка
   --ba-how-bg + оранжевая черта сверху. С карточками услуг за внимание не спорит —
   у неё нет ни рамки, ни стекла, ни теней, только фон и разделители пунктов. */
.bars-about-how {
  /* отступы плотнее прежнего: отрыв от карточек даёт подложка, а не воздух —
     иначе лента съедала вертикальный запас блока на 1440×900 (замер 09.09:
     контент 715 → 735 при потолке 751; запас держим под широкие шрифты Windows) */
  margin-top: clamp(12px, 1.7vh, 20px);
  padding: clamp(13px, 1.7vh, 18px) clamp(16px, 1.6vw, 22px) clamp(13px, 1.7vh, 18px);
  border-top: 2px solid var(--ba-accent);
  border-radius: 0 0 var(--ba-radius-in) var(--ba-radius-in);
  background: var(--ba-how-bg);
  display: grid; align-items: start;
  /* Длинный заголовок не должен сжиматься до 150px при browser zoom. */
  grid-template-columns: minmax(190px, .5fr) minmax(0, 3fr);
  gap: 14px clamp(18px, 2.6vw, 36px);
}
.bars-about-how-head { min-width: 0; padding-top: 2px; }
.bars-about .bars-about-how-head .bars-about-tag {
  /* Это заголовок всей ленты, а не четвёртый пункт с пиктограммой. */
  display: block; max-width: 100%; margin-bottom: 7px;
  line-height: 1.4; white-space: normal; overflow-wrap: anywhere;
}
.bars-about .bars-about-how-head .bars-about-tag::before { content: none; }
.bars-about .bars-about-how-sub { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ba-fg-dim); font-weight: 600; }
.bars-about .bars-about-how-list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px clamp(14px, 2vw, 28px); margin: 0;
}
.bars-about .bars-about-how-item {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; margin: 0;
  min-width: 0; align-content: start;
  padding-left: clamp(12px, 1.4vw, 20px); border-left: 1px solid var(--ba-line);
}
.bars-about .bars-about-how-item :where(h3, p) {
  grid-column: 2; min-width: 0; overflow-wrap: anywhere;
}
.bars-about .bars-about-how-item svg {
  grid-column: 1; grid-row: 1 / span 2; width: 22px; height: 22px; margin-top: 1px;
  fill: none; stroke: var(--ba-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.bars-about .bars-about-how-item h3 {
  margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; color: var(--ba-fg-strong);
}
.bars-about .bars-about-how-item p {
  margin: 0; font-size: 13px; line-height: 1.45; color: var(--ba-fg-dim); font-weight: 500;
}

/* видимый фокус с клавиатуры */
.bars-about a:focus-visible { outline: 2px solid var(--ba-accent); outline-offset: 3px; border-radius: 4px; }
.bars-about-btn:focus-visible { border-radius: 60px; }

/* ---------- появление при прокрутке (только при работающем JS) ----------
   База .fx скрыта ТОЛЬКО под .bars-about.js: без JS весь контент виден
   статично. Скрипт вешает .is-in, когда блок входит в окно (IntersectionObserver);
   стаггер — через --i на элементах. Никакого перехвата колеса/прокрутки. */
.bars-about.js .fx {
  opacity: 0; translate: 0 22px;
  transition: opacity .9s var(--ba-ease-slow), translate 1s var(--ba-ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.bars-about.js .bars-about-ln.fx { translate: none; scale: 0 1; transition-property: opacity, scale; }
.bars-about.js.is-in .fx { opacity: 1; translate: none; }
.bars-about.js.is-in .bars-about-ln.fx { scale: 1; }
/* карточка: появление (opacity/translate, со стаггером) и наведение (transform,
   рамка, фон, тень — без задержки) в одном списке переходов, задержки по свойствам */
.bars-about.js .bars-about-card.fx {
  transition: opacity .9s var(--ba-ease-slow), translate 1s var(--ba-ease),
    transform .35s var(--ba-ease), border-color .35s, background .35s, box-shadow .45s var(--ba-ease);
  transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s, 0s, 0s;
}

/* ---------- адаптив ---------- */
/* низкое окно компьютера (1366×768, 1280×720): блок выше окна — высота от
   контента; плотнее отступы, чтобы лишней прокрутки было меньше */
@media (min-width: 881px) and (max-height: 800px) {
  .bars-about-inner { padding-top: 20px; padding-bottom: 18px; }
  .bars-about-head { margin-bottom: 14px; }
  .bars-about .bars-about-card p, .bars-about .bars-about-how-item p { line-height: 1.4; }
}
/* планшет и узкий компьютер: шапка в столбик, фото во всю ширину, карточки 2×2 */
@media (max-width: 1024px) {
  .bars-about-head { grid-template-columns: minmax(0, 1fr); }
  .bars-about-side { align-items: flex-start; max-width: none; padding-bottom: 0; }
  .bars-about .bars-about-rating { justify-content: flex-start; text-align: left; }
  .bars-about-grid { grid-template-columns: minmax(0, 1fr); }
  .bars-about .bars-about-photo { min-height: 0; aspect-ratio: 16 / 8; }
  .bars-about-how { grid-template-columns: minmax(0, 1fr); }
  .bars-about .bars-about-h1 { font-size: clamp(30px, 4.2vw, 42px); }
}
/* телефон: шапка сайта на боевом 129px (контент со 130px) — якорь под неё */
@media (max-width: 880px) {
  .bars-about { --ba-header: 130px; --ba-radius-in: 16px; }
  .bars-about-ring { width: 180px; height: 180px; top: -50px; right: 0; }
}
@media (max-width: 760px) {
  .bars-about .bars-about-how-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 640px) {
  .bars-about .bars-about-photo { aspect-ratio: 4 / 3; }
  .bars-about .bars-about-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .bars-about-grid { gap: 10px; }
  .bars-about .bars-about-card { gap: 7px; }
  .bars-about-ghost { font-size: 46px; top: 4px; right: 10px; }
  .bars-about .bars-about-h1 { font-size: clamp(27px, 8.4vw, 34px); }
  .bars-about .bars-about-h1 .bars-about-brand { font-size: .5em; letter-spacing: .1em; }
  .bars-about .bars-about-btn { font-size: 14px; padding: 13px 22px; }
  .bars-about .bars-about-rating { font-size: 12.5px; }
  .bars-about .bars-about-rating b { font-size: 15px; }
  .bars-about .bars-about-fact { font-size: 15px; }
}
@media (max-width: 400px) {
  .bars-about-inner { padding-left: 16px; padding-right: 16px; }
  .bars-about .bars-about-card { padding: 15px 15px 17px; }
}

/* ---------- reduced motion: без анимаций, всё видно сразу ---------- */
@media (prefers-reduced-motion: reduce) {
  .bars-about *, .bars-about *::before, .bars-about *::after {
    animation: none !important;
    transition: none !important;
  }
  .bars-about.js .fx { opacity: 1; translate: none; scale: none; }
.bars-about .bars-about-photo img { transform: scale(1.04) !important; }
  .bars-about .bars-about-card:hover { transform: none; }
}