/* Bedrok Бедрок - стили сайта.
   Цвета и шрифт - бренд версия 0, business/assets/brand.md. Всё, что меняется, - переменные в :root.
   Порядок: шрифт, переменные, основа, шапка, первый экран, разрез пола, блоки, форма, подвал, панель связи. */

/* Шрифт лежит на сайте, а не тянется с Google: адреса посетителей не уходят за границу.
   Geologica, лицензия SIL Open Font License 1.1; файлы - подмножества кириллицы и латиницы из Google Fonts */
@font-face {
  font-family: "Geologica";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/geologica-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Geologica";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/geologica-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Цвета: серые бедрока и «алмаз» */
  --color-main: #333333;            /* основной: шапка, первый экран, тёмные блоки */
  --color-background: #ECECEC;      /* фон середины страницы */
  --color-accent: #5ED3DC;          /* «алмаз»: кнопки и отметки; текст на нём - только тёмный */
  --color-accent-hover: #8ADFE6;
  --color-ink: #222222;             /* текст на светлом, подвал */
  --color-ink-muted: #575757;       /* второстепенный текст на светлом, рамки полей */
  --color-surface: #F7F7F7;         /* светлые блоки */
  --color-line: #C4C4C4;            /* линии на светлом */
  --color-on-dark: #FFFFFF;
  --color-on-dark-muted: #B5B5B5;
  --color-line-on-dark: rgba(255, 255, 255, 0.22);
  --color-drawing-fill: #575757;    /* плитка и трубы на разрезе */

  /* Шрифт */
  --font-family: "Geologica", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --font-weight-heading: 800;
  --font-size-small: 0.875rem;
  --font-size-body: 1.0625rem;
  --font-size-lead: 1.125rem;
  --font-size-h2: clamp(1.625rem, 1.2rem + 1.9vw, 2.5rem);
  --font-size-h3: 1.1875rem;
  --line-height-body: 1.55;
  --line-height-heading: 1.06;

  /* Отступы и сетка */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --page-gutter: 1rem;
  --page-max-width: 75rem;
  --text-max-width: 40rem;
  --radius: 6px;
  --contact-bar-height: 3.75rem;
}

@media (min-width: 48rem) {
  :root { --page-gutter: 1.5rem; }
}

@media (min-width: 70rem) {
  :root { --page-gutter: 2.5rem; }
}

/* --- Основа --- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  /* на телефоне снизу висит панель связи: последний блок не должен прятаться под ней */
  padding-bottom: var(--contact-bar-height);
  background: var(--color-background);
  color: var(--color-ink);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  letter-spacing: -0.015em;
}

p,
ul,
ol,
figure {
  margin: 0;
}

a {
  color: inherit;
}

/* рамка фокуса для клавиатуры: тёмная на светлом, «алмаз» на тёмном - иначе её не видно (1,5:1 на светлом) */
:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 3px;
}

.site-header :focus-visible,
.hero :focus-visible,
.page-head :focus-visible,
.section--dark :focus-visible,
.site-footer :focus-visible,
.contact-bar :focus-visible,
.consent-banner :focus-visible {
  outline-color: var(--color-accent);
}

.page-width {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 20;
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
}

.skip-link:focus {
  top: var(--space-4);
}

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: var(--space-3) var(--space-6);
  border: 0;
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-ink);
  font: inherit;
  font-weight: var(--font-weight-bold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: var(--color-accent-hover);
}

.button--outline {
  background: transparent;
  color: var(--color-on-dark);
  box-shadow: inset 0 0 0 2px var(--color-on-dark-muted);
}

.button--outline:hover {
  background: var(--color-line-on-dark);
}

/* --- Шапка: тёмная на всех страницах --- */

.site-header {
  background: var(--color-main);
  color: var(--color-on-dark);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding-top: var(--space-4);
}

.brand {
  color: var(--color-on-dark);
  font-size: 1.3125rem;
  font-weight: var(--font-weight-heading);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.main-menu {
  order: 3;
  display: flex;
  gap: var(--space-5);
  width: 100%;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-line-on-dark);
  font-size: 0.9375rem;
}

.main-menu a {
  padding-block: var(--space-1);
  color: var(--color-on-dark);
  text-decoration: none;
}

.main-menu a:hover {
  box-shadow: inset 0 -2px var(--color-on-dark-muted);
}

.main-menu a[aria-current="page"] {
  font-weight: var(--font-weight-medium);
  box-shadow: inset 0 -2px var(--color-accent);
}

.header-contacts {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.header-contacts__phone {
  color: var(--color-on-dark);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}

/* мессенджеры в шапке - с планшета, на телефоне они в панели связи снизу */
.header-contacts__messenger {
  display: none;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--color-line-on-dark);
  color: var(--color-on-dark);
  font-size: var(--font-size-small);
  text-decoration: none;
}

.header-contacts__messenger:hover {
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

@media (min-width: 48rem) {
  .header-contacts__messenger { display: inline-block; }
}

@media (min-width: 70rem) {
  .site-header__inner {
    flex-wrap: nowrap;
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--color-line-on-dark);
  }

  .main-menu {
    order: 0;
    width: auto;
    margin-left: var(--space-7);
    margin-right: auto;
    padding-block: 0;
    border-bottom: 0;
  }
}

/* --- Первый экран --- */

.hero {
  padding-block: var(--space-6) var(--space-7);
  background: var(--color-main);
  color: var(--color-on-dark);
}

.hero__inner {
  display: grid;
  gap: var(--space-7);
}

/* заголовок подстраивается под ширину колонки: «во Владивостоке» не разрывается и не вылезает за край */
.hero__text {
  container-type: inline-size;
}

.hero__title {
  font-size: clamp(1.75rem, 10.2cqi, 4.25rem);
}

.hero__lead {
  max-width: 34rem;
  margin-top: var(--space-4);
  font-size: var(--font-size-lead);
}

.hero__actions {
  margin-top: var(--space-5);
}

.hero__note {
  margin-top: var(--space-3);
  color: var(--color-on-dark-muted);
  font-size: var(--font-size-small);
}

@media (max-width: 47.99rem) {
  .hero__actions .button { width: 100%; }
}

@media (min-width: 60rem) {
  .hero {
    padding-block: var(--space-8) var(--space-9);
  }

  .hero__inner {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: center;
    gap: var(--space-8);
  }
}

/* --- Разрез пола: чертёж светлыми линиями на тёмном --- */

.floor-section__caption {
  max-width: 34rem;
  margin-top: var(--space-2);
  color: var(--color-on-dark-muted);
  font-size: var(--font-size-small);
  line-height: 1.4;
}

.floor-drawing {
  display: block;
  width: 100%;
  max-width: 36rem;
  height: auto;
}

.floor-drawing__tile {
  fill: var(--color-drawing-fill);
  stroke: var(--color-on-dark);
  stroke-width: 1;
}

.floor-drawing__joint {
  stroke: var(--color-on-dark);
  stroke-width: 1;
}

.floor-drawing__glue {
  fill: var(--color-on-dark-muted);
}

.floor-drawing__dot {
  fill: var(--color-on-dark);
  opacity: 0.5;
}

.floor-drawing__hatch {
  stroke: var(--color-on-dark);
  stroke-width: 1;
  opacity: 0.55;
}

.floor-drawing__pipes circle {
  fill: var(--color-main);
  stroke: var(--color-accent);
  stroke-width: 2.5;
}

.floor-drawing__membrane {
  fill: var(--color-on-dark);
}

.floor-drawing__outline {
  fill: none;
  stroke: var(--color-on-dark);
  stroke-width: 1.2;
}

/* скобка - слои, которые закрывает отделка и которые мы снимаем на фото */
.floor-drawing__hidden {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2.5;
}

.floor-drawing__leaders circle {
  fill: var(--color-on-dark);
}

.floor-drawing__leaders polyline {
  fill: none;
  stroke: var(--color-on-dark);
  stroke-width: 0.8;
}

.floor-drawing__leaders text {
  fill: var(--color-on-dark);
  font-family: var(--font-family);
  font-size: 12px;
}

/* --- Блоки страницы --- */

.section {
  padding-block: var(--space-8);
}

.section--surface {
  background: var(--color-surface);
}

.section--dark {
  background: var(--color-main);
  color: var(--color-on-dark);
}

.section__title {
  max-width: 22ch;
  font-size: var(--font-size-h2);
}

.section__lead {
  max-width: var(--text-max-width);
  margin-top: var(--space-4);
  font-size: var(--font-size-lead);
}

.section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

@media (min-width: 60rem) {
  .section {
    padding-block: var(--space-9);
  }

  /* заголовок слева, содержание справа */
  .section__split {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: start;
    gap: var(--space-8);
  }
}

/* Чем подкреплено «не бригада»; тот же список с отметками - «что в цену не входит» на ценах (.marked-list) */

.proof-list,
.marked-list {
  margin-top: var(--space-5);
  padding: 0;
  list-style: none;
}

.proof-list__item,
.marked-list__item {
  position: relative;
  padding: var(--space-4) 0 var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-line);
}

.proof-list__item:last-child,
.marked-list__item:last-child {
  border-bottom: 1px solid var(--color-line);
}

.proof-list__item::before,
.marked-list__item::before {
  content: "";
  position: absolute;
  top: calc(var(--space-4) + 0.5em);
  left: 0;
  width: 0.625rem;
  height: 0.625rem;
  background: var(--color-accent);
}

.proof-list__item strong,
.marked-list__item strong {
  font-weight: var(--font-weight-bold);
}

@media (min-width: 60rem) {
  .proof-list,
  .marked-list { margin-top: 0; }
}

/* Что делаем */

.services {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
}

.services__item {
  padding-top: var(--space-4);
  border-top: 4px solid var(--color-main);
}

.services__name {
  font-size: var(--font-size-h3);
}

.services__text {
  margin-top: var(--space-2);
  color: var(--color-ink-muted);
}

@media (min-width: 48rem) {
  .services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Как идёт объект: настоящая последовательность, поэтому номера */

.steps {
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps__item {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-line);
  counter-increment: step;
}

.steps__item:last-child {
  border-bottom: 1px solid var(--color-line);
}

.steps__item::before {
  content: counter(step);
  grid-row: span 2;
  font-size: 1.5rem;
  font-weight: var(--font-weight-heading);
  line-height: 1.1;
}

.steps__name {
  font-size: var(--font-size-h3);
}

.steps__text {
  color: var(--color-ink-muted);
}

@media (min-width: 60rem) {
  .steps__item {
    grid-template-columns: 3rem minmax(0, 18rem) minmax(0, 1fr);
    align-items: baseline;
    padding-block: var(--space-5);
  }

  .steps__item::before { grid-row: auto; }
}

/* --- Форма «узнать вилку» --- */

.request-form {
  display: grid;
  gap: var(--space-5);
  max-width: 36rem;
  margin-top: var(--space-6);
}

.field {
  margin: 0;
  padding: 0;
  border: 0;
}

.field__label {
  display: block;
  margin-bottom: var(--space-2);
  padding: 0;
  font-weight: var(--font-weight-medium);
}

.field__input {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-ink-muted);
  border-radius: var(--radius);
  background: #FFFFFF;
  color: var(--color-ink);
  font: inherit;
}

.choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.choice-group .field__label {
  width: 100%;
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #FFFFFF;
  cursor: pointer;
}

.choice:has(input:checked) {
  border-color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.choice input,
.consent input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--color-main);
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-small);
  line-height: 1.45;
  cursor: pointer;
}

.consent input {
  flex: none;
  margin-top: 0.1em;
}

.request-form__submit {
  width: 100%;
}

.request-form__submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Ловушка для роботов: поле в разметке есть, человек его не видит, читалка не читает.
   Не display: none - такие поля часть роботов пропускает */
.request-form__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Место невидимой капчи: вне сетки формы, иначе пустая ячейка добавит лишний отступ */
.request-form__captcha {
  position: absolute;
}

@media (min-width: 60rem) {
  .request-form { margin-top: 0; }
  .request-form__submit { width: auto; justify-self: start; }
}

/* --- Подвал: самый тёмный слой, на нём реквизиты --- */

.site-footer {
  padding-block: var(--space-7);
  background: var(--color-ink);
  color: var(--color-on-dark-muted);
  font-size: var(--font-size-small);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-5);
}

.site-footer__column > * + * {
  margin-top: var(--space-3);
}

.site-footer a {
  color: var(--color-on-dark);
}

.site-footer__brand {
  color: var(--color-on-dark);
  font-size: 1.125rem;
  font-weight: var(--font-weight-heading);
}

.site-footer__phone {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.site-footer__messengers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

@media (min-width: 48rem) {
  .site-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Панель связи на телефоне: телефон первым и шире, мессенджеры следом --- */

.contact-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  height: var(--contact-bar-height);
  background: var(--color-ink);
}

.contact-bar__link {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--color-on-dark);
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.15;
  /* «Telegram Телеграм» (168-ФЗ, company.php) на узком экране встаёт в две строки - обе по центру */
  text-align: center;
  text-decoration: none;
}

.contact-bar__link--call {
  flex-grow: 1.4;
  background: var(--color-accent);
  color: var(--color-ink);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
}

/* Складной телефон, 280 px: при 12 px «WhatsApp» встаёт вплотную к кнопке «Позвонить» - зазор 0,5 px
   (замер фазы 7а, 13.10.2026). На экране меньше 320 px подписи мессенджеров на пиксель мельче */
@media (max-width: 19.99rem) {
  .contact-bar__link:not(.contact-bar__link--call) { font-size: 0.6875rem; }
}

@media (min-width: 48rem) {
  body { padding-bottom: 0; }
  .contact-bar { display: none; }
}

/* --- Внутренние страницы (фаза 2): шапка раздела - тот же тёмный слой, что первый экран, но ниже --- */

.page-head {
  padding-block: var(--space-6) var(--space-7);
  background: var(--color-main);
  color: var(--color-on-dark);
}

.page-head--roomy {
  padding-block: var(--space-7) var(--space-8);
}

.page-head__title {
  max-width: 20ch;
  font-size: clamp(1.75rem, 1.2rem + 3.4vw, 3.25rem);
}

.page-head__lead {
  max-width: 34rem;
  margin-top: var(--space-4);
  font-size: var(--font-size-lead);
}

.page-head__note {
  max-width: 40rem;
  margin-top: var(--space-4);
  color: var(--color-on-dark-muted);
  font-size: var(--font-size-small);
}

@media (min-width: 60rem) {
  .page-head { padding-block: var(--space-8); }
  .page-head--roomy { padding-block: var(--space-9); }
}

/* placeholder() из layout.php: место под текст или число, которых ещё нет, - видно на странице, а не пустая ячейка */
.placeholder {
  padding: 0 var(--space-1);
  background: transparent;
  color: inherit;
  outline: 1px dashed var(--color-ink-muted);
  outline-offset: 2px;
  font-style: italic;
}

/* Кнопка, которая выглядит ссылкой: в подвале, где всё остальное - ссылки */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-on-dark);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Текст только для читалок: подписи таблиц */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Текстовые страницы: политика и согласия - одна колонка, строка не длиннее 75 знаков --- */

.prose {
  max-width: var(--text-max-width);
}

.prose h2 {
  margin-top: var(--space-7);
  font-size: 1.375rem;
}

.prose h3 {
  margin-top: var(--space-6);
  font-size: var(--font-size-h3);
}

.prose > :first-child {
  margin-top: 0;
}

.prose p,
.prose ul {
  margin-top: var(--space-4);
}

.prose ul {
  padding-left: 1.25rem;
}

.prose li + li {
  margin-top: var(--space-2);
}

.prose a {
  text-underline-offset: 0.15em;
}

/* Колонка текста рядом с заголовком блока (.section__split) */
.text-block {
  max-width: var(--text-max-width);
  margin-top: var(--space-5);
}

.text-block > * + * {
  margin-top: var(--space-4);
}

@media (min-width: 60rem) {
  .text-block { margin-top: 0; }
}

/* --- Таблицы: линии только между строками, как в смете --- */

.plain-table {
  width: 100%;
  border-collapse: collapse;
}

.plain-table th,
.plain-table td {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.plain-table thead th {
  border-bottom-color: var(--color-ink);
  color: var(--color-ink-muted);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
}

.plain-table tbody th {
  font-weight: var(--font-weight-bold);
}

/* Факты парами: гарантия */
.fact-list {
  margin: 0;
}

.fact-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-line);
}

.fact-list__row:last-child {
  border-bottom: 1px solid var(--color-line);
}

.fact-list dt {
  font-weight: var(--font-weight-medium);
}

.fact-list dd {
  margin: 0;
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

/* --- Цены: снимок прайса. Всё с числами - внутри .price-snapshot, штамп с датой - как основная надпись чертежа --- */

.price-snapshot {
  margin-top: var(--space-6);
}

.price-table__value {
  text-align: right;
  white-space: nowrap;
}

.price-table .price-table__value {
  padding-right: 0;
}

/* На телефоне строка таблицы раскладывается в карточку: уровень и цена в одну строку, состав под ними */
@media (max-width: 47.99rem) {
  .price-table thead {
    display: none;
  }

  .price-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-4);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-line);
  }

  .price-table th,
  .price-table td {
    padding: 0;
    border: 0;
  }

  .price-table__includes {
    grid-column: 1 / -1;
    color: var(--color-ink-muted);
    font-size: var(--font-size-small);
  }
}

.price-snapshot__note {
  margin-top: var(--space-4);
  color: var(--color-ink-muted);
}

.price-snapshot__stamp {
  display: grid;
  margin-top: var(--space-5);
  border: 2px solid var(--color-ink);
  font-size: var(--font-size-small);
}

.price-snapshot__stamp p {
  padding: var(--space-2) var(--space-3);
}

.price-snapshot__stamp p + p {
  border-top: 1px solid var(--color-ink);
}

@media (min-width: 48rem) {
  .price-snapshot__stamp {
    grid-template-columns: auto auto;
    width: fit-content;
    margin-left: auto;
  }

  .price-snapshot__stamp p + p {
    border-top: 0;
    border-left: 1px solid var(--color-ink);
  }
}

/* --- Вопросы и ответы: раскрываются по нажатию, без скриптов --- */

.faq {
  margin-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}

.faq__item {
  border-bottom: 1px solid var(--color-line);
}

.faq__question {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::after {
  content: "+";
  flex: none;
  color: var(--color-ink-muted);
  font-size: 1.5rem;
  font-weight: var(--font-weight-regular);
  line-height: 1;
}

.faq__item[open] .faq__question::after {
  content: "−";
}

.faq__answer {
  max-width: var(--text-max-width);
  padding-bottom: var(--space-5);
}

.faq__answer p + p {
  margin-top: var(--space-3);
}

@media (min-width: 60rem) {
  .faq { margin-top: 0; }
}

/* --- Контакты: телефон первым и крупно, остальное - строками --- */

.contacts {
  display: grid;
  gap: var(--space-7);
}

.contact-list {
  margin: 0;
}

.contact-list__row {
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.contact-list__row:last-child {
  border-bottom: 1px solid var(--color-line);
}

.contact-list dt {
  color: var(--color-ink-muted);
  font-size: var(--font-size-small);
}

.contact-list dd {
  margin: var(--space-1) 0 0;
}

.contacts__phone {
  font-size: clamp(1.5rem, 1rem + 2.6vw, 2.25rem);
  font-weight: var(--font-weight-heading);
  letter-spacing: -0.01em;
  text-decoration: none;
}

.messenger-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.messenger-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.messenger-button:hover {
  background: #FFFFFF;
}

.contacts__heading {
  margin-top: var(--space-6);
  font-size: var(--font-size-h3);
}

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

.contacts__aside p,
.contacts__aside ul {
  margin-top: var(--space-3);
}

.card-links {
  padding-left: 1.25rem;
}

@media (min-width: 60rem) {
  .contacts {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-8);
  }
}

/* --- Баннер согласия на статистику: внизу, над панелью связи на телефоне --- */

.consent-banner {
  position: fixed;
  right: 0;
  bottom: var(--contact-bar-height);
  left: 0;
  z-index: 15;
  padding-block: var(--space-4);
  background: var(--color-ink);
  color: var(--color-on-dark);
  box-shadow: 0 -1px 0 var(--color-line-on-dark);
}

.consent-banner[hidden] {
  display: none;
}

.consent-banner__inner {
  display: grid;
  gap: var(--space-4);
}

.consent-banner__title {
  font-weight: var(--font-weight-bold);
}

.consent-banner__text p + p {
  margin-top: var(--space-2);
  color: var(--color-on-dark-muted);
  font-size: var(--font-size-small);
}

.consent-banner__text a {
  color: var(--color-on-dark);
}

.consent-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Две кнопки в один ряд даже на 320 px: отступы и шрифт меньше, чем у кнопок формы */
.consent-banner__button {
  flex: 1 1 auto;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-small);
}

@media (min-width: 48rem) {
  .consent-banner { bottom: 0; }

  .consent-banner__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .consent-banner__button { flex: none; }
}