/* Start:/local/templates/fda/template_styles.css?1791457002284110*/
/* ==========================================================================
   template_styles.css — стили шаблона сайта fda (Битрикс)
   Задача 15, п. 2.2/2.5. Собран из двух файлов прототипа в порядке их
   подключения в docs/prototype/index.html:
     1. docs/css/template_styles.css — переменные, сброс, шапка/подвал
     2. docs/prototype/prototype.css — стили контентных блоков прототипа
   Разделение на два файла было нужно только на этапе вёрстки прототипа
   (см. комментарий в начале второго блока ниже), здесь склеены в один —
   Битрикс подключает файл шаблона автоматически, порядок правил не
   менялся, поведение стилей идентично прототипу.
   ========================================================================== */

/* ==========================================================================
   0. ШРИФТ MONTSERRAT — ЛОКАЛЬНО
   В прототипе шрифт подключался через <link> на fonts.googleapis.com
   (Google Fonts). По ТЗ (docs/tz.md, раздел 5) хостинг и обработка данных
   должны быть в РФ, а обращение браузера посетителя к иностранному
   сервису Google при каждой загрузке страницы передаёт его IP за рубеж.
   Поэтому шрифт зашит в шаблон и отдаётся с этого же сервера.
   Файлы — не с fonts.google.com, а штатная поставка Montserrat из ядра
   Битрикса (/bitrix/js/ui/fonts/montserrat/, используется в админке),
   проверено на поддержку кириллицы (`fc-scan`, диапазон U+0400-04FF есть).
   В комплекте нет начертания 300 (Light) с кириллицей — оно используется
   в 18 местах вёрстки; сознательно не подключено начертание без кириллицы
   (иначе русский текст молча переключался бы на Arial), поэтому
   font-weight: 300 отображается ближайшим зарегистрированным начертанием
   браузера (обычно 400) — см. отчёт по задаче 15, раздел про шрифт.
   ========================================================================== */

@font-face {
  font-family: 'Montserrat';
  src:
    url('/local/templates/fda/fonts/montserrat-regular.woff2') format('woff2'),
    url('/local/templates/fda/fonts/montserrat-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src:
    url('/local/templates/fda/fonts/montserrat-medium.woff2') format('woff2'),
    url('/local/templates/fda/fonts/montserrat-medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src:
    url('/local/templates/fda/fonts/montserrat-semibold.woff2') format('woff2'),
    url('/local/templates/fda/fonts/montserrat-semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src:
    url('/local/templates/fda/fonts/montserrat-bold.woff2') format('woff2'),
    url('/local/templates/fda/fonts/montserrat-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   template_styles.css — сводный файл стилей шаблона fdacompany.ru
   Собран из живых (используемых) стилей всех 15 страниц выгрузки Tilda.
   Источники: docs/css/main-used.css, docs/css/pages/*-used.css,
   docs/css/overrides.md, docs/design-tokens.md, docs/css/_report-all-pages.md.
   Методология и решения по сведению расхождений — docs/css/_report-template.md.
   Файл не минифицирован, поддерживается руками.
   ========================================================================== */

/* ==========================================================================
   1. ПЕРЕМЕННЫЕ
   ========================================================================== */

:root {
  /* Цвет текста. На главной по докам задачи 2 встречалось три почти
     неразличимых оттенка чёрного (#000000, #232121, #222) в разных блоках —
     сведены к одному, см. docs/css/_report-template.md, п. 3. Задача 35,
     часть 18: чистый чёрный смягчён до #1a1a1a (один из вариантов,
     что рассматривались ещё в задаче 2) — читается мягче, разница на
     глаз почти не заметна, но заметно меньше "режет" на белом фоне при
     чтении длинных абзацев. */
  --color-text: #1a1a1a;
  --color-white: #ffffff;

  /* Акценты бренда */
  --color-accent-green: #06895a;      /* hover пунктов меню шапки (главная) */
  /* Задача 36, часть 3: было #ff8562 (оранжевый) — наследие шаблона
     Тильды, к фирменным цветам не относится; заметно стало, когда задача
     35 впервые применила переменную. Теперь — тёмный оттенок фирменного
     зелёного: #4ea864 даёт на белом 2.95:1, #06895a — 4.44:1 (оба ниже
     4.5:1 по WCAG AA), #067a50 — 5.37:1 на белом, 4.93:1 на фоне формы
     #f5f5f5, 4.67:1 на #efefef. */
  --color-link: #067a50;
  --color-rating-gold: #f5a623;       /* задача 35, часть 8: только звёзды рейтинга отзывов, не декоративный акцент */

  /* Задача 36: единая шкала вертикальных отступов для всех контентных
     блоков (шапка, подвал и сетка каталога на главной — вне шкалы).
     Белая секция получает половину межсекционного отступа сверху и
     снизу — две белые подряд дают ровно --space-section. Цветная
     полоса (серый/мятный фон) — полный --space-section внутри: смену
     фона глаз и так читает как границу, а внутри заливки нужен воздух.
     Значения на планшете/телефоне — ниже, в медиа-запросах после :root. */
  --space-section: 100px;
  --space-half: calc(var(--space-section) / 2);
  --space-head: 40px;   /* заголовок блока → содержимое */
  --space-item: 24px;   /* между элементами блока */
  --header-h: 138px;    /* фиксированная шапка, см. .site-header; 143px на 981-1200, 75px на ≤980 (замерено, задача 37) */
  /* Задача 37, часть 3: крошки с отступом --space-item сверху и снизу и
     строкой 20px — высота считается из шкалы и меняется вместе с ней. */
  --breadcrumbs-h: calc(20px + 2 * var(--space-item));

  /* Кнопка CTA: чёрный вариант — основной (7 страниц из 10 с этой кнопкой),
     зелёный — модификатор (3 страницы: /terms, /vacancy, /contacts).
     Требует решения заказчика, см. docs/css/_report-template.md, п. 4. */
  --color-btn-bg: #000000;
  --color-btn-text: #ffffff;
  --color-btn-bg-accent: #4ea864;     /* модификатор .t-btnflex_accent */
  --color-btn-bg-accent-hover: #006838;

  /* Фон подвала — градиент (см. docs/design-tokens.md); шапка — сплошной белый */
  --color-footer-from: #002107;
  --color-footer-to: #50a964;
  --color-header-bg: var(--color-white);

  /* Служебные/акцентные цвета форм (библиотечные дефолты Tilda) */
  --color-focus-outline: #2015ff;
  --color-focus-shadow: #0096ff;
  --color-form-error-bg: #f95d51;
  --color-form-success-bg: #62c584;
  --color-input-border: #c9c9c9;

  /* Шрифт. FiraSans и Caveat подключены в head, но нигде не используются
     (задача 2) — в переменные не выносятся и в файл не включены, см. п. 5
     отчёта. */
  --font-main: 'Montserrat', Arial, sans-serif;

  /* Размеры шрифта — по факту точечных переопределений и общей шкалы
     модификаторов (docs/design-tokens.md, docs/css/overrides.md) */
  --fs-h1-lg: 96px;     /* обложка: /, /about, /terms */
  --fs-h1-lg-mobile: 36px;
  --fs-h1-md: 72px;     /* обложка: /lab и все /production/* */
  --fs-h1-md-mobile: 32px;
  --fs-h1-manufacture: 40px; /* /manufacture — третий, отдельный уровень (T467) */
  --fs-subtitle: 24px;
  --fs-subtitle-mobile: 16px;
  --fs-cta-title: 32px;      /* T588 */
  --fs-cta-title-mobile: 24px;
  --fs-cta-descr: 20px;
  --fs-cta-descr-mobile: 16px;
  --fs-body: 18px;
  --fs-body-mobile: 14px;
  --fs-caption: 14px;
  --fs-caption-mobile: 12px;

  /* Сетка/контейнер — 12-колоночная система Tilda */
  --container-max: 1200px;
  --container-max-tablet: 960px;
  --container-max-mobile: 640px;
  --grid-gutter: 20px;
  --grid-gutter-tablet: 10px;

  /* Брейкпоинты — сведены к единому набору Tilda (1200/980/640/480),
     см. docs/css/_report-template.md, п. 3. Использовать как ориентир
     при добавлении новых медиазапросов, CSS не умеет @media в var(). */
  --bp-desktop: 1200px;
  --bp-tablet: 980px;
  --bp-mobile: 640px;
  --bp-mobile-sm: 480px;

  /* Кнопки/поля форм */
  --btn-height: 60px;
  --btn-radius: 60px;
  --input-height: 60px;
  --input-radius: 5px;
  --checkbox-size: 20px;
  --checkbox-border-width: 2px;
  --checkbox-radius: 0px;
}

@media screen and (min-width: 981px) and (max-width: 1200px) {
  :root {
    --header-h: 143px;
  }
}

@media screen and (max-width: 980px) {
  :root {
    --space-section: 64px;
    --space-head: 32px;
    --space-item: 20px;
    --header-h: 75px;
  }
}

@media screen and (max-width: 640px) {
  :root {
    --space-section: 48px;
    --space-head: 24px;
    --space-item: 16px;
  }
}

/* ==========================================================================
   2. СБРОС И БАЗОВЫЕ ЭЛЕМЕНТЫ
   ========================================================================== */

.t-body {
  margin: 0px;
}

.t-records {
  -webkit-font_smoothing: antialiased;
  background-color: none;
  -webkit-font-smoothing: antialiased;
}

.t-records a {
  color: #ff8562;
  text-decoration: none;
}

/* Задача 35, части 12/18: --color-link существовал как переменная, но
   ни разу не применялся ни в одном правиле (только у .t-records —
   класс из библиотеки форм Tilda, в наших шаблонах не используется
   нигде, проверено grep по всем .php). Ссылки в собственном тексте
   (согласие в формах, /privacy, /consent) оставались дефолтным синим
   браузера. Общее правило низкой специфичности (голый тег) — не
   перебивает ни один из специализированных классов ссылок на сайте
   (у всех них есть свой класс, специфичность выше), меняет только то,
   что раньше не было стилизовано вообще. */
a {
  color: var(--color-link);
}

.t-records a[href^=tel] {
  color: inherit;
  text-decoration: none;
}

.t-records ol {
  padding-left: 22px;
  margin-top: 0px;
  margin-bottom: 10px;
}

.t-records ul {
  padding-left: 20px;
  margin-top: 0px;
  margin-bottom: 10px;
}

#allrecords {
  -webkit-font-smoothing: antialiased;
}

#allrecords a {
  color: #ff8562;
  text-decoration: none;
}

#allrecords a,#allrecords button,#allrecords .t-radio,#allrecords .t-checkbox,#allrecords .t-img-select {
  outline: none;
}

#allrecords a:focus-visible,#allrecords button:focus-visible,#allrecords .t-focusable,#allrecords .t-focusable .t-btn,#allrecords .t-focusable .t-btntext,#allrecords .t-img-select:focus-visible+.t-img-select__indicator,#allrecords .t-img-select:focus-visible+.t-img-select__indicator:after,#allrecords .t-radio:focus-visible+.t-radio__indicator,#allrecords .t-checkbox:focus-visible+.t-checkbox__indicator {
  outline-color: #2015FF;
  outline-offset: 4px;
  outline-style: auto;
}

#allrecords a[href^=tel] {
  color: inherit;
  text-decoration: none;
}

#allrecords b,#allrecords strong {
  font-weight: 700;
}

#allrecords ol {
  padding-left: 22px;
  margin-top: 0px;
  margin-bottom: 10px;
}

#allrecords ul {
  padding-left: 20px;
  margin-top: 0px;
  margin-bottom: 10px;
}

body {
  background-color: none;
}

img:not([src]) {
  visibility: hidden;
}

/* ==========================================================================
   3. ТИПОГРАФИКА
   Базовые роли (t-title/t-descr/t-heading/t-name/t-text) и размерная шкала
   модификаторов (_xs..._xxl), фактически используемая хотя бы на одной
   странице. Точечные переопределения конкретных заголовков (H1, CTA,
   карточки) — внутри соответствующих блоков в разделе 7.
   ========================================================================== */

.t-descr {
  font-family: 'Montserrat',Arial,sans-serif;
  font-weight: 300;
  color: #000000;
}

.t-descr_md {
  font-size: 18px;
  line-height: 1.55;
}

.t-descr_sm {
  font-size: 16px;
  line-height: 1.55;
}

.t-descr_xl {
  font-size: 22px;
  line-height: 1.5;
}

.t-descr_xs {
  font-size: 14px;
  line-height: 1.55;
}

.t-descr_xxl {
  font-size: 24px;
  line-height: 1.45;
}

.t-descr_xxs {
  font-size: 12px;
  line-height: 1.55;
}

.t-descr_xxxl {
  font-size: 28px;
  line-height: 1.45;
  letter-spacing: .45;
}

.t-heading {
  font-family: 'Montserrat',Arial,sans-serif;
  font-weight: 500;
  color: #000000;
}

.t-heading_lg {
  font-size: 30px;
  line-height: 1.17;
}

.t-heading_md {
  font-size: 28px;
  line-height: 1.17;
}

.t-heading_xs {
  font-size: 24px;
  line-height: 1.23;
}

.t-name {
  font-family: 'Montserrat',Arial,sans-serif;
  font-weight: 500;
  color: #000000;
}

.t-name_lg {
  font-size: 20px;
  line-height: 1.35;
}

.t-name_md {
  font-size: 18px;
  line-height: 1.35;
}

.t-name_xl {
  font-size: 22px;
  line-height: 1.35;
}

.t-text {
  font-family: 'Montserrat',Arial,sans-serif;
  font-weight: 300;
  color: #000000;
}

.t-text_md {
  font-size: 18px;
  line-height: 1.55;
}

.t-text_sm {
  font-size: 16px;
  line-height: 1.55;
}

.t-text_xs {
  font-size: 13px;
  line-height: 1.55;
}

.t-text-impact {
  font-family: 'Montserrat',Arial,sans-serif;
  font-weight: 300;
  color: #000000;
}

.t-text-impact_md {
  font-size: 38px;
  line-height: 1.35;
}

.t-title {
  font-family: 'Montserrat',Arial,sans-serif;
  font-weight: 400;
  color: #000000;
}

.t-title_lg {
  font-size: 64px;
  line-height: 1.23;
}

.t-title_md {
  font-size: 52px;
  line-height: 1.23;
}

.t-title_xl {
  font-size: 72px;
  line-height: 1.17;
}

.t-title_xs {
  font-size: 42px;
  line-height: 1.23;
}

.t-title_xxs {
  font-size: 36px;
  line-height: 1.23;
}

/* ==========================================================================
   4. СЕТКА И КОНТЕЙНЕРЫ
   12-колоночная система Tilda (source/css/tilda-grid-3.0.min.css) — в
   постраничных used.css не встречается (общие библиотеки не входили в
   разбор used/unused задач 2/4, см. docs/css/_report-template.md, п. 6),
   но нужна для работы верстки, взята из библиотеки без изменений по
   значениям, брейкпоинты сведены к общему набору 1200/980.
   ========================================================================== */

.t-container {
  margin-left:auto;
  margin-right:auto;
  width:100%;
  max-width:1200px;
  padding:0;
}

.t-container.flexx {
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:flex;
}

.t-container_flex {
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:flex;
}

.t-container:before,.t-container:after,.t-container_10:before,.t-container_10:after,.t-container_8:before,.t-container_8:after,.t-container_100:before,.t-container_100:after {
  display:table;
  content:" ";
  width:0;
}

.t-container:after,.t-container_10:after,.t-container_8:after,.t-container_100:after {
  clear:both;
}

.t-col {
  display:inline;
  float:left;
  margin-left:20px;
  margin-right:20px;
  width:100%;
}

.t-col.flexx {
  align-items:stretch;
  height:inherit;
  margin-top:auto;
  margin-bottom:auto;
}

.t-col_1 {
  max-width:60px;
}

.t-col_2 {
  max-width:160px;
}

.t-col_3 {
  max-width:260px;
}

.t-col_4 {
  max-width:360px;
}

.t-col_5 {
  max-width:460px;
}

.t-col_6 {
  max-width:560px;
}

.t-col_7 {
  max-width:660px;
}

.t-col_8 {
  max-width:760px;
}

.t-col_9 {
  max-width:860px;
}

.t-col_10 {
  max-width:960px;
}

.t-col_11 {
  max-width:1060px;
}

.t-col_12 {
  max-width:1160px;
}

.t-col_100 {
  max-width:100vw;
}

.t-prefix_1 {
  padding-left:100px;
}

.t-prefix_2 {
  padding-left:200px;
}

.t-prefix_3 {
  padding-left:300px;
}

.t-prefix_4 {
  padding-left:400px;
}

.t-prefix_5 {
  padding-left:500px;
}

.t-prefix_6 {
  padding-left:600px;
}

.t-prefix_7 {
  padding-left:700px;
}

.t-prefix_8 {
  padding-left:800px;
}

.t-prefix_9 {
  padding-left:900px;
}

.t-prefix_10 {
  padding-left:1000px;
}

.t-prefix_11 {
  padding-left:1100px;
}

.t-prefix_12 {
  padding-left:1200px;
}

.t-width {
  width:100%;
}

.t-width_1 {
  max-width:60px;
}

.t-width_2 {
  max-width:160px;
}

.t-width_3 {
  max-width:260px;
}

.t-width_4 {
  max-width:360px;
}

.t-width_5 {
  max-width:460px;
}

.t-width_6 {
  max-width:560px;
}

.t-width_7 {
  max-width:660px;
}

.t-width_8 {
  max-width:760px;
}

.t-width_9 {
  max-width:860px;
}

.t-width_10 {
  max-width:960px;
}

.t-width_11 {
  max-width:1060px;
}

.t-width_12 {
  max-width:1160px;
}

.t-width_100 {
  max-width:100%;
}

/* ==========================================================================
   5. ШАПКА
   На всех 15 страницах шапка собрана через Zero Block (T396) — абсолютное
   позиционирование каждого элемента отдельно на 5 брейкпоинтах, задаётся
   не классами, а инлайновыми стилями, привязанными к случайным id записи
   Tilda (см. docs/css/_report.md, п. 3). Такие правила не являются
   переиспользуемым CSS и НЕ включены в этот файл — цвета, шрифты и
   геометрия шапки задокументированы в docs/design-tokens.md, по ним шапку
   нужно будет свёрстать заново в header.php обычной сеткой (там же
   установлено, что абсолютное позиционирование для этого не требуется).

   Ниже — только реально переиспользуемые части: мобильное полноэкранное
   меню (T280, стандартный блок Tilda, не Zero Block) и служебные классы
   каркаса Zero Block (T396), которые понадобятся, если шапку всё же
   решат собирать через артборд-механизм Tilda.
   ========================================================================== */

/* Видимость шапки/мобильного меню — известный дефект (docs/css/_report.md,
   п. 3): было два порога (1200 и 980), в диапазоне 981–1200px не
   показывалось ни одно меню. Исправлено: единая граница 980px.
   Базовое display здесь намеренно не задаётся — у исходных Tilda-классов
   его тоже не было (display определяется другими классами элемента),
   переопределяется только в мобильном брейкпоинте ниже. */
@media screen and (max-width: 980px) {
  .t-screenmin-1200px {
    display: none;
  }
  .t-screenmax-980px {
    display: block;
  }
}

/* T396 — служебные классы каркаса Zero Block */
.t396__artboard {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.t396__carrier {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  -moz-transform: unset;
}

.t396__elem {
  position: absolute;
  box-sizing: border-box;
  display: table;
}

.t396__elem-flex {
  position: relative!important;
  left: initial!important;
  top: initial!important;
  height: fit-content;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.t396__filter {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100vh;
}

/* T280 — мобильное полноэкранное меню (открывается бургер-иконкой) */
.t280__bottom {
  position: absolute;
  bottom: 40px;
  right: 0;
  left: 0;
  text-align: center;
  margin: 0 auto;
  -webkit-transform: translateY(30%) scale(.9);
  transform: translateY(30%) scale(.9);
  transition: 0.2s ease-in-out;
  opacity: 0;
}

.t280__container {
  width: 100%;
  z-index: 990;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  transform: translate3d(0,0,0);
}

.t280__container__bg {
  position: absolute;
  inset: 0;
  z-index: 10;
}

.t280__container.t280__positionabsolute {
  position: absolute;
}

.t280__logo {
  position: relative;
  z-index: 1;
  display: block;
  transition: opacity ease-in-out 0.2s;
}

.t280__logo__container {
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 100px;
  margin-right: auto;
}

.t280__logo__container::after {
  content: '';
  display: block;
  min-height: inherit;
  font-size: 0;
}

.t280__logo__content {
  height: 100%;
}

.t280__logo__img {
  display: block;
  height: 100%;
}

.t280__logo:focus-visible {
  opacity: .8;
}

.t280__logo:hover {
  opacity: .8;
}

.t280__menu {
  z-index: 1;
  text-align: center;
  position: absolute;
  top: 45%;
  -webkit-transform: translateY(-30%) scale(.9);
  transform: translateY(-30%) scale(.9);
  transition: 0.2s ease-in-out;
  right: 0;
  left: 0;
  opacity: 0;
  margin: 0 auto;
}

.t280__menu__bg {
  position: fixed;
  inset: 0;
}

.t280__menu__container {
  position: relative;
  height: 100%;
  margin: 0 auto;
}

.t280__menu__content {
  position: relative;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  z-index: 15;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.t280__menu__item {
  margin: 20px auto;
}

.t280__menu__item:first-child {
  margin-top: 0!important;
}

.t280__menu__item:last-child {
  margin-bottom: 0!important;
}

.t280__menu__link {
  display: block;
  margin: 20px auto;
}

.t280__menu__wrapper {
  position: fixed;
  inset: 0;
  z-index: -100;
  opacity: 0;
  transition: 0.3s ease-in-out;
  overflow-y: auto;
  padding: 0 20px;
  display: none;
}

#allrecords ul.t280__list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/* Бургер-иконка и общие декоративные элементы шапки, переиспользуемые вне Zero Block */
.t280 {
  transition: visibility 0.2s,opacity 0.2s;
}

.t280 .t-sociallinks__item,.t280__social__item {
  display: inline-block;
  margin: 0 3px;
}

.t280__bottom__item,.t280 .t-sociallinks {
  margin-top: 20px;
  display: block;
}

.t396 {
  -webkit-text-size-adjust: 100%;
}

.t396 .tn-atom {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

.t396 .tn-atom ul,.t396 .tn-atom ol {
  margin-bottom: 0;
}

.t396 .tn-atom__button-border {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  transition-duration: inherit;
  transition-timing-function: inherit;
  pointer-events: none;
}

.t396 .tn-atom__button-border::after {
  opacity: 0;
  transition-property: opacity;
  transition-duration: inherit;
  transition-timing-function: inherit;
}

.t396 .tn-atom__button-border::before,.t396 .tn-atom__button-border::after {
  -webkit-backface-visibility: hidden;
  position: absolute;
  inset: 0;
  content: '';
  border-radius: inherit;
  z-index: 1;
}

.t396 .tn-atom__button-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  min-width: 0;
}

.t396 .tn-atom__button-text {
  flex: 1 1 0;
  text-overflow: ellipsis;
}

.t396 .tn-atom__img {
  width: 100%;
  display: block;
}

.t396 .tn-elem[data-elem-type='button'] {
  display: block;
}

.t396 .tn-elem[data-elem-type='button'] .tn-atom {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.t396 .tn-elem[data-elem-type='button'] .tn-atom::after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
}

.t396 a.tn-atom {
  text-decoration: none;
}

#allrecords .t-descr a:focus-visible,#allrecords .t-sociallinks a:focus-visible,#allrecords .ya-share2__link:focus-visible {
  outline-offset: 2px;
}

#allrecords .t280 ul.t-sociallinks__wrapper {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

/* ==========================================================================
   6. ПОДВАЛ
   Тоже Zero Block (T396), та же оговорка, что и для шапки — абсолютное
   позиционирование по инлайн-стилям в исходнике не переносится. Фон —
   градиент var(--color-footer-from) → var(--color-footer-to), текст белый
   (var(--color-white)), см. docs/design-tokens.md. Переиспользуемых классов
   у подвала почти нет — вся его вёрстка Zero Block-специфична.
   ========================================================================== */

.t396__artboard {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.t396__carrier {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  -moz-transform: unset;
}

.t396__elem {
  position: absolute;
  box-sizing: border-box;
  display: table;
}

.t396__elem-flex {
  position: relative!important;
  left: initial!important;
  top: initial!important;
  height: fit-content;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.t396__filter {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100vh;
}

.t396 {
  -webkit-text-size-adjust: 100%;
}

.t396 .tn-atom {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

.t396 .tn-atom ul,.t396 .tn-atom ol {
  margin-bottom: 0;
}

.t396 .tn-atom__img {
  width: 100%;
  display: block;
}

.t396 .tn-elem[data-elem-type='button'] {
  display: block;
}

.t396 .tn-elem[data-elem-type='button'] .tn-atom {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.t396 .tn-elem[data-elem-type='button'] .tn-atom::after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
}

.t396 a.tn-atom {
  text-decoration: none;
}

/* ==========================================================================
   7. БЛОКИ, СГРУППИРОВАННЫЕ ПО ТИПУ TILDA
   Полный перечень типов и назначение — docs/css/blocks-inventory.md.
   T396/T280/T702 (шапка, мобильное меню, попапы) вынесены в разделы 5–6
   и не повторяются здесь.

   Из 27 типов блоков инвентаризации здесь 25 — для T270 и T117 стилей
   нет ни в used, ни в unused CSS ни одной из 15 страниц (реальный
   пробел в исходнике, не ошибка разбора):
   - T270 (/, пустой декоративный разделитель) — record не содержит
     ни одного дочернего элемента с классом, только пустой div-обёртка;
     переносить в Битрикс нечего, для эквивалентного отступа достаточно
     обычного spacer-блока без CSS.
   - T117 (/contacts, интерактивная карта) — блок целиком состоит из
     стороннего iframe-виджета (Яндекс/Google Карты), Tilda не выдаёт
     под него собственных CSS-правил; в Битриксе воспроизводится тем же
     iframe-embed, а не CSS-компонентом.
   ========================================================================== */

/* T001 — обложка с заголовком, подзаголовком и фоновым фото
   страницы: /vacancy */
.t-align_center .t001__title,.t-align_center .t001__descr,.t-align_center .t001__uptitle {
  margin-left: auto;
  margin-right: auto;
}

.t001__descr {
  padding: 0 0 30px;
  color: #fff;
}

.t001__descr_center {
  max-width: 700px;
  margin: 0 auto;
}

.t001__descr_center a {
  font-weight: 600;
}

.t001__descr_center a:not([style]) {
  color: #fff!important;
}

.t001__title {
  padding: 24px 0 38px;
  letter-spacing: .5px;
  color: #fff;
}

.t001__wrapper {
  padding-top: 42px;
  padding-bottom: 42px;
}

/* T004 — простой текстовый блок (юридический текст)
   страницы: /privacy */
.t004 {
  padding-top: 8px;
  padding-bottom: 6px;
  position: relative;
}

.t004 table {
  border-collapse: collapse;
  font-size: 1em;
  width: 100%;
}

.t004 table td,.t004 table th {
  padding: 5px;
  border: 1px solid #ddd;
  vertical-align: top;
}

.t004 table thead td,.t004 table th {
  font-weight: 700;
  border-bottom-color: #888;
}

/* T102 — обложка первого экрана: заголовок + подзаголовок
   страницы: /, /about, /terms, /lab, все 6 /production/* */
.t-align_center .t102__title,.t-align_center .t102__descr,.t-align_center .t102__uptitle {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.t102__descr {
  padding: 0 0 30px;
  color: #fff;
}

.t102__descr_center {
  max-width: 700px;
  margin: 0 auto;
}

.t102__title {
  margin: 74px 0 54px;
  font-size: 104px;
  color: #fff;
}

/* T119 — простой текстовый блок-преамбула
   страницы: /manufacture, /terms */
.t119__preface {
  color: #000;
  font-size: 30px;
  line-height: 1.35;
}

/* T142 — одиночная кнопка-баннер
   страницы: /terms */
.t142 {
  width: 100%;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

/* T225 — обложка-баннер с заголовком (форма брифа)
   страницы: /order */
.t225__title {
  padding-top: 8px;
  padding-bottom: 3px;
}

/* T467 — обложка раздела без фонового фото
   страницы: /manufacture */
.t467__title {
  margin-bottom: 40px;
}

/* T472 — текстовый intro-блок с крупным текстом по центру
   страницы: /lab */
.t472 .t-section__descr {
  max-width: unset;
}

.t472__descr {
  margin-bottom: 80px;
}

/* T478 — блок «текст + фоновая картинка» в две колонки
   страницы: /, /about */
.t478 .t-btn {
  margin-top: 60px;
}

.t478__blockimg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.t478__container_middle {
  align-items: center;
}

.t478__content {
  display: table-cell;
}

.t478__descr {
  margin-top: 23px;
}

.t478__sizer.t-col_12 {
  width: 1160px!important;
  max-width: 1160px!important;
}

.t478__sizer.t-col_3 {
  width: 260px!important;
  max-width: 260px!important;
}

.t478__sizer.t-col_4 {
  width: 360px!important;
  max-width: 360px!important;
}

.t478__sizer.t-col_6 {
  width: 560px!important;
  max-width: 560px!important;
}

.t478__textwrapper {
  display: table;
  width: 100%;
}

.t478__title {
  margin-bottom: 24px;
}

/* T490 — сетка из 3 карточек с иконкой (ценности компании)
   страницы: /vacancy */
.t490 .t-card__title,.t490 .t-card__descr {
  overflow-wrap: break-word;
}

.t490 .t-heading_md {
  margin-top: 12px;
  margin-bottom: 25px;
}

.t490 .t-name_xl {
  margin-top: 18px;
  margin-bottom: 25px;
}

.t490__col {
  float: none;
}

.t490__container li ul {
  list-style-type: disc;
}

.t490__img {
  width: 100px;
  height: auto;
  max-width: 100%;
  margin-bottom: 25px;
}

.t490__wrappercenter {
  padding-right: 20px;
  padding-left: 20px;
}

#allrecords .t490__container {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  flex-wrap: wrap;
  row-gap: 90px;
}

/* T508 — список пунктов с иконкой-чекмарком
   страницы: /terms */
.t508 {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: 100%;
}

.t508 .t-list__item {
  margin-top: 55px;
}

.t508 .t-list__item:first-child {
  margin-top: 0!important;
}

.t508__container {
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.t508__container li ul {
  list-style-type: disc;
}

.t508__img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.t508__imgwrapper {
  width: 55px;
}

.t508__imgwrapper,.t508__bgimg {
  margin-right: 40px;
}

.t508__textwrapper {
  width: 100%;
}

#allrecords .t508__container {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

/* T509 — карточка «изображение + заголовок + текст» в 2 колонки
   страницы: /terms, /lab */
.t509 .t-card__title {
  margin-bottom: 24px;
}

.t509__blockimg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  max-width: 100%;
  width: 100%;
}

.t509__col {
  height: fit-content;
  float: none;
}

.t509__content {
  display: table-cell;
}

.t509__imgwrapper {
  margin: 0 auto;
}

.t509__leftcol {
  margin-left: 0;
}

.t509__marginauto {
  margin-left: auto;
  margin-right: auto;
}

.t509__mobileimg {
  display: none;
}

.t509__rightcol {
  margin-right: 0;
}

.t509__row {
  float: none;
  margin-top: var(--column-margin,120px);
}

.t509__row_middle {
  align-items: center;
}

.t509__row:first-child {
  margin-top: 0;
}

.t509__textwrapper {
  display: table;
  width: 100%;
}

/* T524 — сетка карточек «команда»
   страницы: /about */
.t524 .t-list__container_inrow1 .t-list__item:first-child,.t524 .t-list__container_inrow2 .t-list__item:nth-child(-n+2),.t524 .t-list__container_inrow3 .t-list__item:nth-child(-n+3),.t524 .t-list__container_inrow4 .t-list__item:nth-child(-n+4) {
  margin-top: 0!important;
}

.t524 .t-list__item {
  margin-top: 90px;
}

.t524__bgimg {
  width: 100%;
  max-width: 100%;
  padding-bottom: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.t524__bottommargin_sm {
  margin-bottom: 4px;
}

.t524__container {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.t524__container li ul {
  list-style-type: disc;
}

.t524__img_circle {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

.t524__imgwrapper {
  width: 200px;
  max-width: 100%;
  margin-bottom: 20px;
}

.t524__itemwrapper {
  margin: 0 auto;
}

.t524__persdescr {
  color: #7a7a7a;
}

.t524__wrappercenter {
  padding-right: 20px;
  padding-left: 20px;
}

#allrecords .t524__container {
  margin-bottom: 0;
  padding-left: 0;
}

/* T588 — CTA-баннер по центру: заголовок + подзаголовок + кнопка
   страницы: /, /about, /vacancy, /contacts, все 6 /production/* */
.t588 {
  text-align: center;
}

.t588 .t-btn {
  margin-bottom: 20px;
  margin-right: 20px;
}

.t588 .t-btn:last-of-type {
  margin-right: 0;
}

.t588__buttons {
  margin-top: 70px;
}

.t588__buttons-wrapper {
  display: table;
  position: relative;
}

.t588__title {
  margin-bottom: 25px;
}

/* T676 — текстовый блок-цитата с декоративными разделителями
   страницы: /vacancy */
.t676 .t-divider {
  position: relative;
}

.t676__divider {
  width: 120px;
  margin: 0 auto;
  display: block;
}

.t676__divider_rotate {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.t676__text-impact {
  text-align: center;
  margin-top: 44px;
  margin-bottom: 54px;
  line-height: 1.5;
}

/* T678 — форма (поля брифа)
   страницы: /order */
.t678 .t-form__inputsbox {
  -webkit-transition: max-height 0.3s cubic-bezier(.19,1,.22,1);
  transition: max-height 0.3s cubic-bezier(.19,1,.22,1);
  max-height: 30000px;
}

.t678 .t-form__inputsbox_horizontal.t-form__screen .t-form__submit,.t678 .t-form__inputsbox_vertical-form .t-form__submit {
  margin-top: 30px;
}

.t678 .t-form__inputsbox_vertical-form .t-form__errorbox-middle,.t678 .t-form__inputsbox_horizontal+.t-form__errorbox-bottom {
  display: block;
}

.t678 .t-form__inputsbox_vertical-form .t-input-group {
  margin-bottom: 25px;
}

.t678 .t-form__inputsbox_vertical-form+.t-form__errorbox-bottom,.t678 .t-form__inputsbox_horizontal .t-form__errorbox-middle {
  display: none;
}

.t678 .t-form__submit {
  display: block;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}

.t678 .t-form_bbonly .t-form__inputsbox_vertical-form .t-input-group {
  margin-bottom: 35px;
}

.t678 .t-form_bbonly .t-input-title {
  padding-bottom: 0;
  margin-bottom: 0;
}

.t678 .t-input-block textarea {
  padding-top: 17px;
}

.t678 .t-input-title {
  padding-bottom: 5px;
}

.t678 .t678__form-bottom-text {
  margin-top: 30px;
  text-align: center;
}

/* T688 — сетка карточек-ссылок с фоновым изображением (продуктовая сетка главной)
   страницы: / */
.t688 .t-card__link {
  display: block;
  height: 100%;
  text-decoration: none;
}

.t688 .t-card__title {
  color: #000000;
  margin-bottom: 10px;
}

.t688 .t-card__title a {
  display: inline-block;
}

.t688 a:hover .t688__img-wrapper {
  opacity: .8;
}

.t688__columns {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--desktop-row-gap,40px);
  padding-left: 0!important;
  margin-bottom: 0!important;
}

.t688__columns .t-col {
  display: flex;
  flex-direction: column;
}

.t688__img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.t688__img-separator {
  padding-top: 70%;
}

.t688__img-wrapper {
  position: relative;
  display: block;
  -webkit-transition: all ease-in-out 0.2s;
  transition: all ease-in-out 0.2s;
}

.t688__inner-col {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: inherit;
  overflow: hidden;
}

.t688__textwrapper {
  position: relative;
  display: block;
  padding: 30px;
  height: 100%;
  background: #fff;
}

/* T718 — блок «контакты + форма» (форма отклика на вакансию)
   страницы: /vacancy */
.t718 .t-form__inputsbox {
  -webkit-transition: max-height 0.3s cubic-bezier(.19,1,.22,1);
  transition: max-height 0.3s cubic-bezier(.19,1,.22,1);
  max-height: 10000px;
}

.t718 .t-form__inputsbox_horizontal.t-form__screen .t-form__submit,.t718 .t-form__inputsbox_vertical-form .t-form__submit {
  margin-top: 30px;
}

.t718 .t-form__inputsbox_vertical-form .t-form__errorbox-middle,.t718 .t-form__inputsbox_horizontal+.t-form__errorbox-bottom {
  display: block;
}

.t718 .t-form__inputsbox_vertical-form .t-input-group {
  margin-bottom: 25px;
}

.t718 .t-form__inputsbox_vertical-form+.t-form__errorbox-bottom,.t718 .t-form__inputsbox_horizontal .t-form__errorbox-middle {
  display: none;
}

.t718 .t-form__submit {
  display: block;
  height: 100%;
  vertical-align: middle;
}

.t718 .t-input {
  background-color: transparent;
  -webkit-appearance: none;
}

.t718 .t-input-block textarea {
  padding-top: 17px;
  background-color: transparent;
}

.t718 .t-input-title {
  padding-bottom: 5px;
}

.t718 .t718__contacts {
  margin-bottom: 40px;
}

.t718 .t718__contentbox {
  display: table;
  width: 100%;
  color: #fff;
}

.t718 .t718__contentwrapper {
  display: table-cell;
  vertical-align: middle;
}

.t718 .t718__form-bottom-text {
  margin-top: 20px;
}

/* T764 — блок «текст слева / фотогалерея справа»
   страницы: /manufacture */
.t764 .t-slds__arrow-left {
  left: 20px;
}

.t764 .t-slds__arrow-right {
  right: 20px;
}

.t764__textwrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.t764__title,.t764__descr {
  width: 100%;
}

/* T820 — список преимуществ работы
   страницы: /vacancy */
.t820 .t-list__item {
  margin-top: 55px;
}

.t820 .t-list__item:nth-child(-n+2) {
  margin-top: 0!important;
}

.t820__bgimg {
  width: 55px;
  height: 55px;
  max-width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.t820__container {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.t820__container li ul {
  list-style-type: disc;
}

.t820__imgwrapper,.t820__bgimg {
  margin-right: 20px;
}

#allrecords ul.t820__container {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

/* T841 — список пунктов с иконкой-чекмарком
   страницы: /about */
.t841__col {
  margin-top: var(--column-margin,55px);
}

.t841__col:nth-child(-n+2) {
  margin-top: 0;
}

.t841__container {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.t841__container li ul {
  list-style-type: disc;
}

.t841__img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.t841__imgwrapper {
  width: 55px;
}

.t841__imgwrapper,.t841__bgimg {
  margin-right: 20px;
}

/* T842 — сетка карточек категорий
   страницы: все 6 /production/* */
.t842__bottommargin {
  margin-bottom: 15px;
}

.t842__col {
  margin-top: var(--column-margin,40px);
}

.t842__col:nth-child(-n+2) {
  margin-top: 0;
}

.t842__container {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.t842__inner-col {
  position: relative;
  height: 100%;
}

.t842__wrap {
  display: flex;
  height: 100%;
}

.t842__wrap_right {
  padding: 30px 30px 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* T846 — секция «заголовок + список карточек» (ценности)
   страницы: /about */
.t846__bottommargin {
  margin-bottom: 14px;
}

.t846__col {
  margin-top: var(--column-margin,65px);
}

.t846__col:first-child {
  margin-top: 0;
}

.t846__container li ul {
  list-style-type: disc;
}

/* T849 — аккордеон вакансий
   страницы: /vacancy */
.t849 .t849__content ol {
  padding-left: 30px!important;
  list-style-position: outside;
  text-indent: 0;
}

.t849__border {
  width: 100%;
  height: 1px;
  background-color: #eee;
}

.t849__content {
  display: none;
  overflow: hidden;
  -webkit-transition: max-height ease-in-out 0.3s,opacity ease-in-out 0.3s;
  -o-transition: max-height ease-in-out 0.3s,opacity ease-in-out 0.3s;
  transition: max-height ease-in-out 0.3s,opacity ease-in-out 0.3s;
}

.t849__header {
  position: relative;
  cursor: pointer;
  border-top: 1px solid #eee;
}

.t849__icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 40px;
  height: 40px;
  stroke: #000000;
  fill: transparent;
  transition-property: fill,stroke;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

.t849__lines {
  transition: transform 0.3s ease-in-out;
  transform-origin: center;
}

.t849__text {
  margin-bottom: 20px;
}

.t849__textwrapper {
  padding: 0 0 20px;
}

.t849__title {
  display: inline-block;
}

.t849__trigger-button {
  position: relative;
  width: 100%;
  padding: 27px 50px 27px 0;
  text-align: left;
  background-color: transparent;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}

#allrecords .t849__text>ul,#allrecords .t849__text>ol {
  -webkit-padding-start: 26px;
}

#allrecords button.t849__trigger-button:focus-visible {
  outline-offset: 2px;
}

/* T1056 — блок контактной информации, 4 колонки
   страницы: /contacts */
.t1056__name {
  margin-bottom: 10px;
}

.t1056__row {
  display: flex;
}

.t1056__row .t-col {
  float: none;
}

.t1056__text {
  opacity: .7;
}

/* T702 — каркас всплывающего окна.
   Из 5 форм-попапов в исходнике 4 («Экстренный вызов», «Записаться
   онлайн», «Запись к врачу», «Оставьте свой отзыв») относятся к
   стороннему шаблону и не переносятся (docs/task-01). Форма «Обратный
   звонок» — общая для сайта форма обратного звонка, использует этот же
   каркас, поэтому он оставлен в файле. */
.t-popup {
  display: none;
}

.t702 .t-form__errorbox-item {
  word-break: normal;
  overflow-wrap: anywhere;
}

.t702 .t-form__inputsbox {
  -webkit-transition: max-height 0.3s cubic-bezier(.19,1,.22,1);
  transition: max-height 0.3s cubic-bezier(.19,1,.22,1);
  max-height: 20000px;
}

.t702 .t-form__inputsbox_horizontal.t-form__screen .t-form__submit,.t702 .t-form__inputsbox_vertical-form .t-form__submit {
  margin-top: 25px;
}

.t702 .t-form__inputsbox_vertical-form .t-form__errorbox-middle,.t702 .t-form__inputsbox_horizontal+.t-form__errorbox-bottom {
  display: block;
}

.t702 .t-form__inputsbox_vertical-form .t-input-group {
  margin-bottom: 25px;
}

.t702 .t-form__inputsbox_vertical-form+.t-form__errorbox-bottom,.t702 .t-form__inputsbox_horizontal .t-form__errorbox-middle {
  display: none;
}

.t702 .t-form__submit {
  display: block;
  height: 100%;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  margin-top: 25px;
}

.t702 .t-form_bbonly .t-input-title {
  padding-bottom: 0;
  margin-bottom: 0;
}

.t702 .t-input {
  background-color: transparent;
  -webkit-appearance: none;
}

.t702 .t-input-block textarea {
  padding-top: 17px;
  background-color: transparent;
}

.t702 .t-input-group {
  margin-bottom: 25px;
}

.t702 .t-input-title {
  padding-bottom: 5px;
}

.t702 .t-input::-ms-clear {
  width: 0;
  height: 0;
}

.t702 .t-submit {
  transform: translateZ(0);
  --height: 54px;
  width: 100%;
}

.t702 .t702__img {
  width: 100%;
  display: block;
  margin-top: -1px;
}

.t702 .t702__text-wrapper {
  margin-bottom: 24px;
}

.t702 .t702__title {
  margin-bottom: 11px;
}

.t702 .t702__wrapper {
  padding: 40px 45px;
}

/* ==========================================================================
   8. ФОРМЫ
   Реальные формы сайта: бриф (/order, T678), отклик на вакансию
   (/vacancy, часть T718), обратный звонок (T702, см. раздел 7). Общие
   классы — .t-input/.t-checkbox/.t-radio из библиотеки форм Tilda
   (source/css/tilda-forms-1.0.min.css), не входили в разбор used/unused
   задач 2/4 (общие библиотеки, см. п. 6 отчёта), добавлены отдельно —
   без них поля и чекбоксы не имеют размера. Значения даны через
   переменные раздела 1 там, где это реальные точечные overrides со
   страниц (граница, скругление 5px — см. docs/css/overrides.md), иначе —
   как в библиотеке.
   ========================================================================== */

/* Задача 11, п. 2.1/2.2 когда-то развела вид полей по страницам: на
   /order — подчёркивание (.t-input_bbonly), на /vacancy — рамка со
   скруглением 30px, у сквозной формы (задача 30) — то же подчёркивание,
   что у /order, "как ближайший к оригиналу вариант". Задача 35,
   часть 12: три формы сайта (сквозная/бриф/вакансия) выглядели по-
   разному — не оригинал 2026 года, а вид форм из 2000-х (подчёркнутые
   строки на сером). Одно общее правило для всех трёх вместо трёх
   постраничных — предыдущая причина разделения (несовпадение с живым
   сайтом) для этого блока больше не действует, задание прямо просит
   свести формы к одному современному виду. */
.t-input {
  background: var(--field-bg, var(--color-surface-2));
  border: 1px solid var(--field-border, var(--color-input-border));
  border-radius: 12px;
  color: var(--color-text);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background 0.15s ease-in-out;
}

.t-input::placeholder {
  color: var(--team-role-color);
}

/* :focus:invalid — обязательное пустое поле подпадает под :invalid
   само по себе (стандартное поведение required), а более позднее по
   файлу правило .t-input:invalid{box-shadow:none} той же
   специфичности иначе перебивало бы свечение при фокусе на пустом
   обязательном поле. */
.t-input:focus,
.t-input:focus:invalid {
  border-color: var(--color-accent-green);
  box-shadow: 0 0 0 3px rgba(6, 137, 90, 0.15);
}

textarea.t-input {
  height: auto;
  min-height: 120px;
  padding-top: 16px;
  padding-bottom: 16px;
  resize: vertical;
}

.t-form__errorbox-item {
  font-family: 'Montserrat',Arial,sans-serif;
}

.t-form__errorbox-text {
  font-family: 'Montserrat',Arial,sans-serif;
}

.t-form__errorbox-wrapper {
  font-family: 'Montserrat',Arial,sans-serif;
}

.t-form__successbox {
  font-family: 'Montserrat',Arial,sans-serif;
}

.t-input {
  font-family: 'Montserrat',Arial,sans-serif;
}

.t-input-error {
  font-family: 'Montserrat',Arial,sans-serif;
}

.t-input {
  -webkit-appearance:none;
  border:0;
  border-radius:0;
  box-sizing:border-box;
  font-size:100%;
  font-size:16px;
  height:60px;
  line-height:1.33;
  margin:0;
  outline:none;
  padding:0 20px;
  width:100%;
}

.t-input::-moz-focus-inner {
  border:0;
  padding:0;
}

.t-input:focus~.t-input__vis-ph,.t-input_has-content+.t-input__vis-ph {
  text-overflow:inherit;
  -webkit-transform:translateY(-100%) scale(.7);
  transform:translateY(-100%) scale(.7);
  width:100%;
}

.t-input:invalid {
  box-shadow:none;
}

.t-input-group_cb div[data-customstyle=yes] {
  display:inline;
  vertical-align:middle;
}

.t-input-group_ta textarea.t-input {
  resize:vertical;
}

.t-radio__wrapper {
  margin-top:5px;
}

.t-checkbox__control,.t-radio__control {
  --size:20px;
  --border-width:2px;
  --border-radius:0;
}

.t-checkbox__control {
  cursor:pointer;
  display:table;
  position:relative;
}

.t-checkbox__control.t-checkbox__control_flex {
  -ms-flex-align:center;
  -webkit-align-items:center;
  align-items:center;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  gap:10px;
}

.t-checkbox__control .t-checkbox {
  opacity:0;
  position:absolute;
  z-index:-1;
}

.t-checkbox__control>span {
  word-break:break-word;
}

.t-checkbox__indicator {
  --check:calc(var(--size) - var(--border-width)*2);
  border:var(--border-width) solid #000;
  border-radius:var(--border-radius);
  box-sizing:border-box;
  display:inline-block;
  height:var(--size);
  opacity:.6;
  position:relative;
  transition:all .2s;
  vertical-align:middle;
  width:var(--size);
}

.t-checkbox__indicator,.t-radio__indicator {
  -ms-flex-negative:0;
  -webkit-flex-shrink:0;
  flex-shrink:0;
}

.t-checkbox__indicator:after {
  border-color:inherit;
  border-style:solid;
  border-width:0 0 var(--border-width) var(--border-width);
  content:"";
  display:none;
  height:calc(var(--size)*.15);
  left:50%;
  position:absolute;
  top:50%;
  -webkit-transform:translate(-50%,-70%) rotate(-45deg);
  transform:translate(-50%,-70%) rotate(-45deg);
  -webkit-transform-origin:center;
  transform-origin:center;
  width:calc(var(--size)*.4);
}

.t-checkbox__control .t-checkbox:checked~.t-checkbox__indicator {
  opacity:1;
}

.t-checkbox__control .t-checkbox:checked~.t-checkbox__indicator:after {
  display:block;
}

.t-checkbox__labeltext,.t-checkbox__labeltext div {
  display:inline;
}

.t-radio {
  opacity:0;
  position:absolute;
  z-index:-1;
}

.t-radio__control {
  cursor:pointer;
  display:table;
  margin:0 0 10px;
  position:relative;
}

.t-checkbox__control.t-text_xs,.t-radio__control.t-text_xs {
  --line-height:1;
}

.t-radio__control:first-child {
  margin:3px 0 10px;
}

.t-radio__control:last-child {
  margin:0;
}

.t-radio__indicator {
  --dot:calc(var(--size)/2);
  border-color:#000;
  border-radius:50%;
  border-style:solid;
  border-width:var(--border-width);
  box-sizing:border-box;
  display:inline-block;
  height:var(--size);
  margin-right:10px;
  opacity:.6;
  position:relative;
  transition:all .2s;
  vertical-align:middle;
  width:var(--size);
}

.t-radio__indicator:after {
  background:#000;
  border-radius:50%;
  content:"";
  height:var(--dot);
  left:50%;
  margin:auto;
  opacity:0;
  position:absolute;
  top:50%;
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
  transition:all .2s;
  width:var(--dot);
}

.t-radio__control .t-radio:checked~.t-radio__indicator,.t-radio__control .t-radio:checked~.t-radio__indicator:after {
  opacity:1;
}

.t-input-title {
  display:block;
  height:100%;
  padding-right:10px;
  vertical-align:middle;
}

.t-input-subtitle {
  display:block;
  height:100%;
  padding-right:10px;
  vertical-align:middle;
}

.t-input-ownanswer+.t-input__vis-ph {
  display:none;
}

.t-input-ownanswer.t-input-ownanswer_active+.t-input__vis-ph {
  display:block;
}

.t-input-error {
  color:red;
  display:none;
  font-size:13px;
  margin-top:5px;
}

.t-input-group_cb:is(.t-form .js-error-control-box:has(.t-input-block+.t-input-error)) .t-checkbox__control,.t-input-group_rd:is(.t-form .js-error-control-box:has(.t-input-block+.t-input-error)) .t-input-block,:is(.t-form .js-error-control-box:has(.t-input-block+.t-input-error)) .t-rate__wrapper {
  padding:10px;
}

.t-input-group_cb:is(.t-form .js-error-control-box:has(.t-input-block+.t-input-error)) .t-checkbox__control {
  border-radius:inherit;
}

.t-checkboxes__wrapper_button .t-checkboxes__item,.t-radio__wrapper_button .t-radio__item {
  -ms-flex-align:center;
  -webkit-align-items:center;
  align-items:center;
  border:1px solid #000;
  box-sizing:border-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  height:60px;
  padding:0 15px;
  margin-bottom:15px;
}

.t-input-group_rd .t-checkbox__control,.t-input-group_rd .t-radio__control {
  -ms-flex-align:center;
  -webkit-align-items:center;
  align-items:center;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  gap:10px;
  width:100%;
}

.t-input-group_rd .t-checkbox__control .t-checkbox__indicator,.t-input-group_rd .t-radio__control .t-radio__indicator {
  margin-right:0;
}

.t-input-group_rd .t-checkbox__control {
  height:100%;
  width:100%;
}

.t-input-ownanswer {
  text-overflow:ellipsis;
}

/* ==========================================================================
   9. КНОПКИ
   CTA-кнопка (.t-btnflex_type_button) оформлена по-разному на разных
   страницах: чёрная на 7 из 10 (главная, /about, все 6 /production/*),
   зелёная на 3 (/terms, /vacancy, /contacts), см. docs/css/overrides.md,
   п. 1.1. Решение по заданию: чёрный — основной вариант (как более
   частый), зелёный — модификатор .t-btnflex_accent. Требует решения
   заказчика, какой вариант оставить окончательно — см.
   docs/css/_report-template.md, п. 4.
   ========================================================================== */

.t-btn {
  display: inline-block;
  font-family: 'Montserrat',Arial,sans-serif;
  border: 0 none;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  font-weight: 700;
  background-image: none;
  cursor: pointer;
  -webkit-appearance: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.t-btn td {
  vertical-align: middle;
}

.t-btnflex__text {
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  white-space: inherit;
  text-overflow: ellipsis;
}

.t-btnflex_md,.t-btn.t-btnflex_md,.t-submit.t-btnflex_md {
  --height: 60px;
  font-size: 16px;
  padding-left: 60px;
  padding-right: 60px;
}

.t-btnflex_xxl,.t-btn.t-btnflex_xxl,.t-submit.t-btnflex_xxl {
  --height: 100px;
  font-size: 30px;
  padding-left: 90px;
  padding-right: 90px;
}

/* Задача 11, п. 1.5: найдено при сверке размеров кнопок с живым сайтом
   — .t-btn.t-btnflex (2 класса, ниже) задаёt padding:0 (сброс всех 4
   сторон) и той же специфичностью (0,2,0), что и .t-btn.t-btnflex_md
   здесь выше — при равной специфичности выигрывает более поздний по
   файлу источник, т.е. .t-btn.t-btnflex, и padding-left/right у ВСЕХ
   кнопок сайта фактически был 0 (padding-top/bottom не страдали — там
   ниже отдельный calc(), выполняется в том же правиле после сброса).
   Тот же приём, что и раньше в этом разделе: 3 класса вместо 2, чтобы
   специфичность гарantированно не зависела от порядка. */
.t-btn.t-btnflex.t-btnflex_md {
  padding-left: 60px;
  padding-right: 60px;
}

.t-btn.t-btnflex.t-btnflex_xxl {
  padding-left: 90px;
  padding-right: 90px;
}

.t-btnflex,.t-btn.t-btnflex,.t-submit.t-btnflex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1ch;
  max-width: 100%;
  height: unset;
  padding: 0;
  overflow: hidden;
  font-family: 'Montserrat',Arial,sans-serif,Arial,sans-serif;
  font-weight: 600;
  line-height: var(--line-height,1.4);
  padding-top: calc(((var(--height,0px) - 1em * var(--line-height,1.4)) / 2) - var(--border-width,0px));
  padding-bottom: calc(((var(--height,0px) - 1em * var(--line-height,1.4)) / 2) - var(--border-width,0px));
  box-sizing: border-box;
  border-style: solid;
  border-color: transparent;
  border-width: var(--border-width,0);
  background-image: none;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  color: inherit;
  border-radius: 0;
  background-color: transparent;
  white-space: nowrap;
}

.t-submit {
  font-family: 'Montserrat',Arial,sans-serif;
}

/* Три класса в селекторе не косметика: .t-btn.t-btnflex (специфичность
   0,2,0, выше объявленного здесь одного класса) уже задаёт
   background-color/color/border-radius/height, .t-btn.t-btnflex_md —
   font-size. Без такого же числа классов здесь это правило проигрывает
   им в каскаде независимо от порядка в файле, и кнопка остаётся
   прозрачной с чёрным текстом (найдено при вёрстке задачи 7, см.
   docs/prototype/pages/_report-index.md, п. 5). */
.t-btn.t-btnflex.t-btnflex_type_button {
  background-color: var(--color-btn-bg);
  color: var(--color-btn-text);
  border-radius: var(--btn-radius);
  /* Задача 12, часть 1: var(--btn-height) — глобальная переменная,
     всегда 60px, не учитывает --height, которую задают размерные
     модификаторы (.t-btnflex_md/_xxl выше) — из-за этого кнопка
     .t-btnflex_xxl (единственный случай — якорь «Открытые вакансии»
     на /vacancy) была 60px высотой вместо 100px. --height в приоритете,
     --btn-height — только запасной вариант, если модификатор размера
     почему-то не подключён. */
  height: var(--height, var(--btn-height));
  font-weight: 500;
  font-size: 20px;
  text-transform: uppercase;
}
@media screen and (max-width: 480px) {
  .t-btn.t-btnflex.t-btnflex_type_button {
    font-size: 16px;
  }
}

/* Модификатор — зелёный вариант, встречается на /terms (радиус 50px,
   единственное расхождение внутри зелёной группы — приведено к общим
   60px), /vacancy, /contacts. Те же три класса перед .t-btnflex_accent,
   что и в базовом правиле выше — по той же причине (.t-btn.t-btnflex
   двумя классами иначе перебивает специфичность, см. коммент там же).

   Задача 11, п. 1.4/1.5: на живом сайте у зелёного варианта не только
   другой цвет, но и другая типографика — обычный регистр (не капслок),
   16px вместо 20px, вес 600 вместо 500 (сверено через getComputedStyle
   на /terms, /contacts, /vacancy: паддинг по формуле .t-btnflex
   180*1.4/... даёт ровно те же 18.8px, что и на живом сайте только при
   font-size:16px — с 20px паддинг был бы другим). Без этого блок выше
   (3 класса) перебивал бы и то, и другое у всех .t-btnflex_accent. */
.t-btn.t-btnflex.t-btnflex_type_button.t-btnflex_accent {
  background-color: var(--color-btn-bg-accent);
  border-radius: var(--btn-radius);
  font-size: 16px;
  font-weight: 600;
  text-transform: none;
}

.t-btn.t-btnflex.t-btnflex_type_button.t-btnflex_accent.t-btnflex_xxl {
  /* /vacancy, кнопка-якорь «Открытые вакансии» — единственный accent
     крупного размера на сайте, живой fs 30px при --height:100px даёт
     ровно измеренные 29px паддинга. */
  font-size: 30px;
}
.t-btn.t-btnflex.t-btnflex_type_button.t-btnflex_accent:not(.t-animate_no-hover):hover,
.t-btn.t-btnflex.t-btnflex_type_button.t-btnflex_accent:not(.t-animate_no-hover):focus-visible {
  background-color: var(--color-btn-bg-accent-hover);
  color: var(--color-white);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   10. УТИЛИТЫ
   Классы выравнивания, отступов записи, видимости по брейкпоинту и
   служебные состояния анимации появления блоков при скролле.
   ========================================================================== */

.t-align_center {
  text-align: center;
}

.t-align_left {
  text-align: left;
}

.t-margin_auto {
  margin-left: auto;
  margin-right: auto;
}

.t-rec_pb_0 {
  padding-bottom: 0;
}

.t-rec_pb_105 {
  padding-bottom: 105px;
}

.t-rec_pb_120 {
  padding-bottom: 120px;
}

.t-rec_pb_15 {
  padding-bottom: 15px;
}

.t-rec_pb_150 {
  padding-bottom: 150px;
}

.t-rec_pb_165 {
  padding-bottom: 165px;
}

.t-rec_pb_30 {
  padding-bottom: 30px;
}

.t-rec_pb_45 {
  padding-bottom: 45px;
}

.t-rec_pb_60 {
  padding-bottom: 60px;
}

.t-rec_pb_75 {
  padding-bottom: 75px;
}

.t-rec_pb_90 {
  padding-bottom: 90px;
}

.t-rec_pt_0 {
  padding-top: 0;
}

.t-rec_pt_120 {
  padding-top: 120px;
}

.t-rec_pt_135 {
  padding-top: 135px;
}

.t-rec_pt_15 {
  padding-top: 15px;
}

.t-rec_pt_150 {
  padding-top: 150px;
}

.t-rec_pt_195 {
  padding-top: 195px;
}

.t-rec_pt_30 {
  padding-top: 30px;
}

.t-rec_pt_45 {
  padding-top: 45px;
}

.t-rec_pt_60 {
  padding-top: 60px;
}

.t-rec_pt_90 {
  padding-top: 90px;
}

.t-valign_middle {
  vertical-align: middle;
}

.t-valign_top {
  vertical-align: top;
}

/* ==========================================================================
   11. МЕДИАЗАПРОСЫ
   Отзывчивые переопределения ко всем разделам выше, сгруппированы по
   единому набору брейкпоинтов 1200/980/640/480 (docs/css/_report-template.md,
   п. 3). Внутри каждого брейкпоинта правила идут в том же порядке разделов
   2–10. Инвалидное значение line-height:-1, встречавшееся в 10 файлах
   источников, удалено без замены (docs/css/_report-template.md, п. 3).
   ========================================================================== */

@media screen and (min-width:981px) {

  /* T119 — простой текстовый блок-преамбула
     страницы: /manufacture, /terms */
  .t119__preface {
    margin-top: -1px;
  }

}

@media screen and (max-width:1200px) {

  a:active,button:active {
    -webkit-tap-highlight-color: rgba(255,255,255,.1);
  }

  .t-text_xs {
    font-size: 12px;
  }

  .t-text_md {
    font-size: 16px;
  }

  .t-name_xl {
    font-size: 20px;
  }

  .t-heading_lg {
    font-size: 28px;
  }

  .t-title_xxs {
    font-size: 32px;
  }

  .t-title_xs {
    font-size: 38px;
  }

  .t-title_xl {
    font-size: 68px;
  }

  .t-descr_xs {
    font-size: 12px;
  }

  .t-descr_md {
    font-size: 16px;
  }

  .t-descr_xl {
    font-size: 20px;
  }

  .t-title_lg {
    font-size: 60px;
  }

  .t-name_lg {
    font-size: 18px;
  }

  .t-descr_xxs {
    font-size: 10px;
  }

  .t-descr_sm {
    font-size: 14px;
  }

  .t-heading_xs {
    font-size: 22px;
  }

  .t-descr_xxl {
    font-size: 20px;
  }

  .t-text_sm {
    font-size: 14px;
  }

  .t-text-impact_md {
    font-size: 30px;
  }

  .t-name_md {
    font-size: 16px;
  }

  .t-heading_md {
    font-size: 26px;
  }

  .t-descr_xxxl {
    font-size: 24px;
  }

  .t-title_md {
    font-size: 48px;
  }

  .t-btnflex_md,.t-btn.t-btnflex_md,.t-submit.t-btnflex_md {
    padding-left: 45px;
    padding-right: 45px;
  }

  .t-btnflex_xxl,.t-btn.t-btnflex_xxl,.t-submit.t-btnflex_xxl {
    padding-left: 75px;
    padding-right: 75px;
  }

  /* T102 — обложка первого экрана: заголовок + подзаголовок
     страницы: /, /about, /terms, /lab, все 6 /production/* */
  .t102__title {
    margin-top: 30px;
    font-size: 70px;
    line-height: 70px;
  }

  .t102__descr {
    padding: 0 120px;
  }

  /* T280 */
  .t280__menu__content {
    padding: 0 20px;
  }

  /* ШАПКА: RESET */
  a:active,button:active {
    -webkit-tap-highlight-color: rgba(255,255,255,.1);
  }

  /* ШАПКА: TYPOGRAPHY */
  .t-text_xs {
    font-size: 12px;
  }

  .t-text_md {
    font-size: 16px;
  }

  .t-title_xxs {
    font-size: 32px;
  }

  .t-title_xl {
    font-size: 68px;
  }

  .t-descr_xs {
    font-size: 12px;
  }

  /* ШАПКА: BUTTONS */
  .t-btnflex_md,.t-btn.t-btnflex_md,.t-submit.t-btnflex_md {
    padding-left: 45px;
    padding-right: 45px;
  }

  /* ШАПКА: BLOCK_T280 */
  .t280__menu__content {
    padding: 0 20px;
  }

  /* ПОДВАЛ: RESET */
  a:active,button:active {
    -webkit-tap-highlight-color: rgba(255,255,255,.1);
  }

  /* Библиотека: СЕТКА */
  .t-container {
    max-width:960px;
    padding:0;
  }

  .t-col {
    display:inline;
    float:left;
    margin-left:10px;
    margin-right:10px;
    width:100%;
  }

  .t-col_1 {
    max-width:60px;
  }

  .t-col_2 {
    max-width:140px;
  }

  .t-col_3 {
    max-width:220px;
  }

  .t-col_4 {
    max-width:300px;
  }

  .t-col_5 {
    max-width:380px;
  }

  .t-col_6 {
    max-width:460px;
  }

  .t-col_7 {
    max-width:540px;
  }

  .t-col_8 {
    max-width:620px;
  }

  .t-col_9 {
    max-width:700px;
  }

  .t-col_10 {
    max-width:780px;
  }

  .t-col_11 {
    max-width:860px;
  }

  .t-col_12 {
    max-width:940px;
  }

  .t-prefix_1 {
    padding-left:80px;
  }

  .t-prefix_2 {
    padding-left:160px;
  }

  .t-prefix_3 {
    padding-left:240px;
  }

  .t-prefix_4 {
    padding-left:320px;
  }

  .t-prefix_5 {
    padding-left:400px;
  }

  .t-prefix_6 {
    padding-left:480px;
  }

  .t-prefix_7 {
    padding-left:560px;
  }

  .t-prefix_8 {
    padding-left:640px;
  }

  .t-prefix_9 {
    padding-left:720px;
  }

  .t-prefix_10 {
    padding-left:800px;
  }

  .t-prefix_11 {
    padding-left:880px;
  }

  .t-prefix_12 {
    padding-left:960px;
  }

  .t-width_1 {
    max-width:60px;
  }

  .t-width_2 {
    max-width:140px;
  }

  .t-width_3 {
    max-width:220px;
  }

  .t-width_4 {
    max-width:300px;
  }

  .t-width_5 {
    max-width:380px;
  }

  .t-width_6 {
    max-width:460px;
  }

  .t-width_7 {
    max-width:540px;
  }

  .t-width_8 {
    max-width:620px;
  }

  .t-width_9 {
    max-width:700px;
  }

  .t-width_10 {
    max-width:780px;
  }

  .t-width_11 {
    max-width:860px;
  }

  .t-width_12 {
    max-width:940px;
  }

  .t-width_100 {
    max-width:100%;
  }

}

@media screen and (max-width:980px) {

  /* T478 — блок «текст + фоновая картинка» в две колонки
     страницы: /, /about */
  .t478__textwrapper {
    height: auto!important;
  }

  .t478 .t-btn {
    margin-top: 30px;
    margin-bottom: 20px;
  }

  .t478__top {
    margin-bottom: 30px;
  }

  /* T490 — сетка из 3 карточек с иконкой (ценности компании)
     страницы: /vacancy */
  .t490__col {
    margin-bottom: 45px;
  }

  /* T508 — список пунктов с иконкой-чекмарком
     страницы: /terms */
  .t508 .t-list__item {
    margin-top: 40px!important;
  }

  .t508__imgwrapper {
    max-width: 50px;
  }

  .t508__imgwrapper,.t508__bgimg {
    margin-right: 20px!important;
  }

  /* T509 — карточка «изображение + заголовок + текст» в 2 колонки
     страницы: /terms, /lab */
  .t509__row {
    margin-top: 75px;
  }

  .t509__col {
    padding: 0!important;
  }

  .t509__mobileimg {
    display: block;
  }

  .t509__textwrapper {
    padding: 0!important;
    height: auto!important;
    margin-top: 30px;
  }

  .t509 .t-card__title {
    margin-bottom: 15px;
  }

  .t509__desktopimg {
    display: none;
  }

  /* T524 — сетка карточек «команда»
     страницы: /about */
  .t524__container {
    font-size: 0;
  }

  .t524 .t-list__item,.t524 .t-list__container_inrow2 .t-list__item:nth-child(-n+2),.t524 .t-list__container_inrow3 .t-list__item:nth-child(-n+3),.t524 .t-list__container_inrow4 .t-list__item:nth-child(-n+4) {
    margin-top: 45px!important;
  }

  .t524 .t524__container .t-list__item:first-child,.t524 .t524__container:not(.t-list__container_inrow1) .t-list__item:nth-child(2) {
    margin-top: 0!important;
  }

  .t524__col-mobstyle {
    display: inline-block;
    vertical-align: top;
    width: 50%;
  }

  .t524__itemwrapper_4 {
    max-width: 220px;
  }

  /* T588 — CTA-баннер по центру: заголовок + подзаголовок + кнопка
     страницы: /, /about, /vacancy, /contacts, все 6 /production/* */
  .t588__buttons {
    margin-top: 30px;
  }

  /* T676 — текстовый блок-цитата с декоративными разделителями
     страницы: /vacancy */
  .t676__text-impact {
    margin-top: 24px;
    margin-bottom: 30px;
  }

  /* T678 — форма (поля брифа)
     страницы: /order */
  .t678 .t-form__submit {
    padding-bottom: 20px;
  }

  .t678 .t-input-group,.t678 .t-input-block {
    display: block;
    width: 100%;
  }

  .t678 .t-input-group,.t678 .t-form__screen.t-form__inputsbox_horizontal .t-input-group {
    margin-bottom: 25px;
  }

  .t678 .t-form_bbonly .t-input-group {
    margin-bottom: 35px;
  }

  .t678 .t-form__submit,.t678 .t-form__inputsbox_horizontal.t-form__screen .t-form__submit {
    margin-top: 0;
  }

  .t678 .t-form__submit,.t678 .t-submit {
    width: 100%;
  }

  /* T688 — сетка карточек-ссылок с фоновым изображением (продуктовая сетка главной)
     страницы: / */
  .t688__columns {
    flex-wrap: var(--flex-wrap,wrap);
    row-gap: 40px!important;
  }

  .t688 .t-col_6 {
    max-width: 460px;
  }

  .t688 .t-col_4 {
    max-width: 400px;
  }

  .t688__col,.t688__featured {
    margin: 0 auto!important;
  }

  .t688 .t688__inner-col {
    height: 100%;
  }

  .t688 .t688__textwrapper {
    height: 100%!important;
  }

  /* T702 — каркас всплывающего окна — задействован формой «Обратный звонок»
     страницы: все 15 (обёртка попапов) */
  .t702 .t-input-group,.t702 .t-form__screen.t-form__inputsbox_horizontal .t-input-group {
    margin-bottom: 25px;
  }

  .t702 .t-input-group,.t702 .t-input-block {
    display: block;
    width: 100%;
  }

  .t702 .t-form__submit,.t702 .t-form__inputsbox_horizontal.t-form__screen .t-form__submit {
    margin-top: 0;
  }

  .t702 .t-form__submit,.t702 .t-submit {
    width: 100%;
  }

  /* T718 — блок «контакты + форма» (форма отклика на вакансию)
     страницы: /vacancy */
  .t718 .t718__contentwrapper {
    padding: 0 0 40px;
    text-align: center;
  }

  .t718 .t718__contentbox {
    float: none;
    width: 100%;
    height: auto!important;
  }

  .t718 .t-input-group,.t718 .t-input-block {
    display: block;
    width: 100%;
  }

  .t718 .t-input-group,.t718 .t-form__screen.t-form__inputsbox_horizontal .t-input-group {
    margin-bottom: 25px;
  }

  .t718 .t-form__submit,.t718 .t-form__inputsbox_horizontal.t-form__screen .t-form__submit {
    margin-top: 0;
  }

  /* T764 — блок «текст слева / фотогалерея справа»
     страницы: /manufacture */
  .t764__col_first {
    margin-bottom: 24px;
  }

  .t764__info {
    min-height: auto!important;
  }

  /* T820 — список преимуществ работы
     страницы: /vacancy */
  .t820__imgwrapper,.t820__bgimg {
    margin-right: 20px!important;
  }

  .t820 .t-list__item,.t820 .t-list__item:nth-child(-n+2) {
    margin-top: 40px!important;
  }

  .t820 .t-list__item:first-child {
    margin-top: 0!important;
  }

  .t820__checkmark,.t820__bgimg {
    max-width: 50px;
    max-height: 50px;
  }

  /* T841 — список пунктов с иконкой-чекмарком
     страницы: /about */
  .t841__imgwrapper,.t841__bgimg {
    margin-right: 20px!important;
  }

  .t841__imgwrapper {
    max-width: 50px;
  }

  .t841__col:not(:first-child) {
    margin-top: 40px;
  }

  /* T842 — сетка карточек категорий
     страницы: все 6 /production/* */
  .t842__col {
    margin-top: 0;
    margin-bottom: 20px;
    height: auto!important;
  }

  .t842__bottommargin {
    margin-bottom: 10px;
  }

  .t842__wrap_right {
    padding-bottom: 30px;
  }

  /* T846 — секция «заголовок + список карточек» (ценности)
     страницы: /about */
  .t846__col {
    margin-top: 40px;
  }

  .t846__textwrapper {
    padding-left: 20px!important;
  }

  /* T849 — аккордеон вакансий
     страницы: /vacancy */
  .t849 {
    -webkit-text-size-adjust: 100%;
  }

  /* T1056 — блок контактной информации, 4 колонки
     страницы: /contacts */
  .t1056__row {
    display: block;
  }

  .t1056__col {
    margin-bottom: 30px;
  }

  /* ШАПКА: BLOCK_T702 */
  .t702 .t-input-group,.t702 .t-form__screen.t-form__inputsbox_horizontal .t-input-group {
    margin-bottom: 25px;
  }

  .t702 .t-input-group,.t702 .t-input-block {
    display: block;
    width: 100%;
  }

  .t702 .t-form__submit,.t702 .t-form__inputsbox_horizontal.t-form__screen .t-form__submit {
    margin-top: 0;
  }

  .t702 .t-form__submit,.t702 .t-submit {
    width: 100%;
  }

  /* Библиотека: СЕТКА */
  .t-container {
    max-width:640px;
  }

  .t-container.flexx {
    display:block;
  }

  .t-container_flex {
    display:block;
  }

  .t-col {
    display:block;
    float:none;
    padding-left:20px;
    padding-right:20px;
    margin:0;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }

  .t-col_1,.t-col_2,.t-col_3,.t-col_4,.t-col_5,.t-col_6,.t-col_7,.t-col_8,.t-col_9,.t-col_10,.t-col_11,.t-col_12 {
    width:100%;
    max-width:100%;
  }

  .t-prefix_1,.t-prefix_2,.t-prefix_3,.t-prefix_4,.t-prefix_5,.t-prefix_6,.t-prefix_7,.t-prefix_8,.t-prefix_9,.t-prefix_10,.t-prefix_11,.t-prefix_12 {
    padding-left:none;
  }

}

@media screen and (max-width:640px) {

  .t-text_xs {
    font-size: 10px;
    line-height: 1.45;
  }

  .t-text_md {
    font-size: 14px;
    line-height: 1.45;
  }

  .t-name_xl {
    font-size: 18px;
  }

  .t-heading_lg {
    font-size: 24px;
  }

  .t-title_xxs {
    font-size: 28px;
  }

  .t-title_xs {
    font-size: 30px;
  }

  .t-title_xl {
    font-size: 32px;
  }

  .t-descr_xs {
    font-size: 10px;
    line-height: 1.45;
  }

  .t-descr_md {
    font-size: 14px;
    line-height: 1.45;
  }

  .t-descr_xl {
    font-size: 18px;
    line-height: 1.4;
  }

  .t-title_lg {
    font-size: 30px;
  }

  .t-name_lg {
    font-size: 16px;
  }

  .t-descr_sm {
    font-size: 12px;
    line-height: 1.45;
  }

  .t-heading_xs {
    font-size: 20px;
  }

  .t-descr_xxl {
    font-size: 18px;
  }

  .t-text_sm {
    font-size: 12px;
    line-height: 1.45;
  }

  .t-text-impact_md {
    font-size: 26px;
  }

  .t-name_md {
    font-size: 14px;
  }

  .t-heading_md {
    font-size: 22px;
  }

  .t-descr_xxxl {
    font-size: 20px;
  }

  .t-title_md {
    font-size: 30px;
  }

  .t-btn {
    white-space: normal;
  }

  .t-btnflex,.t-btn.t-btnflex,.t-submit.t-btnflex {
    white-space: normal;
  }

  .t-btnflex_md,.t-btn.t-btnflex_md,.t-submit.t-btnflex_md {
    padding-left: 30px;
    padding-right: 30px;
  }

  .t-btnflex_xxl,.t-btn.t-btnflex_xxl,.t-submit.t-btnflex_xxl {
    font-size: 26px;
    padding-left: 60px;
    padding-right: 60px;
  }

  /* T001 — обложка с заголовком, подзаголовком и фоновым фото
     страницы: /vacancy */
  .t001__title {
    padding-right: 10px;
    padding-left: 10px;
  }

  .t001__descr {
    padding-right: 10px;
    padding-left: 10px;
    font-size: 14px;
    line-height: 20px;
  }

  /* T004 — простой текстовый блок (юридический текст)
     страницы: /privacy */
  .t004 h1 {
    font-size: 28px;
    line-height: 35px;
  }

  /* T102 — обложка первого экрана: заголовок + подзаголовок
     страницы: /, /about, /terms, /lab, все 6 /production/* */
  .t102__title {
    margin-top: 30px;
    font-size: 34px;
    line-height: 38px;
    padding: 0 10px;
  }

  .t102__descr {
    padding: 0 10px;
  }

  /* T119 — простой текстовый блок-преамбула
     страницы: /manufacture, /terms */
  .t119__preface {
    font-size: 22px;
  }

  /* T280 */
  .t280__menu__content {
    padding: 0 20px;
  }

  /* T508 — список пунктов с иконкой-чекмарком
     страницы: /terms */
  .t508__imgwrapper {
    max-width: 40px;
  }

  /* T524 — сетка карточек «команда»
     страницы: /about */
  .t524__col-mobstyle:nth-child(odd) {
    padding-left: 40px;
  }

  .t524__col-mobstyle:nth-child(even) {
    padding-right: 40px;
  }

  /* T588 — CTA-баннер по центру: заголовок + подзаголовок + кнопка
     страницы: /, /about, /vacancy, /contacts, все 6 /production/* */
  .t588 .t-btn,.t588__buttons-wrapper {
    margin-bottom: 10px;
    width: 100%;
  }

  .t588 .t-btnflex_lg,.t588 .t-btnflex_xl,.t588 .t-btnflex_xxl {
    --height: 60px;
    font-size: 18px;
    padding-left: 40px;
    padding-right: 40px;
  }

  /* T688 — сетка карточек-ссылок с фоновым изображением (продуктовая сетка главной)
     страницы: / */
  .t688__columns {
    row-gap: 20px!important;
  }

  .t688__col,.t688__featured {
    margin: 0 auto!important;
  }

  /* T702 — каркас всплывающего окна — задействован формой «Обратный звонок»
     страницы: все 15 (обёртка попапов) */
  .t702 .t702__wrapper {
    padding: 20px;
  }

  .t702 .t702__title {
    margin-bottom: 6px;
  }

  .t702 .t702__text-wrapper {
    margin-bottom: 14px;
  }

  .t702 .t-submit {
    --height: 50px;
    font-size: 16px;
  }

  .t702 .t-input {
    padding: 0 14px;
  }

  .t702 .t-input-block textarea {
    padding-top: 12px;
  }

  .t702 .t-input-group,.t702 .t-form__screen.t-form__inputsbox_horizontal .t-input-group {
    margin-bottom: 20px;
  }

  .t702 .t-input,.t702 .t-select {
    height: 50px;
    font-size: 16px;
  }

  .t702 .t-popup {
    padding: 0;
  }

  .t702 .t-popup__block-close {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 50px;
    background: #000;
  }

  .t702 .t-popup__block-close-button {
    display: table-cell;
    vertical-align: middle;
    width: 16px;
    margin-right: 10px;
    padding: 10px;
    font-size: 0;
    text-align: right;
  }

  .t702 .t-popup__close-icon {
    width: 16px;
    height: 16px;
  }

  .t702 .t-input-group {
    margin-bottom: 20px;
  }

  /* T718 — блок «контакты + форма» (форма отклика на вакансию)
     страницы: /vacancy */
  .t718 .t-input-block textarea {
    padding-top: 12px;
  }

  .t718 .t-form__submit {
    padding-bottom: 20px;
  }

  .t718 .t-form__submit,.t718 .t-submit {
    width: 100%;
  }

  /* T820 — список преимуществ работы
     страницы: /vacancy */
  .t820__checkmark,.t820__bgimg {
    max-width: 40px;
    max-height: 40px;
  }

  /* T841 — список пунктов с иконкой-чекмарком
     страницы: /about */
  .t841__imgwrapper {
    max-width: 40px;
  }

  /* T849 — аккордеон вакансий
     страницы: /vacancy */
  .t849__trigger-button {
    padding-top: 15px;
    padding-bottom: 14px;
  }

  .t849__textwrapper {
    padding: 0 0 10px;
  }

  .t849__text {
    margin-bottom: 15px;
  }

  /* ШАПКА: TYPOGRAPHY */
  .t-text_xs {
    font-size: 10px;
    line-height: 1.45;
  }

  .t-text_md {
    font-size: 14px;
    line-height: 1.45;
  }

  .t-title_xxs {
    font-size: 28px;
  }

  .t-title_xl {
    font-size: 32px;
  }

  .t-descr_xs {
    font-size: 10px;
    line-height: 1.45;
  }

  /* ШАПКА: BLOCK_T702 */
  .t702 .t702__wrapper {
    padding: 20px;
  }

  .t702 .t702__title {
    margin-bottom: 6px;
  }

  .t702 .t702__text-wrapper {
    margin-bottom: 14px;
  }

  .t702 .t-submit {
    --height: 50px;
    font-size: 16px;
  }

  .t702 .t-input {
    padding: 0 14px;
  }

  .t702 .t-input-block textarea {
    padding-top: 12px;
  }

  .t702 .t-input-group,.t702 .t-form__screen.t-form__inputsbox_horizontal .t-input-group {
    margin-bottom: 20px;
  }

  .t702 .t-input,.t702 .t-select {
    height: 50px;
    font-size: 16px;
  }

  .t702 .t-popup {
    padding: 0;
  }

  .t702 .t-popup__block-close {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 50px;
    background: #000;
  }

  .t702 .t-popup__block-close-button {
    display: table-cell;
    vertical-align: middle;
    width: 16px;
    margin-right: 10px;
    padding: 10px;
    font-size: 0;
    text-align: right;
  }

  .t702 .t-popup__close-icon {
    width: 16px;
    height: 16px;
  }

  /* ШАПКА: BUTTONS */
  .t-btnflex,.t-btn.t-btnflex,.t-submit.t-btnflex {
    white-space: normal;
  }

  .t-btnflex_md,.t-btn.t-btnflex_md,.t-submit.t-btnflex_md {
    padding-left: 30px;
    padding-right: 30px;
  }

  /* ШАПКА: BLOCK_T280 */
  .t280__menu__content {
    padding: 0 20px;
  }

  /* Библиотека: COVER */
  .t-cover {
    background-attachment:fixed;
  }

}

@media screen and (max-width:480px) {

  .t-title_xl {
    font-size: 30px;
  }

  .t-rec_pt_0 {
    padding-top: 0;
  }

  .t-rec_pt_120 {
    padding-top: 90px!important;
  }

  .t-rec_pb_120 {
    padding-bottom: 90px!important;
  }

  .t-rec_pt_15 {
    padding-top: 15px;
  }

  .t-rec_pt_45 {
    padding-top: 45px;
  }

  .t-rec_pt_150 {
    padding-top: 90px!important;
  }

  .t-rec_pb_0 {
    padding-bottom: 0;
  }

  .t-rec_pb_15 {
    padding-bottom: 15px;
  }

  .t-rec_pb_75 {
    padding-bottom: 75px;
  }

  .t-rec_pb_150 {
    padding-bottom: 90px!important;
  }

  .t-rec_pt_135 {
    padding-top: 90px!important;
  }

  .t-rec_pb_165 {
    padding-bottom: 90px!important;
  }

  .t-rec_pt_90 {
    padding-top: 90px;
  }

  .t-rec_pb_45 {
    padding-bottom: 45px;
  }

  .t-rec_pb_90 {
    padding-bottom: 90px;
  }

  .t-rec_pt_30 {
    padding-top: 30px;
  }

  .t-rec_pb_30 {
    padding-bottom: 30px;
  }

  .t-rec_pt_60 {
    padding-top: 60px;
  }

  .t-rec_pt_195 {
    padding-top: 120px!important;
  }

  .t-rec_pb_60 {
    padding-bottom: 60px;
  }

  .t-rec_pb_105 {
    padding-bottom: 90px;
  }

  /* T524 — сетка карточек «команда»
     страницы: /about */
  .t524__col-mobstyle {
    display: block;
    width: 100%;
  }

  .t524__col-mobstyle:nth-child(odd) {
    padding-left: 20px;
  }

  .t524__col-mobstyle:nth-child(even) {
    padding-right: 20px;
  }

  /* T688 — сетка карточек-ссылок с фоновым изображением (продуктовая сетка главной)
     страницы: / */
  .t688__columns_mobile-flex .t-col:not(:first-child,:last-child) {
    padding-right: 5px;
    padding-left: 5px;
  }

  /* T718 — блок «контакты + форма» (форма отклика на вакансию)
     страницы: /vacancy */
  .t718 .t718__contacts {
    font-size: 18px;
  }

  /* T842 — сетка карточек категорий
     страницы: все 6 /production/* */
  .t842__wrap {
    display: block;
  }

  .t842__wrap_right {
    padding: 20px;
  }

  /* ШАПКА: TYPOGRAPHY */
  .t-title_xl {
    font-size: 30px;
  }

  /* ПОДВАЛ: UTILITIES */
  .t-rec_pt_0 {
    padding-top: 0;
  }

}


/*
  Стили прототипа шапки и подвала (задача 6).
  Опирается на переменные и сброс из docs/css/template_styles.css
  (подключается раньше этого файла в index.html) — здесь только то,
  чего там нет: новая семантическая вёрстка шапки/подвала не использует
  классы .t-records/#allrecords, поэтому общий сброс задачи 5 её не
  затрагивает и нужен свой, локальный.
*/

:root {
  /* Значения — docs/design-tokens.md, раздел «Типографика по конкретным ролям» */
  --header-border-color: rgba(0, 0, 0, 0.1);
  --header-nav-fs: 14px;
  --header-contact-fs: 18px;
  /* Задача 11 поменяла это значение на 10px, сославшись на проверку
     getComputedStyle на живом сайте — но задача 24 (прямое числовое
     сравнение в одном браузере, оба сайта открыты одновременно)
     показывает: getComputedStyle(<адрес в шапке живого сайта>).fontSize
     === "14px", textWidth блока — 335px против наших 244px при 10px.
     Похоже, в задаче 11 по ошибке измерили не адрес, а подпись "Режим
     работы" (там действительно 10px, см. --header-hours-label-fs ниже)
     — оба блока легко перепутать в разметке Tilda. Возвращено к 14px. */
  --header-address-fs: 14px;
  --header-hours-label-fs: 10px;
  --header-hours-value-fs: 14px;
  /* Цвет иконок часов/геометки в шапке — фирменный зелёный, сверен на
     живом сайте (fill в исходном SVG); третий оттенок зелёного на
     сайте помимо accent (#4ea864) и footer-градиента, здесь же
     совпадает с --color-footer-to. */
  --header-icon-color: #50a964;
  --header-mobile-link-fs: 68px;
  --header-mobile-link-fs-sm: 32px;
  --header-mobile-link-fs-xs: 30px;

  --footer-title-fs: 38px;
  --footer-title-fs-mobile: 28px;
  /* Исправлено в задаче 11: было 20px — на живом сайте телефон/почта в
     подвале 16px (сверено через getComputedStyle), адрес ещё мельче. */
  --footer-value-fs: 16px;
  --footer-address-fs: 10px;
  --footer-label-fs: 11px;
  --footer-policy-fs: 10px;
  --footer-logo-width: 265px;
  --footer-logo-width-mobile: 180px;

  /* Задача 7 (главная страница). Значения — docs/design-tokens.md,
     docs/image-specs.md. Пороги источника (900/960px) сведены к
     канонической сетке брейкпоинтов 1200/980/640/480, как в задаче 5. */
  --hero-title-fs: 96px;
  --hero-title-fs-mobile: 36px;
  --hero-subtitle-fs: 24px;
  --hero-subtitle-fs-mobile: 16px;
  /* Значения по умолчанию для .hero — совпадают с главной. Страницы, где
     обложка устроена иначе (градиент/вес и число абзацев подзаголовка),
     переопределяют эти переменные точечно на своём <section class="hero">
     (задача 9, часть 2) — без отдельных именованных модификаторов. */
  --hero-overlay-start: 0;
  --hero-subtitle-weight: 600;
  --hero-subtitle-max-width: none;
  --hero-subtitle-gap: 16px;

  --about-title-fs: 24px;
  --about-title-fs-mobile: 16px;
  --about-desc-fs: 14px;
  --about-desc-fs-mobile: 12px;
  --about-desc-max-width: 500px;

  /* Задача 43, часть 4: подложки — мятные, как блок учредителя, а не
     серые (#ededed, #efefef, #f2f2f2, #f5f5f5…): рядом это выглядело как
     два разных сайта. --color-surface — подложки (полосы, карточки,
     панели), --color-surface-2 — на тон светлее: поля форм на белом,
     полосы таблиц, шапка таблицы реквизитов. Белое внутри подложек
     (варианты подбора, карточки отзывов, поля форм на полосе формы)
     остаётся белым. Шапку и подвал это не затрагивает: панель поиска в
     шапке — своя переменная --header-panel-bg. */
  --color-surface: #ddedde;
  --color-surface-2: #eef6ef;
  --header-panel-bg: #ededed;
  --cta-bg: var(--color-surface);
  --cta-title-fs: 32px;
  --cta-title-fs-mobile: 24px;
  --cta-desc-fs: 20px;
  --cta-desc-fs-mobile: 16px;
  --cta-desc-max-width: 700px;

  --catalog-title-fs: 16px;
  --catalog-title-fs-mobile: 14px;
  --catalog-row-gap: 40px;
  --catalog-card-padding: 30px;

  /* Задача 8 (страницы каталога /production/*). Значения — инлайн-стили
     записей в source/files/pageXXXbody.html (все 6 страниц идентичны по
     CSS, задача 4). Порог источника (900px) сведён к канонической сетке
     брейкпоинтов 1200/980/640/480, как в задачах 5 и 7.
     --hero-title-fs-production/-mobile — общее значение заголовка обложки
     на всех 6 страницах каталога и на /lab (тот же desktop-размер, 72px;
     мобильный у /lab свой, 28px, а не 32 — переопределяется прямо на
     странице, отдельная переменная под один случай не заводилась, см.
     docs/prototype/pages/lab.html). Размер подзаголовка и заголовка CTA у
     всех этих страниц совпадает с главной буквально (24/16 и 32/24) —
     переопределять их не нужно вовсе. */
  --hero-title-fs-production: 72px;
  --hero-title-fs-production-mobile: 32px;

  --subcategory-bg: #fcfcfc;
  --subcategory-title-fs: 16px;
  --subcategory-title-fs-mobile: 14px;
  --subcategory-desc-fs: 14px;
  --subcategory-desc-fs-mobile: 12px;
  --subcategory-row-gap: 40px;

  /* Задача 9 (/manufacture, /about, /terms, /lab). Значения — инлайн-стили
     записей в соответствующих source/files/pageXXXbody.html, сверены на
     живом сайте через getComputedStyle там, где в разметке не было явного
     переопределения размера (общая, не точечная, шкала Tilda). Там, где
     источник не даёт мобильного значения явно (одноразовые блоки без
     собственного брейкпоинта в customstyle), взят пропорциональный шаг
     вниз, как у остальных блоков сайта — не выдаётся за точную выгрузку,
     см. docs/prototype/pages/_report-content-pages.md, п. 8. */
  /* Исправлено в задаче 10: в задаче 9 значение было измерено на узком
     вьюпорте по ошибке (30px — это мобильный размер, ≤480px). Реальный
     desktop-размер — 38px, перепроверено на /terms и /vacancy. */
  --section-title-fs: 38px;
  --section-title-fs-mobile: 30px;

  /* Исправлено в задаче 12: было 20px — на живом сайте 24px (сверено
     на /lab и /terms, оба используют этот же компонент). */
  --split-title-fs: 24px;
  --split-title-fs-mobile: 18px;
  --split-desc-weight: 300;

  --checklist-advantages-fs: 18px;
  --checklist-advantages-fs-mobile: 16px;
  --checklist-minimum-fs: 20px;
  --checklist-minimum-fs-mobile: 16px;

  --values-title-fs: 24px;
  /* Исправлено в задаче 12: было 18px — на живом сайте 20px. */
  --values-item-title-fs: 20px;
  --values-item-title-fs-mobile: 16px;
  --values-item-desc-fs: 14px;
  --values-item-desc-fs-mobile: 12px;

  --team-title-fs: 24px;
  /* Исправлено в задаче 12: было 18px — на живом сайте 20px. */
  --team-name-fs: 20px;
  --team-name-fs-mobile: 16px;
  --team-role-fs: 10px;
  --team-role-color: #7a7a7a;

  /* Задача 35, часть 17: заголовки этих двух блоков были 20px — почти
     тем же размером, что и текст под ними (16px), с контрастом только
     за счёт начертания (700 против 300). Увеличены до 24px — этот
     конкретный размер не сверялся отдельно с живым сайтом ни в одной
     задаче (в отличие от текста и отступов рядом), поэтому в пределах
     "не трогать сверенное" не подпадает. */
  --facility-title-fs: 24px;
  --facility-title-fs-mobile: 20px;
  --facility-desc-fs: 16px;
  --facility-desc-fs-mobile: 14px;

  --preface-title-fs: 24px;
  --preface-title-fs-mobile: 20px;
  --preface-text-fs: 16px;
  --preface-text-fs-mobile: 14px;
  --preface-muted-fs: 30px;
  --preface-muted-fs-mobile: 22px;

  /* Исправлено в задаче 12: было 20px — на живом сайте 24px, и текст
     не сужен до 800px, а занимает почти всю ширину контейнера. */
  --text-banner-fs: 24px;
  --text-banner-fs-mobile: 16px;

  --intro-banner-title-fs: 52px;
  --intro-banner-title-fs-mobile: 30px;
  --intro-banner-desc-fs: 18px;
  --intro-banner-desc-fs-mobile: 14px;

  /* Исправлено в задаче 12: было 16px, на живом сайте 18px. */
  --checklist-benefits-fs: 18px;
  --checklist-benefits-fs-mobile: 14px;

  /* Исправлено в задаче 12: было 26px, на живом сайте 28px. */
  --icon-cards-title-fs: 28px;
  --icon-cards-title-fs-mobile: 20px;
  --icon-cards-desc-fs: 15px; /* задача 37, часть 8: было 12px — мельче всего остального текста, при заголовке карточки 20px */

  /* Исправлено в задаче 12 (было 30px) на живом сайте 38px (сверено
     getComputedStyle). */
  --quote-fs: 38px;
  --quote-fs-mobile: 20px;

  --accordion-title-fs: 20px;
  --accordion-title-fs-mobile: 16px;

  /* Исправлено в задаче 12: было 24px — на живом сайте 28px. */
  --contact-form-label-fs: 28px;
  --contact-form-label-fs-mobile: 20px;
  --contact-form-address-fs: 14px;

  /* Исправлено в задаче 12: было 16px/16px — на живом сайте 18px/18px. */
  --info-grid-title-fs: 18px;
  --info-grid-text-fs: 15px;
  --info-grid-title-heading-fs: 42px;

  --legal-title-fs: 24px;
  --legal-title-fs-mobile: 20px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* Задача 11, п. 1.1: правило font-family в template_styles.css задано
     только на тильдовских классах (.t-title/.t-descr/...), до новых
     семантических классов прототипа не доходит — без правила на body
     браузер рисовал дефолтным serif. */
  font-family: var(--font-main);
}

/* ==========================================================================
   ШАПКА
   ========================================================================== */

.site-header {
  /* Задача 26, часть 2: на живом сайте шапка position:fixed — не
     занимает места в потоке, лежит поверх контента (замерено
     getComputedStyle на живом сайте: position:fixed, z-index:990,
     top:0, высота 120px, не меняется при прокрутке). У нас была
     sticky — резервировала 128px в потоке, из-за чего весь контент
     ниже шапки уезжал вниз на эту величину относительно живого сайта
     (задача 25 подпирала только .hero отрицательным отступом — здесь
     заменено на точное соответствие: сама шапка не в потоке, а первый
     блок каждой страницы получает свой отступ сверху, как на живом
     сайте, вместо одного общего костыля). */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--color-header-bg);
  font-family: var(--font-main);
}

.site-header__toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.site-header a {
  text-decoration: none;
  color: inherit;
}

.site-header ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--grid-gutter);
}

/* Задача 11, п. 1.2: структура первого ряда приведена к оригиналу —
   логотип, часы, адрес, мессенджеры, телефон (было: логотип, телефон,
   почта, адрес, часы — другой порядок и без иконок/мессенджеров).
   Почта переехала во второй ряд, вправо (п. ниже, .site-header__nav).
   Точная геометрия первого ряда (на всю ширину окна, а не по
   контейнеру 1200px, высота разделителей на все 70px и т.д.) — в
   отдельном блоке @media (min-width: 1400px) ниже, см. комментарий
   там: задача 24 подобрала эти значения прямым сравнением с живым
   сайтом РОВНО на ширине 1440px, при более узком экране (второй ряд с
   меню, наоборот, остаётся на гибком контейнере — там на 1440px
   координаты и без правок совпали с точностью до пикселя) значения
   потеряли бы смысл и могли переполнить строку, поэтому базовое
   правило ниже — прежнее, гибкое, на контейнере. */
.site-header__top {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--header-border-color);
}

.site-header__logo {
  flex-shrink: 0;
  line-height: 0;
}

.site-header__logo img {
  display: block;
  height: 42px;
  width: auto;
}

.site-header__hours,
.site-header__address-wrap,
.site-header__messengers {
  padding-left: 24px;
  border-left: 1px solid var(--header-border-color);
}

.site-header__hours,
.site-header__address-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-header__icon {
  flex-shrink: 0;
  width: 14px;
  height: auto;
  fill: var(--header-icon-color);
}

.site-header__hours-text {
  line-height: 1.3;
}

.site-header__hours-label {
  display: block;
  font-size: var(--header-hours-label-fs);
  font-weight: 600;
  color: var(--color-text);
}

.site-header__hours-value {
  display: block;
  font-size: var(--header-hours-value-fs);
  font-weight: 500;
  letter-spacing: -1px;
  color: var(--color-text);
}

.site-header__address {
  font-size: var(--header-address-fs);
  font-style: normal;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.3;
}

.site-header__messengers {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-header__messengers img {
  display: block;
  /* Задача 12, п. 2.1: серая круглая подложка + монохромный значок —
     уже часть самого SVG-файла (перекрашенный вариант с fill:#6F6F6F,
     а не цветной бренд-вариант) — здесь только размер, 33px по
     живому сайту (getBoundingClientRect). */
  width: 33px;
  height: 33px;
}

.site-header__phone {
  margin-left: auto;
  padding-left: 24px;
  /* Задача 12, п. 2.2: на живом сайте 4 разделителя — после логотипа,
     после режима работы, после адреса и перед телефоном (после блока
     мессенджеров разделителя нет). */
  border-left: 1px solid var(--header-border-color);
  font-size: var(--header-contact-fs);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

.site-header__phone:hover,
.site-header__email:hover {
  color: var(--color-accent-green);
}

/* Задача 24: точная геометрия первого ряда шапки — подобрана прямым
   числовым сравнением с живым сайтом (local/tools/compare_live.js,
   профиль "header"), в одном браузере, оба сайта на ширине 1440px.

   На живом сайте первый ряд (логотип-часы-адрес-мессенджеры-телефон)
   — не по гибкому контейнеру 1200px, а во всю ширину окна: разделители
   стоят в фиксированных 240/457/871/1089px от левого края, вне
   зависимости от контейнера меню строкой ниже (у второго ряда с меню,
   наоборот, координаты и без правок совпали с живым сайтом день в
   день — значит там контейнер верный, трогать не нужно). Высота
   разделителей на живом — 70px, на всю высоту строки, а не по высоте
   текста внутри своей ячейки.

   Значения ниже — конкретные пиксели под конкретную ширину экрана
   (как и сам живой сайт: у Tilda это отдельная вёрстка "от 1200px",
   не резиновая), поэтому только от 1400px и шире — на более узких
   десктопных экранах (981-1399px, ниже 980px — мобильное меню, не
   меняется) остаётся прежний гибкий вариант на контейнере, чтобы
   ничего не переполнялось и не наезжало друг на друга. */
@media screen and (min-width: 1201px) {
	.site-header__top {
		align-items: stretch;
		gap: 0;
		/* Задача 26, часть 4: раньше — width:100vw + margin-left:calc(50% -
		   50vw), тот же приём "выхода из потока", что и у .hero — левый
		   край строки прижимался к левому краю окна. Верно только
		   случайно, ровно на 1440px, где и сверяла задача 24. Прямой
		   замер на живом сайте на нескольких ширинах (1440/1300/1201)
		   показал: расстояние от логотипа до правого края телефона
		   неизменно 1175px на любой ширине, а сам блок не прижат к
		   левому краю, а ЦЕНТРИРОВАН в окне — левый край логотипа
		   меняется линейно с шириной окна ровно как для центрированного
		   блока фиксированной ширины 1440px (125 + 1175 + 140). Ниже
		   1201px эта раскладка на живом сайте не пересчитывается вообще
		   (сама шапка схлопывается в 0×0 — воспроизводить эту поломку
		   живого сайта не нужно, у нас там гибкий вариант ниже). */
		width: 1440px;
		margin-left: 50%;
		transform: translateX(-50%);
		min-height: 70px;
		padding: 0 140px 0 125px;
	}

	.site-header__logo {
		display: flex;
		align-items: center;
	}

	.site-header__hours {
		margin-left: 5px;
	}

	.site-header__address-wrap {
		margin-left: 91px;
	}

	.site-header__messengers {
		justify-content: center;
		width: 218px;
		flex-shrink: 0;
		margin-left: 32px;
	}

	.site-header__phone {
		display: flex;
		align-items: center;
		margin-left: 0;
	}
}

.site-header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}

.site-header__burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
}

.site-header__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
}

.site-header__menu a {
  font-size: var(--header-nav-fs);
  font-weight: 500;
  color: var(--color-text);
}

.site-header__menu a:hover {
  color: var(--color-accent-green);
}

.site-header__email {
  font-size: var(--header-contact-fs);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

.site-header__mobile-menu {
  display: none;
}

/* Задача 26, часть 4: диапазон 981-1200px — на живом сайте это тот же
   "исходный дефект" 981-1200px из задачи 5 (там подтверждено: сама
   шапка на живом сайте схлопывается в 0×0, ни настольного, ни
   мобильного варианта нет; см. комментарий чуть ниже) — сверяться там
   не с чем, но у НАС в этом гибком диапазоне (сам блок ещё не в
   мобильном режиме, но уже теснее прежнего) первая строка шапки
   (часы+адрес+мессенджеры+телефон) и вторая строка (меню) переставали
   помещаться в один ряд и переносились на 2-3 строки — суммарная
   высота шапки вырастала с обычных ~128px до 190px и выше, а весь
   контент ниже (у него отступ сверху рассчитан на высоту шапки по
   умолчанию) заезжал под шапку и обрезался — обнаружено попиксельной
   сверкой при проверке этого диапазона (часть 4 задания). Часы и адрес
   — наименее необходимые элементы первой строки (телефон и мессенджеры
   для связи важнее) — скрыты здесь же, чтобы вернуть шапку к одной
   строке и обычной высоте, вместо неопределённого переноса. */
@media screen and (min-width: 981px) and (max-width: 1200px) {
  .site-header__hours,
  .site-header__address-wrap {
    display: none;
  }

  .site-header__messengers {
    padding-left: 0;
    border-left: 0;
  }

  /* Задача 35, часть 9: иконка поиска в шапке (задача 34, раздел 7)
     добавила в этот же тесный ряд ещё 32px+24px зазора — вместе с
     пунктами меню и почтой это уже не помещалось в одну строку в
     части этого диапазона (проверено getBoundingClientRect: пункты
     меню переносились на вторую строку, шапка вырастала со 128px до
     190px+, контент под ней обрезался тем же способом, что уже
     объяснено выше по коду для диапазона 981-1200px в целом — тот же
     дефект, новая причина). Пункты меню и так не сжимаются по
     ширине — сжат только зазор между ними (40px → 16px, самый
     крупный резерв места в строке: 6 зазоров × 24px экономии = 144px). */
  .site-header__menu {
    gap: 10px 14px;
  }

  .site-header__nav {
    gap: 12px;
  }
}

/* Единая граница переключения десктоп/мобильная версия — 980px
   (docs/task-05-template-styles.md, п. 4; исходный дефект с диапазоном
   981–1200px, где не показывалось ни одно меню, здесь не воспроизводится:
   один порог, а не два). */
@media screen and (max-width: 980px) {
  /* На живом сайте на мобильном виден только логотип и бургер — весь
     остальной первый ряд и второй ряд (меню/почта) скрыты, содержимое
     дублируется в мобильном меню (задача 6, не менялось в задаче 11). */
  .site-header__hours,
  .site-header__address-wrap,
  .site-header__messengers,
  .site-header__phone {
    display: none;
  }

  .site-header__nav {
    display: none;
  }

  .site-header__burger {
    display: flex;
  }

  .site-header__toggle:checked ~ .site-header__inner .site-header__burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .site-header__toggle:checked ~ .site-header__inner .site-header__burger span:nth-child(2) {
    opacity: 0;
  }

  .site-header__toggle:checked ~ .site-header__inner .site-header__burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .site-header__mobile-menu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 99;
    background: var(--color-white);
    padding: 32px 24px 40px;
    overflow-y: auto;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
  }

  .site-header__toggle:checked ~ .site-header__mobile-menu {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .site-header__mobile-logo img {
    display: block;
    height: 42px;
    width: auto;
    margin-bottom: 32px;
  }

  .site-header__mobile-menu a {
    text-decoration: none;
    color: inherit;
  }

  .site-header__mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-header__mobile-menu li {
    margin: 0 0 20px;
  }

  .site-header__mobile-menu a {
    display: block;
    font-family: var(--font-main);
    font-size: var(--header-mobile-link-fs);
    font-weight: 300;
    line-height: 1.17;
    color: var(--color-text);
  }
}

@media screen and (max-width: 640px) {
  .site-header__mobile-menu a {
    font-size: var(--header-mobile-link-fs-sm);
  }
}

@media screen and (max-width: 480px) {
  .site-header__mobile-menu a {
    font-size: var(--header-mobile-link-fs-xs);
  }
}

/* ==========================================================================
   ПОДВАЛ
   ========================================================================== */

/* Задача 11, п. 1.3: структура приведена к оригиналу — заголовок
   «Контакты», затем 3 колонки (Получить консультацию / Вопросы и
   предложения / Адрес — в этом порядке), крупный логотип по центру
   внизу (было: логотип слева от заголовка, другой порядок колонок,
   логотипа внизу не было). Заодно исправлено направление градиента —
   было 180deg (тёмный сверху/светлый снизу), на живом сайте наоборот
   (светло-зелёный сверху, тёмный снизу) — сверено через
   getComputedStyle. */
.site-footer {
  background: linear-gradient(0deg, var(--color-footer-from) 2%, var(--color-footer-to) 100%);
  color: var(--color-white);
  font-family: var(--font-main);
  /* Задача 12, часть 1: было 64px сверху и снизу — на живом сайте
     подвал заметно выше, весь недостаток именно в верхнем отступе
     (нижний совпадает: ~64px от низа логотипа до низа подвала,
     сверено getBoundingClientRect); верх — 137px до заголовка
     «Контакты» (внутренняя разметка Zero Block, абсолютное
     позиционирование — не единое «padding» в источнике, здесь
     сведено к обычному padding-top ближайшего круглого значения). */
  padding: 136px 0 64px;
  text-align: left;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--grid-gutter);
}

.site-footer__title {
  font-size: var(--footer-title-fs);
  line-height: 1.1;
  font-weight: 600;
  /* Задача 32, раздел 7: было 40px — прямой замер на живом сайте
     (задача 27, _report-full-parity.md, п.4) даёт отступ до первой
     строки колонки на 10px больше нашего. */
  margin: 0 0 50px;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin: 0 0 80px;
}

.site-footer__label {
  font-size: var(--footer-label-fs);
  font-weight: 400;
  opacity: 0.5;
  margin: 0 0 8px;
}

.site-footer__value {
  display: block;
  font-size: var(--footer-value-fs);
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 20px;
}

.site-footer__value--address {
  font-size: var(--footer-address-fs);
}

/* Задача 27: цвет не применялся — .site-footer a {color:inherit} имеет
   более высокую специфичность (класс+тег против одного класса) и
   всегда побеждал, реальным цветом всегда был унаследованный белый
   .site-footer. Добавлен тег к селектору, чтобы сравнять
   специфичность в свою пользу. */
a.site-footer__policy {
  display: inline-block;
  /* Задача 30: до второй ссылки (добавлена задачей 29, часть 5 —
     «Изменить настройки cookie») отступ не был нужен — ссылка на
     политику была одна. Без него обе ссылки шли впритык друг к другу
     без просвета. 8px — уже встречающееся в файле значение мелкого
     отступа (.site-footer__label), не новое. */
  margin-top: 8px;
  font-size: var(--footer-policy-fs);
  font-weight: 400;
  text-transform: uppercase;
  color: #f2f5f7;
  opacity: 1;
}

/* Соцсети в подвале — по запросу пользователя, не из ТЗ (см. коммент в
   footer.php). Ряд круглых иконок между колонками контактов и
   логотипом, тот же список, что выводится в шапке (SHOW_DESKTOP). */
.site-footer__social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 0 0 40px;
}

.site-footer__social-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.site-footer__social-item:hover {
  opacity: 1;
}

.site-footer__social-item img,
.site-footer__social-item svg {
  width: 33px;
  height: 33px;
}

.site-footer__logo {
  display: block;
  text-align: center;
}

.site-footer__logo img {
  display: inline-block;
  width: 100%;
  max-width: var(--footer-logo-width);
  height: auto;
}

@media screen and (max-width: 980px) {
  .site-footer__columns {
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
  }
}

@media screen and (max-width: 640px) {
  .site-footer__columns {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 480px) {
  .site-footer__title {
    font-size: var(--footer-title-fs-mobile);
  }

  .site-footer__logo img {
    max-width: var(--footer-logo-width-mobile);
  }
}

/* ==========================================================================
   ГЛАВНАЯ СТРАНИЦА (задача 7)
   Классы ниже — свои, не .t102__*, .t478__*, .t588__*, .t688__* (по прямому
   требованию задачи). Кнопка CTA — исключение: переиспользует готовый
   компонент из template_styles.css (раздел 9, .t-btn.t-btnflex.t-btnflex_type_button),
   он уже был сделан переиспользуемым в задаче 5, а не привязан к записи.
   ========================================================================== */

.main-content {
  font-family: var(--font-main);
  color: var(--color-text);
}

/* ---- Обложка (T102 → ИБ banners_main) ---- */

.hero {
  position: relative;
  /* Задача 26, часть 2: шапка теперь сама не в потоке (position:fixed,
     см. .site-header) — обложка и так начинается от верха окна, как на
     живом сайте, без искусственного отрицательного отступа (задача 25
     решала ту же проблему с другой стороны: сдвигала .hero вверх, пока
     шапка занимала место в потоке). Шапка красится поверх обложки
     благодаря z-index:100 у .site-header против z-index:auto здесь. */
  /* 100vh — общий случай (главная, страницы каталога). На /about, /terms,
     /lab высота и (иногда) заливка другие в самом исходнике — заданы
     точечно через --hero-height/--hero-bg на конкретном элементе
     (задача 9), а не отдельными модификаторами, раз общих групп с
     одинаковыми значениями не набралось. */
  min-height: var(--hero-height, 100vh);
  background: var(--hero-bg, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Задача 37, часть 3: фото-обложка центрирует заголовок по своей высоте,
   а сверху её закрывают фиксированная шапка и крошки — на /about и в
   разделах каталога заголовок (особенно в 2-3 строки) заезжал под
   крошки. Верхний отступ на высоту шапки и крошек: центр считается по
   видимой части обложки. box-sizing у .hero — border-box, высота
   обложки не меняется. На главной крошек нет — только шапка. */
.hero {
  padding-top: var(--header-h);
}

body[class*="page-"] .hero {
  padding-top: calc(var(--header-h) + var(--breadcrumbs-h));
}

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

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Белый градиент 0→1 — общий случай (главная, /about, /terms). На
     страницах каталога и /lab начинается с 50% непрозрачности, не с 0%
     (--hero-overlay-start). На /vacancy — тёмный (не белый) и не
     доходит до полной непрозрачности (--hero-overlay-rgb/-end) — фото
     людей, а не абстрактный фон, светлого затемнения недостаточно для
     контраста белого текста. Всё — переменные на уровне страницы
     (задача 9, часть 2 / задача 10), без отдельных модификаторов. */
  background: linear-gradient(to bottom, rgba(var(--hero-overlay-rgb, 255, 255, 255), var(--hero-overlay-start, 0)), rgba(var(--hero-overlay-rgb, 255, 255, 255), var(--hero-overlay-end, 1)));
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 var(--grid-gutter);
}

.hero__title {
  max-width: var(--hero-title-max-width, none);
  margin: 0 auto 24px;
  font-size: var(--hero-title-fs);
  font-weight: var(--hero-title-weight, 600);
  /* Задача 11, п. 1.4: регистр варьируется по странице (капслок —
     главная/о нас/сотрудничество/производство/каталог/лаборатория,
     обычный — вакансии) — переменная на уровне страницы, тем же
     способом, что и остальные .hero-переопределения. */
  text-transform: var(--hero-title-transform, uppercase);
  letter-spacing: var(--hero-title-spacing, 1px);
  color: var(--hero-text-color, var(--color-text));
  /* Перенос на 3 строки — только визуальный: в разметке между словами
     обычные пробелы/переносы строк (не <br>), pre-line отображает их
     как строки, но не портит текст при извлечении (в отличие от <br>,
     который в textContent не даёт пробела — см. tz.md Приложение №4). */
  white-space: pre-line;
}

/* max-width/margin — по умолчанию no-op (none/0 auto на полноширинном
   блоке ничего не меняет), пока страница не переопределит
   --hero-subtitle-max-width. Так же с весом и отступом между абзацами:
   на главной подзаголовок — один абзац с переносами через pre-line
   (жирный, 600); на страницах каталога и /lab подзаголовков может быть
   несколько (обычные <p>, не жирные, 400, с отступом друг от друга) —
   оба случая делят один и тот же --hero-subtitle-fs (значения
   совпадают буквально), различия — через переменные на уровне
   страницы (задача 9, часть 2), без отдельных модификаторов. */
.hero__subtitle {
  max-width: var(--hero-subtitle-max-width, none);
  margin: 0 auto;
  font-size: var(--hero-subtitle-fs);
  font-weight: var(--hero-subtitle-weight, 600);
  color: var(--hero-text-color, var(--color-text));
  white-space: pre-line;
  /* Задача 26, часть 3: не было явного значения (браузерный "normal",
     ~1.15-1.2) — на живом сайте 37.2px при 24px шрифта, то есть 1.55,
     одинаково и на главной, и на страницах каталога (сверено
     getComputedStyle в обоих местах). При нескольких строках разница
     накапливалась и заметно поднимала центрированный блок обложки
     выше нужного (до 78px на /production/men). */
  line-height: 1.55;
}

.hero__subtitle + .hero__subtitle {
  margin-top: var(--hero-subtitle-gap, 16px);
}

/* Задача 37, часть 3: на 360 «КОНТРАКТНОЕ» (главная) и «СОТРУДНИЧЕСТВА»
   (/terms) при 36px вылезали за край экрана. Размер падает вместе с
   шириной экрана, так что самое длинное слово умещается в 360px; внутри
   слова не переносится (hyphens: manual, overflow-wrap: normal). */
.hero__title,
.intro-banner__title {
  hyphens: manual;
  overflow-wrap: normal;
}

@media screen and (max-width: 980px) {
  .hero__title {
    font-size: clamp(20px, 8vw, var(--hero-title-fs-mobile));
  }
}

@media screen and (max-width: 480px) {
  .hero__subtitle {
    font-size: var(--hero-subtitle-fs-mobile);
  }
}

/* Переопределения переменных .hero по странице — вместо инлайновых
   style в разметке и вместо именованных модификаторов вида
   .hero--production/.hero--lab (задача 9, часть 2 → правка). Класс
   вешается на <body>, само значение точечно переопределяется только
   там, где реально отличается от общих значений выше. */

.page-production .hero {
  --hero-title-fs: var(--hero-title-fs-production);
  --hero-title-fs-mobile: var(--hero-title-fs-production-mobile);
  /* Задача 26, часть 3: на живом сайте несколько абзацев описания
     раздела — не отдельные блоки с отступом, а один блок с <br> между
     ними (проверено innerHTML на /production/hair) — то есть без
     дополнительного отступа сверх межстрочного интервала. У нас
     DESCRIPTION хранится как отдельные <p> (см. production/index.php)
     — визуально самый близкий эквивалент тому же <br> — обнулить
     --hero-subtitle-gap только на страницах каталога, не трогая общий
     дефолт (используется и на других страницах, где абзацы — это
     реальные раздельные абзацы с отступом на живом сайте). Из-за этого
     на /production/hair, /body, /men (там больше одного абзаца)
     заголовок с описанием были заметно выше центра обложки, чем на
     живом сайте — до 71px разницы по Y (задача 25/26, попиксельная
     сверка). */
  --hero-subtitle-gap: 0px;
  --hero-overlay-start: 0.5;
  --hero-subtitle-weight: 400;
  --hero-subtitle-max-width: 700px;
  /* Задача 26, часть 3: без ограничения ширины заголовок у нас занимал
     всю ширину контейнера и переносился на 2 строки — на живом сайте
     колонка заголовка уже (1160px внутри контейнера 1200px, замерено
     getBoundingClientRect на /production/hair), из-за чего он
     переносится на 3 строки. Меньше строк — меньше высота блока —
     чем длиннее заголовок раздела, тем заметнее расхождение по Y. */
  --hero-title-max-width: 1160px;
}

.page-lab .hero {
  /* Задача 24: было 50vh — при обычной высоте окна давало те же 450px,
     что и на живом сайте, но случайно (значение зависит от высоты
     окна браузера, а не от ширины экрана, и на другой высоте окна
     разъехалось бы). На живом сайте это фиксированная высота блока
     (.t-cover) — задача 24 сверяла её при sticky-шапке, где обложка
     начиналась НЕ с самого верха окна (сдвинута на высоту шапки), и
     получила 450px по факту сравнивая не то же самое. Задача 26,
     часть 2: прямой замер getBoundingClientRect() .t-cover на живом
     сайте (шапка теперь тоже fixed с обеих сторон) даёт 500px, не
     450 — заголовок (72px, по центру блока) начинается на 162.5px,
     это и есть причина обрезки текста шапкой при 450px. */
  --hero-bg: var(--color-surface);
  --hero-title-fs: var(--hero-title-fs-production);
  --hero-title-fs-mobile: 28px;
}

/* Задача 36: на /lab и /terms у обложки нет фото — сплошная заливка с
   заголовком посередине фиксированной высоты (500/700px), и между
   заголовком и первым содержимым оставалось 245-265px пустоты. Высота
   теперь по содержимому: сверху — шапка + крошки + заголовочный отступ
   шкалы, снизу — по шкале. На /lab обложка и вступительный текст под
   ней одного цвета (#dceee0) и читаются как один блок, поэтому между
   заголовком и текстом — отступ «заголовок → содержимое», а не
   межсекционный. */
body.page-lab .hero,
body.page-terms .hero {
  --hero-height: 0;
  padding-top: calc(var(--header-h) + var(--breadcrumbs-h) + var(--space-head));
}

.page-lab .hero__title,
.page-terms .hero__title {
  margin-bottom: 0;
}

.page-terms .hero {
  padding-bottom: var(--space-half);
}

.page-about .hero {
  --hero-height: 50vh;
  /* Задача 14, п. 4.2 объясняла смещение заголовка вниз тем, что наша
     непрозрачная шапка "занимает своё место в потоке", и подгоняла
     это точечно (align-items:flex-start + padding-top:48px на
     .hero__content). Задача 25 устранила саму причину для всех
     обложек разом — см. margin-top:-128px у общего правила .hero
     выше — этот точечный костыль стал не нужен и мешал (после общего
     исправления заголовок оказывался выше нужного). */
}


/* /vacancy (задача 10): единственная обложка с фото людей — тёмный
   (не белый) полупрозрачный оверлей и белый текст, иначе он не читается
   на фото. Заголовок и подзаголовок в исходнике заданы Tilda-виджетом
   «свой размер текста» (та же механика, что у /manufacture, T467,
   задача 9) — упрощено до двух уровней без промежуточного пика. */
.page-vacancy .hero {
  /* Исправлено в задаче 12: было 40vh — источник давал именно это
     значение в разметке для мобильных брейкпоинтов, но на десктопе
     (сверено getComputedStyle) высота фиксированная — 540px, не
     относительная. */
  --hero-height: 540px;
  --hero-overlay-rgb: 0, 0, 0;
  --hero-overlay-start: 0;
  --hero-overlay-end: 0.7;
  --hero-text-color: #fff;
  /* Задача 26, часть 3 меняла это на 72px — измерила getComputedStyle
     на <h2 class="t001__title">, но у Tilda-виджета "свой размер
     текста" реальный, применённый размер сидит на ВЛОЖЕННОМ <div
     style="font-size:52px" data-customstyle="yes"> внутри этого h2
     (h2 несёт класс t-title_xl с базовым 72px, который здесь ни к чему
     не применяется — переопределён инлайн-стилем ребёнка). Задача 27
     нашла ошибку: substring-поиск по тексту заголовка совпадает и с
     h2, и с его единственным потомком (одинаковый textContent), выбор
     "самый короткий текст" их не различает, достался внешний h2.
     Прямой замер именно вложенного div (getComputedStyle + натуральная
     ширина без переноса) даёт 52px и естественную ширину 1200px без
     переноса — то есть задача 12 была права изначально, 52px verified
     заново. */
  --hero-title-fs: 52px;
  --hero-title-fs-mobile: 30px;
  --hero-subtitle-fs: 22px;
  /* Задача 11, п. 1.4: заголовок первого экрана на /vacancy — обычный
     регистр на живом сайте (сверено через getComputedStyle), не
     капслок, в отличие от главной/о нас/сотрудничество/производства. */
  --hero-title-transform: none;
  /* Начертание 400 (обычное) и трекинг 0.5px — тоже замерены на верном
     вложенном элементе (задача 27), эта часть замера задачи 26 совпала
     с реальностью случайно правильно. --hero-title-max-width убран:
     при верном 52px заголовок и так укладывается в одну строку без
     ограничения ширины (см. отчёт, часть 1). */
  --hero-title-weight: 400;
  --hero-title-spacing: 0.5px;
}

/* ---- «Подробнее о нас» (T478) ---- */

.about {
  padding: var(--space-half) var(--grid-gutter);
}



.about__container {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  /* Задача 12, п. 4.6: было var(--grid-gutter) (20px) — на живом
     сайте между колонками 40px (сверено getBoundingClientRect). */
  gap: 40px;
}

.about__text {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
}

.about__title {
  margin: 0 0 16px;
  font-size: var(--about-title-fs);
  font-weight: 600;
  color: var(--color-text);
}

/* Задача 23, часть 3: заголовок стал ссылкой на /about (задача 22,
   устранение дефекта из tz.md, Приложение №4) — без этого правила
   ссылка получала дефолтный синий подчёркнутый стиль браузера вместо
   вида обычного заголовка. Цвет/начертание — как у самого .about__title
   (наследуются), подчёркивания нет; при наведении — смена цвета на
   акцентный зелёный, тот же приём, что у .catalog__title a:hover. */
.about__title a {
  color: inherit;
  text-decoration: none;
}

.about__title a:hover {
  color: var(--color-accent-green);
}

.about__desc {
  max-width: var(--about-desc-max-width);
  margin: 0 0 16px;
  font-size: var(--about-desc-fs);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
}

.about__desc:last-child {
  margin-bottom: 0;
}

.about__media {
  flex: 1 1 50%;
}

.about__media img {
  display: block;
  width: 100%;
  /* 50vh — общий случай (главная, «Миссия» на /about); первый блок
     /about («От лаборатории к полному циклу») задаёт фиксированные
     560px через --about-media-height на самом элементе (задача 9) */
  height: var(--about-media-height, 50vh);
  object-fit: cover;
  /* Задача 37, часть 8: скругление, как у остальных фото и карточек
     сайта (/lab, /terms, /manufacture, карточки) — было прямыми углами. */
  border-radius: 16px;
}

@media screen and (max-width: 980px) {
  .about__container {
    flex-direction: column;
  }
}

@media screen and (max-width: 480px) {
  .about__title {
    font-size: var(--about-title-fs-mobile);
  }

  .about__desc {
    font-size: var(--about-desc-fs-mobile);
  }
}

/* ---- CTA «Ваш успех начинается здесь и сейчас» (T588) ---- */

.cta {
  padding: var(--space-section) var(--grid-gutter);
  background: var(--cta-bg);
  text-align: center;
}

/* Модификатор — CTA страниц каталога (T588 на /production/*, задача 8):
   тот же блок, но в исходнике без фона и без подзаголовка (.cta__desc
   там просто отсутствует в разметке — для него отдельного правила не
   нужно). Без .cta__desc заголовку нужен больший отступ до кнопки. */
/* Без фона — значит белая секция, половина отступа, как у остальных белых. */
.cta--plain {
  background: none;
  padding: var(--space-half) var(--grid-gutter);
}

/* Задача 36, часть 2: внутри .cta было 25px от заголовка до текста и
   70px от текста до кнопок (значения живого сайта) — блок выглядел
   пустым изнутри. Теперь: заголовок → текст 16px, текст → кнопки 32px;
   если текста нет, заголовок → кнопка тоже 32px (16 + 16). Одинаково
   во всех .cta сайта, не только в «Заполните бриф» — это один и тот же
   компонент. */
.cta__title {
  margin: 0 0 16px;
  font-size: var(--cta-title-fs);
  font-weight: 600;
  color: var(--color-text);
}

.cta__title + .t-btn,
.cta__title + .cta__buttons {
  margin-top: 16px;
}

.cta__desc {
  max-width: var(--cta-desc-max-width);
  margin: 0 auto 32px;
  font-size: var(--cta-desc-fs);
  font-weight: 400;
  color: var(--color-text);
}

/* Задача 29: блок «Заполнить бриф» — единственное место на сайте, где
   у .cta две кнопки (обычный сценарий/переход к брифу и скачивание
   файла), раньше была ровно одна — понадобился только ряд с отступом,
   остальное стилевое решение то же самое, не новое. Задача 32: тот же
   ряд из двух кнопок нужен и на слайде баннера главной («Скачать
   бриф»/«Получить консультацию») — правило разделено на оба класса,
   а не продублировано. */
.cta__buttons,
.hero-slider__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

/* Задача 30: в этой паре кнопок зелёная (.t-btnflex_accent) сохраняла
   свою обычную типографику — обычный регистр, 16px, вес 600 — а
   чёрная рядом с ней шла капслоком и 20px. По отдельности каждая
   кнопка оформлена верно (сверено с формой /order и /vacancy для
   зелёной, с "Перейти к брифу"/"Заказать разработку" для чёрной), но
   рядом друг с другом это расхождение бросается в глаза так, как не
   бывает больше нигде на сайте — там у .t-btnflex_accent никогда нет
   соседа другого цвета. Здесь — открыть его типографике: капслок,
   20px, вес 500 у чёрной кнопки — как у более частого варианта CTA-
   кнопки на сайте (7 из 10 против 3), цвет не трогаем. Пять классов в
   селекторе — чтобы гарантированно перебить сам .t-btnflex_accent
   (4 класса) независимо от порядка правил в файле. Задача 32: тот же
   ряд из двух разноцветных кнопок появился и на слайде баннера
   («Скачать бриф»/«Получить консультацию») — то же самое расхождение,
   то же самое исправление. */
/* Задача 36, часть 2: в ряду кнопок .cta (блок «Заполните бриф»)
   чёрного соседа больше нет — зелёная кнопка вернулась к своей
   обычной типографике (обычный регистр, 16px, 600), и остальные
   элементы ряда подстроены под неё, а не наоборот. На слайде баннера
   главной пара кнопок прежняя (зелёная + чёрная) — там правило
   задачи 30 оставлено. */
.hero-slider__buttons .t-btn.t-btnflex.t-btnflex_type_button.t-btnflex_accent {
  font-size: 20px;
  font-weight: 500;
  text-transform: uppercase;
}

/* Второстепенная кнопка — контурная: белая, тонкая рамка, тёмный
   текст; размер и регистр — как у главной зелёной (.t-btnflex_accent),
   чтобы в одном ряду кнопки отличались только весом, а не шрифтом.
   --border-width участвует в расчёте вертикального паддинга .t-btnflex,
   поэтому высота совпадает с зелёной кнопкой. */
.t-btn.t-btnflex.t-btnflex_type_button.t-btnflex_outline {
  --border-width: 1px;
  background-color: var(--color-white);
  border-color: var(--color-input-border);
  color: var(--color-text);
  font-size: 16px;
  font-weight: 600;
  text-transform: none;
  transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.t-btn.t-btnflex.t-btnflex_type_button.t-btnflex_outline:hover,
.t-btn.t-btnflex.t-btnflex_type_button.t-btnflex_outline:focus-visible {
  border-color: var(--color-accent-green);
  color: var(--color-accent-green);
}

/* Третий, самый лёгкий уровень — текстовая ссылка со стрелкой. */
.cta__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-link);
  text-decoration: none;
}

.cta__link::after {
  content: '→';
}

.cta__link:hover {
  text-decoration: underline;
}

/* Задача 30: на нескольких страницах (/contacts, /vacancy, /terms)
   .cta переопределён под конкретный блок в начале страницы (другой
   фон, паддинг, размер заголовка) — без сброса эти переопределения по
   ошибке доставались бы и блоку «Заполнить бриф» внизу той же
   страницы, для которого они не предназначены. .cta--brief
   (local/templates/fda/brief-cta.php) возвращает те же значения, что
   в этом файле заданы глобально по умолчанию — тег + 2 класса нужны,
   чтобы специфичность гарантированно была выше, чем у
   .page-контакты/.page-vacancy .cta (2 класса). Фона нет намеренно:
   ниже блока всегда идёт сквозная форма (.callback-form, фон #f5f5f5)
   — с фоном по умолчанию (#ededed) два серых блока подряд читаются
   как один, без видимой границы между ними (см. отчёт по задаче 30). */
section.cta.cta--brief {
  --cta-title-fs: 32px;
  --cta-title-fs-mobile: 24px;
  background: none;
  padding: var(--space-half) var(--grid-gutter);
}

@media screen and (max-width: 980px) {
  .cta__title {
    font-size: var(--cta-title-fs-mobile);
  }

  .hero-slider__buttons .t-btn.t-btnflex.t-btnflex_type_button.t-btnflex_accent {
    font-size: 16px;
  }
}

@media screen and (max-width: 480px) {
  .cta__desc {
    font-size: var(--cta-desc-fs-mobile);
  }

  /* Задача 36, часть 2: в колонку кнопки одинаковой ширины, а не по
     длине надписи. */
  .cta__buttons {
    flex-direction: column;
  }

  .cta__buttons .t-btn {
    width: 100%;
    max-width: 320px;
  }
}

/* ---- Продуктовая сетка (T688) ---- */

/* Задача 36: сетка каталога не тронута (сверяется с оригиналом), шкала
   применена только к полям самой секции вокруг неё. Снизу — минус 40px:
   у заголовка карточки внутри сетки свой нижний отступ 40px (часть
   защищённой сетки), без компенсации до следующего блока выходило 140. */
.catalog {
  padding: var(--space-half) var(--grid-gutter) max(0px, calc(var(--space-half) - 40px));
}

.catalog__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--catalog-row-gap) var(--grid-gutter);
}

.catalog__item {
  flex: 1 1 calc((100% - 2 * var(--grid-gutter)) / 3);
  display: flex;
  flex-direction: column;
  text-align: center;
}

.catalog__media {
  display: block;
  width: 100%;
  aspect-ratio: 10 / 7;
  overflow: hidden;
}

.catalog__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease-in-out;
}

.catalog__item:hover .catalog__media img {
  opacity: 0.8;
}

/* Задача 12, часть 1: --catalog-card-padding (30px) была измерена ещё
   в задаче 7, но ни разу не применена в правилах — карточка была
   заметно ниже живого сайта. На живом это padding:30px на обёртке
   текста вокруг заголовка (30 сверху + 10 нижний margin заголовка
   внутри + 30 снизу = 113px общей высоты текстового блока, сверено
   через getComputedStyle) — здесь свёрнуто в padding самого заголовка,
   без отдельной обёртки. */
.catalog__title {
  margin: 0 auto;
  /* Задача 14, п. 4.1: было во всю ширину карточки (~386px) — на живом
     сайте (getBoundingClientRect) заголовок карточки уже колонки,
     300px, из-за чего обе первые подписи переносятся в две строки. */
  max-width: 300px;
  padding: var(--catalog-card-padding) 0 40px;
  font-size: var(--catalog-title-fs);
  font-weight: 600;
}

.catalog__title a {
  color: var(--color-text);
  /* Задача 12, п. 4.5: на живом сайте подписи под карточками без
     подчёркивания — здесь не был явно сброшен браузерный дефолт
     для <a>. */
  text-decoration: none;
}

.catalog__title a:hover {
  color: var(--color-accent-green);
}

@media screen and (max-width: 980px) {
  .catalog__item {
    flex: 1 1 100%;
  }
}

@media screen and (max-width: 480px) {
  .catalog__title {
    font-size: var(--catalog-title-fs-mobile);
  }
}

/* ==========================================================================
   СТРАНИЦЫ КАТАЛОГА /production/* (задача 8)
   Общий шаблон для всех 6 разделов — разметка и классы одинаковые,
   различается только контент (docs/prototype/pages/_report-production.md, п. 2).
   Обложка и CTA сведены в задаче 9 к общим .hero/.cta (различия — через
   переопределение переменных на странице, без модификаторов; кнопка —
   .cta--plain, см. выше) — здесь остался только T842, у которого пока
   ничего общего с другими блоками сайта нет.
   ========================================================================== */

/* ---- Подкатегории раздела (T842) ---- */

.subcategories {
  padding: var(--space-half) var(--grid-gutter);
}


.subcategories__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  /* Задача 26, часть 3: горизontальный промежуток был var(--grid-gutter)
     (20px) — прямой замер ширины карточки на живом сайте (560px из
     1200px контейнера на 2 карточки) даёт 80px, не 20. Из-за более
     узкого промежутка карточки были на 30px шире нужного, что вместе
     с межстрочным интервалом абзацев (см. .subcategories__desc выше)
     давало наибольший вклад в накопленный сдвиг секции "текст + сетка
     подкатегорий" (до 134px к следующему блоку). */
  gap: var(--space-item);
}

/* Задача 36, часть 7: карточки были почти белыми (#fcfcfc) и без
   скругления — на белом фоне страницы граница карточки не читалась.
   Тот же язык, что у остальных карточек сайта (ценности, счётчики,
   реквизиты): заливка --cta-bg, скругление 16px. */
.subcategories__item {
  flex: 1 1 calc(50% - var(--space-item));
  box-sizing: border-box;
  background: var(--cta-bg);
  border-radius: 16px;
  padding: 32px;
}

.subcategories__title {
  margin: 0 0 15px;
  font-size: var(--subcategory-title-fs);
  font-weight: 600;
  color: var(--color-text);
}

.subcategories__desc {
  margin: 0;
  font-size: var(--subcategory-desc-fs);
  font-weight: 400;
  /* Задача 26, часть 3: было 1.5 — прямой замер на живом сайте даёт
     21.7px при 14px шрифта, то есть 1.55, тот же коэффициент, что и у
     .hero__subtitle (задача 26) и .legal p (более ранняя задача) —
     похоже на общий межстрочный интервал текста по всему сайту. */
  line-height: 1.55;
  color: var(--color-text);
}

/* Несколько абзацев описания подкатегории на живом сайте — один блок
   с "<br><br>" между ними (пустая строка), не два отдельных <p> с
   отступом — так же, как раньше найдено у .hero__subtitle (задача 26,
   часть 3). У нас DESCRIPTION хранится как отдельные <p> — заменить
   отступом сверху ровно в одну строку эмулирует ту же пустую строку,
   вместо начального 16px, который не привязан к межстрочному
   интервалу и не совпадал с живым сайтом (134px накопленной разницы
   на всю секцию к моменту задачи 26). */
.subcategories__desc + .subcategories__desc {
  margin-top: calc(var(--subcategory-desc-fs) * 1.55);
}

@media screen and (max-width: 980px) {
  .subcategories__item {
    flex: 1 1 100%;
    padding: 30px 30px 30px;
  }

  .subcategories__title {
    margin-bottom: 10px;
  }
}

@media screen and (max-width: 480px) {
  .subcategories__item {
    padding: 20px;
  }

  .subcategories__title {
    font-size: var(--subcategory-title-fs-mobile);
  }

  .subcategories__desc {
    font-size: var(--subcategory-desc-fs-mobile);
  }
}

/* CTA «Нужна своя линейка?» (T588) — .cta.cta--plain, см. раздел
   «ГЛАВНАЯ СТРАНИЦА» выше (задача 9, сведение классов). */

/* ==========================================================================
   КОНТЕНТНЫЕ СТРАНИЦЫ /manufacture, /about, /terms, /lab (задача 9)
   Перед каждым новым блоком проверялось совпадение с уже существующим
   (см. docs/prototype/pages/_report-content-pages.md, п. 1, 7) — заведены
   только блоки, которых на сайте больше ни на что не похоже.
   ========================================================================== */

/* ---- Заголовок раздела без карточки (T-section__title без переопределения) ---- */

.section-title {
  max-width: var(--container-max);
  margin: 0 auto var(--space-head);
  padding: 0 var(--grid-gutter);
  font-size: var(--section-title-fs);
  font-weight: 400;
  text-align: center;
  color: var(--color-text);
}

@media screen and (max-width: 480px) {
  .section-title {
    font-size: var(--section-title-fs-mobile);
  }
}

/* Задача 36: заголовок «Открытые вакансии» на /vacancy был крупнее
   остальных (42px инлайн-стилем) — перенесено в модификатор. */
.section-title--lg {
  font-size: 42px;
}

@media screen and (max-width: 480px) {
  .section-title--lg {
    font-size: var(--section-title-fs-mobile);
  }
}

/* Задача 36: секции, у которых раньше отступы были инлайн-стилем в
   шаблонах (инлайн перебил бы шкалу) — теперь классы на той же шкале.
   Цветные полосы — полный --space-section внутри, белые — половина. */
.features-band {
  padding: var(--space-section) var(--grid-gutter);
  background: var(--color-surface);
}

.features-band__action {
  margin-top: var(--space-head);
  text-align: center;
}

.minimum-band {
  padding: var(--space-section) var(--grid-gutter);
  background: var(--color-surface);
}

.benefits,
.order-form {
  padding: var(--space-half) var(--grid-gutter);
}

/* ---- Карточки «текст + фото», чередующиеся (T509: /terms, /lab) ---- */

.split-cards {
  padding: var(--space-half) var(--grid-gutter);
}

.page-lab .text-banner__text {
  max-width: 1160px;
}

/* Задача 36: ряды «фото + текст» (/lab, /terms) — самостоятельные
   смысловые блоки, расстояние между ними межсекционное (--space-section),
   то же, что между отдельными .facility-секциями на /manufacture. */
.split-cards__list {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-section);
}

.split-cards__item {
  display: flex;
  align-items: center;
  gap: var(--grid-gutter);
}

/* Задача 19: /terms выводит схемы сотрудничества компонентом
   (одинаковый порядок media/text в разметке для каждого элемента
   цикла), чередование сторон — этим модификатором на нечётных
   элементах, а не порядком тегов, как было в статичном прототипе.
   Визуальный результат тот же (задача 19, п. "Возможны следующие
   схемы работы"). */
.split-cards__item--reverse {
  flex-direction: row-reverse;
}

.split-cards__media {
  flex: 1 1 50%;
  min-width: 0;
}

.split-cards__media img {
  display: block;
  width: 100%;
  height: var(--split-media-height, 300px);
  max-width: var(--split-media-max-width, none);
  object-fit: cover;
}

.split-cards__text {
  flex: 1 1 50%;
  min-width: 0;
  max-width: 400px;
  text-align: left;
}

/* Модификатор — ряды «фото + текст в карточке», /lab и /terms (до
   задачи 37 назывался --center, по давно ушедшему центрированию
   текста; задача 37, часть 7 перевела на него и схемы на /terms).
   Задача 36, часть 4: было — узкий
   (400px) абзац по центру, висящий посередине высоты квадратного фото
   450px, с пустыми полями по бокам внутри своей половины. Короткий
   текст рядом с высоким фото пустоват при любом выравнивании, поэтому
   текст в карточке с заливкой: карточка растягивается на высоту фото
   (align-items: stretch), верхний и нижний края обеих половин
   совпадают, пустого поля нет — вместо него цельная панель, тот же
   язык, что у карточек ценностей и счётчиков. Текст и заголовок — по
   левому краю, по вертикали по центру карточки. Контейнер 960px:
   фото 450 + зазор + карточка примерно той же ширины. Чередование
   сторон — порядком тегов в разметке, как и раньше. */
.split-cards--card .split-cards__list {
  max-width: 960px;
}

.split-cards--card .split-cards__item {
  align-items: stretch;
  gap: var(--space-item);
}

.split-cards--card .split-cards__media {
  --split-media-height: 450px;
  --split-media-max-width: 450px;
  flex: 0 0 450px;
}

.split-cards--card .split-cards__media img {
  border-radius: 16px;
}

.split-cards--card .split-cards__text {
  flex: 1 1 auto;
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  border-radius: 16px;
  background: var(--cta-bg);
  text-align: left;
}

.split-cards__title {
  margin: 0 0 12px;
  font-size: var(--split-title-fs);
  font-weight: 500;
  color: var(--color-text);
}

.split-cards__desc {
  margin: 0;
  font-size: var(--split-desc-fs, 16px);
  font-weight: var(--split-desc-weight);
  line-height: 1.5;
  color: var(--color-text);
}

@media screen and (max-width: 980px) {
  .split-cards__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .split-cards__media,
  .split-cards__text {
    flex-basis: 100%;
    max-width: 100%;
  }

  /* Задача 37, часть 7: ряды «фото + карточка» на планшете остаются
     рядом — места хватает, а в колонку фото растягивалось на всю
     ширину (940×705 на 980). Фото — 45% ширины, квадратное. */
  .split-cards--card .split-cards__item {
    flex-direction: row;
    align-items: stretch;
  }

  .split-cards--card .split-cards__item--reverse {
    flex-direction: row-reverse;
  }

  .split-cards--card .split-cards__media {
    flex: 0 0 45%;
  }

  .split-cards--card .split-cards__media img {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .split-cards--card .split-cards__text {
    padding: 32px 24px;
  }
}

/* Телефон: в колонку — фото всегда сверху (у «обратных» рядов текст в
   разметке идёт первым), на всю ширину, 4:3, карточка под ним. */
@media screen and (max-width: 640px) {
  .split-cards--card .split-cards__item,
  .split-cards--card .split-cards__item--reverse {
    flex-direction: column;
    gap: 0;
  }

  .split-cards--card .split-cards__media {
    flex: 0 0 auto;
    order: -1;
  }

  .split-cards--card .split-cards__media img {
    max-width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 16px 16px 0 0;
  }

  .split-cards--card .split-cards__text {
    border-radius: 0 0 16px 16px;
  }
}

@media screen and (max-width: 480px) {
  .split-cards__title {
    font-size: var(--split-title-fs-mobile);
  }
}

/* ---- Список с чекмарком (T841 на /about, T508 на /terms) ---- */

.checklist {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-item) var(--grid-gutter);
}

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--checklist-gap, 20px);
  flex: 1 1 100%;
}

.checklist__icon {
  flex-shrink: 0;
  width: var(--checklist-icon-size, 30px);
  height: auto;
}

.checklist__text {
  font-size: var(--checklist-fs);
  font-weight: var(--checklist-weight, 400);
  color: var(--color-text);
}

/* Модификатор — 8 преимуществ на /about: 2 колонки, иконка 30px */
.checklist--advantages {
  --checklist-gap: 20px;
  --checklist-icon-size: 30px;
  --checklist-fs: var(--checklist-advantages-fs);
  --checklist-weight: 600;
}

.checklist--advantages .checklist__item {
  flex: 1 1 calc(50% - var(--grid-gutter) / 2);
}

/* Модификатор — минимальные партии на /terms: 1 колонка, иконка 40px */
.checklist--minimum {
  --checklist-gap: 20px;
  --checklist-icon-size: 40px;
  --checklist-fs: var(--checklist-minimum-fs);
  --checklist-weight: 300;
}

/* Задача 36, часть 7: список в один столбец растягивался на всю
   ширину контейнера 1200px — короткие строки слева, справа пусто, при
   заголовке по центру над ними. Блок списка сужен и стоит по центру,
   пункты внутри — по левому краю. Инлайн padding-bottom:60px у списка
   в шаблоне компонента убран (давал 160px снизу в серой полосе). */
.checklist--minimum {
  max-width: 720px;
}

@media screen and (max-width: 980px) {
  .checklist--advantages .checklist__item {
    flex: 1 1 100%;
  }
}

@media screen and (max-width: 480px) {
  .checklist--advantages {
    --checklist-fs: var(--checklist-advantages-fs-mobile);
  }

  .checklist--minimum {
    --checklist-fs: var(--checklist-minimum-fs-mobile);
  }
}

/* ---- Ценности компании (T846, /about) ---- */

.values {
  padding: var(--space-half) var(--grid-gutter);
}

/* Задача 36, часть 7: был по левому краю — единственный заголовок
   секции на /about не по центру (у «Наша команда» и остальных — центр). */
.values__title {
  max-width: var(--container-max);
  margin: 0 auto var(--space-head);
  padding: 0 var(--grid-gutter);
  text-align: center;
  font-size: var(--values-title-fs);
  font-weight: 400;
  color: var(--color-text);
}

/* Задача 35, часть 16: было — четыре пункта простым столбцом, без
   всякой границы между ними (общий большой gap:56px создавал те же
   "большие разрывы", что и найдено в части 11), один пункт случайно
   получал рамку при наведении, остальные нет. Сетка 2×2 карточками —
   каждая сама себе визуальная граница (заливка+тень), поэтому
   отдельный hover-эффект не нужен отдельно: подъём+тень при наведении
   уже общий для всех .values__list > li (misc.css, задача 34/раздел 9
   — унификация, часть 9 этой же задачи), теперь одинаково видимый на
   каждой карточке, а не только на одной. */
.values__list {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-item);
}

.values__list > li {
  background: var(--cta-bg);
  border-radius: 16px;
  padding: 36px 32px;
}

.values__item-title {
  margin: 0 0 14px;
  font-size: var(--values-item-title-fs);
  font-weight: 500;
  color: var(--color-text);
}

.values__item-desc {
  margin: 0;
  font-size: var(--values-item-desc-fs);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text);
}

@media screen and (max-width: 767px) {
  .values__list {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 480px) {
  .values__item-title {
    font-size: var(--values-item-title-fs-mobile);
  }

  .values__item-desc {
    font-size: var(--values-item-desc-fs-mobile);
  }
}

/* ---- Команда (T524, /about) ---- */

.team {
  padding: var(--space-half) var(--grid-gutter);
}

.team__title {
  margin: 0 auto var(--space-head);
  max-width: var(--container-max);
  padding: 0 var(--grid-gutter);
  font-size: var(--team-title-fs);
  font-weight: 600;
  text-align: center;
  color: var(--color-text);
}

.team__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  /* Задача 36: между рядами карточек команды — --space-head, а не
     --space-item: подпись (имя и должность) стоит под фото, и при 24px
     она визуально прилипала бы к фото следующего ряда. */
  row-gap: var(--space-head);
}

.team__item {
  flex: 0 0 25%;
  box-sizing: border-box;
  padding: 0 20px;
  text-align: center;
}

.team__photo {
  display: block;
  width: 200px;
  height: 200px;
  max-width: 100%;
  /* Задача 11, п. 3.1: aspect-ratio один без явного height не сработал
     — атрибуты width/height="720" в разметке (реальные пропорции
     исходных фото) браузер трактует как заданную высоту наравне с
     CSS-шириной, а не как «auto», из-за чего aspect-ratio эту высоту
     не пересчитывал, и фото растягивались в овал. Явный height:200px
     того же значения, что и width, снимает конфликт. */
  aspect-ratio: 1 / 1;
  margin: 0 auto 20px;
  border-radius: 50%;
  object-fit: cover;
}

.team__name {
  margin: 0 0 4px;
  font-size: var(--team-name-fs);
  font-weight: 500;
  color: var(--color-text);
}

.team__role {
  margin: 0;
  font-size: var(--team-role-fs);
  color: var(--team-role-color);
}

@media screen and (max-width: 980px) {
  .team__item {
    flex: 0 0 50%;
  }
}

@media screen and (max-width: 480px) {
  .team__item {
    flex: 0 0 100%;
  }

  .team__name {
    font-size: var(--team-name-fs-mobile);
  }
}

/* ---- Цех с галереей фото (T764, /manufacture) ---- */

.facility {
  padding: var(--space-half) var(--grid-gutter);
}


/* Задача 36, часть 6: было — текстовая колонка 460px и галерея 460px
   в контейнере 1200px, по центру высоты друг друга: справа от галереи
   оставалось ~240px пустоты, короткий текст висел посередине высоты
   фото. Теперь текст занимает всю ширину, оставшуюся от галереи, оба
   выровнены по верхнему краю. */
.facility__container {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
}

/* Задача 37, часть 6: одно правило для всех рядов — колонки по центру
   друг друга по вертикали. У рядов с коротким текстом («Фасовка и
   этикетировка» и др.) под текстом, прижатым к верху, оставалось
   пустое поле на всю высоту фото; если же текст выше фото («Склады»),
   по центру встаёт фото, что тоже выглядит собранно. */

.quality-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-item);
  margin: 0;
  padding-left: 20px;
  font-size: var(--facility-desc-fs);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text);
}

.quality-list strong {
  font-weight: 600;
}

.facility__text {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 640px;
  text-align: left;
}

/* Задача 36, часть 6: заголовок по левому краю, как и текст под ним
   (было — по центру над левым текстом). */
.facility__title {
  margin: 0 0 16px;
  font-size: var(--facility-title-fs);
  font-weight: 700;
  color: var(--color-text);
  text-align: left;
}

.facility__desc {
  margin: 0 0 12px;
  font-size: var(--facility-desc-fs);
  font-weight: 300;
  line-height: 1.5;
  text-align: left;
  color: var(--color-text);
}

.facility__desc:last-child {
  margin-bottom: 0;
}

/* Задача 26, часть 3 сюда добавляла text-align:center для этого абзаца
   (на живом сайте он и правда по центру, вместе с заголовком, — сверено
   и подтверждено заново в задаче 35). Задача 35, часть 3: сам живой
   сайт в этом месте непоследователен — заголовок и вводная фраза по
   центру, список под ними по левому краю (у него нет своего
   text-align, unicode-bidi даёт браузерное "start"), а финальная фраза
   ("И с нами лучшие...") в "Складах" опять по центру. Задание прямо
   просит в таком случае свести к одному виду самим, а не копировать
   чужую непоследовательность: весь текст блока — по левому краю
   (задача 36, часть 6: теперь и заголовок тоже, см. .facility__title). */
.facility__desc:has(+ ul) {
  text-align: left;
}

/* Задача 27 сверяла жирность/размер по живому сайту (подтверждено) —
   только выравнивание меняется задачей 35, часть 3 (см. комментарий
   выше у .facility__desc:has(+ ul)). */
.facility__desc--highlight {
  margin-top: 18px;
  text-align: left;
  font-weight: 700;
  font-size: 18px;
}

.facility__gallery {
  flex: 0 0 500px;
  max-width: 500px;
  position: relative;
}

.facility__scroller {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  scrollbar-width: none;
  border-radius: 16px;
}

.facility__scroller::-webkit-scrollbar {
  display: none;
}

.facility__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 4 / 3;
}

/* Задача 36, часть 6: фото квадратные (600×600), рамка 4:3 — при
   object-fit:contain по бокам оставались белые поля по ~57px, и стрелки
   у краёв рамки висели в этих полях, отдельно от фото. cover заполняет
   рамку целиком (срезается по ~12% сверху и снизу квадрата), стрелки
   теперь лежат на самом фото. */
.facility__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Стрелки поверх фото, у его краёв, на полупрозрачной белой подложке
   (под фото по центру было бы ещё одной строкой высоты под каждой
   галереей — на странице их четыре). */
.facility__controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  padding: 0 12px;
  pointer-events: none;
}

.facility__control {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
}

.facility__control:hover {
  background: var(--color-text);
  color: var(--color-white);
}

@media screen and (max-width: 980px) {
  .facility__container {
    flex-direction: column;
    gap: var(--space-item);
  }

  .facility__text,
  .facility__gallery {
    flex-basis: auto;
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 480px) {
  .facility__title {
    font-size: var(--facility-title-fs-mobile);
  }

  .facility__desc {
    font-size: var(--facility-desc-fs-mobile);
  }
}

/* ---- Текстовая преамбула (T119: «Чистая и грязная зоны» на /manufacture
   с заголовком, «Мы подготавливаем…» на /terms без заголовка) ---- */

.preface {
  padding: var(--space-half) var(--grid-gutter);
}

.preface__container {
  max-width: 640px;
  margin: 0 auto;
}

.preface__title {
  margin: 0 0 16px;
  font-size: var(--preface-title-fs);
  font-weight: 700;
  text-align: center;
  color: var(--color-text);
}

.preface__text {
  margin: 0 0 12px;
  font-size: var(--preface-text-fs);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text);
}

.preface__text:last-child {
  margin-bottom: 0;
}

/* Модификатор — /terms: без заголовка, приглушённый крупный текст */
.preface--muted {
  padding: var(--space-half) var(--grid-gutter);
}

.preface--muted .preface__text {
  font-size: var(--preface-muted-fs);
  font-weight: 300;
  opacity: 0.7;
}

@media screen and (max-width: 480px) {
  .preface__title {
    font-size: var(--preface-title-fs-mobile);
  }

  .preface__text {
    font-size: var(--preface-text-fs-mobile);
  }

  .preface--muted .preface__text {
    font-size: var(--preface-muted-fs-mobile);
  }
}

/* ---- Текстовый баннер по центру (T472, /lab) ---- */

.text-banner {
  padding: var(--space-section) var(--grid-gutter);
  text-align: center;
}

/* Задача 36: продолжение обложки того же цвета — см. .page-lab .hero. */
.page-lab .text-banner {
  padding-top: var(--space-head);
}

.text-banner__text {
  max-width: var(--container-max);
  margin: 0 auto;
  /* Задача 13, п. 2.2: на /lab колонка текста на живом сайте уже общего
     контейнера (1160px при ширине окна 1348, не во всю ширину 1200) —
     из-за этого на живом на одну строку переноса больше. */
  font-size: var(--text-banner-fs);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text);
}

@media screen and (max-width: 480px) {
  .text-banner__text {
    font-size: var(--text-banner-fs-mobile);
  }
}

/* ---- Вводный баннер без фото (T467, /manufacture) — единственный на
   сайте блок с таким сочетанием: не Zero Block, не .hero (нет фото/
   overlay), собственная динамическая типографика в исходнике (Tilda
   custom-text-size), здесь упрощена до двух уровней ---- */

/* Задача 37, часть 3: сверху — шапка + крошки + заголовочный отступ
   шкалы (было 150px, на телефоне 90px: крошки прижимались к краю, а с
   отступом у крошек заголовок наезжал бы на них), снизу — полный
   отступ цветной полосы по шкале. */
.intro-banner {
  padding: calc(var(--header-h) + var(--breadcrumbs-h) + var(--space-head)) var(--grid-gutter) var(--space-section);
  text-align: center;
  background: var(--intro-banner-bg, transparent);
}

.intro-banner__title {
  margin: 0 auto 24px;
  max-width: 760px;
  font-size: var(--intro-banner-title-fs);
  font-weight: 600;
  /* uppercase/-1px — /manufacture (T467). /order (T225) — тот же тип
     блока по конструкции (без фото, паддинг вместо vh), но заголовок
     обычным регистром — переопределяется на странице, задача 10. */
  text-transform: var(--intro-banner-title-transform, uppercase);
  letter-spacing: var(--intro-banner-title-spacing, -1px);
  color: var(--intro-banner-color, var(--color-text));
}

.intro-banner__desc {
  max-width: 760px;
  margin: 0 auto;
  font-size: var(--intro-banner-desc-fs);
  font-weight: 300;
  color: var(--intro-banner-color, var(--color-text));
}

@media screen and (max-width: 980px) {
  /* Задача 37, часть 3: самое длинное слово заголовка должно умещаться
     в экран 360px — размер падает вместе с шириной экрана. */
  .intro-banner__title {
    font-size: clamp(20px, 8vw, var(--intro-banner-title-fs-mobile));
  }
}

@media screen and (max-width: 480px) {
  .intro-banner__desc {
    font-size: var(--intro-banner-desc-fs-mobile);
  }
}

/* Переопределения .intro-banner по странице — тот же приём, что у
   .hero (см. выше). /manufacture был на инлайновом style до задачи 10,
   переведён на класс страницы заодно, для единообразия. */
.page-manufacture .intro-banner {
  --intro-banner-bg: var(--color-surface);
  /* Задача 25 меняла паддинг на 30px/80px, отталкиваясь от видимой
     позиции заголовка при сломанной модели шапки (sticky, занимала
     128px в потоке) — костыль компенсировал сразу две вещи (реальный
     паддинг + чужой сдвиг от шапки) и был в итоге неверным. Задача 26,
     часть 2: шапка стала fixed и больше не сдвигает поток, прямой
     замер getComputedStyle(padding) на живом сайте даёт ровно 150px
     сверху и снизу — то есть паддинг по умолчанию (.intro-banner),
     переопределение не нужно вообще. */
}

.page-order .intro-banner {
  --intro-banner-bg: #4ea864;
  --intro-banner-color: #fff;
  /* Исправлено в задаче 11: было 48px — на живом сайте 52px (сверено
     через getComputedStyle на /order). */
  --intro-banner-title-fs: 52px;
  --intro-banner-title-transform: none;
  --intro-banner-title-spacing: normal;
}

/* ==========================================================================
   СТРАНИЦЫ С ФОРМАМИ /vacancy, /contacts, /order, /privacy (задача 10)
   Перед каждым новым блоком проверялось совпадение с уже существующим —
   переиспользованы .hero, .intro-banner, .section-title, .checklist,
   .cta/.cta--plain, кнопка .t-btn.t-btnflex.t-btnflex_type_button(_accent),
   поля форм .t-input, .t-checkbox__*, .t-radio__* из template_styles.css
   (раздел 8, общий, ещё не использовался в готовых страницах). Новые
   классы — только там, где блок действительно не на что не похож, см.
   docs/prototype/pages/_report-forms.md, п. 5.
   ========================================================================== */

/* ---- Список преимуществ с крупной зелёной иконкой (T820, /vacancy) ----
   Тот же .checklist, что и на /about и /terms (задача 9), с новым
   модификатором — иконка крупнее (50px) и не чёрно-белая. */
.checklist--benefits {
  --checklist-gap: 20px;
  --checklist-icon-size: 50px;
  --checklist-fs: var(--checklist-benefits-fs);
  --checklist-weight: 400;
}

.checklist--benefits .checklist__item {
  flex: 1 1 calc(50% - var(--grid-gutter) / 2);
  align-items: center;
}

/* Задача 11, п. 1.6: на /vacancy галочка зелёная (#4ea864, сверено
   пиксельно по скриншоту живого сайта), а не чёрная, как в файле
   source/images/lib__icons__bullets__check3.svg (там жёстко задан
   fill="black" — этот файл не редактируется, задача не требует
   правок source/). Перекрашено CSS-фоном на <span> вместо <img>:
   тот же контур, только с fill="#4ea864" в data-URI. Иконки на /about
   и /terms — другой формы (check5.svg) или того же контура, но
   действительно чёрные на живом сайте (сверено так же, пиксельно) —
   там перекраска не нужна, см. отчёт. */
.checklist--benefits .checklist__icon {
  height: var(--checklist-icon-size);
  background-image: url("data:image/svg+xml,%3Csvg%20viewBox=%220%200%2032%2032%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M3.65004%2016C3.65004%208.84774%209.44808%203.04969%2016.6003%203.04969C18.9609%203.04969%2021.1709%203.68031%2023.0747%204.78158C23.5647%205.065%2024.1917%204.89757%2024.4751%204.40763C24.7585%203.9177%2024.591%203.29077%2024.1011%203.00736C21.8937%201.73048%2019.3308%201%2016.6003%201C8.31607%201%201.60034%207.71572%201.60034%2016C1.60034%2024.2843%208.31607%2031%2016.6003%2031C24.8847%2031%2031.6003%2024.2843%2031.6003%2016C31.6003%2014.7963%2031.4584%2013.6246%2031.1898%2012.5009C31.0582%2011.9504%2030.5052%2011.6108%2029.9547%2011.7423C29.4042%2011.874%2029.0647%2012.4269%2029.1962%2012.9774C29.4278%2013.9461%2029.5507%2014.9581%2029.5507%2016C29.5507%2023.1523%2023.7526%2028.9503%2016.6003%2028.9503C9.44808%2028.9503%203.65004%2023.1523%203.65004%2016ZM30.3685%206.01063C30.7687%205.61041%2030.7687%204.96151%2030.3685%204.56128C29.9682%204.16105%2029.3194%204.16105%2028.9192%204.56128L16.1345%2017.346L10.3374%2011.5489C9.93716%2011.1486%209.28827%2011.1486%208.88804%2011.5489C8.48782%2011.9492%208.48782%2012.598%208.88804%2012.9982L16.1345%2020.2446L30.3685%206.01063Z%22%20fill=%22%234ea864%22%20/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

@media screen and (max-width: 980px) {
  .checklist--benefits .checklist__item {
    flex: 1 1 100%;
  }
}

@media screen and (max-width: 480px) {
  .checklist--benefits {
    --checklist-fs: var(--checklist-benefits-fs-mobile);
  }
}

/* ---- Карточки с иконкой (T490, /vacancy «Наши ценности») ---- */

.icon-cards {
  padding: var(--space-half) var(--grid-gutter);
}

.icon-cards__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-item) var(--grid-gutter);
  text-align: center;
}

.icon-cards__item {
  flex: 1 1 calc(33.333% - var(--grid-gutter) * 2 / 3);
}

.icon-cards__icon {
  display: block;
  /* Задача 13, п. 3.1: было 60px — на живом сайте (getBoundingClientRect)
     иконка 100x100px. */
  width: 100px;
  height: 100px;
  margin: 0 auto 20px;
}

.icon-cards__title {
  margin: 0 0 12px;
  font-size: var(--icon-cards-title-fs);
  /* Задача 13, п. 3.2: было 400 (задача 12) — прямой замер
     getComputedStyle на живом сайте даёт 500 (medium), не 400; при
     400 «Постоянное развитие» не переносится даже в узкой (320px)
     колонке, при 500 — переносится, как на живом. */
  font-weight: 500;
  color: var(--color-text);
  /* Задача 13, п. 3.2: было во всю ширину колонки (386px) — на живом
     сайте заголовок карточки уже колонки (320px из 360px), из-за чего
     «Постоянное развитие» переносится в две строки. */
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.icon-cards__desc {
  margin: 0;
  font-size: var(--icon-cards-desc-fs);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
}

@media screen and (max-width: 980px) {
  .icon-cards__item {
    flex: 1 1 100%;
  }
}

@media screen and (max-width: 480px) {
  .icon-cards__title {
    font-size: var(--icon-cards-title-fs-mobile);
  }
}

/* ---- Цитата с декоративными разделителями (T676, /vacancy) ---- */

.quote {
  padding: var(--space-half) var(--grid-gutter);
  text-align: center;
}

/* Задача 13, п. 3.3: было fill:none/stroke/opacity:0.3 (бледный контур)
   — на живом сайте (getComputedStyle) это закрашенная чёрная фигура
   без обводки, opacity:1, размер 120x14, не 100x12. */
.quote__divider {
  display: block;
  width: 120px;
  height: 14px;
  margin: 0 auto 24px;
  fill: var(--color-text);
  stroke: none;
  opacity: 1;
}

.quote__divider--bottom {
  margin: 24px auto 0;
  transform: rotate(180deg);
}

.quote__text {
  max-width: 760px;
  margin: 0 auto;
  font-size: var(--quote-fs);
  /* Задача 13, п. 3.6: на живом сайте (getComputedStyle) у этого текста
     свои font-weight/line-height/font-family (300, 1.5, Arial — виджет
     «свой размер текста» не наследует Montserrat), из-за чего при той
     же ширине колонки (760px, совпадает) текст переносится в 3 строки,
     не в 4. */
  font-weight: 300;
  line-height: 1.5;
  font-family: Arial, sans-serif;
  color: var(--color-text);
}

@media screen and (max-width: 480px) {
  .quote__text {
    font-size: var(--quote-fs-mobile);
  }
}

/* ---- Аккордеон вакансий (T849, /vacancy) — на <details>/<summary>,
   без JS: открытие/закрытие полностью нативное. ---- */

.accordion {
  padding: var(--space-half) var(--grid-gutter);
}

.accordion__list {
  max-width: 800px;
  margin: 0 auto;
}

.accordion__item {
  border-top: 1px solid #eee;
}

.accordion__item:last-child {
  border-bottom: 1px solid #eee;
}

.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Задача 13, п. 3.4: было 20px — на живом сайте (getBoundingClientRect)
     строка аккордеона 84.7px высотой, не 64px. */
  padding: 30px 0;
  font-size: var(--accordion-title-fs);
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}

.accordion__summary::-webkit-details-marker {
  display: none;
}

.accordion__summary::after {
  content: '+';
  flex-shrink: 0;
  /* Задача 13, п. 3.4: было 24px — на живом сайте знак «плюс» это SVG
     40x40px, визуально заметно крупнее символа шрифта. */
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
  transition: transform 0.2s ease;
}

.accordion__item[open] .accordion__summary::after {
  transform: rotate(45deg);
}

.accordion__body {
  padding: 0 0 24px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text);
}

.accordion__body p {
  margin: 0 0 8px;
}

.accordion__body ul {
  margin: 0 0 16px;
  padding-left: 20px;
}

.accordion__body ul:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 480px) {
  .accordion__summary {
    font-size: var(--accordion-title-fs-mobile);
  }
}

/* ---- Контакты + форма (T718, /vacancy) ---- */

.contact-form {
  padding: var(--space-half) var(--grid-gutter);
}

.contact-form__header {
  max-width: var(--container-max);
  margin: 0 auto var(--space-head);
  padding: 0 var(--grid-gutter);
  text-align: center;
}

.contact-form__title {
  margin: 0 0 16px;
  font-size: var(--section-title-fs);
  font-weight: 400;
  color: var(--color-text);
}

.contact-form__lead {
  margin: 0 auto;
  max-width: 560px;
  font-size: 20px;
  font-weight: 300;
  color: var(--color-text);
}

.contact-form__container {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  gap: 60px;
}

.contact-form__info {
  flex: 1 1 40%;
}

.contact-form__phone,
.contact-form__email {
  display: block;
  font-size: var(--contact-form-label-fs);
  font-weight: 500;
  color: var(--color-text);
  /* Задача 13, п. 3.5: на живом сайте телефон в этом блоке — не ссылка
     (обычный текст), почта — ссылка зелёного цвета; ни то ни другое не
     подчёркнуто. Ссылки оставлены рабочими (tel:/mailto:), приведён
     только визуальный стиль. */
  text-decoration: none;
}

.contact-form__email {
  margin-bottom: 16px;
  color: var(--color-btn-bg-accent);
}

.contact-form__address {
  margin: 16px 0 0;
  font-size: var(--contact-form-address-fs);
  font-weight: 400;
  color: var(--color-text);
}

.contact-form__form {
  flex: 1 1 60%;
}

@media screen and (max-width: 980px) {
  .contact-form__container {
    flex-direction: column;
    gap: 32px;
  }
}

@media screen and (max-width: 480px) {
  .contact-form__title {
    font-size: var(--section-title-fs-mobile);
  }

  .contact-form__phone,
  .contact-form__email {
    font-size: var(--contact-form-label-fs-mobile);
  }
}

/* ---- Поля форм (/order, /vacancy) — обёртка вокруг переиспользуемых
   .t-input, .t-checkbox__*, .t-radio__* из template_styles.css (раздел 8):
   там есть размер и цвет поля/индикатора, но нет отступов между полями
   и вида подписи — это добавлено здесь. ---- */

.field {
  margin-bottom: 20px;
}

/* Задача 35, часть 12: было 16px, тем же цветом, что и основной текст
   — подпись визуально спорила с введённым значением. Мельче основного
   текста и приглушённым цветом, отступ снизу оставлен тем же (8px, уже
   соответствовал заданию). */
.field__label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 400;
  color: var(--team-role-color);
}

/* Задача 11, п. 2.2: на живом /vacancy подписи над полями (кроме
   «Прикрепить резюме») отдельно не выводятся — только плейсхолдер
   внутри поля (сверено через getComputedStyle: .t-input-title для
   Email/Phone/Name/Textarea в разметке вообще отсутствует). Подпись не
   удаляется из HTML (доступность/лейбл для поля остаётся), а визуально
   скрывается — так же, как всё остальное скрывается по смыслу в
   прототипе (см. .site-header__toggle). */
.page-vacancy .contact-form__form .field__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-vacancy .contact-form__form .field--file .field__label {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0 0 8px;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: 0;
}

.field--radio-group > .field__label {
  margin-bottom: 12px;
}

.field__radio-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.field__radio-list .t-radio__control {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text);
}

.field__radio-list .t-radio__indicator {
  margin-top: 2px;
  margin-right: 0;
}

/* Задача 11, п. 2.2: на живом сайте вместо системного выбора файла —
   зелёная кнопка «Загрузить файл» (виджет Tilda). Без сторонних
   библиотек: системный input[type=file] скрыт (визуально, не
   display:none — так он остаётся доступен для скринридеров и
   табуляции), кнопкой служит второй <label for> на тот же input. */
.field--file input[type='file'] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.field--file__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 20px;
  background: var(--color-btn-bg-accent);
  color: var(--color-white);
  border-radius: 30px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.field--file__button:hover {
  background: var(--color-btn-bg-accent-hover);
}

.field--consent {
  margin-top: 28px;
  margin-bottom: 28px;
}

/* Задача 35, часть 12: текст согласия мельче и приглушённее (было
   --color-text, обычный текст). Ссылки внутри — уже text-decoration от
   браузера по умолчанию плюс теперь var(--color-link) (см. базовое
   правило `a` выше по файлу) — свой цвет вместо синего, отдельное
   правило здесь не нужно. */
.field--consent .t-checkbox__control {
  align-items: flex-start;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--team-role-color);
}

/* Свой чекбокс вместо системного вида библиотеки — скруглённый квадрат
   (было --border-radius:0, острые углы) и акцентный цвет вместо
   чёрного при отметке (border-color:inherit у галочки — родительский
   .t-checkbox__indicator задаёт цвет, значит меняется тут же). Только
   у согласия в формах (задание просит это, не переопределение всех
   чекбоксов/радио сайта). */
.field--consent .t-checkbox__indicator {
  --border-radius: 6px;
  margin-top: 2px;
  border-color: var(--color-input-border);
  opacity: 1;
}

.field--consent .t-checkbox:checked ~ .t-checkbox__indicator {
  border-color: var(--color-accent-green);
  background: var(--color-accent-green);
}

/* :after нужен явный белый — border-color:inherit (базовое правило
   .t-checkbox__indicator:after) взял бы зелёный от родителя выше, и
   галочка стала бы зелёной на зелёном, то есть невидимой. */
.field--consent .t-checkbox:checked ~ .t-checkbox__indicator:after {
  border-color: var(--color-white);
}

.form__note {
  margin: 24px 0 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--team-role-color);
}

/* ---- Информационная сетка (T1056, /contacts) ---- */

.info-grid {
  padding: var(--space-half) var(--grid-gutter);
}


.info-grid__header {
  max-width: 560px;
  margin: 0 auto var(--space-head);
  text-align: center;
}

/* Задача 36, часть 5: заголовок → подзаголовок под ним — 16px, как
   заголовок → текст в .cta; отступ шкалы (--space-head) — уже от всей
   шапки блока до карточек. */
.info-grid__header .section-title {
  margin-bottom: 16px;
}

.info-grid__title {
  margin: 0 0 16px;
  /* Исправлено в задаче 12: на живом сайте у этого конкретного
     заголовка 42px, крупнее стандартных 38px .section-title —
     задано отдельной переменной, а не через общую. */
  font-size: var(--info-grid-title-heading-fs, var(--section-title-fs));
  font-weight: 400;
  color: var(--color-text);
}

/* Задача 36, часть 5: задача 35 выровняла этот абзац по левому краю,
   но сам блок остался узкой колонкой по центру страницы — вышла узкая
   колонка левого выравнивания посередине, похожая на ошибку. Текст
   короткий (две фразы) — для такого центр уместен, как и у заголовка. */
.info-grid__lead {
  margin: 0;
  /* Исправлено в задаче 12: было 20px — на живом сайте 22px. */
  font-size: 22px;
  font-weight: 300;
  color: var(--color-text);
  text-align: center;
}

/* Задача 36, часть 5: было четыре колонки мелкого текста без границ,
   заголовок колонки того же размера, что и текст (18/18px). Теперь —
   карточки: 4 в ряд на десктопе, 2 на планшете, 1 на телефоне;
   заголовок карточки крупнее и жирнее текста, текст спокойнее (меньше
   и обычного начертания вместо тонкого — в узкой карточке тонкий 18px
   читался хуже). */
.info-grid__list {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-item);
}

.info-grid__item {
  padding: 28px 24px;
  border-radius: 16px;
  background: var(--cta-bg);
}

.info-grid__item-title {
  margin: 0 0 12px;
  font-size: var(--info-grid-title-fs);
  font-weight: 600;
  color: var(--color-text);
}

.info-grid__item-text {
  margin: 0;
  font-size: var(--info-grid-text-fs);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
}

@media screen and (max-width: 980px) {
  .info-grid__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 640px) {
  .info-grid__list {
    grid-template-columns: 1fr;
  }
}

/* ---- Заглушка карты (T117, /contacts) ---- */

.map-placeholder {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--grid-gutter) 80px;
}

.map-placeholder__box {
  height: 385px;
  background: rgb(229, 227, 223);
}

/* ---- Юридический текст (T004, /privacy) ---- */

/* Задача 35, часть 17: ширина текста была 800px (не измерялась
   отдельно — только паддинги ниже, см. комментарий) — длинные абзацы
   юридического текста на всю такую ширину читаются хуже, чем уже.
   Сведено к 700px, в рекомендованном заданием диапазоне 680-720px. */
.legal {
  max-width: 700px;
  margin: 0 auto;
  /* Задача 26, часть 2: прямой замер на живом /privacy (шапка fixed,
     не в потоке) — блок T004 имеет t-rec_pt_120 + 8px паддинг
     внутреннего контейнера = 128px до первой строки текста, снизу
     t-rec_pb_60 = 60px. Раньше (100/80) подгонялось под sticky-шапку,
     резервировавшую место в потоке — с той же ошибкой, что и у
     .intro-banner. */
  /* Задача 37, часть 3: те же токены, что у остальных первых секций
     (было 128px — после отступа у крошек заголовок заезжал под них). */
  padding: calc(var(--header-h) + var(--breadcrumbs-h) + var(--space-head)) var(--grid-gutter) var(--space-half);
}

.legal h2 {
  margin: 48px 0 16px;
  font-size: var(--legal-title-fs);
  font-weight: 600;
  color: var(--color-text);
}

.legal h2:first-child {
  margin-top: 0;
}

.legal p,
.legal li {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--color-text);
}

.legal p {
  margin: 0 0 16px;
}

.legal ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.legal h3 {
  margin: 32px 0 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
}

/* Задача 29, часть 5: новая редакция политики — подзаголовок с датой и
   шапка-таблица с реквизитами оператора, как в самом .docx (в прежней
   редакции такого не было — текст переносился с Тильды одним полем
   без реквизитов). */
.legal__revision {
  margin: -8px 0 32px;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text);
  opacity: 0.6;
}

.legal__table {
  width: 100%;
  /* Задача 32, раздел 5: без table-layout:fixed таблица считает ширину
     колонок по содержимому — на 360px это раздвигало её на 381px
     (сайт/e-mail в ячейке не переносились), появлялась горизонтальная
     прокрутка страницы. С фиксированной раскладкой ширина всегда равна
     100% контейнера, а перенос длинных строк внутри ячеек — ниже. */
  table-layout: fixed;
  margin: 0 0 40px;
  border-collapse: collapse;
  font-size: 15px;
}

.legal__table th,
.legal__table td {
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  text-align: left;
  font-weight: 400;
  vertical-align: top;
  overflow-wrap: break-word;
}

.legal__table th {
  width: 40%;
  font-weight: 600;
  background: var(--color-surface-2);
}

/* ---- Цвет и скругление кнопок по странице ----
   /vacancy: тот же зелёный accent (#4ea864), что и везде на сайте. На
   странице два accent-кнопки (якорь «Открытые вакансии» и кнопка
   отправки формы T718) — скругление отличается от стандартных 60px
   только у кнопки формы (30px в исходнике), у якоря — обычные 60px,
   поэтому селектор сужен до .contact-form, а не всей страницы.

   /order: раньше здесь было отдельное переопределение под третий,
   больше нигде не встречающийся оттенок зелёного (#4ca562,
   задокументирован ещё в задаче 5/7 как расхождение) и скругление
   10px. Задачей 30 сведено к общему акцентному варианту — кнопка
   формы брифа (local/components/fda/form/templates/brief/template.php)
   теперь несёт класс .t-btnflex_accent напрямую, само переопределение
   убрано как избыточное (его типографика и так совпадала с accent). */
.page-vacancy .contact-form .t-btn.t-btnflex.t-btnflex_type_button.t-btnflex_accent {
  border-radius: 30px;
}

/* ---- /contacts: CTA (T588) в этом инстансе — чуть более светлый
   фон (#efefef против #ededed на главной) — переопределено по
   странице тем же способом, что и .hero/.intro-banner. Модификатор
   .cta--plain здесь НЕ используется: он не только убирает подзаголовок,
   но и жёстко обнуляет фон (background:none) — это верно для страниц
   каталога/terms (там реально нет фона), но не для /contacts и
   /vacancy, где фон #efefef есть. */
.page-contacts .cta {
  /* задача 43: было #efefef — теперь общий мятный */
  /* Задача 26, часть 3: было 18px — замерено при сломанной модели
     шапки, когда заголовок съезжал вниз и на глаз казался мельче.
     Прямой замер getComputedStyle на живом сайте (шапка fixed) даёт
     30px, не 18 — из-за заниженного шрифта блок был на 65px ниже
     нужного, и вместе с ним съезжал вниз весь остаток страницы
     (.info-grid, .map-placeholder). */
  --cta-title-fs: 30px;
  --cta-title-fs-mobile: 30px;
  /* Задача 36: была первой секцией страницы — сверху запас под шапку и
     крошки. Задача 43: над ней теперь обложка, отступы обычные, по
     шкале. */
  padding: var(--space-half) var(--grid-gutter);
}

/* /vacancy: второй инстанс того же CTA — кнопка-якорь без заголовка,
   тоже на фоне #efefef (см. выше про .cta--plain). */
.page-vacancy .cta {
  /* задача 43: было #efefef — теперь общий мятный */
  /* Задача 36: полоса с одной кнопкой без заголовка — половина шкалы
     сверху и снизу; полный межсекционный отступ внутри такой полосы
     давал бы 260px серого ради одной кнопки. */
  padding: var(--space-half) var(--grid-gutter);
}

/* ==========================================================================
   ЗАДАЧА 14 — РАЗДЕЛ 5 ТЗ (ПЕРСОНАЛЬНЫЕ ДАННЫЕ), ВИДЖЕТ МЕССЕНДЖЕРОВ,
   СКВОЗНАЯ ФОРМА, ОСТАТКИ ВЁРСТКИ
   ========================================================================== */

/* ---- Плашка «на согласовании» (/consent, п. 1.1) ---- */

.consent-notice {
  margin: 24px 0;
  padding: 16px 24px;
  background: #fff4e0;
  border: 1px solid #e8b660;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #6b4a06;
}

/* ---- Оператор ПДн под кнопкой форм (п. 1.3, вместо .form__note) ---- */

.operator-note {
  margin: 16px 0 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text);
  opacity: 0.7;
}

/* ---- Honeypot-поле форм (п. 1.5) ----
   Не display:none — часть простых ботов пропускает такие поля
   намеренно. Элемент визуально и для скринридера отсутствует
   (off-screen), но остаётся в потоке табуляции исключён через
   tabindex="-1" + aria-hidden на обёртке. */
.field--hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Cookie-уведомление (п. 1.4, пункт 5.4 ТЗ) ---- */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  padding: 20px var(--grid-gutter);
  background: var(--color-white);
  border-top: 1px solid var(--color-input-border);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner__text {
  flex: 1 1 320px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
}

.cookie-banner__text a {
  color: var(--color-btn-bg-accent);
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.cookie-banner__btn {
  flex-shrink: 0;
  padding: 12px 22px;
  border: 0;
  border-radius: 30px;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.cookie-banner__btn--accept {
  background: var(--color-btn-bg-accent);
  color: var(--color-white);
}

.cookie-banner__btn--accept:hover {
  background: var(--color-btn-bg-accent-hover);
}

.cookie-banner__btn--minimal {
  background: none;
  border: 1px solid var(--color-input-border);
  color: var(--color-text);
}

.cookie-banner__btn--minimal:hover {
  border-color: var(--color-text);
}

/* Задача 39, часть 6: при повторном открытии из подвала («Изменить
   настройки cookie») сохранённый выбор отмечен галочкой. Кнопки при
   этом не меняют размер заметно: галочка — одна буква перед текстом. */
.cookie-banner__btn[aria-pressed="true"]::before {
  content: "✓\00a0";
}

.cookie-banner__close {
  flex-shrink: 0;
  /* Задача 41, часть 1а: было 32×32 — меньше 44×44. Значок тот же, фон
     прозрачный, вырос только размер кнопки. */
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--color-text);
  opacity: 0.5;
  cursor: pointer;
}

.cookie-banner__close:hover {
  opacity: 1;
}

@media screen and (max-width: 640px) {
  .cookie-banner {
    padding: 40px 20px 20px;
  }

  .cookie-banner__actions {
    margin-left: 0;
    width: 100%;
  }

  .cookie-banner__btn {
    flex: 1 1 auto;
    text-align: center;
  }

  /* Крестик уводится в правый верхний угол баннера — иначе при
     переносе строки после кнопок он повисает отдельно, оторванным от
     остальных элементов управления. */
  .cookie-banner__close {
    position: absolute;
    /* Задача 41: кнопка выросла с 32 до 44 — сдвиг на 6px, чтобы значок
       остался на прежнем месте (было top: 8px; right: 12px). */
    top: 2px;
    right: 6px;
  }
}

/* ---- Виджет мессенджеров (часть 2, п. 3.6 ТЗ) ----
   Состав виджета (иконка, ссылка, показ на десктопе/мобильных) будет
   выводиться из инфоблока messengers — см. docs/structure.md, п. 2.15.
   Здесь состав захардкожен по составу из задачи 14: WhatsApp, Telegram,
   MAX (заглушка). */

.messenger-widget {
  /* Позиционируется по кнопке-тумблеру (56x56, ниже) — список
     мессенджеров положением absolute, не занимает место в потоке,
     чтобы не сдвигать саму кнопку, пока список скрыт (opacity/
     visibility, не display:none — нужна плавная анимация). */
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  transition: bottom 0.2s ease;
}

/* Пока cookie-баннер виден (по умолчанию, до реакции пользователя) —
   поднимаем виджет, чтобы круглая кнопка и баннер не перекрывались.
   Высота баннера — переменная (текст переносится по-разному на узких
   экранах), поэтому реальная высота измеряется скриптом баннера и
   подставляется через --cookie-banner-h; 90px — запасное значение. */
body.has-cookie-banner .messenger-widget {
  bottom: calc(var(--cookie-banner-h, 90px) + 20px);
}

/* Задача 41, часть 1а: баннер закрывал низ подвала (иконки соцсетей,
   логотип) — докрутить до них было нельзя. Пока баннер виден, у
   страницы снизу отступ на его высоту. */
body.has-cookie-banner {
  padding-bottom: var(--cookie-banner-h, 90px);
}

.messenger-widget__list {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.messenger-widget.is-open .messenger-widget__list {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.messenger-widget__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}

.messenger-widget__item img,
.messenger-widget__item svg {
  width: 31px;
  height: 31px;
}

/* Задача 46, часть 4: подпись кнопки при наведении (только устройства с
   мышью) и при фокусе с клавиатуры — плашка слева от кнопки. Для
   экранного диктора подпись в aria-label ссылки, здесь aria-hidden. */
.messenger-widget__item {
  position: relative;
}

.messenger-widget__label {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--color-text);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%);
  transition: opacity 0.15s ease, visibility 0.15s;
}

@media (hover: hover) and (pointer: fine) {
  .messenger-widget__item:hover .messenger-widget__label {
    opacity: 1;
    visibility: visible;
  }
}

.messenger-widget__item:focus-visible .messenger-widget__label {
  opacity: 1;
  visibility: visible;
}

.messenger-widget__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--color-btn-bg-accent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.messenger-widget__toggle:hover {
  background: var(--color-btn-bg-accent-hover);
}

.messenger-widget.is-open .messenger-widget__toggle {
  transform: rotate(45deg);
}

.messenger-widget__toggle svg {
  width: 26px;
  height: 26px;
  fill: var(--color-white);
}

@media screen and (max-width: 480px) {
  .messenger-widget {
    right: 16px;
    bottom: 16px;
  }

  .messenger-widget__toggle {
    width: 48px;
    height: 48px;
  }

  .messenger-widget__toggle svg {
    width: 22px;
    height: 22px;
  }
}

/* ---- Сквозная форма обратной связи (часть 3, п. 3.7 ТЗ) ----
   На всех страницах, кроме /order (там уже полная форма брифа) и
   /privacy (юридический текст без форм). Обработчик — fda:form.callback,
   см. docs/structure.md, разд. 3.1. Формулировки заголовка/кнопки —
   нейтральные, подлежат согласованию с Заказчиком (на живом сайте
   такого блока нет, образца формулировок нет). */

.callback-form {
  padding: var(--space-section) var(--grid-gutter);
  background: var(--color-surface);
  text-align: center;
}

.callback-form__title {
  margin: 0 0 32px;
  font-size: 32px;
  font-weight: 600;
  color: var(--color-text);
}

.callback-form__form {
  max-width: 640px;
  margin: 0 auto;
}

.callback-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  text-align: left;
}

.callback-form__row .field {
  flex: 1 1 240px;
  margin-bottom: 0;
}

.callback-form__consent {
  margin-top: 24px;
  margin-bottom: 24px;
  text-align: left;
}

/* Задача 35, часть 12: общий .t-input залит светло-серым (#f6f6f6) —
   этот блок сам на сером (#f5f5f5, см. .callback-form выше), два
   похожих серых почти сливались бы. У поля здесь заливка светлее фона
   блока (белая) — то же правило "поле светлее блока", что и у формы
   на /order и /vacancy, где блок белый, а поле светло-серое; здесь
   наоборот, потому что фон другой, а не потому что правило другое. */
.callback-form {
  --field-bg: var(--color-white);
}

@media screen and (max-width: 480px) {
  .callback-form__title {
    font-size: 24px;
  }
}

/* ==========================================================================
   ЗАДАЧА 29, ЧАСТЬ 4 — ГАЛЕРЕЯ СЕРТИФИКАТОВ И НАГРАД
   Блок из ТЗ на доработку (п. 2 — кнопки «Смотреть сертификаты»/
   «Смотреть награды» у блока экспертного мнения), не из оригинала
   Tilda. Пока инфоблок certificates пуст, блок не выводится вовсе
   (см. index.php) — стили ниже не на что влиять, до наполнения.

   Задача 30: секция и сетка приведены к тем же значениям, что и у
   сетки подкатегорий каталога (.catalog, /production/*) — та же
   логика (плитка изображение+подпись, без рамок и фона у карточки),
   тот же паддинг секции и её брейкпоинт, 3 колонки вместо
   изобретённых 4 (на этой же странице, ниже, стоит именно
   .catalog__grid — сетки должны читаться как один и тот же приём, не
   как два разных). Соотношение сторон карточки (3/4, портрет) не
   тронуто — в отличие от товарных фото каталога (10/7, альбомная),
   сюда попадают сканы сертификатов и грамот, где альбомная обрезка
   сильно резала бы текст; описано в отчёте по задаче 30, п.4 как
   единственное намеренное отличие от образца.

   Кнопки-фильтры (.certs__tabs) раньше были отдельным изобретённым
   компонентом (see git history) — переключателя разделов нигде
   больше на сайте нет и подражать по факту нечему, поэтому вместо
   выдумывания заново кнопки используют существующие классы кнопок
   сайта (t-btn/t-btnflex, см. component.php шаблона) — активный
   раздел получает .t-btnflex_accent (зелёный) тем же способом, что и
   везде на сайте, неактивный остаётся чёрным по умолчанию. */

.certs {
  padding: var(--space-half) var(--grid-gutter);
  max-width: var(--container-max);
  margin: 0 auto;
}

.certs__tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0 0 40px;
}

.certs__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--catalog-row-gap) var(--grid-gutter);
  list-style: none;
  padding: 0;
  margin: 0;
}

.certs__item {
  flex: 1 1 calc((100% - 2 * var(--grid-gutter)) / 3);
}

.certs__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  /* Место под картинку, пока она не загрузилась — тот же оттенок
     серого, что уже используется на сайте как фон .cta (--cta-bg), а
     не отдельно изобретённый. */
  background: var(--cta-bg);
  cursor: zoom-in;
  overflow: hidden;
}

.certs__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease-in-out;
}

/* Задача 35, часть 9: у фото-карточек по сайту (каталог, портфолио,
   команда) при наведении общий приём — лёгкое затемнение фото; у этой
   миниатюры (тоже фото, тоже кликабельна — открывает лайтбокс) такого
   отклика не было вообще. Тот же приём, не новый. */
.certs__thumb:hover img {
  opacity: 0.8;
}

.certs__caption {
  margin: 12px 0 0;
  font-size: var(--catalog-title-fs);
  font-weight: 400;
  color: var(--color-text);
  text-align: center;
}

@media screen and (max-width: 980px) {
  .certs__item {
    flex: 1 1 100%;
  }
}

@media screen and (max-width: 480px) {
  .certs__caption {
    font-size: var(--catalog-title-fs-mobile);
  }
}

/* display:flex здесь имеет более высокую специфичность, чем
   встроенное [hidden]{display:none} браузера, и перебивало бы его —
   поэтому display задан только для НЕ скрытого состояния, а не на
   базовом классе (иначе оверлей перехватывал бы клики, даже будучи
   hidden, что и обнаружилось при проверке лайтбокса). */
.certs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(0, 0, 0, 0.85);
}

.certs-lightbox:not([hidden]) {
  display: flex;
}

body.has-certs-lightbox {
  overflow: hidden;
}

.certs-lightbox__figure {
  margin: 0;
  max-width: 90vw;
  max-height: 90vh;
  text-align: center;
}

.certs-lightbox__img {
  display: block;
  max-width: 90vw;
  max-height: 80vh;
  margin: 0 auto;
  object-fit: contain;
}

.certs-lightbox__caption {
  margin-top: 16px;
  color: var(--color-white);
  font-size: 16px;
}

.certs-lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-white);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

/* ==========================================================================
   ЗАДАЧА 32, РАЗДЕЛ 1.4 — ЭТАПЫ ПРОИЗВОДСТВА (/manufacture)
   Инфоблок production_stages, п. 3.8 ТЗ, пока пуст. Аналога «карточки
   с крупным номером» на сайте нет — построено заново, с переиспользо-
   ванием только уже существующих токенов (акцентный зелёный номера,
   типографика описания — как у .values__item-desc /about). Сетка —
   4 колонки, при семи элементах это ровно даёт 4 в первом ряду и 3 во
   втором, как в референсе ТЗ, без ручной разбивки по рядам.
   ========================================================================== */

.stages {
  padding: var(--space-half) var(--grid-gutter);
}

.stages__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--catalog-row-gap) var(--grid-gutter);
}

.stages__item {
  flex: 1 1 calc(25% - var(--grid-gutter) * 3 / 4);
}

.stages__num {
  display: block;
  margin: 0 0 12px;
  font-size: 48px;
  font-weight: 700;
  color: var(--color-accent-green);
}

.stages__title {
  margin: 0 0 12px;
  font-size: var(--values-item-title-fs);
  font-weight: 500;
  color: var(--color-text);
}

.stages__desc {
  margin: 0;
  font-size: var(--values-item-desc-fs);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text);
}

.stages__points {
  margin: 0;
  padding-left: 18px;
  font-size: var(--values-item-desc-fs);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text);
}

@media screen and (max-width: 980px) {
  .stages__item {
    flex: 1 1 calc(50% - var(--grid-gutter) / 2);
  }
}

@media screen and (max-width: 480px) {
  .stages__item {
    flex: 1 1 100%;
  }

  .stages__num {
    font-size: 36px;
  }

  .stages__title {
    font-size: var(--values-item-title-fs-mobile);
  }

  .stages__desc,
  .stages__points {
    font-size: var(--values-item-desc-fs-mobile);
  }
}

/* ==========================================================================
   ЗАДАЧА 32, РАЗДЕЛ 1.5 — ФОРМАТЫ ФАСОВКИ (/manufacture)
   Инфоблок packaging, п. 3.8 ТЗ, пока пуст. Сетка и карточка — по
   образцу .catalog__grid/.catalog__item (/production/*): плитка
   изображение+подпись, без рамки и фона, 3 колонки. Соотношение
   сторон фото — 1/1 (квадрат), не 10/7 каталога — предметная съёмка
   упаковки на нейтральном фоне обычно квадратная, а не альбомная.
   ========================================================================== */

.packaging {
  padding: var(--space-half) var(--grid-gutter);
}

.packaging__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--catalog-row-gap) var(--grid-gutter);
}

.packaging__item {
  flex: 1 1 calc((100% - 2 * var(--grid-gutter)) / 3);
  text-align: center;
}

.packaging__media {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--cta-bg);
}

.packaging__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.packaging__title {
  margin: var(--catalog-card-padding) 0 8px;
  font-size: var(--catalog-title-fs);
  font-weight: 600;
  color: var(--color-text);
}

.packaging__meta {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--team-role-color);
}

@media screen and (max-width: 980px) {
  .packaging__item {
    flex: 1 1 100%;
  }
}

@media screen and (max-width: 480px) {
  .packaging__title {
    font-size: var(--catalog-title-fs-mobile);
  }
}

/* ==========================================================================
   ЗАДАЧА 32, РАЗДЕЛ 1.1 — СЛАЙДЕР ОБЛОЖКИ ГЛАВНОЙ (banners_main)
   Каждый слайд (.hero-slider__slide) несёт класс .hero и внутри —
   .hero__media/.hero__overlay/.hero__content/.hero__title/.hero__subtitle
   без изменений (тот же самый единственный слайд, который раньше был
   один на странице, — просто их теперь может быть несколько). Ниже —
   только то, чего не было: сама прокручиваемая лента, стрелки (тот же
   вид кнопки, что и .facility__control на /manufacture, задача 19) и
   точки (аналога на сайте нет, см. отчёт по задаче 32).
   ========================================================================== */

.hero-slider {
  position: relative;
}

.hero-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.hero-slider__track::-webkit-scrollbar {
  display: none;
}

.hero-slider__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* Тот же круглый вид кнопки, что и у стрелок галерей /manufacture
   (.facility__control) — значения не новые, только позиционирование
   поверх слайда другое (там ряд под галереей, здесь — оверлей). */
.hero-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--header-border-color);
  background: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
}

.hero-slider__arrow:hover {
  background: var(--color-text);
  color: var(--color-white);
}

.hero-slider__arrow--prev {
  left: 20px;
}

.hero-slider__arrow--next {
  right: 20px;
}

.hero-slider__dots {
  position: absolute;
  bottom: 28px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

/* Аналога точек-переключателей слайдов на сайте нет — цвет и обводка
   подобраны так, чтобы точка была видна на любом фоне слайда
   (фото/видео/градиент .hero__overlay), не только на светлом. */
.hero-slider__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 2px solid var(--color-white);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.hero-slider__dot.is-active {
  background: var(--color-accent-green);
  border-color: var(--color-accent-green);
}

@media screen and (max-width: 480px) {
  .hero-slider__arrow {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  .hero-slider__arrow--prev {
    left: 10px;
  }

  .hero-slider__arrow--next {
    right: 10px;
  }
}

/* ==========================================================================
   ЗАДАЧА 32, РАЗДЕЛ 1.2 — БЛОК «УЧРЕДИТЕЛЬ» (team, IS_FOUNDER)
   Задача 38, часть 2: переверстан по макету дизайнера, стили — в
   modernization/founder.css (подключается из index.php вместе с блоком).
   ========================================================================== */

/* ==========================================================================
   ЗАДАЧА 32, РАЗДЕЛ 1.3 — ПОРТФОЛИО (portfolio)
   Тизер на главной и полный список на /portfolio используют одну и ту
   же сетку (local/templates/fda/portfolio-card.php). Модель — снова
   .catalog__grid/.catalog__item (обложка+подпись, без рамки и фона),
   3 колонки на десктопе — задание прямо требует 3/2/1, у каталога
   переход сразу на 1 колонку, здесь сделан промежуточный шаг в 2,
   как у .team__grid, — единственное отличие от чистого образца
   .catalog, обосновано самим текстом задания.
   ========================================================================== */

.portfolio,
.portfolio-list {
  padding: var(--space-half) var(--grid-gutter);
}

.portfolio__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--catalog-row-gap) var(--grid-gutter);
}

/* Задача 32, раздел 5: flex-grow:1 (как у .catalog__item, откуда взят
   образец) растягивает одинокую карточку в неполном последнем ряду на
   всю его ширину — у каталога это никогда не проявляется (там ровно 6
   карточек, всегда кратно и 3, и 2), а тут количество зависит от
   заказчика и не гарантированно кратно колонкам (найдено на 3
   тестовых карточках при 2 колонках на ширине 768px — третья карточка
   стала вдвое шире соседних). flex-grow:0 — карточка остаётся
   нормальной ширины, лишнее место просто пустует, без растяжения. */
.portfolio__item {
  flex: 0 1 calc((100% - 2 * var(--grid-gutter)) / 3);
  display: flex;
  flex-direction: column;
}

.portfolio__media {
  display: block;
  width: 100%;
  aspect-ratio: 10 / 7;
  overflow: hidden;
}

.portfolio__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease-in-out;
}

.portfolio__item:hover .portfolio__media img {
  opacity: 0.8;
}

.portfolio__body {
  padding: var(--catalog-card-padding) 0 0;
}

.portfolio__logo {
  display: block;
  height: 32px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  margin: 0 0 12px;
}

.portfolio__title {
  margin: 0 0 6px;
  font-size: var(--catalog-title-fs);
  font-weight: 600;
  color: var(--color-text);
}

.portfolio__meta {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--team-role-color);
}

.portfolio__desc {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
}

.portfolio__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-link);
  text-decoration: none;
}

.portfolio__link:hover {
  text-decoration: underline;
}

@media screen and (max-width: 980px) {
  .portfolio__item {
    flex: 0 1 calc(50% - var(--grid-gutter) / 2);
  }
}

@media screen and (max-width: 480px) {
  .portfolio__item {
    flex: 1 1 100%;
  }

  .portfolio__title {
    font-size: var(--catalog-title-fs-mobile);
  }
}

/* ---- Детальная страница /portfolio/<code> ---- */

.portfolio-detail {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 120px var(--grid-gutter) 80px;
}

.portfolio-detail__header {
  text-align: center;
  margin: 0 0 40px;
}

.portfolio-detail__logo {
  display: block;
  height: 48px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  margin: 0 auto 20px;
}

.portfolio-detail__title {
  margin: 0 0 8px;
  font-size: var(--about-title-fs);
  font-weight: 600;
  color: var(--color-text);
}

.portfolio-detail__meta {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--team-role-color);
}

.portfolio-detail__site {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-link);
}

/* Задача 35, часть 17: та же правка ширины, что и у .legal — длинный
   текст карточки портфолио, 800px → 700px. */
.portfolio-detail__text {
  max-width: 700px;
  margin: 0 auto 60px;
  font-size: var(--about-desc-fs);
  line-height: 1.6;
  color: var(--color-text);
}

.portfolio-detail__gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--catalog-row-gap) var(--grid-gutter);
}

.portfolio-detail__gallery li {
  flex: 1 1 calc((100% - 3 * var(--grid-gutter)) / 4);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.portfolio-detail__gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-detail__back {
  margin: 60px 0 0;
  text-align: center;
}

.portfolio-detail__back a {
  color: var(--color-text);
}

@media screen and (max-width: 980px) {
  .portfolio-detail {
    padding: 80px var(--grid-gutter) 60px;
  }

  .portfolio-detail__gallery li {
    flex: 1 1 calc(50% - var(--grid-gutter) / 2);
  }
}

@media screen and (max-width: 480px) {
  .portfolio-detail__gallery li {
    flex: 1 1 100%;
  }
}

/* ==========================================================================
   ЗАДАЧА 32, РАЗДЕЛ 6 — СТРАНИЦА 404
   Раньше здесь была голая нестилизованная таблица bitrix:main.map без
   единого слова "страница не найдена" (см. комментарий в 404.php).
   Аналога на сайте нет — своя, новая, минимальная секция; заимствованы
   только уже существующие токены (акцентный зелёный, шрифтовая шкала,
   паддинги секций), без собственного визуального языка с нуля.
   ========================================================================== */

.error-404 {
  max-width: 640px;
  margin: 0 auto;
  padding: 150px var(--grid-gutter) 120px;
  text-align: center;
}

.error-404__code {
  margin: 0;
  font-size: 96px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent-green);
}

.error-404__title {
  margin: 16px 0 16px;
  font-size: var(--about-title-fs);
  font-weight: 600;
  color: var(--color-text);
}

.error-404__text {
  margin: 0 0 40px;
  font-size: var(--about-desc-fs);
  line-height: 1.5;
  color: var(--color-text);
}

.error-404__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 20px;
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
}

.error-404__links a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s ease-in-out;
}

.error-404__links a:hover {
  text-decoration-color: currentColor;
  color: var(--color-accent-green);
}

/* Разметка формы (.search-form, input[name=q]/[name=s]) — из стандартного
   компонента bitrix:search.form, шаблон flat (bitrix/components/bitrix/
   search.form/templates/flat/template.php), не трогалась — оформлены
   только сами поля, переиспользуя уже существующие значения (обводка
   и радиус — как у .page-vacancy .t-input, кнопка — акцентный зелёный). */
.error-404__search .search-form {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.error-404__search input[type='text'] {
  width: 240px;
  max-width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--color-input-border);
  border-radius: 22px;
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--color-text);
}

.error-404__search input[type='submit'] {
  height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: 22px;
  background: var(--color-btn-bg-accent);
  color: var(--color-white);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.error-404__search input[type='submit']:hover {
  background: var(--color-btn-bg-accent-hover);
}

@media screen and (max-width: 480px) {
  .error-404 {
    padding: 120px var(--grid-gutter) 80px;
  }

  .error-404__code {
    font-size: 64px;
  }

  .error-404__title {
    font-size: var(--about-title-fs-mobile);
  }

  .error-404__search .search-form {
    flex-direction: column;
    align-items: center;
  }
}

/* ==========================================================================
   ЗАДАЧА 32, РАЗДЕЛ 2 — ХЛЕБНЫЕ КРОШКИ
   Два наложившихся друг на друга обстоятельства:

   1) Шапка .site-header — position:fixed, не в потоке, лежит поверх
      контента (см. комментарий у .site-header) — обложки страниц
      (.hero и т.п.) начинаются от самого верха окна намеренно, так на
      живом сайте. Обычный блок в потоке "под шапкой, до обложки" точно
      так же оказался бы залезающим под шапку, если явно не отступить
      на её высоту (128px десктоп / 75px ≤980px — те же брейкпоинты,
      что у самой шапки, сверено getBoundingClientRect).

   2) $APPLICATION->IncludeComponent("bitrix:breadcrumb", ...) сам
      оборачивает вывод в AddBufferContent() (bitrix/components/bitrix/
      breadcrumb/component.php) — на практике (проверено) это не
      "отрисовать в месте вызова, когда данные будут готовы", а
      "отрисовать в самом конце документа": итоговая разметка
      оказывается прямым потомком <body>, после подвала, вне <main>,
      независимо от того, где вызван компонент — у страницы AddChainItem()
      вызываются уже после подключения header.php, и то, что выглядит
      как отложенный рендер "на потом", на деле подчиняется какому-то
      более глубокому уровню вложенности буфера (вероятно, от
      кэширования остальных компонентов страницы) и не возвращается на
      место вызова.

   Раз реальное место в DOM всё равно не то, где вызван компонент —
   вместо борьбы с потоком документа блок сознательно выведен из него:
   position:absolute от начала документа (не fixed — должен уходить
   вместе с остальной страницей при прокрутке, а не липнуть к экрану).
   Крошек не было даже на живом сайте — сравнивать тут не с чем, это не
   поломка существующего вида, а осознанное решение для нового
   элемента.

   ЗАДАЧА 35, ЧАСТЬ 2 — серая полупрозрачная подложка (проект задачи
   32) убрана: она ни с чем на сайте не связана и особенно плохо
   смотрелась на страницах с полноэкранной обложкой, где сразу под ней
   начинается фото. Вместо неё — три варианта цвета текста, выбранные
   не по буквальному списку страниц из задания (список группирует по
   смыслу "обложка есть/нет", но не по фактическому контрасту), а по
   тому, что реально находится за текстом крошек в их узкой полосе
   (128px от верха, 38px высотой) на каждой странице — иначе текст
   оказывается нечитаемым:

   1) Тёмный текст + белое свечение (не подложка, а text-shadow —
      подсказка из задания "просто текстом" выполняется буквально,
      контраст даёт свечение вокруг букв, не прямоугольник за ними) —
      страницы с фото-обложкой (.hero), где заголовок обложки САМ
      тёмный (--hero-text-color не переопределён, значит
      var(--color-text) по умолчанию — см. .hero__title) — то есть
      везде, кроме /vacancy: `/about`, `/terms`, `/lab`, `/production`
      и разделы каталога. У этих обложек оверлей — БЕЛЫЙ градиент,
      0% прозрачности у самой верхней кромки (или 50% на /lab и
      каталоге) — крошки сидят как раз в этой кромке, то есть на сыром
      фото, а не на уже побелевшей части. Первая попытка (белый текст,
      как в задании) была проверена на /about (см. скриншот в отчёте):
      фото там светлое, белый текст на нём почти не виден — исправлено.
   2) Светлый текст + тёмная тень — везде, где сверху сплошная тёмная
      или яркая заливка, а не фото: `/vacancy` (.hero c явным тёмным
      оверлеем и --hero-text-color:#fff — единственная фото-обложка,
      где авторы уже сами выбрали белый текст, крошки просто повторяют
      это решение) и `/order` (.intro-banner с
      --intro-banner-bg:#4ea864 — тот же зелёный, что и у заголовка
      блока, сверено, задача 10/11).
   3) Приглушённый серый, без тени — везде, где сверху нет ни фото, ни
      яркой заливки: `/manufacture` (.intro-banner, светлая заливка
      #dceee0, не фото — из "группы с обложками" по заданию исключён
      намеренно, серый на светлом читается лучше белого), `/contacts`
      (первая секция — `.cta`, --cta-bg:#efefef, светло-серая),
      `/privacy`, `/consent`, `/search`.

   Цвет варианта 3 и тёмный текст варианта 1 — не новые, а переменные
   --team-role-color (#7a7a7a) и --color-text, уже используемые по
   сайту (первая — приглушённые мелкие подписи вроде роли в карточке
   команды, вторая — сам текст заголовков обложки); задание прямо
   просит брать цвет с существующих мелких подписей, а не изобретать
   новый оттенок. */

/* Задача 37, часть 3: отступ сверху и снизу — --space-item (было 10px,
   на телефоне крошки прижимались к краю обложки под шапкой), одинаково
   на всех страницах; позиция — от --header-h, а не отдельными
   числами на каждый брейкпоинт. */
.breadcrumbs {
  --breadcrumbs-fg: var(--color-text);
  --breadcrumbs-fg-strong: var(--color-text);
  --breadcrumbs-sep: var(--color-text);
  --breadcrumbs-shadow: 0 0 3px rgba(255, 255, 255, 0.9), 0 0 8px rgba(255, 255, 255, 0.9);
  position: absolute;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 5;
  padding: var(--space-item) var(--grid-gutter);
}

.breadcrumbs__list {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  /* те же кегль и высота строки, что у пунктов: при строчной раскладке
     (ниже) высоту строки задаёт и сам список */
  font-size: var(--fs-caption);
  line-height: 20px;
}

/* Задача 42, часть 3: было flex с переносом — длинный пункт уходил на
   новую строку целиком, и разделитель «/» начинал её (/consent на 360).
   Теперь крошки — обычный строчный текст: между предыдущим пунктом и
   «/» точки переноса нет (разделитель — ::before с полями, без пробела;
   разметка пунктов без пробелов между ними, см. шаблон breadcrumb), так
   что «/» всегда остаётся в конце строки, а длинное название
   переносится по своим пробелам. Однострочные крошки выглядят как
   раньше. */
.breadcrumbs__item {
  display: inline;
  overflow-wrap: anywhere;
  font-size: var(--fs-caption);
  line-height: 20px;
  color: var(--breadcrumbs-fg);
  text-shadow: var(--breadcrumbs-shadow);
}

.breadcrumbs__item:not(:first-child)::before {
  content: '/';
  margin: 0 8px;
  color: var(--breadcrumbs-sep);
}

.breadcrumbs__link {
  color: var(--breadcrumbs-fg);
  text-decoration: none;
}

.breadcrumbs__link:hover {
  color: var(--breadcrumbs-fg-strong);
  text-decoration: underline;
}

.breadcrumbs__current {
  color: var(--breadcrumbs-fg-strong);
}

/* Вариант 2 — светлый текст на сплошной тёмной/яркой заливке. */
body.page-vacancy .breadcrumbs,
body.page-order .breadcrumbs {
  --breadcrumbs-fg: rgba(255, 255, 255, 0.85);
  --breadcrumbs-fg-strong: var(--color-white);
  --breadcrumbs-sep: rgba(255, 255, 255, 0.6);
  --breadcrumbs-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Вариант 3 — приглушённый серый на светлом фоне без фото, без тени. */
body.page-manufacture .breadcrumbs,
body.page-contacts .breadcrumbs,
body.page-privacy .breadcrumbs,
body.page-search .breadcrumbs {
  --breadcrumbs-fg: var(--team-role-color);
  --breadcrumbs-fg-strong: var(--color-text);
  --breadcrumbs-sep: var(--team-role-color);
  --breadcrumbs-shadow: none;
}


/* ==========================================================================
   ЗАДАЧА 31 — БЛОК «ОТЗЫВЫ» (главная, инфоблок reviews)
   Фон: соседние блоки (сетка категорий выше, портфолио ниже) оба без
   фона (белые) — задача 30 отдельно предупреждала не ставить два
   серых блока подряд, здесь риска нет, поэтому взят --cta-bg, тот же
   серый, что и у .cta/.certs__thumb, не новый цвет. Отступы секции,
   заголовок и типографика карточки — как у .cta/.catalog, ничего не
   изобреталось (см. отчёт).
   ========================================================================== */

.reviews {
  padding: var(--space-section) var(--grid-gutter);
  background: var(--cta-bg);
}

.reviews__head {
  max-width: var(--container-max);
  margin: 0 auto var(--space-head);
  text-align: center;
}

.reviews__title {
  margin: 0 0 16px;
  font-size: var(--cta-title-fs);
  font-weight: 600;
  color: var(--color-text);
}

.reviews__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  font-size: 14px;
  color: var(--color-text);
}

.reviews__summary-stars {
  display: inline-flex;
}

/* Задача 35, часть 8: сводка — рейтинг крупнее, остальное (звёзды и
   так своего размера, счётчик и ссылка) мельче и приглушённее, чтобы
   само число "4,5" читалось первым, а не терялось среди остального
   ряда одного размера. */
.reviews__summary-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.reviews__summary-count {
  color: var(--team-role-color);
}

.reviews__summary-source {
  color: var(--team-role-color);
  font-weight: 400;
  text-decoration: none;
}

.reviews__summary-source:hover {
  text-decoration: underline;
}

/* Звёзды рейтинга (fda_rating_stars()) — заливка процентом ширины
   поверх серой звезды снизу, без иконных шрифтов и картинок.

   Задача 31 здесь выбирала зелёный вместо жёлтого — не заводить
   отдельную цветовую ось ради звёзд. Задача 35, часть 8 попросила
   перепроверить это решение — и здесь довод оборачивается в другую
   сторону: рейтинг звёздами — единственное на сайте место, где
   используется не абстрактный "акцент", а взятый из внешнего мира
   визуальный код (Яндекс.Карты, Google, маркетплейсы — везде жёлтый/
   золотой). Зелёные звёзды не читаются как рейтинг с первого взгляда
   именно потому, что ломают этот привычный код, а не потому, что
   зелёный сам по себе плох. Изменено на золотой (#f5a623) — не новый
   декоративный цвет, а стандартное значение самого элемента "звезда
   рейтинга", которое пользователь уже ожидает увидеть. */
.star {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
}

.star__base svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: var(--team-role-color);
  opacity: 0.35;
}

.star__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  display: block;
}

.star__fill svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: var(--color-rating-gold);
}

/* Задача 41, часть 1: общая обёртка ленты и ряда навигации — от неё
   считаются стрелки на >640 (раньше — от .reviews__carousel). */
.reviews__body {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
}

.reviews__carousel {
  position: relative;
}

.reviews__track {
  display: flex;
  gap: var(--grid-gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0;
  list-style: none;
  scrollbar-width: none;
}

.reviews__track::-webkit-scrollbar {
  display: none;
}

.reviews__item {
  flex: 0 0 calc((100% - 2 * var(--grid-gutter)) / 3);
  scroll-snap-align: start;
  display: flex;
}

/* Задача 35, часть 8: было без скругления, вплотную, плоско — как у
   .portfolio__item/.certs__thumb (задача 31 сознательно повторяла тот
   же язык). Тот довод здесь больше не главный: карточка отзыва — не
   витрина фото (как портфолио/сертификаты), у неё нет изображения,
   которое держит форму рамки, поэтому мягкость (скругление+тень)
   работает на неё лучше, чем плоский прямоугольник. Тень вместо
   рамки — сама тень и есть "граница" карточки, отдельная рамка не
   нужна и не добавлена. Подъём и усиление тени при наведении уже
   есть в modernization/misc.css (задача 34, раздел 9) — здесь только
   базовое состояние (более лёгкая тень, чем при наведении). */
.review-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 36px 28px;
  border-radius: 18px;
  background: var(--color-white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.review-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.review-card__avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-accent-green);
  color: var(--color-white);
  font-size: 19px;
  font-weight: 600;
}

.review-card__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.review-card__author {
  font-size: var(--catalog-title-fs);
  font-weight: 600;
  color: var(--color-text);
}

.review-card__date {
  font-size: 13px;
  color: var(--team-role-color);
}

.review-card__stars {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
}

.review-card__body {
  flex-grow: 1;
}

/* -webkit-line-clamp:5/max-height:100px/line-height:20px — те же
   значения, что и у обрезки текста на самой карточке-источнике
   (Яндекс.Карты, spoiler-view__text-container), не подобраны заново. */
.review-card__text {
  margin: 0;
  max-height: 100px;
  overflow: hidden;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

.review-card__text.is-expanded {
  max-height: none;
  -webkit-line-clamp: unset;
  display: block;
}

.review-card__more {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-link);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.review-card__more:hover {
  text-decoration: underline;
}

.review-card__source {
  display: inline-block;
  margin-top: 16px;
  font-size: 13px;
  color: var(--team-role-color);
  text-decoration: none;
}

.review-card__source:hover {
  color: var(--color-accent-green);
  text-decoration: underline;
}

/* Стрелки — тот же круглый вид кнопки, что у .facility__control
   (/manufacture, задача 19) и .hero-slider__arrow (задача 32): белый
   фон, инверсия по hover, не новый вид. Задача 35, часть 8: рамка
   убрана — на светлом фоне блока (--cta-bg) тонкая серая рамка почти
   не видна и вместе с тонким же символом стрелки делала кружки
   плоскими; держит форму теперь только тень (усилена), сама стрелка
   крупнее и жирнее. */
.reviews__control {
  position: absolute;
  /* Середина ленты: высота .reviews__body минус ряд навигации под
     лентой (отступ 30px + точки 10px). */
  top: calc(50% - 20px);
  z-index: 2;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
}

/* Задача 41: только для мыши — на сенсорном экране :hover «залипал»
   после нажатия, и стрелка оставалась тёмной. */
@media (hover: hover) {
  .reviews__control:hover {
    background: var(--color-text);
    color: var(--color-white);
  }
}

.reviews__control--prev {
  left: -20px;
}

.reviews__control--next {
  right: -20px;
}

.reviews__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10px;
  margin-top: 30px;
}

.reviews__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.reviews__counter {
  display: none;
}

/* Как .hero-slider__dot (задача 32), но контрастная пара цветов под
   светлый фон блока (там — под фото/видео обложки, здесь — под
   --cta-bg), тот же принцип (активная — акцентный зелёный). Задача 35,
   часть 8: точки крупнее, активная отличается не только цветом, но и
   формой — вытянута в пилюлю, чтобы было видно даже тем, кто не
   различает зелёный/серый. Без transition — задание прямо просит не
   добавлять эффектов переключения, смена состояния мгновенная. */
.reviews__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid var(--team-role-color);
  border-radius: 50%;
  background: var(--color-white);
  cursor: pointer;
}

.reviews__dot.is-active {
  width: 24px;
  border-radius: 5px;
  background: var(--color-accent-green);
  border-color: var(--color-accent-green);
}

@media screen and (max-width: 1199px) {
  .reviews__item {
    flex-basis: calc((100% - var(--grid-gutter)) / 2);
  }
}

@media screen and (max-width: 980px) {
  .reviews__title {
    font-size: var(--cta-title-fs-mobile);
  }

  .reviews__control--prev {
    left: 0;
  }

  .reviews__control--next {
    right: 0;
  }
}

@media screen and (max-width: 979px) {
  .reviews__item {
    flex-basis: 100%;
  }
}

/* Задача 41, часть 1а: на 641–980 стрелки стояли у самого края ленты
   (left/right: 0) и закрывали начало и конец строк в крайних карточках —
   нашла проверка overlaps.py на 980. Лента получает боковые поля, стрелки
   встают в них. */
@media screen and (min-width: 641px) and (max-width: 980px) {
  .reviews__carousel {
    padding: 0 32px;
  }

  .reviews__control--prev {
    left: -8px;
  }

  .reviews__control--next {
    right: -8px;
  }
}

/* Задача 41, часть 1: на ≤640 стрелки лежали поверх карточки и
   закрывали начало и конец строк отзыва (было 32×32 на ≤480). Теперь
   они в ряду под карточкой, 44×44, между ними счётчик «1 / 14» вместо
   14 мелких точек. */
@media screen and (max-width: 640px) {
  .reviews__nav {
    height: auto;
    gap: 24px;
    margin-top: var(--space-item);
  }

  .reviews__control {
    position: static;
    transform: none;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .reviews__dots {
    display: none;
  }

  .reviews__counter {
    display: block;
    min-width: 64px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
  }

  .reviews__counter[hidden],
  .reviews__control[hidden] {
    display: none;
  }
}

/* ==========================================================================
   ЗАДАЧА 37, ЧАСТЬ 5 — ДВА УРОВНЯ ЗАГОЛОВКОВ
   Было: заголовки секций от 24 до 42px и насыщенностью 400/600,
   заголовки карточек и рядов от 16 до 24px при 500/600/700 (таблица —
   в отчёте задачи 37). Выглядело как три разных сайта. Теперь два
   уровня; насыщенность 600 — та, что у большинства и у всех заголовков
   главной («Отзывы», «Подбор направления», «Ваш успех…»).
   Блок стоит в конце файла намеренно: одинаковая специфичность, и
   порядок каскада перебивает прежние размеры/насыщенность (включая их
   мобильные медиа-запросы выше по файлу). Шапка, подвал и заголовки в
   сетке каталога на главной сюда не входят.
   ========================================================================== */
:root {
  --h-section-fs: 32px;
  --h-card-fs: 20px;
}

@media screen and (max-width: 980px) {
  :root {
    --h-section-fs: 28px;
  }
}

@media screen and (max-width: 640px) {
  :root {
    --h-section-fs: 24px;
    --h-card-fs: 18px;
  }
}

/* Уровень 1 — заголовок секции. */
.section-title,
.values__title,
.team__title,
.about__title,
.contact-form__title,
.cta__title,
.reviews__title,
.callback-form__title {
  font-size: var(--h-section-fs);
  font-weight: 600;
  line-height: 1.25;
}

/* «Открытые вакансии» больше не крупнее остальных заголовков секций. */
.section-title--lg {
  font-size: var(--h-section-fs);
}

/* Уровень 2 — заголовок карточки или ряда «фото + текст». */
.facility__title,
.preface__title,
.split-cards__title,
.values__item-title,
.team__name,
.subcategories__title,
.icon-cards__title,
.info-grid__item-title,
.legal h2 {
  font-size: var(--h-card-fs);
  font-weight: 600;
  line-height: 1.3;
}

/* Исключение: в тексте политики/согласия — своя нумерованная
   вложенность (раздел «5.» → пункт «5.1.»), подпункту нужен третий,
   меньший уровень, иначе он сливается с разделом. */
.legal h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

/* ==========================================================================
   ЗАДАЧА 41, ЧАСТЬ 1а — ЗОНЫ НАЖАТИЯ НЕ МЕНЬШЕ 44×44
   Проверка local/tools/qa/overlaps.py нашла на 360/480 кнопки и ссылки
   меньше 44×44: бургер (24×24), иконки соцсетей в подвале (33×33),
   крестик cookie (32×32), лупа в меню, логотип (высота 42), «Ещё» в
   отзывах, «Назад»/«Начать заново» в подборе, стрелки галереи на
   /manufacture (40×40), крошки, подписи карточек каталога и др.
   Внешне ничего не меняется: зона нажатия расширена невидимым ::before
   по центру элемента — не меньше 44×44 (или сам размер элемента, если он
   больше). ::before у этих элементов свободен (у .cta__link занят только
   ::after — стрелка). position: relative задаётся только тем, у кого
   было static; у крестика cookie (absolute) остаётся absolute.
   ========================================================================== */
.site-header__logo,
.site-header__burger,
.header-search__toggle,
.site-footer__social-item,
.breadcrumbs__link,
.cta__link,
.reviews__summary-source,
.review-card__more,
.review-card__source,
.picker__back,
.picker__restart,
.facility__control,
.catalog__title a,
.about__title a,
.site-header__mobile-logo,
.site-header__mobile-menu a,
.site-footer__value,
.site-footer__policy,
.contact-form__phone,
.contact-form__email,
main td > a {
  position: relative;
}

.site-header__logo::before,
.site-header__burger::before,
.header-search__toggle::before,
.site-footer__social-item::before,
.breadcrumbs__link::before,
.cta__link::before,
.reviews__summary-source::before,
.review-card__more::before,
.review-card__source::before,
.picker__back::before,
.picker__restart::before,
.facility__control::before,
.catalog__title a::before,
.about__title a::before,
.site-header__mobile-logo::before,
.site-header__mobile-menu a::before,
.site-footer__value::before,
.contact-form__phone::before,
.contact-form__email::before,
main td > a::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

/* Крошки: при переносе названия текущей страницы на вторую строку зона
   нажатия «Главная» (по 12px вверх и вниз) задевала её текст — на
   крошках зона растёт только вверх, в верхний отступ блока. */
.breadcrumbs__link::before {
  top: auto;
  bottom: 0;
  transform: translateX(-50%);
}

/* Две ссылки политики в подвале стоят в 22px друг от друга (по центрам):
   до 44 их не расширить без изменения вида подвала — зона нажатия
   каждой 22px в высоту, стык в стык, без наложения. Остаётся меньше
   44 — спорный пункт в отчёте задачи 41. */
.site-footer__policy::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: max(100%, 22px);
  transform: translateY(-50%);
}

/* Карточка отзыва: «Ещё» и «Отзыв из Яндекса» стояли в 33px друг от
   друга по центрам — зоны нажатия накладывались. На сенсорных экранах
   отступ перед ссылкой на источник больше. («← Назад» и «Начать
   заново» в подборе разведены в modernization/picker.css.) */
@media screen and (max-width: 980px) {
  .review-card__source {
    margin-top: 27px;
  }
}

/* Кнопка «Принять» в cookie-баннере — 42px по высоте при 44 у соседней
   «Только необходимые»; выравнено. */
.cookie-banner__btn {
  min-height: 44px;
}

/* Телефон и почта в форме отклика (/vacancy) стояли вплотную (0px) —
   на сенсорных экранах разведены, чтобы зоны нажатия не накладывались.
   Так же — сайт и почта в таблице реквизитов /privacy (строки через
   40px по центрам, нужно 44). */
@media screen and (max-width: 980px) {
  .contact-form__email {
    margin-top: 20px;
  }

  .legal__table td {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* ==========================================================================
   ЗАДАЧА 43, ЧАСТЬ 4 — КОНТРАСТ ТЕКСТА НА МЯТНЫХ ПОДЛОЖКАХ
   Мятный (#ddedde) темнее прежнего серого. На нём не дотягивали до
   4,5:1: серый текст #7a7a7a (3,52; на #eef6ef — 3,90), ссылки #067a50
   (4,41), «Шаг N из 4» в подборе #06895a (3,64). Затемнено ровно до
   прохода и только на подложках: серый #696969 (4,51 / 4,98), зелёный
   #05784f (4,53 / 5,01). Вне подложек цвета прежние.
   ========================================================================== */
:root {
  --color-text-muted-surface: #696969;
  --color-link-surface: #05784f;
}

/* Полоса отзывов: «71 оценка · 14 отзывов», «Яндекс.Карты» */
.reviews__summary-count,
.reviews__summary-source {
  color: var(--color-text-muted-surface);
}

/* Полоса формы «Остались вопросы?»: подписи полей, текст согласия, ссылки */
.callback-form .field__label,
.callback-form .field--consent .t-checkbox__control {
  color: var(--color-text-muted-surface);
}

/* Ссылки на подложках: в форме и в карточках /contacts */
.callback-form a,
.info-grid__item a {
  color: var(--color-link-surface);
}

/* «Шаг N из 4» в подборе и заголовки строк таблицы сравнения схем — в
   modernization/picker.css и scheme-compare.css (подключаются позже). */

/* Подсказки в полях: поля теперь залиты --color-surface-2 (#eef6ef).
   Действует и на белые поля формы на полосе — там прежний #7a7a7a на
   белом давал 4,29:1, тоже ниже нормы. */
.t-input::placeholder {
  color: var(--color-text-muted-surface);
}


/* End */
/* /local/templates/fda/template_styles.css?1791457002284110 */