/* ============================================
   FTL Advisers — Sections
   sections.css
   
   Переиспользуемые типовые секции:
   - .quote-section          цитата + CTA + подпись
   - .stats-section          статистика в плашке (до 4 колонок)
   - .no-do-section          плашка с фоном + сетка пунктов
   - .history-section        таймлайн с центральной осью
   - .jurisdictions-section  70+ Юрисдикций + Карта
   - .follow-section         Следите за нами
   - .mailer-section         Предпочитаете получать новости
   - .start-section          С чего начать
   
   Зависит от: variables.css, typography.css, components.css
   ============================================ */


/* ══════════════════════════════════════════
   QUOTE SECTION
   
   Структура (по макету):
   ─── decor-line (869) ─────
   ↕ 20
   «Цитата» (720)
   ↕ 16 (между цитатой и описанием)
   Описание (720)
   ↕ 20
   ─── decor-line (869) ─────
   ↕ 16
   [CTA]·20·[CTA]·20·[CTA]
   ↕ 40
   ── decor-line-divided · подпись · ──
   ══════════════════════════════════════════ */

.quote-section {
  padding-top: var(--gap-blocks);
}

.quote-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Блок цитаты — только верхняя линия */
.quote-section__quote-block {
  width: 869px;
  max-width: 100%;
  border-top: 1px solid var(--decor-line);
  padding-top: var(--gap-elements);   /* 20px от линии до цитаты */
  margin-bottom: var(--gap-groups);   /* 60px до кнопок */
}

.quote-section__quote {
  max-width: 720px;
  margin: 0 auto var(--gap-cards); /* 16px между цитатой и описанием */
}

.quote-section__desc {
  max-width: 720px;
  margin: 0 auto;
}

/* Кнопки: gap 20px между ними */
.quote-section__actions {
  display: flex;
  justify-content: center;
  gap: var(--gap-elements);  /* 20px */
  flex-wrap: wrap;
  margin-bottom: 40px;       /* до подписи 40 */
}


/* ══════════════════════════════════════════
   STATS SECTION
   
   Заголовок + плашка с 4 карточками 350×286
   ══════════════════════════════════════════ */

.stats-section {
  padding-top: var(--gap-blocks);
}

.stats-section__title {
  text-align: center;
  margin-bottom: var(--gap-groups);
}

.stats-section__board {
  background: var(--bg-card);
  border-radius: var(--radius-1);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
}

.stat-item {
  min-height: 240px;
  padding: 36px 20px;       /* 36 сверху, 20 по бокам */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

/* Вертикальный разделитель между колонками — на всю высоту,
   цвет такой же как горизонтальные декоративные линии */
.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: var(--decor-line);
}

/* Цифра — Forum 80px (специфический размер, нет в typography.css) */
.stat-item__number {
  font-family: var(--font-heading);
  font-size: 76px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.stat-item__label {
  margin-bottom: 32px;
}

.stat-item__desc {
  margin-top: auto;
}


/* ══════════════════════════════════════════
   RESPONSIVE — Tablet (≤1024px)
   ══════════════════════════════════════════ */

@media (max-width: 1024px) {
  .stats-section__board {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item {
    min-height: 240px;
    padding: 36px 20px;
  }

  .stat-item::after {
    display: none;
  }

  .stat-item:nth-child(odd)::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: var(--decor-line);
  }

  .stat-item:nth-child(1),
  .stat-item:nth-child(2) {
    border-bottom: 1px solid var(--decor-line);
  }

  .stat-item__number {
    font-size: 60px;
  }
}


/* ══════════════════════════════════════════
   QUOTE & STATS — Mobile (≤768px)
   ══════════════════════════════════════════ */

@media (max-width: 768px) {
  .quote-section__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .quote-section__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .stats-section__board {
    grid-template-columns: 1fr;
  }

  .stat-item {
    min-height: auto;
    padding: 24px 20px;
    border-bottom: 1px solid var(--decor-line);
  }

  .stat-item::after,
  .stat-item:nth-child(odd)::after {
    display: none !important;
  }

  .stat-item:last-child {
    border-bottom: none;
  }

  .stat-item__number {
    font-size: 52px;
  }

  .stat-item__label {
    margin-bottom: 16px;
  }
}


/* ══════════════════════════════════════════
   NO-DO SECTION ("Чего мы не делаем" и подобные)
   
   Плашка с фоновым изображением (backgreen.webp),
   заголовок + лид + сетка 2×N пунктов с иконками.
   ══════════════════════════════════════════ */

.no-do-section {
  padding-top: var(--gap-blocks);
}

/* Плашка с фоном backgreen.webp */
.no-do-section__board {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--section-pad-top) 120px;  /* 120 по бокам, --section-pad-top сверху/снизу */
  border-radius: var(--radius-1);
  background-image: url('../img/backgreen.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Заголовок секции */
.no-do-section__title {
  text-align: center;
  margin-bottom: var(--gap-elements);   /* 20 до lead */
}

/* Лид (вводный параграф) */
.no-do-section__lead {
  text-align: center;
  margin-bottom: var(--gap-groups);     /* 60 до списка */
}

/* Сетка пунктов — 2 колонки, вторая начинается на 580px от левого края контента
   (выравнивается с карточкой "100+" из stats-section) */
.no-do-section__list {
  display: grid;
  grid-template-columns: 580px 1fr;
  row-gap: var(--gap-groups);           /* 60 между строками */
  column-gap: 0;                        /* колонки задают сетку */
}

/* Каждый пункт: иконка + текст
   От левого края пункта до иконки 32, от иконки до текста 16 */
.no-do-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;                     /* от иконки до текста 16 */
  align-items: flex-start;
  padding-left: 32px;                   /* от левого края до иконки 32 */
}

.no-do-item__icon {
  width: 66px;
  height: 66px;
  flex-shrink: 0;
}

.no-do-item__icon img,
.no-do-item__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.no-do-item__text {
  /* стили текста берутся из typography.css (p) */
}


/* ══════════════════════════════════════════
   RESPONSIVE — Tablet (≤1024px)
   ══════════════════════════════════════════ */

@media (max-width: 1024px) {
  .no-do-section__board {
    padding: var(--section-pad-top) var(--card-pad);
  }

  .no-do-section__list {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--gap-groups);
  }
}


/* ══════════════════════════════════════════
   RESPONSIVE — Mobile (≤768px)
   ══════════════════════════════════════════ */

@media (max-width: 768px) {
  .no-do-section__board {
    padding: var(--section-pad-top) var(--card-pad);
  }

  .no-do-section__list {
    grid-template-columns: 1fr;
  }
}



/* ══════════════════════════════════════════
   HISTORY SECTION (История FTL Advisers)
   
   Структура:
   H2 заголовок
   ↕ 60
   Лид (uppercase, как эпилог) — стилизуется h3.h3-upper
   ↕ 60
   Подпись с двумя линиями (decor-line-divided)
   ↕ 60
   
   Таймлайн:
   Центральная вертикальная ось (decor-line),
   карточки 540px чередуются, отступ от оси 40px.
   Точки на оси.
   Тексты внутри карточки выровнены:
   - левые карточки — по правому краю
   - правые карточки — по левому краю
   ══════════════════════════════════════════ */

.history-section {
  padding-top: var(--gap-blocks);
}

.history-section__title {
  text-align: center;
  margin-bottom: var(--gap-groups);     /* 60 */
}

.history-section__lead {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--gap-groups);     /* 60 */
}

.history-section__sign {
  margin: 0 auto var(--gap-groups);     /* 60 */
}

.history-section__sign img {
  height: 64px;
  width: auto;
}

/* Таймлайн */
.timeline {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0;
}

/* Центральная вертикальная линия */
.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--decor-line);
  transform: translateX(-50%);
}

.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: var(--gap-groups);
}

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

/* Карточка таймлайна — 540 ширина */
.timeline__card {
  width: 540px;
  background: var(--bg-card);
  border-radius: var(--radius-2);
  padding: var(--card-pad-sm);
  display: flex;
  flex-direction: column;
  gap: var(--gap-elements);
}

/* Карточка слева — отступ 40 от центральной оси справа,
   тексты внутри выровнены по правому краю */
.timeline__item--left .timeline__card {
  grid-column: 1;
  justify-self: end;
  margin-right: 40px;
  align-items: flex-end;
  text-align: right;
}

/* Карточка справа — отступ 40 от центральной оси слева,
   тексты внутри выровнены по левому краю */
.timeline__item--right .timeline__card {
  grid-column: 2;
  justify-self: start;
  margin-left: 40px;
  align-items: flex-start;
  text-align: left;
}

/* Точка на центральной оси */
.timeline__dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-primary);
  transform: translateX(-50%);
}

/* Год — плашка с фоном #374F1A 0.2 */
.timeline__year {
  width: fit-content;
  align-self: flex-start;
  padding: 6px 20px;
  background: rgba(55, 79, 26, 0.2);
  border-radius: var(--radius-3);
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* В левых карточках плашка прижата вправо */
.timeline__item--left .timeline__year {
  align-self: flex-end;
}

.timeline__text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
}


/* ══════════════════════════════════════════
   JURISDICTIONS SECTION (70+ Юрисдикций + Карта)
   
   Структура:
   H2 "70+ ЮРИСДИКЦИЙ" по центру
   ↕ 20
   Лид (4 строки)
   ↕ 60
   Плашка с картой (заглушка) — 1400 ширина, --bg-card, --radius-1
   ↕ 60
   decor-line (869)
   ↕ 20
   Текст-эпилог по центру (max 720)
   ↕ 20
   decor-line-divided + подпись
   ══════════════════════════════════════════ */

.jurisdictions-section {
  padding-top: var(--gap-blocks);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.jurisdictions-section__title {
  text-align: center;
  margin-bottom: var(--gap-elements);
}

.jurisdictions-section__lead {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--gap-groups);
}

/* Плашка карты — заглушка */
.jurisdictions-section__map {
  width: 100%;
  max-width: 1400px;
  height: 560px;
  background: var(--bg-card);
  border-radius: var(--radius-1);
  margin-bottom: var(--gap-groups);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 64px;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.jurisdictions-section__epilogue {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding-top: var(--gap-elements);
  border-top: 1px solid var(--decor-line);
  width: 869px;
  max-width: 100%;
}

.jurisdictions-section__epilogue-text {
  font-family: var(--font-body);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  padding: 0 80px;
}


/* ══════════════════════════════════════════
   FOLLOW SECTION (Следите за нами)
   
   Структура:
   H2 "СЛЕДИТЕ ЗА НАМИ" по центру
   ↕ 60
   Сетка:
   - картинка 692 слева (на 2 ряда)  |  две карточки 338 справа сверху
   - длинная карточка 692 (текст + соцсети на новой строке)
   ══════════════════════════════════════════ */

.follow-section {
  padding-top: var(--gap-blocks);
}

.follow-section__title {
  text-align: center;
  margin-bottom: var(--gap-groups);
}

.follow-section__grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 692px 338px 338px;
  grid-template-rows: auto auto;
  gap: var(--gap-cards);
}

/* Картинка слева — занимает 2 строки, высоту задают карточки справа */
.follow-section__image {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 692px;
  background: var(--bg-card);
  border-radius: var(--radius-2);
  background-size: cover;
  background-position: center;
}

/* Малые карточки справа сверху */
.follow-section__card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-2);
  padding: 20px;            /* отступы внутри 20 со всех сторон */
  width: 338px;
  align-self: start;
}

/* Широкая карточка снизу: текст + соцсети на новой строке */
.follow-section__card--wide {
  grid-column: 2 / 4;
  grid-row: 2;
  width: 692px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-elements);
}

.follow-section__card-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: var(--gap-elements);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.follow-section__card-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
}

.follow-section__card-text strong {
  font-weight: 600;
}

/* Соцсети — 32×32, на новой строке после текста в широкой карточке */
.follow-section__social-row {
  display: flex;
  align-items: center;
  gap: var(--gap-elements);
}

.follow-section__social-row a {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
}

.follow-section__social-row a img,
.follow-section__social-row a svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* ══════════════════════════════════════════
   MAILER SECTION (Предпочитаете получать новости)
   
   Плашка 1400 с фоном backgreen.webp (тот же что в no-do),
   скругление --radius-1, padding 120 сверху/снизу.
   
   Структура (центрированная):
   H2 заголовок (2 строки)
   ↕ 20
   Лид (3 строки, max 720)
   ↕ 60
   Инпут (640 ширина) с placeholder Email
   ↕ 20
   Коричневая кнопка "Отправить" с стрелкой
   ══════════════════════════════════════════ */

.mailer-section {
  padding-top: var(--gap-blocks);
}

.mailer-section__board {
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px;
  border-radius: var(--radius-1);
  background-image: url('../img/backgray.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mailer-section__title {
  margin-bottom: var(--gap-elements);
}

.mailer-section__lead {
  max-width: 720px;
  margin: 0 auto var(--gap-groups);
}

.mailer-section__input {
  width: 640px;
  max-width: 100%;
  margin-bottom: var(--gap-elements);
}

.mailer-section__input .input {
  background: var(--bg-card);
  border: 1px solid transparent;
  padding: 20px 32px;
  border-radius: var(--radius-1);
  text-align: center;
  font-size: 16px;
}


/* ══════════════════════════════════════════
   START SECTION (С чего начать)
   ══════════════════════════════════════════ */

.start-section {
  padding-top: var(--gap-blocks);
}

.start-section__title {
  text-align: center;
  margin-bottom: var(--gap-groups);
}

.start-section__grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-cards);
}

.start-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-2);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  min-height: 320px;
}

/* Верхняя строка карточки: индекс (01) + подзаголовок выровнены по нижней границе */
.start-card__index {
  display: flex;
  align-items: baseline;        /* выравнивание по baseline */
  gap: var(--gap-elements);
  margin-bottom: var(--gap-elements);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);   /* основной цвет шрифта */
}

.start-card__index-num {
  font-family: var(--font-heading);
  font-size: 24px;
  color: var(--text-primary);
}

.start-card__title {
  margin-bottom: var(--gap-elements);
  padding-bottom: var(--gap-elements);
  border-bottom: 1px solid var(--decor-line);
}

.start-card__text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  margin-bottom: var(--gap-groups);
}

.start-card__link {
  margin-top: auto;
}

/* Тёмная карточка (Контакты для связи) */
.start-card--dark {
  background: var(--bg-dark);
  border: none;
}

.start-card--dark .start-card__title {
  color: var(--text-on-dark);
  border-bottom-color: rgba(255, 255, 255, 0.3);
}

.start-card--dark .start-card__contacts {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-elements);
}

.start-card--dark .start-card__contacts a {
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: 16px;
}


/* ══════════════════════════════════════════
   TEAM SECTION (Команда)

   Структура:
   H2 "КОМАНДА" по центру
   ↕ 60
   Кнопка-плашка "Вся команда" по центру
   ↕ 60
   Сетка карточек 4×N
   ══════════════════════════════════════════ */

.team-section {
  padding-top: var(--gap-blocks);
}

.team-section__title {
  text-align: center;
  margin-bottom: var(--gap-groups);
}

.team-section__all {
  display: flex;
  justify-content: center;
  margin-bottom: var(--gap-groups);
}

.team-section__grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 338px);
  justify-content: center;
  gap: var(--gap-cards);
}

/* Карточка члена команды — 338×600 */
/* Карточки команды — стили в components.css (.card-team) */


/* ──────────────────────────────────────────
   TEAM CAROUSEL CONTROLS
   Листалка под карточками: ◀ ○ ● ○ ○ ▶
   Отступ от карточек 32, точки радиус 9, стрелки 14
   ────────────────────────────────────────── */

.team-section__carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
}

.team-section__arrow {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  transition: opacity var(--duration) var(--ease);
}

.team-section__arrow:hover {
  opacity: 0.6;
}

.team-section__arrow svg {
  width: 12px;
  height: 12px;
  display: block;
}

.team-section__dots {
  display: flex;
  align-items: center;
  gap: 12px;
}

.team-section__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--text-primary);
  padding: 0;
  cursor: pointer;
  transition: background var(--duration) var(--ease);
}

.team-section__dot.is-active {
  background: var(--text-primary);
}


/* ══════════════════════════════════════════
   BEYOND SECTION (За пределами проектов)

   H2 + 3 карточки в ряд.
   В первой карточке на фото — плашка "10 фото"
   (иконка камеры + текст), клик открывает галерею.
   ══════════════════════════════════════════ */

.beyond-section {
  padding-top: var(--gap-blocks);
}

.beyond-section__title {
  text-align: center;
  margin-bottom: var(--gap-groups);
}

.beyond-section__grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-cards);
}

/* Карточки «за пределами» — стили в components.css (.card-beyond) */


/* ══════════════════════════════════════════
   PRACTICES GRID (Плитка практик)

   Сетка карточек 3 в ряд, gap 16.
   Каждая карточка — фон SVG (зерно или билоба),
   заголовок uppercase, ссылка «Подробнее» со стрелкой.
   ══════════════════════════════════════════ */

.practices-section {
  padding-top: var(--gap-blocks);
}

.practices-section__title {
  text-align: center;
  margin-bottom: var(--gap-groups);
}

.practices-section__grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gap-cards);            /* 16 */
}

/* Карточки практик — стили в components.css (.card-practice) */


/* ══════════════════════════════════════════
   TEXT SECTION (Секция двухколоночного текста)

   Глобальная секция: подпись + заголовок + лид +
   текст в двух колонках (.text-columns из layout.css).
   Кнопка CTA опциональна.
   ══════════════════════════════════════════ */

.text-section {
  padding-top: var(--gap-blocks);
}

.text-section__inner {
  max-width: 1400px;
  margin: 0 auto;
}

.text-section__head {
  text-align: center;
  margin-bottom: var(--gap-groups);
}

.text-section__sign {
  margin-bottom: var(--gap-groups);
}

.text-section__cta {
  max-width: 1200px;
  margin: 20px auto 0;
  display: flex;
  justify-content: flex-start;
}

/* Заголовок над колонками — выровнен по левому краю .text-columns */
.text-section__title {
  max-width: 1200px;
  margin: 0 auto var(--gap-groups);
  text-align: left;
}

/* Заголовок по левому краю колонок */
.text-section__title-left {
  max-width: 1200px;
  margin: 0 auto var(--gap-groups);
  text-align: left;
}


/* ══════════════════════════════════════════
   FEATURE SECTION (Плашка с фоном и контентом)

   Глобальная секция: большая плашка с фоном (webp),
   заголовок по центру, контент внутри (аккордеоны,
   карточки, списки).

   Внутренние отступы: 32 от бортов.
   Между элементами внутри: 40.

   Модификаторы фона:
   --green   фон backgreen.webp
   --gray    фон backgray.webp
   ══════════════════════════════════════════ */

.feature-section {
  padding-top: var(--gap-blocks);
}

.feature-section__board {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
  border-radius: var(--radius-1);
}

/* Варианты с фоновой картинкой */
.feature-section__board--green {
  padding: 32px;
  background-image: url('../img/backgreen.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.feature-section__board--gray {
  padding: 32px;
  background-image: url('../img/backgray.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.feature-section__title {
  text-align: center;
  margin-bottom: 40px;
}

/* Элемент внутри плашки (строка с заголовком + картинкой) */
.feature-item {
  background: var(--bg-card);
  border-radius: var(--radius-2);
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 338px;
  gap: 40px;
  align-items: start;
}

.feature-item + .feature-item {
  margin-top: 40px;
}

.feature-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-elements);
}

.feature-item__title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0;
}

.feature-item__text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  margin: 0;
}

.feature-item__text ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.feature-item__text li {
  margin-bottom: 8px;
  padding-left: 16px;
  position: relative;
}

.feature-item__text li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background: url('../img/bullit.svg') no-repeat center / contain;
}

.feature-item__text li:last-child {
  margin-bottom: 0;
}

.feature-item__link {
  margin-top: auto;
}

/* Картинка справа */
.feature-item__image {
  width: 100%;
  border-radius: var(--radius-3);
  overflow: hidden;
}

.feature-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Модификатор: картинка слева, текст справа */
.feature-item--reverse {
  direction: rtl;
}

.feature-item--reverse > * {
  direction: ltr;
}

/* Модификатор: без картинки — одна колонка */
.feature-item--no-image {
  grid-template-columns: 1fr;
}


/* ══════════════════════════════════════════
   SERVICE SECTION (Секция карточек услуг)

   Сетка 4 карточки в ряд, gap 16.
   Карточки: .card-service
   ══════════════════════════════════════════ */

.service-section {
  padding-top: var(--gap-blocks);
}

.service-section__title {
  text-align: center;
  margin-bottom: var(--gap-groups);
}

.service-section__grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-cards);
}


/* ══════════════════════════════════════════
   ИСКЛЮЧЕНИЯ — Главная страница (index.html)
   ══════════════════════════════════════════ */

/* Секция услуг на главной: отступ 60 вместо 130 */
#home-services {
  padding-top: var(--gap-groups);   /* 60px */
}


/* ══════════════════════════════════════════
   WHY SECTION (Почему мы)

   H2 по центру → мини-кнопка (отступ 20) →
   сетка 2×2 (отступ 60). Gap 16.
   ══════════════════════════════════════════ */

.why-section {
  padding-top: var(--gap-blocks);
}

.why-section__head {
  text-align: center;
  margin-bottom: 20px;
}

.why-section__cta {
  display: flex;
  justify-content: center;
  margin-bottom: 60px;
}

.why-section__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-cards);           /* 16 */
}


/* ══════════════════════════════════════════
   RATINGS SECTION (Рейтинги и награды)

   Плашка с фоном backgray.webp.
   H2 по центру → мини-кнопка (20) →
   Логотипы в ряд (60 от кнопки), высота 147,
   равномерно с вертикальными разделителями.
   ══════════════════════════════════════════ */

.ratings-section {
  padding-top: var(--gap-blocks);
}

.ratings-section__board {
  max-width: 1400px;
  margin: 0 auto;
  padding: 100px var(--card-pad);
  border-radius: var(--radius-1);
  background-image: url('../img/backgray.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ratings-section__title {
  margin-bottom: 20px;
}

.ratings-section__cta {
  margin-bottom: 40px;
}

.ratings-section__logos {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.ratings-section__logo {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Вертикальный разделитель между логотипами */
.ratings-section__logo + .ratings-section__logo::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--decor-line);
  transform: translateX(-50%);
}

.ratings-section__logo img {
  height: 100%;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
}


/* ══════════════════════════════════════════
   SECTION TITLE — секция с одним H2 по центру
   Используется для заголовков блоков: Команда, и др.
   ══════════════════════════════════════════ */

.section-title {
  padding-top: var(--gap-blocks);
}

.section-title__h2 {
  text-align: center;
}


/* ══════════════════════════════════════════
   ИСКЛЮЧЕНИЕ — quote-section на главной (Команда)
   Порядок: текст → линия+подпись → кнопка
   - section-title→quote-section: 60px (вместо 130)
   - от текста до линии+подписи: 40px
   - кнопка сверху: 60px, снизу: 60px
   - team-section убираем свой padding-top (кнопка уже даёт 60)
   ══════════════════════════════════════════ */

.quote-section--team {
  padding-top: var(--gap-groups);  /* 60 вместо 130 */
}

.quote-section--team .quote-section__quote-block {
  margin-bottom: 0;
}

.quote-section--team .decor-line-divided {
  margin-top: 40px;
}

.quote-section__actions--sm {
  display: flex;
  justify-content: center;
  margin-top: var(--gap-groups);    /* 60 сверху */
  margin-bottom: var(--gap-groups); /* 60 до карточек */
}

/* team-section после кнопки — убираем двойной отступ */
#home-team {
  padding-top: 0;
}


/* ══════════════════════════════════════════
   EVENTS SECTION (Мероприятия)

   Подложка backsupergreen.webp, border-radius 40.
   H2 по центру → мини-кнопка (20) →
   4 карточки в ряд (60 от кнопки), gap 16.
   ══════════════════════════════════════════ */

.events-section {
  padding-top: var(--gap-blocks);
}

.events-section__board {
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px var(--card-pad);
  border-radius: var(--radius-1);
  background-image: url('../img/backsupergreen.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.events-section__head {
  text-align: center;
  margin-bottom: 20px;
}

.events-section__cta {
  display: flex;
  justify-content: center;
  margin-bottom: var(--gap-groups); /* 60 до карточек */
}

.events-section__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-cards); /* 16 */
}


/* ══════════════════════════════════════════
   MATERIALS SECTION (Полезные материалы)

   Белый фон (без подложки).
   H2 по центру → мини-кнопка (20) →
   4 карточки в ряд (60 от кнопки), gap 16.
   ══════════════════════════════════════════ */

.materials-section {
  padding-top: var(--gap-blocks);
}

.materials-section__head {
  text-align: center;
  margin-bottom: 20px;
}

.materials-section__cta {
  display: flex;
  justify-content: center;
  margin-bottom: var(--gap-groups); /* 60 до карточек */
}

.materials-section__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-cards); /* 16 */
}


/* ══════════════════════════════════════════
   CONTACT SECTION (Свяжитесь с нами)

   На основе .mailer-section.
   Подложка backgray.webp, border-radius 40.
   H2 → текст → ссылка Телеграм →
   Поля формы 640px по центру → кнопка.
   ══════════════════════════════════════════ */

.contact-section {
  padding-top: var(--gap-blocks);
}

.contact-section__board {
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px;
  border-radius: var(--radius-1);
  background-image: url('../img/extrabackgray.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.contact-section__title {
  margin-bottom: var(--gap-elements); /* 20 */
}

.contact-section__desc {
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
}

.contact-section__tg {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--gap-elements); /* 20 */
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-primary);
  text-decoration: none;
  transition: opacity var(--duration) var(--ease);
}

.contact-section__tg:hover { opacity: 0.5; }

.contact-section__tg svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Поля формы — как .mailer-section__input */
.contact-section__field {
  width: 640px;
  max-width: 100%;
  margin-bottom: var(--gap-elements); /* 20 между полями */
}

.contact-section__field:first-of-type {
  margin-top: var(--gap-groups); /* 60 от текста до формы */
}

.contact-section__field .input {
  background: var(--bg-card);
  border: 1px solid transparent;
  padding: 20px 32px;
  border-radius: var(--radius-1);
  text-align: left;
  font-size: 16px;
}

.contact-section__field .input:focus {
  border-color: var(--text-primary);
}

/* Textarea */
.contact-section__textarea {
  resize: none;
  height: 130px;
}

.contact-section__consent {
  width: 640px;
  max-width: 100%;
  margin-bottom: var(--gap-elements);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  color: var(--link-hover);
  text-align: left;
}


/* ══════════════════════════════════════════
   CTA SECTION (С чего начать)

   Всё по центру, как .quote-section:
   H2 → два абзаца → три кнопки → контакты.
   ══════════════════════════════════════════ */

.cta-section {
  padding-top: var(--gap-blocks);
}

.cta-section__inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cta-section__title {
  margin-bottom: var(--gap-groups); /* 60 */
}

/* Нумерованный список — выровнен по левому краю внутри центрированного блока */
.cta-section__list {
  text-align: left;
  width: 100%;
}

.cta-section__actions {
  display: flex;
  align-items: center;
  gap: var(--gap-elements); /* 20 */
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--gap-groups); /* 60 */
}

/* Подпись между кнопками и контактами */
.cta-section__sign {
  margin-top: var(--gap-groups); /* 60 */
}

.cta-section__contacts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: var(--gap-groups); /* 60 */
}

.cta-section__contact {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  text-decoration: none;
  transition: opacity var(--duration) var(--ease);
  margin: 0;
}

a.cta-section__contact:hover {
  opacity: 0.5;
}


/* ══════════════════════════════════════════
   STICKY CARDS SECTION

   Два столбца 1:1 относительно центра страницы.
   Левый: sticky — заголовок + картинка 800px высотой.
   Правый: карточки прокручиваются мимо левой колонки.
   Карточки: bg-card, radius-2, padding 32, gap 16.
   Текст в карточках: p + text-list.
   ══════════════════════════════════════════ */

.sticky-cards-section {
  padding-top: var(--gap-blocks);
}

.sticky-cards-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-groups); /* 60 */
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
}

/* Левая колонка — липкая */
.sticky-cards-section__left {
  position: sticky;
  top: calc(var(--header-height) + var(--gap-groups));
  display: flex;
  flex-direction: column;
}

.sticky-cards-section__title {
  /* H2 наследует стиль из typography.css */
}

.sticky-cards-section__image {
  border-radius: var(--radius-2);
  overflow: hidden;
}

.sticky-cards-section__image img {
  width: 100%;
  height: 800px;
  object-fit: cover;
  display: block;
}

/* Правая колонка — карточки */
.sticky-cards-section__right {
  display: flex;
  flex-direction: column;
  gap: var(--gap-cards); /* 16 */
}

/* Карточка */
.sticky-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-2);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-elements); /* 20 */
}

.sticky-card__title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--text-primary);
  margin: 0;
}

.sticky-card__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sticky-card__text p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
}

.sticky-card__subtitle {
  font-family: var(--font-body);
  font-size: 14px;
  font-style: italic;
  line-height: 1.4;
  color: var(--text-primary);
  margin: 0;
}

.sticky-card__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--gap-elements);
}

.sticky-card__link {
  margin-top: var(--gap-elements); /* 20 */
  align-self: flex-start;
}


/* ══════════════════════════════════════════
   DROPDOWN SECTION (Аккордеон-секция)

   Заголовок + лид по центру →
   аккордеоны шириной 1200px, gap 20.
   ══════════════════════════════════════════ */

.dropdown-section {
  padding-top: var(--gap-blocks);
}

.dropdown-section__head {
  text-align: center;
  margin-bottom: var(--gap-elements); /* 20 */
}

.dropdown-section__lead {
  max-width: 720px;
  margin: 0 auto var(--gap-groups);
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
}

.dropdown-section__list {
  max-width: 1200px;
  margin: 0 auto;
}

.dropdown-section__list .accordion + .accordion {
  margin-top: var(--gap-elements); /* 20 */
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤1024px)
   Все секции, которым не хватало адаптива
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

  /* --- Sticky Cards → одна колонка, без sticky --- */
  .sticky-cards-section__inner {
    grid-template-columns: 1fr;
    gap: var(--gap-groups);
  }

  .sticky-cards-section__left {
    position: static;
  }

  /* --- Practices — 2 колонки --- */
  .practices-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-practice,
  .card-practice--duo {
    grid-column: span 1;
  }

  /* --- Services, Events, Materials — 2 колонки --- */
  .service-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .events-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .materials-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Why Section — 1 колонка --- */
  .why-section__grid {
    grid-template-columns: 1fr;
  }

  /* --- Ratings — 2 колонки логотипов --- */
  .ratings-section__logos {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Dropdown — полная ширина --- */
  .dropdown-section__list {
    max-width: 100%;
  }

  /* --- Timeline — уменьшаем карточки --- */
  .timeline__card {
    width: 100%;
    max-width: 400px;
  }

  /* --- Team — уменьшаем карточки --- */
  .team-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-team {
    width: 100%;
    height: auto;
  }

  /* --- Фикс. высоты карточек — auto --- */
  .card-service {
    height: auto;
    min-height: 360px;
  }

  .card-event {
    height: auto;
    min-height: 320px;
  }

  .card-material {
    height: auto;
    min-height: 260px;
  }

  /* --- Banner slider --- */
  .banner-slides {
    height: 480px;
  }

  .banner--slider .banner-content {
    padding: 36px 36px 70px;
  }

  /* --- CTA Section --- */
  .cta-section__inner {
    max-width: 100%;
  }

  .cta-section__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-section__actions .btn {
    justify-content: center;
  }

  /* --- Contact form --- */
  .contact-section__field,
  .contact-section__consent {
    width: 100%;
  }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤768px)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* --- Text Columns — одна колонка --- */
  .text-columns {
    grid-template-columns: 1fr;
    gap: var(--gap-groups);
  }

  /* --- Banner --- */
  .banner {
    margin-left: 20px;
    margin-right: 20px;
  }

  .banner-slides {
    height: 360px;
  }

  .banner--slider .banner-content {
    padding: 24px 24px 60px;
  }

  .banner-lead {
    font-size: 14px;
    max-width: 100%;
  }

  .banner-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .banner-inner h1,
  .banner-inner .h1,
  .banner-inner h2,
  .banner-inner .h2 {
    max-width: 100%;
  }

  .banner-carousel {
    bottom: 20px;
    gap: 10px;
  }

  .banner-carousel__arrow {
    width: 16px;
    height: 16px;
  }

  .banner-carousel__arrow svg {
    width: 16px;
    height: 16px;
  }

  .banner-carousel__dot {
    width: 10px;
    height: 10px;
  }

  /* --- Practices — одна колонка --- */
  .practices-section__grid {
    grid-template-columns: 1fr;
  }

  .card-practice {
    padding: var(--card-pad) var(--card-pad);
    min-height: 200px;
  }

  /* --- Services, Events, Materials — одна колонка --- */
  .service-section__grid,
  .events-section__grid,
  .materials-section__grid {
    grid-template-columns: 1fr;
  }

  .card-service,
  .card-event,
  .card-material {
    height: auto;
    min-height: auto;
  }

  .card-service__body {
    padding: 24px 24px 0;
  }

  .card-service__link-primary,
  .card-service__link-secondary {
    padding: 16px 24px;
  }

  .card-service__link-secondary {
    padding-bottom: 24px;
  }

  /* --- Why Section --- */
  .why-section__grid {
    grid-template-columns: 1fr;
  }

  .card-why {
    grid-template-columns: 48px 1fr;
    gap: 20px;
    padding: 24px;
  }

  .card-why__icon {
    width: 48px;
    height: 48px;
  }

  /* --- Ratings --- */
  .ratings-section__board {
    padding: 48px var(--card-pad);
  }

  .ratings-section__logos {
    grid-template-columns: repeat(2, 1fr);
  }

  .ratings-section__logo {
    height: 80px;
  }

  /* --- Events & Materials boards --- */
  .events-section__board {
    padding: 48px var(--card-pad);
  }

  /* --- Contact --- */
  .contact-section__board {
    padding: 48px 24px;
  }

  .contact-section__field .input {
    padding: 16px 20px;
    border-radius: var(--radius-2);
  }

  /* --- History section --- */
  .history-section {
    overflow: visible;
  }

  /* --- Timeline — вертикальная ось слева --- */
  .timeline {
    max-width: 100%;
    padding-left: 32px; /* место для оси и точки */
  }

  /* Ось слева */
  .timeline::before {
    left: 4px; /* центр точки 10px = 5px, ось 1px */
    transform: none;
  }

  .timeline__item {
    display: block;
    margin-bottom: var(--gap-elements);
  }

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

  /* Все карточки — одинаково, слева от оси, выровнены по левому краю */
  .timeline__item--left .timeline__card,
  .timeline__item--right .timeline__card {
    grid-column: auto;
    justify-self: auto;
    margin-left: 0;
    margin-right: 0;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    max-width: none;
  }

  /* Точка — слева на оси */
  .timeline__dot {
    position: absolute;
    left: -32px;
    top: 16px;
    width: 10px;
    height: 10px;
    transform: none;
  }

  /* Год — всегда слева */
  .timeline__item--left .timeline__year {
    align-self: flex-start;
  }

  .timeline__card {
    width: 100%;
    padding: var(--card-pad);
  }

  /* --- Team — одна колонка --- */
  .team-section__grid {
    grid-template-columns: 1fr;
  }

  .card-team {
    width: 100%;
    height: auto;
  }

  .card-team__photo {
    height: 240px;
  }

  /* --- Beyond — одна колонка --- */
  .beyond-section__grid {
    grid-template-columns: 1fr;
  }

  /* --- Jurisdictions — уменьшаем карту --- */
  .jurisdictions-section__map {
    height: 300px;
    font-size: 32px;
  }

  .jurisdictions-section__epilogue {
    width: 100%;
    padding: var(--gap-elements) 0 0;
  }

  /* --- Sticky Cards --- */
  .sticky-card {
    padding: 24px;
  }

  .sticky-card__title {
    font-size: 20px;
  }

  /* --- Dropdown --- */
  .accordion__trigger {
    font-size: 18px;
    padding: 16px 20px;
  }

  .accordion__content {
    padding: 12px 20px 20px;
  }

  /* --- CTA Section --- */
  .cta-section__inner {
    padding: 0 var(--edge);
  }

  .cta-section__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-section__actions .btn {
    justify-content: center;
  }

  /* --- Decor line --- */
  .decor-line-divided {
    gap: 16px;
  }

  .signature {
    height: 48px;
  }

  /* --- Mailer --- */
  .mailer-section__board {
    padding: 48px 24px;
  }

  /* --- Follow / Social --- */
  .follow-section__social-row {
    flex-wrap: wrap;
  }

  /* --- Numbered list --- */
  .numbered-list li {
    padding-left: 32px;
    font-size: 14px;
  }

  .numbered-list li::before {
    width: 20px;
    height: 20px;
  }

  /* --- Breadcrumbs --- */
  .breadcrumbs {
    padding-left: 20px;
    padding-right: 20px;
  }
}