/*
 * Лендинг «Мастер Авто» (web/landing.html). Образец — MasterAvtoLanding.dc.html.
 * Общие стили (база, кнопки, бейджи, чипы, заглушки) — в ui.css.
 * Цвета, шрифты, размеры текста и отступы — только переменные из tokens.css.
 * Светлые разделы — атрибут data-theme="light" (переопределяет переменные в tokens.css).
 * Числа без переменных — только ширины раскладки и точки перелома из макета (в токенах их нет,
 * а в @media переменные не работают) и толщины линий.
 */


/* ---------- Шапка ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.topbar { border-bottom: 1px solid var(--color-surface-raised); }
.topbar__in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--space-8);
  font: 500 var(--text-overline-size)/var(--text-overline-line) var(--font-mono);
  color: var(--color-text-secondary);
}
.topbar__links, .topbar__auth { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.topbar a { color: var(--color-text-primary); }
.topbar a:hover { color: var(--color-accent-text); }
.topbar__auth a { color: var(--color-text-secondary); letter-spacing: var(--text-button-tracking); }

.header__in { display: flex; align-items: center; gap: var(--space-6); min-height: var(--space-16); }


.nav { display: flex; gap: 2px; margin-left: var(--space-2); }
.nav a {
  display: flex;
  align-items: center;
  height: var(--space-16);
  padding: 0 var(--space-3);
  font: 600 var(--text-overline-size)/1 var(--font-mono);
  letter-spacing: var(--text-button-tracking);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  white-space: nowrap;
}
.nav a:hover, .nav a[aria-current="true"] { color: var(--color-text-primary); box-shadow: inset 0 -4px 0 var(--color-accent); }

.header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }

.menu-btn {
  display: none;
  align-items: center;
  gap: var(--space-2);
  height: var(--space-12);
  padding: 0 var(--space-3);
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
  font: 700 var(--text-overline-size)/1 var(--font-mono);
  cursor: pointer;
}

.mobile-menu {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-surface-raised);
  padding: var(--space-2) 0 var(--space-4);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a, .mobile-menu__auth a, .mobile-menu__phone {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--space-12);
  padding: 0 var(--space-8);
  border-bottom: 1px solid var(--color-surface-raised);
  font: 700 var(--text-body-size)/1.2 var(--font-mono);
  color: var(--color-text-primary);
  text-transform: uppercase;
}
.mobile-menu__auth { display: flex; flex-direction: column; }
.mobile-menu__auth a { color: var(--color-text-secondary); }
.mobile-menu__phone { border-bottom: 0; font-weight: 600; }

@media (max-width: 1199px) {
  .nav { display: none; }
  .menu-btn { display: flex; }
}

/* ---------- Разделы: общее ---------- */

#uslugi, #kak, #mastera, #raboty, #otzyvy, #faq, #kontakty, #zapis {
  /* служебная полоса + шапка + две линии под ними */
  scroll-margin-top: calc(var(--space-8) + var(--space-16) + 2px);
}

.sec { background: var(--color-bg); color: var(--color-text-primary); }
.sec--line { border-bottom: 1px solid var(--color-surface-raised); }
.sec__in { display: flex; flex-direction: column; gap: var(--space-8); padding-top: var(--space-24); padding-bottom: var(--space-24); }
.sec__in--wide-gap { gap: var(--space-10); }

.sec-head { display: flex; flex-direction: column; gap: var(--space-4); max-width: 760px; }
.sec-head--narrow { max-width: 620px; }
.sec-head__kicker {
  font: 600 var(--text-overline-size)/1 var(--font-mono);
  letter-spacing: var(--text-overline-tracking);
  color: var(--color-accent-text);
}
.sec-head__title {
  font: 700 var(--text-h1-size)/var(--text-h1-line) var(--font-mono);
  letter-spacing: var(--text-h1-tracking);
}
.sec-head__lead {
  font: 400 var(--text-body-l-size)/var(--text-body-l-line) var(--font-sans);
  color: var(--color-text-secondary);
  text-wrap: pretty;
}


/* Подписи к будущим фото (как в макете) */
.photo-note {
  position: absolute;
  font: 500 var(--text-overline-size)/var(--text-overline-line) var(--font-mono);
  color: var(--color-text-muted);
  text-align: right;
}
.photo-note--br { bottom: var(--space-4); right: var(--space-4); }
.photo-note--tr { top: var(--space-4); right: var(--space-4); }

/* ---------- Л-01 Главный экран и Л-09 Финальный призыв ---------- */

.hero {
  position: relative;
  background: repeating-linear-gradient(135deg, var(--color-surface) 0 var(--space-3), var(--color-bg) var(--space-3) var(--space-6));
  border-bottom: 1px solid var(--color-surface-raised);
}
.hero__in {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-top: calc(var(--space-24) + var(--space-12));
  padding-bottom: var(--space-24);
}
.hero__title {
  max-width: 820px;
  font: 700 var(--text-display-size)/var(--text-display-line) var(--font-mono);
  letter-spacing: var(--text-display-tracking);
  text-wrap: balance;
}
.hero__lead {
  max-width: 600px;
  font: 400 var(--text-body-l-size)/var(--text-body-l-line) var(--font-sans);
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

/* Плашка незавершённой записи (прототип, «00 Точки входа»). */
.draft {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  max-width: 640px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text-primary);
}
.draft[hidden] { display: none; }
.draft__text { flex: 1; min-width: 200px; font: 400 var(--text-body-size)/1.45 var(--font-sans); }
.draft__btn { background: var(--color-text-primary); color: var(--color-surface); }
.draft__btn:hover { background: var(--color-text-secondary); color: var(--color-surface); }

.facts {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}
.facts li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg);
  font: 500 var(--text-body-size)/1.4 var(--font-sans);
}
.facts .icon { color: var(--color-accent); }

.final__in {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding-top: calc(var(--space-24) + var(--space-8));
  padding-bottom: calc(var(--space-24) + var(--space-8));
}
.final__title {
  max-width: 760px;
  font: 700 var(--text-display-size)/var(--text-display-line) var(--font-mono);
  letter-spacing: var(--text-display-tracking);
  text-wrap: balance;
}
.final__lead { max-width: 560px; font: 400 var(--text-body-l-size)/var(--text-body-l-line) var(--font-sans); color: var(--color-text-secondary); }
.final__call { font: 400 var(--text-body-size)/var(--text-body-line) var(--font-sans); color: var(--color-text-secondary); }

/* Телефон-ссылка в тексте */
.phone-link--strong, .phone-link--light {
  font-family: var(--font-mono);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.phone-link--light { color: var(--color-text-primary); }
.phone-link--light:hover { color: var(--color-accent-text); }

/* ---------- Л-02 Услуги ---------- */

.services { display: flex; flex-direction: column; gap: var(--space-6); }


.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.svc-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.svc-card--skel { min-height: calc(var(--space-24) * 4); }
.svc-card__icon { color: var(--color-accent); display: flex; }
.svc-card__name { font: 600 var(--text-h4-size)/var(--text-h4-line) var(--font-sans); text-wrap: pretty; }
.svc-card__desc { font: 400 var(--text-body-s-size)/var(--text-body-s-line) var(--font-sans); color: var(--color-text-secondary); text-wrap: pretty; }
.svc-card__dur {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font: 600 var(--text-body-s-size)/1 var(--font-mono);
  color: var(--color-text-secondary);
}
.svc-card__prices {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  font: 400 var(--text-body-s-size)/1.3 var(--font-sans);
  color: var(--color-text-secondary);
}
.price-row__label { display: flex; align-items: center; gap: var(--space-2); }
.price-row__label--indent { padding-left: calc(var(--space-4) + var(--space-2)); }
.price-row b { font: 700 var(--text-body-l-size)/1 var(--font-mono); color: var(--color-text-primary); white-space: nowrap; }
.svc-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg);
  font: 400 var(--text-body-s-size)/var(--text-body-s-line) var(--font-sans);
  color: var(--color-text-primary);
}
.svc-card .btn, .svc-item .btn { width: 100%; }

/* Мобильный вид: аккордеон */
.svc-list { display: none; flex-direction: column; gap: var(--space-2); }
.svc-item { background: var(--color-surface); border: 1px solid var(--color-border); }
.svc-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--space-16);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
}
.svc-item summary::-webkit-details-marker { display: none; }
.svc-item summary > .icon:first-child { color: var(--color-accent); }
.svc-item__head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.svc-item__name { font: 600 var(--text-body-size)/1.3 var(--font-sans); }
.svc-item__sub { font: 600 var(--text-caption-size)/1.3 var(--font-mono); color: var(--color-text-secondary); }
.svc-item__chevron { transition: transform .2s; }
.svc-item[open] .svc-item__chevron { transform: rotate(180deg); }
.svc-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.note { max-width: 720px; font: 400 var(--text-body-s-size)/1.5 var(--font-sans); color: var(--color-text-secondary); }

/* ---------- Л-03 Как записаться ---------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-4);
}
.step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 4px solid var(--color-text-primary);
}
.step--active { border-top-color: var(--color-accent); }
.step__head { display: flex; align-items: center; gap: var(--space-3); }
.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
  border: 1px solid var(--color-text-primary);
  font: 700 var(--text-body-size)/1 var(--font-mono);
}
.step--active .step__num { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-button-text); }
.step__title { font: 700 var(--text-body-l-size)/1.25 var(--font-mono); }
.step__text { font: 400 var(--text-body-s-size)/1.5 var(--font-sans); color: var(--color-text-secondary); }

/* Мини-иллюстрации шагов — «листы» в светлой теме */
.illus {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface);
  color: var(--color-text-primary);
}
.illus__check { display: flex; align-items: center; gap: var(--space-3); font: 500 var(--text-caption-size)/1.3 var(--font-sans); }
.illus__check--off { color: var(--color-text-secondary); }
.illus__box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--space-5);
  height: var(--space-5);
  border: 1px solid var(--color-text-secondary);
}
.illus__box--on { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-button-text); }
.illus__box .icon { stroke-width: 2; }
.illus--picked { border: 2px solid var(--color-accent); }
.illus__over { font: 600 var(--text-overline-size)/1 var(--font-mono); letter-spacing: .04em; }
.illus__name { font: 600 var(--text-body-s-size)/1.3 var(--font-sans); }
.illus__total { display: flex; justify-content: space-between; align-items: baseline; font: 400 var(--text-caption-size)/1.3 var(--font-sans); color: var(--color-text-secondary); }
.illus__total b { font: 700 var(--text-body-size)/1 var(--font-mono); color: var(--color-text-primary); }
.illus--slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-1); }
.illus__slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--space-10);
  border: 1px solid var(--color-border-strong);
  font: 600 var(--text-caption-size)/1 var(--font-mono);
}
.illus__slot--on { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-button-text); }
.illus__slot--taken { background: var(--color-bg); border-color: var(--color-bg); color: var(--color-text-muted); text-decoration: line-through; }
.illus--timer { padding: 0; gap: 0; }
.illus__timer { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); }
.illus__timer-text { flex: 1; font: 400 var(--text-caption-size)/1.3 var(--font-sans); }
.illus__timer b { font: 700 var(--text-body-l-size)/1 var(--font-mono); }
.illus__bar { display: block; height: 4px; background: var(--color-bg); }
.illus__bar-fill { display: block; width: 89%; height: 100%; background: var(--color-text-primary); }
.illus--done { background: transparent; border: 1px solid var(--color-border-strong); gap: var(--space-2); }
.illus__ok { display: flex; align-items: center; gap: var(--space-2); font: 600 var(--text-caption-size)/1 var(--font-mono); color: var(--color-success-text); }
.illus__num { font: 600 var(--text-caption-size)/1 var(--font-mono); }

/* ---------- Л-04 Мастера ---------- */

.masters { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--space-4); }
.master { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); }
.master--pro { border: 2px solid var(--color-accent); }
.master__photo {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  padding: var(--space-3);
  background: repeating-linear-gradient(135deg, var(--color-bg) 0 var(--space-3), var(--color-border) var(--space-3) var(--space-6));
  overflow: hidden;
}
.master__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.master__caption { font: 500 var(--text-overline-size)/1.3 var(--font-mono); color: var(--color-text-secondary); }
.master__all {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: var(--space-8);
  padding: 0 var(--space-3);
  background: var(--color-accent);
  color: var(--color-button-text);
  font: 700 var(--text-overline-size)/1 var(--font-mono);
  letter-spacing: .04em;
}
.master__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.master--skel .master__body { min-height: calc(var(--space-24) * 3); }
.master__name { font: 600 var(--text-h4-size)/1.25 var(--font-sans); }
.master__age { font: 500 var(--text-body-s-size)/1 var(--font-mono); color: var(--color-text-secondary); }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--space-6) + var(--space-1));
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border-strong);
  font: 500 var(--text-caption-size)/1.2 var(--font-sans);
}
.master__does {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font: 400 var(--text-body-s-size)/1.5 var(--font-sans);
  color: var(--color-text-secondary);
}
.master__does b { font: 600 var(--text-overline-size)/1 var(--font-mono); letter-spacing: var(--text-button-tracking); color: var(--color-text-primary); }
.master__body .btn { margin-top: auto; width: 100%; }

/* ---------- Л-05 Работы ---------- */

.gallery { display: flex; flex-direction: column; gap: var(--space-6); }
.works { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--space-4); }
.work { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); }
.work[hidden] { display: none; }
.work__photo {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  padding: var(--space-3);
  background: repeating-linear-gradient(135deg, var(--color-surface-raised) 0 var(--space-3), var(--color-surface) var(--space-3) var(--space-6));
}
.work__caption { font: 500 var(--text-overline-size)/1.4 var(--font-mono); color: var(--color-text-secondary); }
.ba { position: absolute; top: var(--space-3); left: var(--space-3); display: flex; border: 1px solid var(--color-text-primary); background: var(--color-bg); }
.ba__btn {
  height: var(--space-10);
  min-width: var(--space-16);
  padding: 0 var(--space-3);
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: 700 var(--text-overline-size)/1 var(--font-mono);
  letter-spacing: var(--text-button-tracking);
  cursor: pointer;
}
.ba__btn[aria-pressed="true"] { background: var(--color-text-primary); color: var(--color-bg); }
.ba__btn--after[aria-pressed="true"] { background: var(--color-accent); color: var(--color-button-text); }
.work__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.work__cat { font: 600 var(--text-overline-size)/1 var(--font-mono); letter-spacing: var(--text-overline-tracking); color: var(--color-accent-text); text-transform: uppercase; }
.work__title { font: 600 var(--text-body-l-size)/1.3 var(--font-sans); color: var(--color-text-primary); text-wrap: pretty; }
.work__car { font: 600 var(--text-body-s-size)/1.3 var(--font-mono); color: var(--color-text-secondary); }
.work__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font: 400 var(--text-body-s-size)/1.3 var(--font-sans);
  color: var(--color-text-secondary);
}
.work__meta a { display: flex; align-items: center; gap: var(--space-2); min-height: var(--space-6); text-decoration: underline; text-underline-offset: 3px; }
.work__time { display: flex; align-items: center; gap: var(--space-2); font: 600 var(--text-caption-size)/1 var(--font-mono); }

/* ---------- Л-06 Отзывы ---------- */

.sec--reviews { position: relative; }
.sec--reviews .sec__in { padding-top: calc(var(--space-24) + var(--space-4)); }
.sample-note {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: calc(100% - var(--space-8));
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  color: var(--color-text-secondary);
  font: 600 var(--text-overline-size)/1.35 var(--font-mono);
}
.reviews-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-6); }
.rating { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); }
.rating__value { font: 700 var(--text-h1-size)/1 var(--font-mono); }
.rating__meta { display: flex; flex-direction: column; gap: var(--space-1); }
.rating__count { font: 500 var(--text-caption-size)/1.3 var(--font-sans); color: var(--color-text-secondary); }
.stars { font: 400 var(--text-body-l-size)/1 var(--font-sans); color: var(--color-accent); letter-spacing: 2px; }

.reviews { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-2); scrollbar-width: thin; }
.review {
  flex: 0 0 min(380px, 86%);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.review__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.review__date { font: 500 var(--text-caption-size)/1 var(--font-mono); color: var(--color-text-secondary); }
.review__text { font: 400 var(--text-body-size)/1.55 var(--font-sans); text-wrap: pretty; }
.review__who { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.review__who b { font: 600 var(--text-body-size)/1.3 var(--font-sans); }
.review__car { font: 600 var(--text-caption-size)/1.3 var(--font-mono); color: var(--color-text-secondary); }
.review__svc { font: 400 var(--text-body-s-size)/1.4 var(--font-sans); color: var(--color-text-secondary); }

/* ---------- Л-07 FAQ ---------- */

.faq { border-top: 1px solid var(--color-border); }
.faq details { border-bottom: 1px solid var(--color-border); }
.faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--space-16);
  padding: var(--space-3) 0;
  cursor: pointer;
  font: 600 var(--text-body-l-size)/1.4 var(--font-sans);
  color: var(--color-text-primary);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--color-accent-text); transition: transform .2s; }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq p { padding: 0 var(--space-10) var(--space-5) 0; font: 400 var(--text-body-size)/1.6 var(--font-sans); color: var(--color-text-secondary); text-wrap: pretty; }
.faq__more { font: 400 var(--text-body-l-size)/1.5 var(--font-sans); color: var(--color-text-secondary); }

/* ---------- Л-08 Контакты ---------- */

.contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--space-8);
  align-items: stretch;
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}
.contacts__info { display: flex; flex-direction: column; gap: var(--space-6); }
.open-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--space-2);
  height: var(--space-8);
  padding: 0 var(--space-3);
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-text);
  color: var(--color-success-text);
  font: 600 var(--text-caption-size)/1 var(--font-mono);
}
.open-badge__dot { width: var(--space-2); height: var(--space-2); background: var(--color-success); }
.open-badge--closed { background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-text-secondary); }
.open-badge--closed .open-badge__dot { background: var(--color-text-muted); }
.contacts__phone {
  align-self: flex-start;
  font: 700 var(--text-h2-size)/1.1 var(--font-mono);
  color: var(--color-text-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 6px;
}
.contacts__phone:hover { color: var(--color-accent-text); }
.contacts__list { display: flex; flex-direction: column; gap: var(--space-3); font: 400 var(--text-body-l-size)/1.45 var(--font-sans); }
.contacts__row { display: flex; align-items: flex-start; gap: var(--space-3); }
.contacts__row > .icon { color: var(--color-accent); }
.contacts__row b { font: 700 var(--text-body-l-size)/1.45 var(--font-mono); }
.address--empty { color: var(--color-text-muted); }

.map {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface-inverse);
  background-image: linear-gradient(var(--color-text-secondary) 1px, transparent 1px), linear-gradient(90deg, var(--color-text-secondary) 1px, transparent 1px);
  background-size: var(--space-12) var(--space-12);
  border: 1px solid var(--color-border);
}
.map__road { position: absolute; background: var(--color-text-secondary); }
.map__road--h { top: 30%; left: 0; right: 0; height: var(--space-3); }
.map__road--v { left: 58%; top: 0; bottom: 0; width: var(--space-2); }
.map__pin { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--color-accent); }
.map__label {
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-inverse);
  border: 1px solid var(--color-accent);
  color: var(--color-text-inverse);
  font: 600 var(--text-overline-size)/1 var(--font-mono);
}
.map__note { position: absolute; bottom: var(--space-3); left: var(--space-3); font: 500 var(--text-overline-size)/1 var(--font-mono); color: var(--color-text-muted); }

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

.footer { background: var(--color-bg); }
.footer__in {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-10) var(--space-8);
  padding-top: var(--space-16);
  padding-bottom: var(--space-8);
}
.footer__col { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__about { font: 400 var(--text-body-size)/1.5 var(--font-sans); color: var(--color-text-secondary); }
.footer__title { margin-bottom: var(--space-2); font: 600 var(--text-overline-size)/1 var(--font-mono); letter-spacing: var(--text-overline-tracking); color: var(--color-text-muted); }
.footer__links { gap: 2px; }
.footer__links a, .footer__svc a { display: flex; align-items: center; min-height: calc(var(--space-8) + var(--space-1)); font: 400 var(--text-body-size)/1.3 var(--font-sans); color: var(--color-text-secondary); }
.footer__links a:hover, .footer__svc a:hover { color: var(--color-text-primary); }
.footer__svc { display: flex; flex-direction: column; gap: 2px; }
.footer__links .footer__all { gap: var(--space-2); font: 700 var(--text-caption-size)/1 var(--font-mono); color: var(--color-accent-text); }
.footer__contacts { font: 400 var(--text-body-size)/1.5 var(--font-sans); color: var(--color-text-secondary); }
.footer__phone { font: 700 var(--text-body-l-size)/1.3 var(--font-mono); color: var(--color-text-primary); }
.footer__address { font: 600 var(--text-body-s-size)/1.4 var(--font-mono); }
.footer__bottom { border-top: 1px solid var(--color-surface-raised); }
.footer__bottom-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  padding-top: var(--space-5);
  padding-bottom: var(--space-6);
  font: 400 var(--text-caption-size)/1.5 var(--font-sans);
  color: var(--color-text-muted);
}
.footer__bottom-in a { color: var(--color-text-secondary); text-decoration: underline; }
.footer__copy { font: 500 var(--text-caption-size)/1.5 var(--font-mono); }
.footer__prices { margin-left: auto; }

/* Нижняя панель записи — только на мобильном */
.cta-bar { display: none; }

/* ---------- Мобильный вид (меньше 768 px) ---------- */

@media (max-width: 767px) {
  .wrap { padding: 0 var(--space-4); }
  .mobile-menu nav a, .mobile-menu__auth a, .mobile-menu__phone { padding: 0 var(--space-4); }
  .topbar__auth { display: none; }
  /* Логотип, ЗАПИСАТЬСЯ ОНЛАЙН и МЕНЮ в 375 px не помещаются; запись — в нижней панели .cta-bar. */
  .btn--head { display: none; }

  .sec__in, .contacts { padding-top: var(--space-16); padding-bottom: var(--space-16); }
  .sec--reviews .sec__in { padding-top: calc(var(--space-16) + var(--space-12)); }
  .hero__in { padding-top: var(--space-16); padding-bottom: var(--space-16); }
  .final__in { padding-top: var(--space-20); padding-bottom: var(--space-20); }

  .hero__title, .final__title { font-size: var(--text-display-size-mobile); }
  .sec-head__title { font-size: var(--text-h1-size-mobile); }
  .sec-head__lead, .hero__lead, .final__lead, .faq summary, .faq__more, .contacts__list { font-size: var(--text-body-l-size-mobile); }
  .contacts__phone { font-size: var(--text-h2-size-mobile); }
  .rating__value { font-size: var(--text-h1-size-mobile); }
  .svc-card__name, .master__name { font-size: var(--text-h4-size-mobile); }

  .svc-grid { display: none; }
  .svc-list { display: flex; }

  .btn-row .btn--lg { flex: 1 1 100%; }
  .footer__prices { margin-left: 0; }

  .cta-bar {
    position: sticky;
    bottom: 0;
    z-index: 90;
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
  }
  .cta-bar__btn { flex: 1; }
  .cta-bar__call {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--space-12);
    height: var(--space-12);
    border: 1px solid var(--color-text-primary);
    color: var(--color-text-primary);
  }
}