/* ============================================================================
   Витрина /uslugi/ — итоговая сборка. Блок .dkMap.

   Подача — карта клиники: плитки направлений сразу под заголовком, у каждой
   подсказка обычными словами, число врачей и цена, прибитая к низу плитки.
   Визуальный язык — тот же, что в макетах t123: карточка со скруглением
   и синей тенью, ромб-маркёр бренда, якорная плашка navy-градиентом
   (как .dkP__anchor--hero в блоке цен), акцентная кнопка-пилюля.

   Значения — только из tokens.css. Литералов цвета здесь нет, единственное
   исключение — #fff. Интерактива нет вовсе, поэтому нет и JS: на карте нечего
   фильтровать и нечего сворачивать.

   Раскладка задана явным числом колонок на каждом брейкпоинте, а не
   auto-fit/auto-fill: якорная плитка занимает две колонки, и число колонок
   должно быть предсказуемым, иначе она то заполняет ряд, то оставляет дыру.
   ========================================================================== */

/* Блок объявляет box-sizing сам: hello-elementor уйдёт вместе с Elementor
   на этапе 4, и вместе с ней уйдёт её сброс. Без этих строк плитки с рамкой
   и padding поедут ровно в тот день, когда родителя отключат. */
.dkMap,
.dkMap *,
.dkMap *::before,
.dkMap *::after { box-sizing: border-box; }

/* ==========================================================================
   1. Рама секции
   ========================================================================== */
.dkMap {
  padding: var(--section-y) 0;
  background: #fff;
  font-family: var(--font-body);
  font-size: var(--fz-body);
  color: var(--body);
}

/* Верхний отступ карты меньше стандартного: она обязана попасть в первый
   экран целиком (1280×800, шапка сайта 106px), а 72px над eyebrow — это
   треть плитки, отданная воздуху до того, как человек увидел хоть одно
   направление. Класс, а не :first-of-type: перед секцией может встать
   хлебная крошка или уведомление, и правило молча перестанет работать. */
.dkMap--map { padding-top: var(--sp-8); }

/* Чередование фонов секций по стандарту: белый → --air. */
.dkMap--list { background: var(--air); }

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

.dkMap__eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 var(--sp-3);
}

.dkMap__h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--fz-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-h1);
  color: var(--ink);
  margin: 0;
}

.dkMap__h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--fz-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-h1);
  color: var(--ink);
  margin: 0;
}

/* Подзаголовок --navy, а не --blue: голубой на белом даёт около 2:1
   и не проходит по контрасту. Та же правка сделана на странице услуги. */
.dkMap__sub {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-sub);
  line-height: var(--lh-sub);
  color: var(--navy);
  margin: var(--sp-3) 0 0;
}

/* ==========================================================================
   2. Карта направлений
   ========================================================================== */
.dkMap__grid {
  display: grid;
  /* minmax(0,1fr), а не 1fr: без нуля колонка не сжимается уже своего
     содержимого, и длинное название выдавливает сетку вбок. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: var(--sp-6) 0 0;
}

.dkMap__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  padding: var(--sp-5);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh1);
  text-decoration: none;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

/* Якорная плитка. Две колонки — не «покрупнее ради красоты»: сетка из семи
   равных прямоугольников читается как список без начала, и глаз стартует
   с левого верхнего просто потому, что он левый верхний. Здесь начало
   назначено данными — это первое направление, у которого есть собственная
   страница. Градиент тот же, что у якорной карточки в блоке цен t123. */
.dkMap__tile--lead {
  grid-column: span 2;
  background: linear-gradient(145deg, var(--navy) 0%, var(--cyan) 180%);
  border-color: transparent;
  box-shadow: var(--sh2);
}

/* Направление без страницы услуги. Плоское намеренно: тень и белый фон
   обещают переход, которого нет, и человек жмёт в плитку, пока не поймёт,
   что она не кликается. Содержание у неё при этом полноценное — подсказка,
   врачи и цена по прайсу. */
.dkMap__tile--flat,
.dkMap__tile--multi {
  background: var(--air);
  box-shadow: none;
}

/* Иконка направления — единственный визуальный маркер плитки (раньше здесь
   был декоративный ромб-подложка под иконкой, оба одного цвета — сливались
   в кашу, особенно на мелких плитках; убрали, оставили только иконку). */
.dkMap__dia {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  align-self: flex-start;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--tint);
}

.dkMap__diaIcon {
  width: 22px;
  height: 22px;
  color: var(--cyan);
}

.dkMap__tile--lead .dkMap__dia { background: var(--blue); }
.dkMap__tile--lead .dkMap__diaIcon { color: #fff; }

.dkMap__name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--fz-h3);
  line-height: var(--lh-h3);
  color: var(--ink);
  margin: var(--sp-3) 0 0;
}

.dkMap__tile--lead .dkMap__name {
  font-size: clamp(22px, 2.4vw, 30px);
  color: #fff;
}

/* Подсказка «что это простыми словами». Golos Text, а не Montserrat: это
   единственная строка плитки, которую читают фразой, а не считывают взглядом.
   Ради неё карта и переделана — человек, который не знает слова «гнатология»,
   иначе не находит на витрине себя. */
.dkMap__hint {
  margin: var(--sp-2) 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--body);
}

.dkMap__tile--lead .dkMap__hint {
  font-size: 16px;
  color: var(--tint);
}

/* Число врачей — Montserrat: в системе цифры набираются заголовочным
   шрифтом. Цвет --body, а не --muted: это данные, а не дисклеймер,
   и 3:1 на белом для мелкого кегля не проходит по контрасту. */
.dkMap__facts {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.4;
  color: var(--body);
  font-variant-numeric: tabular-nums;
}

.dkMap__tile--lead .dkMap__facts { color: var(--tint); }

/* margin-top:auto прибивает цену к низу плитки. Из-за этого колонка цифр
   выравнивается сама при любой длине названия и подсказки — а сравнивать
   цены между направлениями и есть то, ради чего человек пришёл на витрину. */
.dkMap__price,
.dkMap__soft {
  margin: auto 0 0;
  padding-top: var(--sp-4);
}

.dkMap__price {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.dkMap__tile--lead .dkMap__price {
  font-size: clamp(26px, 2.8vw, 36px);
  color: #fff;
}

/* Подпись к цене. Не украшение: она отвечает «чьи это деньги» — минимум
   по прайсу направления или цена конкретной услуги. Строк может быть две
   («Имплантация зубов» на узкой плитке), поэтому у неё своя line-height. */
.dkMap__cap {
  display: block;
  margin-bottom: var(--sp-1);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: var(--body);
}

.dkMap__tile--lead .dkMap__cap { color: var(--tint); }

/* Место цены, когда цены нет. Занимает тот же слот, чтобы низ плиток
   в ряду оставался ровным, но набрано текстовым шрифтом и обычным весом:
   это фраза, а не сумма, и притворяться суммой она не должна. */
.dkMap__soft {
  font-size: 14px;
  line-height: 1.4;
  color: var(--body);
}

.dkMap__tile--lead .dkMap__soft { color: var(--tint); }

/* --- Строка перехода ------------------------------------------------------ */
.dkMap__go {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  color: var(--navy);
}

.dkMap__goText { min-width: 0; }

/* На обычной плитке-ссылке признак перехода стоит в правом верхнем углу —
   на линии ромба, где под него есть свободное место, и никогда не под ценой.
   Под ценой он добавлял плитке лишнюю строку, и цифра вставала на 47px выше,
   чем у соседней плитки без страницы: в одном ряду «Хирургия · от 19 900 ₽»
   и «Терапия · от 3 850 ₽» переставали читаться сравнением. Карта собрана
   ровно ради этого сравнения. position:absolute, а не сеточная раскладка:
   так добавление любой новой строки в плитку (подсказка, второй факт)
   не требует пересчёта строк сетки. */
.dkMap__tile--go:not(.dkMap__tile--lead) .dkMap__go {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  /* В одну строку и не шире половины плитки: длинный текст здесь ложился
     поверх заголовка направления и ромба. Абсолютно спозиционированный
     элемент не раздвигает соседей — он их закрывает, поэтому переносу
     строки тут места нет. */
  max-width: calc(100% - var(--sp-5) * 2 - 56px);
  white-space: nowrap;
}

/* На якорной плитке переход — белая таблетка: это плитка, с которой человек
   уходит вглубь, и место перехода должно быть видно с расстояния вытянутой
   руки. Высота 44px — цель нажатия на телефоне. */
.dkMap__tile--lead .dkMap__go {
  align-self: stretch;
  justify-content: center;
  min-height: 44px;
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--navy);
}

/* От 640 якорная плитка раскладывается сеткой: цена внизу слева, переход —
   внизу справа, на одной строке. Столбиком она была на 70px выше соседей,
   и из-за неё нижний ряд карты уезжал за первый экран. Ширина у неё двойная,
   место есть — значит, высота должна быть общая. Разметку это не меняет:
   порядок элементов тот же, раскладку задаёт CSS.

   Области названы, а не посчитаны строками: при `grid-template-rows: auto
   auto auto 1fr` добавление подсказки молча сдвигало бы всё на строку вниз.
   Отсутствующая область (нет подсказки, нет врачей) схлопывается в ноль. */
@media (min-width: 640px) {
  .dkMap__tile--lead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas:
      "dia   dia"
      "name  name"
      "hint  hint"
      "facts facts"
      "price go";
    column-gap: var(--sp-5);
  }

  .dkMap__tile--lead .dkMap__dia   { grid-area: dia; }
  .dkMap__tile--lead .dkMap__name  { grid-area: name; }
  .dkMap__tile--lead .dkMap__hint  { grid-area: hint; }
  .dkMap__tile--lead .dkMap__facts { grid-area: facts; }

  .dkMap__tile--lead .dkMap__price,
  .dkMap__tile--lead .dkMap__soft {
    grid-area: price;
    align-self: end;
    margin: 0;
  }

  .dkMap__tile--lead .dkMap__go {
    grid-area: go;
    align-self: end;
    justify-self: end;
    margin: 0;
  }
}

/* Стрелка нарисована рамками: одна иконка вместо шрифта иконок и вместо
   картинки, и она наследует цвет строки. */
.dkMap__arr {
  flex: none;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

/* Плитка с двумя и более страницами: клик отдан строкам, каждая — не меньше
   44px. */
.dkMap__links {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.dkMap__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
  text-decoration: none;
}

.dkMap__linkPrice {
  margin-left: auto;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Наведение только там, где есть курсор: на телефоне :hover залипает после
   тапа, и плитка остаётся приподнятой до перехода на другую страницу. */
@media (hover: hover) {
  .dkMap__tile--go:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh2);
    border-color: var(--blue);
  }

  .dkMap__tile--lead:hover { border-color: transparent; }
  .dkMap__tile--go:hover .dkMap__arr { transform: rotate(45deg) translate(2px, -2px); }
  .dkMap__link:hover { border-color: var(--blue); }
}

.dkMap__tile--go:focus-visible,
.dkMap__link:focus-visible,
.dkMap__row:focus-visible,
.dkMap__btn:focus-visible,
.dkMap__ghost:focus-visible,
.dkMap__inline:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* ==========================================================================
   3. Подробно об услугах — главный цикл архива
   ========================================================================== */
.dkMap__rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: var(--sp-6) 0 0;
}

.dkMap__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4) var(--sp-8);
  padding: var(--sp-6);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh1);
  text-decoration: none;
  transition:
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

@media (hover: hover) {
  .dkMap__row:hover {
    box-shadow: var(--sh2);
    border-color: var(--blue);
  }

  .dkMap__row:hover .dkMap__arr { transform: rotate(45deg) translate(2px, -2px); }
}

.dkMap__rowMain {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.dkMap__tags {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cyan);
}

.dkMap__rowTitle {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: var(--lh-h3);
  color: var(--ink);
}

/* Цитата у записи может быть собрана автоматически из 55 слов — это четыре
   строки, и одна такая строка списка вырастает втрое против соседних.
   Две строки отвечают на вопрос «то ли это, что мне нужно»; остальное
   человек прочитает на самой странице. */
.dkMap__rowLead {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 15px;
  line-height: var(--lh-body);
  color: var(--body);
  max-width: 68ch;
}

.dkMap__rowSide {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-3);
  flex: none;
}

.dkMap__rowPrice {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dkMap__rowGo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
}

.dkMap__none {
  margin: var(--sp-6) 0 0;
  padding: var(--sp-6);
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  line-height: var(--lh-body);
  color: var(--body);
  max-width: 70ch;
}

/* ==========================================================================
   4. Один главный CTA и сноски
   ========================================================================== */
.dkMap__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin: var(--sp-10) 0 0;
}

.dkMap__btn,
.dkMap__ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fz-btn);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* Акцентная кнопка на странице ровно одна — это правило анатомии секции.
   «Прейскурант» и «Врачи» рядом с ней намеренно бледные: они уводят вбок,
   а не вперёд. */
.dkMap__btn {
  background: var(--accent);
  color: #fff;
  border: 1.5px solid transparent;
}

.dkMap__ghost {
  background: #fff;
  color: var(--navy);
  border: 1.5px solid var(--line);
}

@media (hover: hover) {
  .dkMap__btn:hover { background: var(--accent-hover); }
  .dkMap__ghost:hover { border-color: var(--blue); }
}

/* Сноска --body, а не --muted: 13px при 3:1 на белом не читается людьми,
   ради которых на сайте стоит версия для слабовидящих. */
.dkMap__note {
  margin: var(--sp-6) 0 0;
  font-size: var(--fz-meta);
  line-height: 1.65;
  color: var(--body);
  max-width: 78ch;
}

.dkMap__noteLink { margin: var(--sp-2) 0 0; }

/* Ссылка вынесена из абзаца отдельной строкой именно ради этих 44px:
   внутри текста такая высота разрывала бы абзац пополам, а без неё
   по ссылке не попасть пальцем. */
.dkMap__inline {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-btn);
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--blue);
}

.dkMap__inline:hover { color: var(--cyan); }

/* Внутри абзаца пустого состояния ссылка идёт словом в строке: там она
   часть предложения, и вертикальная цель в 44px разорвала бы фразу. */
.dkMap__none .dkMap__inline { display: inline; min-height: 0; }

/* ==========================================================================
   5. Пагинация
   ========================================================================== */
.dkMap__pager { margin: var(--sp-8) 0 0; }

.dkMap__pager .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.dkMap__pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
  text-decoration: none;
}

.dkMap__pager .page-numbers.current {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.dkMap__pager .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   6. Брейкпоинты проекта: 1200 · 960 · 640 · 480
   ========================================================================== */
@media (max-width: 1199px) {
  .dkMap__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

  .dkMap__row { grid-template-columns: minmax(0, 1fr); }

  .dkMap__rowSide {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
  }
}

@media (max-width: 639px) {
  /* Две колонки и на телефоне. Одна колонка означала бы семь экранов
     прокрутки до последнего направления — карты как карты не остаётся,
     остаётся список. Плитка при этом ужимается, а не ломается: 375px
     минус отступы даёт 165px на плитку. */
  .dkMap__grid {
    gap: var(--sp-3);
    margin-top: var(--sp-6);
  }

  .dkMap__tile {
    min-height: 0;
    padding: var(--sp-4);
    border-radius: var(--r-md);
  }

  .dkMap__dia { width: 32px; height: 32px; }
  .dkMap__diaIcon { width: 20px; height: 20px; }

  .dkMap__name {
    margin-top: var(--sp-3);
    font-size: 16px;
  }

  .dkMap__hint { font-size: 13px; }
  .dkMap__tile--lead .dkMap__hint { font-size: 14px; }
  .dkMap__facts { font-size: 12px; }

  /* margin-top здесь НЕ переопределяем: auto из базового правила прибивает
     цену к низу плитки, и в паре «Гнатология / Гигиена и профилактика»,
     где название переносится на две строки, цифры остаются на одной линии.
     Задать сюда var(--sp-4) — значит сломать ровно то, ради чего сетка
     и собиралась. */
  .dkMap__price,
  .dkMap__soft { padding-top: var(--sp-3); }

  .dkMap__price { font-size: 18px; }
  .dkMap__soft { font-size: 12px; }
  .dkMap__tile--lead .dkMap__price { font-size: 26px; }

  /* В плитке шириной 166px рядом с ромбом остаётся 94px — «Открыть страницу»
     ломается на две строки и растит шапку плитки. Текст прячем визуально,
     но НЕ из разметки: он остаётся в названии ссылки для скринридера
     и в поиске по странице. Углу остаётся стрелка — она и так единственный
     признак перехода, который считывается на телефоне. */
  .dkMap__tile--go:not(.dkMap__tile--lead) .dkMap__goText {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .dkMap__tile--go:not(.dkMap__tile--lead) .dkMap__go {
    top: var(--sp-4);
    right: var(--sp-4);
  }

  /* Кнопки в колонку: во всю ширину они получаются растяжкой флекс-элемента,
     без процентов, — и остаются целями нажатия по 52px. */
  .dkMap__cta {
    flex-direction: column;
    align-items: stretch;
  }
}

/* 360, а не 480 из проектной шкалы: на 375 (iPhone SE/12 mini — половина
   мобильного трафика) две колонки ещё вмещаются и держат карту картой.
   Ломается это ниже 360, где «Гигиена и профилактика» уже не переносится
   без разрыва слова. */
@media (max-width: 359px) {
  .dkMap__grid { grid-template-columns: minmax(0, 1fr); }
  .dkMap__tile--lead { grid-column: auto; }
}

/* --- Цвет текста кнопок против стилей Elementor ---------------------------
   Kit конструктора красит ссылки правилом вида `.elementor-kit-N a` — это
   класс плюс тег, специфичнее нашего одиночного класса, и белый текст
   акцентной кнопки молча становился голубым из палитры Elementor.
   Поднимаем специфичность до двух классов. Без !important: он так же молча
   сломается при следующем конфликте, только уже в нашу сторону.
   Правило уйдёт вместе с конструктором на этапе 4.4. */
.dkMap .dkMap__btn,
.dkMap .dkMap__btn:hover,
.dkMap .dkMap__btn:focus-visible { color: #fff; }

.dkMap .dkMap__ghost,
.dkMap .dkMap__ghost:hover { color: var(--navy); }

.dkMap .dkMap__link,
.dkMap .dkMap__go { color: var(--navy); }

.dkMap .dkMap__tile--lead .dkMap__go { color: var(--navy); }
.dkMap .dkMap__tile--lead .dkMap__title,
.dkMap .dkMap__tile--lead .dkMap__hint,
.dkMap .dkMap__tile--lead .dkMap__price { color: #fff; }