/* ==========================================================================
   Дон Трансфер — основные стили
   Раскладка и палитра перенесены из макета без изменений.
   ========================================================================== */

:root {
  --yellow: #ffc400;
  --yellow-hover: #ffd84d;
  --ink: #111111;
  --ink-soft: #2b2b2b;
  --paper: #ffffff;
  --paper-warm: #f4f2ec;
  --paper-hover: #faf8f2;
  --text-muted: #4a4a4a;
  --text-dim: #5a5a5a;
  --text-grey: #7a7a7a;
  --text-on-dark: #a3a3a3;
  --link-hover: #b88600;
  --border-dark: #2a2a2a;
  --tab-border: #3a3a3a;
  --tab-text: #d6d6d6;

  --font-body: 'Commissioner', sans-serif;
  --font-display: 'Oswald', sans-serif;

  /* Одна длительность на всё сжатие шапки: врозь они разъезжаются
     и элементы приходят к новому размеру не одновременно */
  --header-shrink: 0.18s ease;

  --wrap: 1200px;
  --gutter: 20px;
  --section-y: clamp(56px, 7vw, 88px);
}

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

/* Скрытое — скрыто. Браузерное правило для [hidden] слабее любого
   авторского display, поэтому элемент с классом вроде .btn оставался
   на виду, хотя скрипт пометил его hidden. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
}

html { scroll-behavior: smooth; }
/* Запас под липкую шапку при переходе по якорю: примерно её высота
   в сжатом состоянии, в котором она и оказывается после прокрутки. */
[id] { scroll-margin-top: 72px; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--link-hover); }

img { max-width: 100%; display: block; }

/* Видно только скринридерам */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* --------------------------------------------------------------- Кнопки -- */

.btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 18px 42px;
}
.btn--primary { background: var(--yellow); color: var(--ink); }
.btn--primary:hover { background: var(--yellow-hover); color: var(--ink); }
.btn--dark { background: var(--ink); color: var(--yellow); }
.btn--dark:hover { background: var(--ink-soft); color: var(--yellow); }

/* --------------------------------------------------------------- Шапка --
   Одна строка на тёмном фоне: слева вывеска, справа контакты.
   Раньше шапка была в два ряда, и в каждом зияла дыра посередине —
   четыре группы стояли по разной логике и не собирались в картинку.
   Теперь блока два, и промежуток между ними читается как разрядка,
   а не как разброс.
   Шапка тёмная: белая полоса на белом герое не читалась, а тёмный блок
   контактов висел в ней без опоры. На чёрном фоне блок перестал быть
   отдельной плиткой. Липкую шапку от чёрной секции тарифов отделяет
   жёлтая кромка внизу.
   При прокрутке вывеска и контакты поджимаются, запасной номер уходит —
   класс .is-compact ставит assets/js/main.js. */

.header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--ink);
  color: var(--paper);
  /* Жёлтая кромка — единственное, что отделяет липкую шапку от секции
     тарифов: она такая же чёрная, и без кромки шапка с ней сливается.
     Серая линия в 1px эту задачу не решает, проверено рендером. */
  border-bottom: 3px solid var(--yellow);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 12px;
  padding-bottom: 12px;
  transition: padding var(--header-shrink);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand__mark {
  flex: none;
  display: block;
  height: 34px;
  width: auto;
  transition: height var(--header-shrink);
}
.brand__name {
  display: block;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0;
  transition: font-size var(--header-shrink);
}

/* --- контакты --- */

.contacts {
  display: flex;
  align-items: center;
  gap: 18px;
}
.contacts__phones {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* --- сжатое состояние --- */

.header.is-compact .header__inner { padding-top: 7px; padding-bottom: 7px; }
.header.is-compact .brand__mark { height: 26px; }
.header.is-compact .brand__name { font-size: 18px; }
.header.is-compact .contacts .phone:not(.is-active) {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
}
.header.is-compact .contacts .phone.is-active .phone__number { font-size: 21px; }
.header.is-compact .messengers--bar a { width: 28px; height: 28px; }

/* ------------------------------------------------------- Мессенджеры ----
   Общая основа для трёх мест: шапка, подвал и модалка.
   Логотипы — чёрные глифы с прозрачным фоном (assets/img/messengers),
   поэтому на тёмном они выворачиваются в светлый через filter, а на жёлтом
   при наведении и на белом в модалке остаются чёрными как есть. */

.messengers { display: flex; gap: 8px; }
.messengers a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  border: 2px solid var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
}
.messengers a:hover { background: var(--yellow); color: var(--ink); }

.messengers__icon {
  display: block;
  width: 18px;
  height: 18px;
}
/* На тёмном фоне: светлый и приглушённый, чтобы не спорить с номером */
.messengers--bar .messengers__icon,
.messengers--footer .messengers__icon {
  filter: invert(1);
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.messengers--bar a:hover .messengers__icon,
.messengers--footer a:hover .messengers__icon {
  filter: none;
  opacity: 1;
}

/* В шапке держатся тихо: жёлтый там принадлежит дежурному номеру */
.messengers--bar { gap: 7px; flex: none; }
.messengers--bar a {
  width: 34px;
  height: 34px;
  border: 1px solid var(--tab-border);
  font-size: 14px;
  color: var(--tab-text);
  transition: width var(--header-shrink), height var(--header-shrink);
}
.messengers--bar a:hover {
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--yellow);
}

/* ------------------------------------------- Телефон и смена диспетчера --
   Дежурный номер подсвечен жёлтой полосой и тёмным текстом, второй
   приглушён. assets/js/main.js по московскому времени ставит класс
   .is-active и переносит дежурного на первое место в своей группе —
   то есть номера действительно меняются местами, а не только цветом.
   Без JS первым идёт дневной диспетчер: так он задан в разметке. */

.phone {
  border-left: 3px solid transparent;
  padding-left: 10px;
}
.phone.is-active { border-left-color: var(--yellow); }

.phone__number {
  display: block;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.15;
  color: var(--text-grey);
}
.phone.is-active .phone__number { color: var(--ink); }
.phone__number:hover { color: var(--link-hover); }

.phone__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-grey);
}
.phone__name { letter-spacing: 0.02em; }
.phone.is-active .phone__name { color: var(--ink); }

/* Телефон в шапке.
   Иерархия держится только на стиле: дежурный жёлтый и крупный сверху,
   запасной серый и мелкий под ним. Имён в шапке нет — в этой композиции
   они читались как строка данных, а не как контакт; они остались
   в подвале и в модалке. */
.contacts .phone {
  border-left: none;
  padding-left: 0;
  max-height: 40px;
  transition: opacity var(--header-shrink), visibility var(--header-shrink),
              max-height var(--header-shrink);
}

.contacts .phone.is-active .phone__number {
  font-size: 26px;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
  transition: font-size var(--header-shrink);
}
.contacts .phone.is-active .phone__number:hover { color: var(--yellow-hover); }

.contacts .phone:not(.is-active) .phone__number {
  font-size: 15px;
  color: #8a8a8a;
}
.contacts .phone:not(.is-active) .phone__number:hover { color: var(--paper); }

/* --------------------------------------------------------------- Герой -- */

/* Снимок Ростова лежит под первым экраном, поверх него белая заливка:
   страница остаётся светлой, чёрный заголовок читается без подложек,
   а город угадывается фоном, а не спорит с текстом. Слева заливка
   плотнее — там заголовок и подзаголовок, справа кадр виден лучше. */
/* Первый экран — светлое поле с заголовком и расчётом, без картинки.
   Снимок тут перепробован во всех видах: во всю ширину под текстом
   (светлый давил яркостью, тёмный делал верх страницы тёмной стеной)
   и половиной экрана справа. Без него первый экран короче и спокойнее,
   а тёмный раздел тарифов сразу под ним работает как акцент. */
.hero {
  border-bottom: 3px solid var(--yellow);
  background: var(--paper);
  color: var(--ink);
}
/* Колонка первого экрана уже общей и стоит по центру: строка поиска
   центрируется, а заголовок с подзаголовком выравниваются по её левому
   краю — они лежат в той же колонке. Ширина считается от ширины строки
   плюс поля, чтобы край строки и край текста совпадали точно. */
.hero__inner {
  max-width: calc(900px + var(--gutter) * 2);
  padding-block: clamp(52px, 7vw, 92px) clamp(48px, 6vw, 80px);
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(42px, 6.6vw, 72px);
  line-height: 0.98;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.hero__lead {
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 32px;
}
/* Отступ висит на кнопке, а не на подзаголовке: кнопка скрывается,
   когда показан калькулятор, и вместе с ней должен уходить отступ. */
.hero__cta { margin-top: 4px; }
.hero__media {
  display: block;
  width: 100%;
  height: auto;
}

/* -------------------------------------------------------- Преимущества --
   Шесть пунктов сеткой между направлениями и блоком «3 шага».
   Фон тёплый: сверху белые направления, снизу белые шаги — так секция
   не сливается ни с одной из соседних.
   Нумерации нет намеренно: это не последовательность, а перечень —
   в отличие от блока «3 шага», где номера уместны.
   Вместо значков у каждого пункта жёлтая черта сверху: рисовать иконки
   не из чего, а черта отбивает столбцы и рифмуется с кромкой шапки. */

.perks { background: var(--paper-warm); }
.perks__inner {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
.perks .section-title { margin-bottom: 46px; }

.perks__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 36px;
}
.perk {
  border-top: 3px solid var(--yellow);
  padding-top: 18px;
}
.perk__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0 0 10px;
}
.perk__text {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

/* ------------------------------------------------------ Расчёт поездки --
   Блок первого экрана: выбрал город и класс — увидел расстояние и цену.
   Оформлен как остальные плашки сайта: жёсткая рамка в 2px, тёмная шапка,
   жёлтым только результат. Тени и скругления не используются нигде,
   не используются и здесь. */

/* Расчёт поездки — блок из двух этажей: сверху строка поиска с кнопкой,
   снизу ответ. Порядок этажей задаёт сетка, поэтому на узком экране ответ
   переезжает между полем и кнопкой: цена должна читаться раньше, чем палец
   дойдёт до кнопки. */
.calc {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "field  cta"
    "result result";
  max-width: 900px;
  border: 2px solid var(--ink);
}

.calc__field {
  grid-area: field;
  position: relative;
  min-width: 0;
  padding: 16px 18px;
  background: var(--paper);
}

/* Поле поиска. Текст набран основным шрифтом, а не Oswald: заголовочный
   шрифт в рамке читается как плашка с названием, а не как строка ввода.
   Лупа — универсальный признак поиска, без неё поле не отличить
   от остальных плашек сайта с такой же жёсткой рамкой. */
.calc__input {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 18px 18px;
  /* Слева место под лупу, справа под крестик — иначе длинное название
     уезжает под него */
  padding: 0 30px 0 26px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
}
.calc__input::placeholder {
  color: #a8a8a8;
  font-size: 16px;
}
/* Фокус подсвечивает всю ячейку: своей рамки у поля в строке нет */
.calc__input:focus { outline: none; }
.calc__field:focus-within { box-shadow: inset 0 0 0 2px var(--yellow); }
.calc__input::placeholder { color: #8f8f8f; }

/* Обёртка нужна крестику: без неё он считает высоту от всей строки,
   вместе с подписью «Куда» */
.calc__control { position: relative; }

/* Крестик лежит поверх поля справа. Размер — во всю высоту поля,
   чтобы в него попадали пальцем, а сам знак маленький. */
.calc__clear {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--text-grey);
  cursor: pointer;
}
.calc__clear:hover { color: var(--ink); }
.calc__clear:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

/* Выпадающий список подсказок.
   Список городов не помещается в контрол целиком и никогда не поместится:
   их будут сотни. Поэтому поле поиска, а список — только подсказка.
   Рисуем его сами: системный выпадающий список выбивается из графики
   и по-разному ведёт себя в браузерах. */
.calc__field { position: relative; }

.calc__list {
  position: absolute;
  top: 100%;
  left: -2px;
  right: -2px;
  z-index: 5;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  max-height: 264px;
  overflow-y: auto;
  background: var(--paper);
  /* Цвет задан явно: первый экран теперь светлым по тёмному, и без этого
     названия городов наследовали белый — белым по белому. */
  color: var(--ink);
  border: 2px solid var(--ink);
}

.calc__option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 13px;
  font-family: var(--font-display);
  font-size: 17px;
  cursor: pointer;
}
.calc__option + .calc__option { border-top: 1px solid #ececec; }
.calc__option:hover,
.calc__option[aria-selected="true"] { background: var(--yellow); }
.calc__option-km {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-grey);
}
.calc__option:hover .calc__option-km,
.calc__option[aria-selected="true"] .calc__option-km { color: var(--ink); }

/* Заголовок группы и строка «ничего не найдено» — не выбираются.
   Заголовок липкий: в длинном списке видно, популярные это города
   или уже остальные. */
.calc__list-note {
  position: sticky;
  top: 0;
  padding: 9px 13px;
  font-size: 12px;
  color: var(--text-grey);
  background: var(--paper-warm);
}

/* Нижний этаж: город, километры, сумма. Все три набраны одним шрифтом
   и одним кеглем — разные размеры рядом выглядели случайным набором.
   Разделяет их не размер, а цвет: город белый, километры приглушены,
   сумма жёлтая.
   Левый край текста совпадает с текстом в поле сверху: 18 — отступ ячейки,
   26 — место под лупу. Без этого нижний этаж стоял левее верхнего,
   и блок читался как два случайно составленных куска. */
/* Строка ответа — тоже кнопка заказа: клик по цене делает то же, что
   кнопка рядом. Сбрасываем всё, что браузер даёт кнопке по умолчанию. */
.calc__result {
  grid-area: result;
  width: 100%;
  border: 0;
  border-radius: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  padding: 14px 18px 15px 44px;
  min-height: 56px;
  background: var(--ink);
}
.calc__route,
.calc__distance,
.calc__price {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
}
.calc__route { color: var(--paper); }
.calc__distance { color: rgba(255, 255, 255, 0.55); }
.calc__price {
  margin-left: auto;
  color: var(--yellow);
}
/* Города ещё нет: справа ставка за километр — цифра, из которой сумма
   и складывается. Приглушена, чтобы её не приняли за цену поездки. */
.calc__result.is-blank .calc__route,
.calc__result.is-blank .calc__price { color: rgba(255, 255, 255, 0.62); }
.calc__result:hover { background: #1c1c1c; }
.calc__result:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: -2px;
}

.calc__cta {
  grid-area: cta;
  border: 0;
  padding: 0 34px;
  font-size: 17px;
}

/* Узкий экран: поле, под ним кнопка во всю ширину, ниже — ответ обычным
   текстом. Тремя полосами внутри общей рамки блок читался как полосатый
   флаг: белая полоса, чёрная, жёлтая. Здесь рамку носят сами поле
   и кнопка, а у ответа фона нет вовсе. */
@media (max-width: 719px) {
  .calc {
    grid-template-columns: 1fr;
    grid-template-areas:
      "field"
      "cta"
      "result";
    border: 0;
  }
  .calc__field {
    border: 2px solid var(--ink);
    border-bottom: 0;
    padding: 14px 14px 14px 16px;
  }
  .calc__cta {
    border: 2px solid var(--ink);
    padding: 14px 20px;
    font-size: 17px;
  }

  .calc__result:hover { background: none; }
  .calc__result {
    padding: 14px 2px 0;
    /* Высота под заполненный ответ: жёлтая плашка с ценой выше серой
       строки со ставкой, и без запаса раздел ниже прыгал на 10px
       в момент выбора города. */
    min-height: 70px;
    background: none;
    gap: 4px 14px;
  }
  /* Порядок на телефоне: город и сумма в одной строке, километры под ними.
     Так цена стоит на одной высоте с названием города — как ставка стоит
     на одной высоте с «Из Ростова-на-Дону» в пустом состоянии. */
  .calc__route { color: var(--ink); }
  .calc__price { order: 1; }
  .calc__distance {
    order: 2;
    flex: 1 1 100%;
  }
  .calc__distance { color: var(--text-grey); }
  .calc__price {
    color: var(--ink);
    background: var(--yellow);
    /* Сверху меньше, чем снизу: при выравнивании по базовой линии в плашку
       попадает пустое место над прописными, и при симметричных полях
       жёлтое пятно оптически сидит выше названия города. Померено:
       с 2/2 над цифрами 6,75px, под ними 4,75px; с 1/3 — поровну. */
    padding: 1px 11px 3px;
  }
  /* Города ещё нет: ставка идёт простым серым текстом, без жёлтой плашки —
     плашка на этом месте читалась бы как цена поездки. */
  .calc__result.is-blank .calc__route,
  .calc__result.is-blank .calc__price { color: var(--text-grey); }
  .calc__result.is-blank .calc__price {
    background: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: 15px;
  }
}

/* Выбранный маршрут в модалке */
.modal__trip {
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #dddddd;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.25;
}
.modal__trip[hidden] { display: none; }

/* -------------------------------------------------------------- Тарифы -- */

.section-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 46px);
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 26px;
  text-align: center;
}

/* Раздел чёрный: белые машины на тёмном фоне выглядят дороже, чем
   на тёплом — пробовали тёплый, стало заметно хуже. */
.tariffs {
  background: var(--ink);
  color: var(--paper);
}
.tariffs__inner {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.tab {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 12px 30px;
  border: 2px solid var(--tab-border);
  background: transparent;
  color: var(--tab-text);
}
.tab[aria-selected="true"] {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--ink);
}

.tariff {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.tariff[hidden] { display: none; }

/* Панели тарифов лежат стопкой в одной ячейке сетки.
   Раньше неактивные прятались через display:none, и при показе браузер
   заново декодировал фотографию — отсюда моргание при первом переключении.
   Со стопкой все шесть остаются в дереве отрисовки и уже декодированы,
   а переключение сводится к visibility. Класс is-stacked ставит
   assets/js/main.js: без него панели прячутся атрибутом hidden,
   как и раньше, и без JS видна только первая. */
.tariffs__panels.is-stacked { display: grid; }
.tariffs__panels.is-stacked > .tariff {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
}
.tariffs__panels.is-stacked > .tariff.is-current {
  visibility: visible;
  opacity: 1;
}
/* Фиксированная рамка, чтобы панель не прыгала при переключении тарифов:
   у фотографий машин пропорции чуть разные.
   height: auto обязателен — у <img> есть атрибут height, он работает
   как height в пикселях и перебивает aspect-ratio: высота оказывалась
   натуральной, рамка не применялась, и панель раздувало пустотой. */
.tariff__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}
.tariff__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 32px);
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 6px;
}
.tariff__cars {
  font-size: 16px;
  color: var(--text-on-dark);
  margin: 0 0 24px;
}
.tariff__rows {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin: 0 0 24px;
}
.tariff__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 16px;
  border-bottom: 1px solid var(--border-dark);
  padding-bottom: 12px;
}
.tariff__row-label { color: var(--text-on-dark); }
.tariff__row-value {
  font-family: var(--font-display);
  font-size: 18px;
  white-space: nowrap;
}
.tariff__price {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--yellow);
}

/* --------------------------------------------------------- Направления -- */

.routes {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
.routes .section-title { margin-bottom: 10px; }
.routes__lead {
  font-size: 16px;
  color: var(--text-dim);
  margin: 0 0 32px;
  text-align: center;
}
.routes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
/* Карточка направления: фотография города во всю плашку, текст белым
   в нижней части по затемнению.

   Раньше снимок глушила белая пелена, и текст стоял поверх него тёмным.
   Это всегда компромисс: либо гасить фотографию до неразличимости, либо
   терять текст. Здесь текст и снимок разведены по светлоте — белые буквы
   в самой тёмной зоне кадра, — и гасить фотографию больше не нужно.
   Затемнение держится плотным только под текстом и полностью сходит
   на нет уже к верхней пятой части, так что бо́льшая часть снимка
   остаётся нетронутой.
   Текст прижат книзу, но не вплотную: под ним остаётся поле.
   Строки «Ростов-на-Дону →» в карточках нет намеренно: она была одинакова
   на всех шести и ничего к ним не добавляла, зато делала текстовый блок
   на треть выше — а чем выше блок, тем больше приходится затемнять. */
.route-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid var(--ink);
  /* Ручки раскладки карточки:
     min-height    — высота карточки; чем больше, тем ниже сидит текст
     padding       — последнее значение это отступ текста от нижнего края */
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 200px;
  background: var(--ink);
  color: var(--paper);
  text-align: left;
  font: inherit;
}

.route-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Небольшой перелёт по краям: при наведении кадр приближается ещё,
     и запас не даёт оголиться углам. */
  transform: scale(1.05);
  transition: transform 0.35s ease;
}

.route-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Затемнение под текстом. Проценты считаются снизу вверх: 0% — нижний
     край карточки, 100% — верхний. Хотите меньше затемнения — двигайте
     проценты вниз, они задают, до какой высоты оно доходит. */
  background: linear-gradient(0deg,
    rgba(10, 10, 10, 0.88) 0%,
    rgba(10, 10, 10, 0.80) 28%,
    rgba(10, 10, 10, 0.42) 44%,
    rgba(10, 10, 10, 0.06) 58%,
    rgba(10, 10, 10, 0) 70%);
  transition: background 0.35s ease;
}

/* Содержимое поверх затемнения */
.route-card__city,
.route-card__meta {
  position: relative;
  z-index: 2;
}

.route-card:hover .route-card__bg,
.route-card:focus-visible .route-card__bg,
.route-card:active .route-card__bg {
  transform: scale(1.09);
}
.route-card:hover::after,
.route-card:focus-visible::after,
.route-card:active::after {
  background: linear-gradient(0deg,
    rgba(10, 10, 10, 0.84) 0%,
    rgba(10, 10, 10, 0.74) 28%,
    rgba(10, 10, 10, 0.36) 44%,
    rgba(10, 10, 10, 0.04) 58%,
    rgba(10, 10, 10, 0) 70%);
}

.route-card__city {
  font-family: var(--font-display);
  font-size: 26px;
  text-transform: uppercase;
  /* зазор между названием города и строкой с километражом и ценой */
  margin-bottom: 6px;
}
.route-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.route-card__km { font-size: 15px; color: var(--tab-text); }
.route-card__price {
  font-family: var(--font-display);
  font-size: 19px;
  background: var(--yellow);
  padding: 3px 10px;
}

/* ---------------------------------------------------------------- Шаги -- */

/* Шаги на белом: тёплый фон отдан преимуществам, которые теперь стоят
   прямо над ними — два тёплых блока подряд слились бы в одно бежевое поле.
   Черта сверху разделяет их. */
.steps {
  background: var(--paper);
  border-top: 2px solid var(--ink);
}
.steps__inner {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  text-align: center;
}
.steps .section-title { margin-bottom: 44px; }
.steps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 36px;
  text-align: left;
}
.step__num {
  width: 48px;
  height: 48px;
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 24px;
  margin-bottom: 18px;
}
.step__title {
  font-family: var(--font-display);
  font-size: 26px;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 8px;
}
.step__text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}
.steps__cta { margin-top: 44px; }

/* -------------------------------------------------------------- Подвал -- */

.footer {
  background: var(--ink);
  color: var(--paper);
}
.footer__inner {
  padding-top: 36px;
  padding-bottom: 36px;
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 21px;
  text-transform: uppercase;
  margin-right: auto;
}
.footer__brand .brand__mark { height: 26px; }
.messengers--footer a {
  width: 38px;
  height: 38px;
  border: 1px solid var(--tab-border);
  font-size: 16px;
  color: var(--tab-text);
}
.messengers--footer a:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.messengers--footer .messengers__icon { width: 19px; height: 19px; }
/* Телефоны, под ними мессенджеры */
.footer__contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.footer__phones {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.footer__phones .phone__number {
  font-size: 18px;
  color: var(--text-on-dark);
}
.footer__phones .phone.is-active .phone__number { color: var(--paper); }
.footer__phones .phone__number:hover { color: var(--yellow); }
.footer__phones .phone.is-active .phone__name { color: var(--paper); }
.footer__legal {
  width: 100%;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-grey);
}
.footer__legal p { margin: 0; }
.footer__legal p + p { margin-top: 6px; max-width: 70ch; }

/* ------------------------------------------------------------- Модалка -- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(17, 17, 17, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal[hidden] { display: none; }
.modal__box {
  width: 100%;
  max-width: 420px;
  background: var(--paper);
  border: 3px solid var(--ink);
  padding: clamp(22px, 5vw, 30px);
}
.modal__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.modal__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 6vw, 28px);
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}
.modal__close {
  border: none;
  background: transparent;
  color: #888888;
  font-size: 26px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.modal__close:hover { color: var(--ink); }
.modal__phones {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}
.modal__phones .phone {
  border-left: none;
  padding-left: 0;
}
.modal__phones .phone__meta { justify-content: center; }

/* В модалке дежурный номер — жёлтая кнопка, второй — контурная */
.modal__phone {
  display: block;
  text-align: center;
  background: transparent;
  border: 2px solid #cccccc;
  color: var(--text-grey);
  font-family: var(--font-display);
  font-size: 22px;
  padding: 14px;
}
.modal__phone:hover { background: var(--paper-hover); color: var(--ink); }
.phone.is-active .modal__phone {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
}
.phone.is-active .modal__phone:hover { background: var(--yellow-hover); }
.modal__messengers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.modal__messengers a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 1px solid #cccccc;
  padding: 14px 6px;
  font-size: 13px;
  color: var(--ink);
}
.modal__messengers a:hover { border-color: var(--ink); color: var(--ink); }
.modal__messengers-icon {
  width: 34px;
  height: 34px;
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal__messengers-icon .messengers__icon { width: 20px; height: 20px; }
.modal__messengers a:hover .modal__messengers-icon { background: var(--yellow); }

/* Блокировка прокрутки под открытой модалкой */
body.is-locked { overflow: hidden; }

/* Видимый фокус для клавиатуры */
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.tariffs :focus-visible, .footer :focus-visible { outline-color: var(--yellow); }

/* -------------------------------------------------------- Адаптивность -- */

@media (max-width: 979px) {
  .perks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 719px) {
  .routes__grid { grid-template-columns: minmax(0, 1fr); }
  .perks__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }

  /* Шапка на телефоне: вверху вывеска и мессенджеры по краям, под ними
     номера во всю ширину. Рядом с вывеской номера на 390px не помещаются,
     а мессенджеры помещаются — и в верхнем углу они заметнее, чем
     приклеенными сбоку к номерам.
     display: contents у .contacts нужно, чтобы её содержимое встало
     в сетку шапки: сама она в раскладке не участвует. */
  .header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand  messengers"
      "phones phones";
    align-items: center;
    gap: 8px 12px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .brand { grid-area: brand; }
  .brand__name { font-size: 19px; }
  .brand__mark { height: 26px; }

  .contacts { display: contents; }
  .contacts__phones {
    grid-area: phones;
    min-width: 0;
  }
  .messengers--bar { grid-area: messengers; }
  .contacts .phone.is-active .phone__number { font-size: 22px; }
  .contacts .phone:not(.is-active) .phone__number { font-size: 14px; }
  .messengers--bar a { width: 30px; height: 30px; }
}

/* Совсем узкие экраны: рядом с мессенджерами вывеска в 19px переносится
   на две строки — «ДОН» и «ТРАНСФЕР» */
@media (max-width: 399px) {
  .brand__name { font-size: 17px; }
  .brand { gap: 9px; }
  .messengers--bar { gap: 6px; }
  .messengers--bar a { width: 28px; height: 28px; }
}
@media (max-width: 339px) {
  .brand__mark { height: 22px; }
  .brand__name { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}