/* ═══════════════════════════════════════════════════════════════════════
   Правки поверх шаблона Movix для сайта ЧОП «Барк».

   Файл вендора (movixe-template.webflow.shared…css) не трогаем: он должен
   оставаться сравнимым с эталоном `.gen/vendor/movix-home.html`, иначе
   следующий перенос блока из шаблона придётся выяснять построчно.
   Всё своё живёт здесь и подключается ПОСЛЕ вендора.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Шрифт ─────────────────────────────────────────────────────────────
   В шаблоне заголовки набраны Switzer. Кириллицы в этом файле нет вовсе
   (проверено таблицей символов: ни одного знака в диапазоне U+0400–U+04FF),
   поэтому весь русский текст сайта рисовался системным Arial. Onest — тот
   же тип рисунка с полной кириллицей. Переопределяем переменные, а не
   отдельные правила: так подхватят и медиазапросы вендора. */
:root,
html {
  --font--primary-font: 'Onest', system-ui, sans-serif;
  --font--third-font: 'Onest', system-ui, sans-serif;
  --font--second-font: 'IBM Plex Mono', ui-monospace, monospace;
}

body {
  font-family: 'Onest', system-ui, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ── <picture> ─────────────────────────────────────────────────────────
   Обёртка не должна участвовать в раскладке: во всех блоках шаблона
   размеры и позиционирование заданы самой картинке (position, height:100%),
   а лишний строчный контейнер между ней и родителем эти правила ломает. */
picture {
  display: contents;
}

/* ── Первый экран ──────────────────────────────────────────────────────
   Фото поста заменило «видео» шаблона (в шаблоне это <video> с mp4;
   у нас видео нет, а пустой видеоэлемент тянул за собой кнопку паузы
   и три обращения к несуществующему файлу). */
.bark-hero-photo {
  object-fit: cover;
  object-position: 50% 46%;
  width: 100%;
  height: 100%;
}

/* Фотография поста снята при дневном свете и куда светлее ночных кадров
   шаблона: ровной полупрозрачной заливки для белого текста не хватает.
   Добавляем затемнение снизу и слева — ровно там, где стоят заголовок,
   кнопка и карточка чата. */
.hero-overlay.bark-hero-scrim {
  background-image:
    linear-gradient(to top, rgba(8, 11, 16, .88) 0%, rgba(8, 11, 16, .55) 34%, rgba(8, 11, 16, .12) 62%, rgba(8, 11, 16, .02) 100%),
    linear-gradient(to right, rgba(8, 11, 16, .62) 0%, rgba(8, 11, 16, .18) 46%, rgba(8, 11, 16, 0) 74%);
}

/* Две строки заголовка идут отдельными блоками: в шаблоне вторая строка
   лежала в бегущей ленте из четырёх вариантов, но лента не крутится и там —
   её таймлайн нацелен на пустой список классов, и три строки из четырёх
   просто обрезаны блоком высотой 69 пикселей. Оставили одну. */
.hero-title {
  letter-spacing: -.03em;
}

.hero-sub {
  color: rgba(255, 255, 255, .82);
  font-size: 1.05rem;
  line-height: 1.5;
  max-width: 30em;
  margin-bottom: 0;
}

/* ── Шапка ─────────────────────────────────────────────────────────────
   Логотип в шаблоне белый и лежит на фиксированной шапке. У нас страница
   чередует тёмные и светлые блоки, и на светлом он пропадал. Кладём его
   на такую же размытую подложку, как пункты меню рядом. */
.navigation-top .logo-flex {
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  background-color: rgba(12, 15, 20, .55);
  border-radius: 5px;
  padding: 7px 12px 7px 8px;
  width: fit-content;
  /* Шаблон переворачивает цвета эмблемы, когда шапка проходит над светлым
     блоком: его логотип одноцветный, и это работает. Наша эмблема цветная,
     и от переворота корабль становился синим, а золото — фиолетовым.
     Читаемость даёт тёмная подложка, а не инверсия. */
  filter: none !important;
}

.navigation-top .logo-flex .top-text.logo {
  color: #fff;
}

/* В шаблоне подложка шапки полупрозрачно-белая: он рассчитан на светлые
   страницы. У нас одна страница проходит и по тёмным блокам, и по светлым,
   и на светлом белая подложка сливалась в серый кирпич. Тёмная читается
   на любом фоне. */
.navigation-top .navigation-center,
.navigation-top .last-item {
  background-color: rgba(12, 15, 20, .55);
}

.navigation-top .navigation-center .navigation-text-main,
.navigation-top .last-item .text-small-menu {
  color: #fff;
}

/* ── Ритм по вертикали ─────────────────────────────────────────────────
   Шаблон рассчитан на семь блоков и дышит соответственно. У нас их четыре,
   и на тех же отступах между блоками оставался целый пустой экран.
   Сжимаем умеренно: рисунок скошенных переходов сохраняется. */
.section {
  padding-top: 40px;
  padding-bottom: 84px;
}

.section.gray.add-minus {
  padding-bottom: 220px;
}

.section.dark.add-bottom {
  padding-bottom: 90px;
}

.rounder-wrapper {
  height: 14vw;
}

.tab-grid {
  padding-top: 48px;
  /* Черта сверху отделяла этот блок от предыдущего раздела шаблона.
     Раздела нет, и черта висела сама по себе. */
  border-top: 0;
}

.tab-left {
  grid-row-gap: 120px;
}

/* Нижний отступ обязан быть БОЛЬШЕ отрицательного нижнего поля (170 точек):
   именно на эту величину следующий блок наезжает сверху, и всё, что попало
   в этот запас, оказывается под ним. На узком экране уменьшаем и то, и другое
   вместе — иначе кнопка «Отправить заявку» уходила под подвал. */
.review-section.center {
  min-height: 100vh;
  padding-bottom: 210px;
}

/* Якорные переходы не должны прятать заголовок под шапкой. */
[id] {
  scroll-margin-top: 96px;
}

/* ── Форма ─────────────────────────────────────────────────────────────
   Необязательное поле стоит вне сетки в две колонки: внутри неё подпись
   уезжала в левый столбец, а само поле — в правый. */
.bark-note-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: .5rem 0 1rem;
}

/* Шапка уезжает при движении вниз: закреплённая сверху, она накрывала
   заголовки блоков и верх формы, особенно на телефоне. */
.navigation-top {
  transition: transform .28s ease;
  will-change: transform;
}

.navigation-top.bark-nav-hidden {
  transform: translateY(-130%);
}

/* ── Кнопки, сделанные тегом button ────────────────────────────────────
   Открыть чат — это действие, а не переход по адресу. Ссылка с href="#"
   врёт вспомогательным программам и ломает переход назад, поэтому здесь
   стоит button, и ему нужно снять оформление по умолчанию. */
.button-rounded,
.contact-team {
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.button-rounded {
  font-family: var(--font--second-font);
}

.bark-team-logo {
  object-fit: contain;
  background-color: #0d1420;
  padding: 6px;
}

/* Карточка «Написать дежурному» в первом экране.
   Заказчик 10.09.2026: «текст плохо читаемый». Причина не в цвете текста, а в том,
   что подложки НЕ БЫЛО ВИДНО ВООБЩЕ: в шаблоне она отдельным слоем с z-index: -1,
   а такой слой уезжает за фон ближайшего непрозрачного предка — у нас это белая
   обёртка страницы. Замер на живом сайте: подложка честно чёрная на 72 процента,
   а карточка при этом светло-серая. Поэтому фон переносим на саму карточку. */
.contact-team {
  color: #fff;
  background-color: rgba(11, 14, 19, .84);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-radius: 8px;
}

.contact-team .blur-div {
  display: none;
}

.contact-team .smaller-text {
  color: #fff;
  opacity: .82;
}

/* В шаблоне это окно бегущей строки: две надписи по очереди уезжают вверх. У нас
   анимация не заводится (замер на живом сайте: сдвига нет ни через две секунды, ни
   через восемь), поэтому вторая надпись убрана из разметки, а окно подогнано ровно
   под одну строку. Прежние 13 пикселей были меньше строки Onest, и слово «Написать»
   обрезалось снизу — это и видно на снимке заказчика. */
.contact-team .founder-overflow {
  height: auto;
  overflow: visible;
}

/* ── Блок про приложение ───────────────────────────────────────────────
   Значки рисуем прямо в разметке: в шаблоне на их месте лежали картинки
   коробки, контейнеровоза и грузовика — логистика, к охране отношения
   не имеет. */
.bark-icon {
  color: var(--colors--fourth-color);
}

.app-section .icon-wrapper:last-child {
  border-bottom: 0;
}

.app-section .icon-list .p-industry._01 {
  max-width: 100%;
  opacity: .72;
}

/* ── Заявка ────────────────────────────────────────────────────────────*/
.p-quote {
  color: rgba(255, 255, 255, .74);
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 0;
}

/* Согласие на обработку данных лежит в разметке, а не подставляется
   скриптом: подставленное поле появлялось после отрисовки и прыгало. */
.bark-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 4px 0 16px;
  color: rgba(255, 255, 255, .8);
  font-size: .78rem;
  line-height: 1.45;
  cursor: pointer;
}

.bark-consent input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--colors--fourth-color);
}

.bark-consent a {
  color: inherit;
  text-decoration: underline;
}

.quote-wrapper .success-message,
.quote-wrapper .error-message {
  margin-top: 0;
}

/* ── Мелочи, которые в шаблоне остались сломанными ─────────────────────*/

/* Экспортёр Webflow записал сюда невалидное значение (scale3d(1none,…)),
   браузер правило отбрасывает целиком вместе с object-fit. */
.work-photo-first {
  transform: none;
  object-fit: cover;
}

/* Значок конструктора на клиентском сайте не показываем. */
.w-webflow-badge {
  display: none !important;
}

/* ── Телефон ───────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
  .bark-hero-photo {
    /* вертикальный кадр: лица и шевроны должны попасть в верхнюю половину,
       нижнюю занимают заголовок и кнопка */
    object-position: 50% 32%;
  }

  .hero-sub {
    font-size: .98rem;
  }

  .navigation-top .logo-flex {
    padding: 6px 10px 6px 6px;
  }

  .app-section .icon-wrapper {
    flex-flow: row;
    align-items: flex-start;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .app-section .icon-main {
    width: 46px;
    height: 46px;
  }

  /* На узком экране блоки шаблона расходятся ещё сильнее: между карточкой
     заявки и подвалом оставалось около трёхсот точек пустоты. */
  .section {
    padding-top: 26px;
    padding-bottom: 40px;
  }

  .section.gray.add-minus {
    margin-bottom: -60px;
    padding-bottom: 100px;
  }

  .section.dark.add-bottom {
    padding-bottom: 40px;
  }

  .review-section.center {
    min-height: 0;
    margin-bottom: -40px;
    padding-top: 30px;
    padding-bottom: 90px;
  }

  .footer {
    padding-top: 60px;
  }

  .rounder-wrapper {
    height: 20vw;
  }

  [id] {
    scroll-margin-top: 78px;
  }
}

/* ── Уважение к системной настройке «меньше движения» ──────────────────
   Шаблон построен на скролл-анимациях. Человеку, который выключил
   анимацию в системе, показываем всё сразу и не двигаем. */
@media (prefers-reduced-motion: reduce) {
  html.w-mod-js :is(.top-text, .social-tooltip, .fixed-menu, .page-overlay-main,
                    .hamburger-line, .hamburger-text, .line-absolute, .blur-div, .subhead) {
    visibility: visible !important;
  }

  .work-mask {
    display: none !important;
  }

  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Подпись поверх фотографии в блоке «что мы делаем». На телефоне плашка занимала
   половину квадратной карточки: сорок пикселей пустого зазора между заголовком и
   текстом плюс двадцать полей со всех сторон. Люди на фотографии уходили под неё
   целиком. Зазор ужат, фотографии видно больше. */
@media (max-width: 767px) {
  .tab-content-item .text-services-wrapper {
    padding: 16px;
    row-gap: 14px;
    gap: 14px;
  }
}