/* ==========================================================================
   СЕКЦИИ СТРАНИЦ
   ==========================================================================
   Блоки, встречающиеся на одной-двух страницах: шапка страницы,
   география, призыв к действию и остальное.
   ========================================================================== */


/* ==========================================================================
   ШАПКА СТРАНИЦЫ (тёмный блок с заголовком)
   ========================================================================== */

.hero {
  background: var(--navy);
  background-image: var(--stripes);
  padding: clamp(28px, 3.4vw, 56px) var(--pad-x) clamp(36px, 4.2vw, 68px);
}

.hero__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3vw, 52px);
  align-items: flex-start;
}

.hero__body { flex: 1 1 380px; min-width: 0; }

.hero__rating { margin-bottom: clamp(18px, 2.2vw, 28px); }

.hero__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--on-dark);
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  text-wrap: balance;
}

.hero__lead {
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--on-dark-lead);
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  max-width: 54ch;
  text-wrap: pretty;
}

.hero__perks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(22px, 2.6vw, 34px);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.hero__actions .btn { flex: 0 0 auto; }

@media (max-width: 640px) {
  .hero__actions .btn { flex: 1 1 100%; }
}

/* Уменьшённый заголовок — когда шапка используется как заголовок секции */
.hero__title--sm {
  font-size: clamp(26px, 3vw, 40px);
  margin-top: 8px;
}

/* Компактный вариант — для внутренних страниц без формы */
.hero--compact { padding-bottom: clamp(32px, 3.6vw, 56px); }

.hero--compact .hero__inner { display: block; }

.hero--compact .hero__title { font-size: clamp(30px, 3.8vw, 52px); }



/* ==========================================================================
   ШАПКА ВНУТРЕННЕЙ СТРАНИЦЫ
   ========================================================================== */

.page-hero {
  background: var(--navy);
  background-image: var(--stripes);
  padding: clamp(22px, 3vw, 44px) var(--pad-x) clamp(30px, 3.6vw, 52px);
}

/* ---------------------------------------------------------------------------
   ШАПКА С ФОТОГРАФИЕЙ УСЛУГИ

   Снимок подставляется страницей в переменную --hero-photo. Класс
   добавляется только когда файл действительно есть, поэтому без фотографий
   шапка остаётся прежней — синей с полосами.

   ПОЧЕМУ ТРИ СЛОЯ, А НЕ ПРОСТО КАРТИНКА. Белый заголовок поверх фотографии
   не читается: где-то небо, где-то тёмный асфальт, и контраст скачет по
   тексту. Поэтому сверху лежит синяя вуаль — слева плотнее, справа легче.
   Слева стоит текст, справа форма, и фотографию видно там, где она не мешает.

   Порядок слоёв сверху вниз: вуаль → полосы → фотография → синий фон.
--------------------------------------------------------------------------- */

.page-hero--photo {
  background-image:
    linear-gradient(100deg,
        rgba(10, 44, 86, 0.96) 0%,
        rgba(10, 44, 86, 0.90) 45%,
        rgba(10, 44, 86, 0.74) 100%),
    var(--stripes),
    var(--hero-photo);

  background-size:     auto,   auto,   cover;
  background-position: center, 0 0,    center;
  background-repeat:   no-repeat, repeat, no-repeat;
}

/* На телефоне текст и форма идут друг под другом, и «правой стороны»,
   где фотографию было бы видно, просто нет. Поэтому вуаль ровная
   и чуть плотнее: на маленьком экране заголовок крупный, а фотография
   мельче — пестрота под буквами мешает сильнее. */
@media (max-width: 860px) {
  .page-hero--photo {
    background-image:
      linear-gradient(180deg,
          rgba(10, 44, 86, 0.94) 0%,
          rgba(10, 44, 86, 0.90) 100%),
      var(--stripes),
      /* На телефоне подставляется уменьшенная копия: качать снимок
         на 2752 точки ради полосы в 390 незачем. Обе переменные
         приходят из шаблона страницы услуги. */
      var(--hero-photo-sm, var(--hero-photo));
  }
}

.page-hero .crumbs { margin-bottom: clamp(18px, 2.4vw, 34px); }

.page-hero__rating { margin-bottom: clamp(16px, 2vw, 26px); }

.page-hero__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 2.6vw, 44px);
}

.page-hero__body { flex: 1 1 300px; min-width: 0; }

.page-hero__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(32px, 4.6vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--on-dark);
  margin: 0 0 clamp(12px, 1.4vw, 20px);
}

.page-hero__lead {
  font-size: clamp(14.5px, 1.25vw, 18px);
  line-height: 1.55;
  color: var(--on-dark-lead);
  margin: 0;
  max-width: 56ch;
  text-wrap: pretty;
}

/* Заголовок статьи идёт сразу под плашкой раздела — нужен отступ сверху */
.page-hero__title--post {
  margin-top: 16px;
  font-size: clamp(28px, 3.6vw, 50px);
}

.page-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.page-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid rgba(255, 255, 255, 0.13);
  font-size: 13px;
  color: #DCE4F0;
}


/* ==========================================================================
   ГЕОГРАФИЯ
   ========================================================================== */

.geo__inner {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 2.6vw, 44px);
  align-items: center;
}

.geo__body { flex: 1 1 300px; min-width: 0; }

.geo__title { margin: 8px 0 12px; }

.geo__text {
  margin: 0 0 clamp(18px, 2.2vw, 26px);
  font-size: clamp(14px, 1.2vw, 16.5px);
  line-height: 1.6;
  color: var(--text-muted-3);
  max-width: 50ch;
  text-wrap: pretty;
}

.geo__cities {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}


/* ==========================================================================
   КАТАЛОГ УСЛУГ
   ========================================================================== */

.catalog {
  background: var(--bg-soft);
  padding: clamp(32px, 4vw, 64px) var(--pad-x) var(--pad-y);
  border-bottom: 1px solid var(--line);
}

.catalog__filters { margin-bottom: clamp(22px, 2.8vw, 36px); }

.catalog-card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  color: var(--text);
  transition: box-shadow var(--ease), border-color var(--ease);
}
.catalog-card:hover {
  border-color: var(--line-card);
  box-shadow: var(--shadow-post);
  color: var(--text);
}

.catalog-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--pad-card);
}

.catalog-card__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text);
}

.catalog-card__desc {
  display: block;
  font-size: clamp(13px, 1.05vw, 14.5px);
  line-height: 1.5;
  color: var(--text-muted);
  margin: 10px 0 16px;
  text-wrap: pretty;
}

.catalog-card__price {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(19px, 1.8vw, 25px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--green);
  margin-bottom: 14px;
}

.catalog-card__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 14px;
  margin-top: auto;
  border-top: 1px solid var(--line-soft);
}

.catalog-card__spec { display: flex; flex-direction: column; gap: 4px; }

.catalog-card__spec-label {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #97A5BC;
}

.catalog-card__spec-value { font-size: 14px; font-weight: 500; color: var(--text-muted-5); }

.catalog-card__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.catalog-card__more-label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--blue-hover);
}


/* ==========================================================================
   СКИДКА ЗА ОБЪЁМ
   ========================================================================== */

.tier {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(18px, 2vw, 28px);
}

.tier__volume {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.tier__value {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--green);
}

.tier__note { font-size: 14px; line-height: 1.55; color: var(--text-muted); }

.tiers__note {
  margin-top: clamp(18px, 2vw, 26px);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted-2);
  max-width: 78ch;
}


/* ==========================================================================
   ЧТО ВЛИЯЕТ НА ЦЕНУ
   ========================================================================== */

.factor {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(18px, 1.9vw, 26px);
}

.factor__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 8px;
}

.factor__text { font-size: 14px; line-height: 1.55; color: var(--text-muted); text-wrap: pretty; }


/* ==========================================================================
   ПРИЗЫВ К ДЕЙСТВИЮ (перед футером)
   ========================================================================== */

.cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 2.6vw, 40px);
}

.cta__body { flex: 1 1 260px; min-width: 0; }

.cta__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 10px;
}

.cta__text {
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.55;
  color: var(--text-muted-3);
  margin: 0 0 16px;
  max-width: 52ch;
}


/* ==========================================================================
   СТРАНИЦА УСЛУГИ
   ========================================================================== */

/* --- Цена в шапке ------------------------------------------------------- */

.service-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin: 0 0 clamp(14px, 1.6vw, 22px);
}

.service-price__value {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--on-dark);
}

.service-price__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 13.5px;
  color: var(--on-dark-dim);
}

/* --- Что входит в стоимость ---------------------------------------------- */

.grid--included { grid-template-columns: repeat(auto-fit, minmax(min(288px, 100%), 1fr)); gap: 12px; }

/* Сколько колонок — под число карточек.

   auto-fit набивает столько столбцов, сколько влезет, и не смотрит, ровно
   ли лягут карточки. На широком экране шесть карточек выходят как 4 + 2,
   восемь — как 5 + 3: последний ряд наполовину пустой, справа дыра.

   Поэтому задаём число колонок явно, по числу карточек: 6 и 9 делятся на
   три, 8 и 12 — на четыре, 5 и 10 — на пять. Остальным оставляем четыре:
   пятая колонка делает карточку уже, чем было в макете.

   Всё это держится на :has(). Браузер, который его не знает, пропустит
   блок целиком и покажет страницу ровно как раньше — поэтому и @supports.
*/

@supports selector(:has(*)) {

  /* Обычный компьютер: ширина содержимого 1325px, влезает максимум четыре
     колонки — их auto-fit и даёт. Правим только те случаи, где последний
     ряд получается полупустым. */
  @media (min-width: 1080px) {
    .grid--included:has(> :nth-child(5):last-child),
    .grid--included:has(> :nth-child(6):last-child),
    .grid--included:has(> :nth-child(9):last-child) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* Широкий экран: содержимое шире, и auto-fit начинает лепить по пять.
     Ставим потолок в четыре и перечисляем исключения. */
  @media (min-width: 1600px) {
    .grid--included { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .grid--included:has(> :nth-child(1):last-child) {
      grid-template-columns: minmax(0, 1fr);
    }

    .grid--included:has(> :nth-child(2):last-child) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid--included:has(> :nth-child(3):last-child),
    .grid--included:has(> :nth-child(6):last-child),
    .grid--included:has(> :nth-child(9):last-child) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grid--included:has(> :nth-child(5):last-child),
    .grid--included:has(> :nth-child(10):last-child) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
}

.included {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(18px, 2vw, 26px);
  display: flex;
  flex-direction: column;
}

.included__num {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: var(--r);
  background: var(--bg-icon-blue);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 14px;
}

.included__title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(14.5px, 1.2vw, 17px);
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 7px;
}

.included__text { font-size: 13.5px; line-height: 1.55; color: var(--text-muted-2); }

.included__price {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--green-price);
}

/* --- Гарантии -------------------------------------------------------------- */

.guarantee {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(20px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.guarantee__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: var(--r);
  background: var(--bg-icon-blue);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.guarantee__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.25;
  color: var(--text);
  margin-top: 4px;
}

.guarantee__text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted-2);
  text-wrap: pretty;
}

/* --- Лента с прокруткой (этапы, объекты, отзывы) --------------------------- */

.strip {
  background: var(--navy);
  padding: var(--pad-y) 0;
}

.strip__head {
  /* В обычной секции поля --pad-x лежат СНАРУЖИ .wrap, и текст начинается
     ровно с края .wrap. Здесь поле внутри, поэтому к предельной ширине
     его надо прибавить — иначе заголовок ленты стоит на --pad-x правее
     всех остальных заголовков страницы. На узком экране обе записи дают
     одно и то же: предел всё равно не достигается. */
  max-width: calc(var(--wrap) + 2 * var(--pad-x));
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.strip__track {
  /* Точка отсчёта для всего, что внутри позиционировано абсолютно —
     в первую очередь для подписей .visually-hidden в карточках отзывов.
     Без неё они отсчитываются от всей страницы и растягивают её
     на всю длину ленты. Подробнее — в base.css. */
  position: relative;

  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;

  /* Поля с обеих сторон, а не только слева: правое нужно последней
     карточке, она прилипает не началом, а концом — см. ниже.

     Сама лента идёт во всю ширину экрана, а заголовок над ней сидит
     внутри .wrap — по центру. Если полем ленты взять просто --pad-x,
     на широком экране карточки уедут левее заголовка: на 1920 заголовок
     начинается на 290-м пикселе, а карточка — на 64-м. Ровно это и
     выглядело «неадаптивно»: подпись по центру, а лента у края экрана.

     Поэтому поле = поле секции плюс то, что .wrap отдаёт на центровку.
     Пока экран уже, чем содержимое, вторая часть равна нулю, и всё
     остаётся как было — на телефоне и планшете ничего не меняется. */
  --strip-pad: calc(var(--pad-x) + max(0px, (100% - 2 * var(--pad-x) - var(--wrap)) / 2));

  scroll-padding-inline: var(--strip-pad);
  padding: 4px var(--strip-pad);
}
.strip__track::-webkit-scrollbar { display: none; }

/* Этапы — не витрина, а последовательность: их читают подряд, от первого
   к последнему. На широком экране они помещаются все сразу, и прятать
   часть за прокруткой незачем. Раскладываем в равные колонки; лента при
   этом перестаёт прокручиваться, и скрипт сам убирает стрелки — он
   смотрит на scrollWidth, а у сетки он равен видимой ширине.

   Только для четырёх и пяти этапов: двум и трём такая ширина не нужна,
   а от шести колонка становится уже карточки, и лента честнее. */

@supports selector(:has(*)) {
  @media (min-width: 1600px) {
    .strip__track--stages:has(> :nth-child(4):last-child),
    .strip__track--stages:has(> :nth-child(5):last-child) {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
      overflow-x: visible;
    }
  }
}

.strip__item {
  flex: 0 0 clamp(252px, 25vw, 340px);
  scroll-snap-align: start;
  background: var(--glass-card);
  border: 1px solid var(--glass-line-3);
  border-radius: var(--r-md);
  padding: clamp(20px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Светлый вариант ленты — для блока «до и после» */
.strip--light {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.strip--light .head__eyebrow { color: var(--text-dim); }
.strip--light .head__title   { color: var(--text); }
.strip--light .head__sub     { color: var(--text-muted-2); }

.strip--light .strip__arrow {
  border-color: var(--line-input-2);
  background: var(--bg);
  color: var(--navy);
}
.strip--light .strip__arrow:hover { background: var(--bg); border-color: var(--navy); }


/* --- Карточка услуги с фотографией ------------------------------------------- */

.strip__track--services { gap: 14px; }

.srv-card {
  flex: 0 0 clamp(228px, 22vw, 300px);
  scroll-snap-align: start;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--text);
  transition: border-color var(--ease);
}
.srv-card:hover { border-color: var(--navy); color: var(--text); }

.srv-card__photo {
  aspect-ratio: 16 / 10;
  background: repeating-linear-gradient(135deg, #D9E3F0 0 9px, #E9F0F8 9px 18px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.srv-card__slot {
  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  font-size: 12px;
  color: #6F7F97;
  background: rgba(255, 255, 255, 0.75);
  padding: 4px 9px;
  border-radius: 4px;
}

.srv-card__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.srv-card__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.25;
  color: var(--text);
}

.srv-card__price { font-size: 13.5px; color: var(--text-muted-2); }


/* --- Зона выезда: три карточки на тёмном -------------------------------------- */

.zone {
  background: var(--glass-card);
  border: 1px solid var(--glass-line-3);
  border-radius: var(--r-md);
  padding: clamp(20px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.zone__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.1);
  color: var(--on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.zone__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.25;
  color: var(--on-dark);
  margin-top: 4px;
}

.zone__text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--on-dark-body);
  text-wrap: pretty;
}


/* --- Карточка «до и после» --------------------------------------------------- */

.work {
  flex: 0 0 clamp(268px, 30vw, 420px);
  scroll-snap-align: start;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* Положение шторки. Меняется ползунком, по умолчанию — середина,
   поэтому блок выглядит правильно и без скриптов. */
.work__compare {
  --pct: 50%;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, #D9E3F0 0 9px, #E9F0F8 9px 18px);
  /*
     Курсор обычный: тянуть за фотографию больше нельзя, только за кружок.
     Прежний ew-resize обещал то, чего блок уже не делает.
  */
  cursor: default;

  /*
     Раньше здесь стояло touch-action: pan-y — оно запрещало пальцу
     двигать фотографию вбок, потому что этим жестом тянули шторку.
     Теперь шторку тянут только за кружок, а фотография снова слушается
     обычных жестов: вверх-вниз прокручивается страница, вбок листается
     лента объектов.
  */
  user-select: none;
}

/* Слой «до» — обрезается по положению шторки */
.work__before {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, #BFC7D2 0 9px, #D2D9E3 9px 18px);
  clip-path: inset(0 calc(100% - var(--pct)) 0 0);
}

/* --- Линия шторки — за неё и тянут ------------------------------------------
   Раньше линия была тонкой и не ловила нажатий вовсе: тянуть можно было
   только за кружок. В записях посещений видно, чем это кончалось — люди
   по нескольку раз тыкали рядом с кружком и уходили, так и не поняв,
   что снимок двигается.

   Теперь линия сама себе ручка. По ширине она по-прежнему тонкая, а вот
   область нажатия вокруг неё — сорок четыре точки, и во всю высоту
   фотографии. Целиться не нужно: коснулся рядом с линией на любой
   высоте — взялся.
---------------------------------------------------------------------------- */
.work__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pct);
  width: 3px;
  margin-left: -1px;          /* чтобы линия стояла ровно по границе */
  background: var(--on-dark);
  box-shadow: 0 0 0 1px rgba(10, 44, 86, 0.18);

  /* Выше кнопки открытия: иначе она перехватывала бы нажатие,
     и линия перестала бы тянуться. Вровень с кружком. */
  z-index: 2;
  cursor: ew-resize;

  /* Палец на линии тянет шторку, а не прокручивает страницу */
  touch-action: none;
}

/* Невидимое поле захвата вокруг линии. Сама линия шириной в три точки —
   попасть в неё пальцем нельзя; в сорок четыре попадают уверенно. */
.work__divider::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 44px;
  transform: translateX(-50%);
}

/* --- Нажатие на фотографию: открыть оба снимка -------------------------------
   Прозрачная кнопка во всю площадь фотографии. Лежит НИЖЕ кружка шторки
   (z-index: 1 против 2) — значит, нажатие на кружок достаётся кружку,
   а нажатие куда угодно ещё открывает снимки крупно.

   Значок в углу нужен, чтобы это было видно до того, как человек нажмёт.
   Без него кнопка есть, но о ней никто не знает. */
.work__open {
  position: absolute;
  inset: 0;
  z-index: 1;

  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: zoom-in;
}

.work__open-icon {
  position: absolute;
  right: 10px;
  bottom: 10px;

  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy);
  box-shadow: 0 4px 12px -4px rgba(10, 44, 86, 0.45);
  transition: background var(--ease), transform var(--ease);
}

.work__open:hover .work__open-icon { background: var(--on-dark); transform: scale(1.06); }

.work__open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

/* Кружок едет вместе с границей. Тянут теперь и за него, и за всю линию,
   но кружок остаётся главным: это он говорит, что снимок вообще двигается.
   Поэтому стал заметнее — сорок точек вместо тридцати двух, стрелки крупнее.

   Слой выше кнопки открытия: иначе она перехватывала бы нажатие. */
.work__handle {
  position: absolute;
  top: 50%;
  left: var(--pct);
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--on-dark);

  /* Кольцо по краю отделяет кружок от светлого снимка: на белой стене
     белый кружок без него терялся. */
  box-shadow: 0 0 0 2px rgba(10, 44, 86, 0.16), 0 6px 16px -6px rgba(10, 44, 86, 0.55);

  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  font-size: 15px;
  letter-spacing: -0.04em;
  cursor: ew-resize;
  touch-action: none;
}
.work__handle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Подписи «фото до» / «фото после» — вместо самих фотографий */
.work__slot {
  position: absolute;
  bottom: 12px;
  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  font-size: 11.5px;
  background: rgba(255, 255, 255, 0.8);
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.work__slot--after  { right: 12px; color: #6F7F97; }
.work__slot--before { left: 12px;  color: #4E5B6D; }

/* Подписи «ДО» и «ПОСЛЕ» — только надписи. Нажатие сквозь них проходит
   к кнопке под ними: иначе угол фотографии, аккурат там, где у человека
   палец, оказался бы единственным местом, где ничего не открывается. */
.work__tag {
  position: absolute;
  top: 12px;
  z-index: 2;
  pointer-events: none;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 5px 9px;
  border-radius: 4px;
}
.work__tag--before { left: 12px;  background: var(--glass-badge); color: var(--on-dark); }
.work__tag--after  { right: 12px; background: rgba(255, 255, 255, 0.9); color: var(--navy); }


.work__info { padding: clamp(14px, 1.6vw, 20px); }

.work__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 6px;
}

.work__meta { font-size: 13px; line-height: 1.5; color: var(--text-muted-2); }


.stage__num {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: var(--r);
  background: var(--glass-2);
  border: 1px solid var(--glass-line-2);
  color: var(--on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
}

.stage__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.25;
  color: var(--on-dark);
}

.stage__text { font-size: 14px; line-height: 1.55; color: var(--on-dark-body); }

.stage__time {
  margin-top: auto;
  padding-top: 6px;
  font-size: 12.5px;
  color: var(--accent-soft);
  font-weight: 500;
}

/* --- Почему выбирают нас ---------------------------------------------------- */

.why {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(20px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.why__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(16px, 1.35vw, 18.5px);
  line-height: 1.25;
  color: var(--text);
}

.why__rows { display: flex; flex-direction: column; gap: 8px; }

.why__row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.45;
}

.why__row--bad { color: #7C889C; }
.why__row--good { color: var(--text-body); }

.why__icon { flex: 0 0 auto; display: flex; padding-top: 1px; }
.why__row--bad .why__icon { color: #B3453B; }
.why__row--good .why__icon { color: var(--green-shield); }

.why__row--bad span:last-child {
  text-decoration: line-through;
  text-decoration-color: #C9D2DF;
}


/* ==========================================================================
   СТАТЬЯ БЛОГА
   ========================================================================== */

/* Короткий лид в карточке статьи на странице блога */
.post-lead {
  display: block;
  font-size: clamp(13px, 1.05vw, 14.5px);
  line-height: 1.5;
  color: var(--text-muted);
  margin: 10px 0 16px;
  text-wrap: pretty;
}

.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: clamp(16px, 2vw, 24px);
  font-size: 13px;
  color: var(--on-dark-dim);
}
.post__meta .card__dot { background: #4E5D75; }

.post {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3vw, 56px);
  align-items: flex-start;
}

.post__body { flex: 1 1 460px; min-width: 0; max-width: 74ch; }

.post__h2 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(21px, 2.2vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: clamp(28px, 3vw, 44px) 0 clamp(12px, 1.4vw, 18px);
  scroll-margin-top: 90px;
}

.post__p {
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.7;
  color: var(--text-muted-3);
  margin-bottom: 16px;
  text-wrap: pretty;
}

.post__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: var(--bg-icon);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: clamp(20px, 2.4vw, 30px);
}

/* --- Таблица сметы --------------------------------------------------------- */

.post__table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin: clamp(18px, 2vw, 26px) 0;
}

.post__table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(13.5px, 1.15vw, 15.5px);
}

.post__table th,
.post__table td {
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
}

.post__table thead th {
  background: var(--bg-soft);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

.post__table tbody tr { border-top: 1px solid var(--line-soft); }
.post__table tbody td { color: var(--text-muted-3); }
.post__table tbody td:first-child { color: var(--text); }

.post__table .is-num {
  text-align: right;
  white-space: nowrap;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--text);
}

/* В подвале таблицы не итог, а подпись на всю ширину: «цены за работу
   с материалами», «талон выдаётся вместе с актом». Поэтому не жирная
   строка итогов, а спокойное примечание. */
.post__table tfoot tr { border-top: 2px solid var(--line); background: var(--bg-soft); }
.post__table tfoot td {
  font-size: 0.92em;
  line-height: 1.5;
  color: var(--text-dim);
}

/* А если в подвале всё-таки итог — он должен читаться как итог */
.post__table tfoot.post__table-sum td {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: inherit;
  color: var(--text);
}

/* --- Список с галочками ----------------------------------------------------- */

.post__checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: clamp(16px, 2vw, 24px) 0;
}

.post__checklist li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.55;
  color: var(--text-muted-3);
}

.post__check { flex: 0 0 auto; color: var(--green-shield); display: flex; padding-top: 2px; }

/* --- Врезка ------------------------------------------------------------------ */

.post__callout {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-cta);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: clamp(18px, 2vw, 24px);
  margin: clamp(20px, 2.4vw, 30px) 0;
}

.post__callout-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.post__callout-text {
  font-size: clamp(14.5px, 1.2vw, 16.5px);
  line-height: 1.6;
  color: var(--text);
  text-wrap: pretty;
}

.post__cards { margin: clamp(18px, 2vw, 26px) 0; }

.post__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(28px, 3vw, 40px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--line);
}

/* --- Боковая колонка ---------------------------------------------------------- */

.post__aside {
  flex: 0 1 300px;
  min-width: 0;
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 1079px) {
  .post__aside { position: static; flex: 1 1 100%; }
}

.post__toc {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(18px, 2vw, 24px);
}

.post__toc-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.post__toc-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-muted-3);
  border-top: 1px solid var(--line-soft);
}
.post__toc-link:first-of-type { border-top: none; }
.post__toc-link:hover { color: var(--navy); }

.post__toc-num {
  flex: 0 0 auto;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12px;
  color: var(--text-slot);
  padding-top: 2px;
}

.post__ask {
  background: var(--bg-cta);
  border-radius: var(--r-lg);
  padding: clamp(18px, 2vw, 24px);
}

.post__ask-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 8px;
}

.post__ask-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted-3);
  margin-bottom: 14px;
}


/* ==========================================================================
   ЗАГЛУШКА КАРТЫ
   ==========================================================================
   Реальная карта Яндекса подключается в app/views/partials/map.php.
   Пока ключа нет — на её месте стоит плашка, как было в макете.
   ========================================================================== */

.map {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: var(--bg-icon);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  color: var(--text-slot);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
}

/* Отступ нужен только заглушке — это надпись внутри серой плашки, и без
   полей она упиралась бы в края. Самой карте он мешал: между рамкой и
   картой оставалась пустая полоса, а карта должна заполнять плашку. */
.map--empty { padding: 16px; }

.map iframe,
.map > ymaps { width: 100%; height: 100%; border: 0; }


/* ==========================================================================
   ГОРОДА (страница регионов)
   ========================================================================== */

.city {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(18px, 2vw, 26px);
}

.city__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 10px;
}

.city__icon { flex: 0 0 auto; color: var(--accent); display: flex; }

.city__name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--text);
}

.city__dist {
  font-size: 13px;
  color: var(--text-slot);
  margin-left: auto;
}

.city__note { font-size: 14px; line-height: 1.55; color: var(--text-muted); text-wrap: pretty; }


/* ==========================================================================
   ПЛОЩАДКИ С ОТЗЫВАМИ
   ========================================================================== */

.platform {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(18px, 2vw, 26px);
  color: var(--text);
}

.platform__logo {
  width: 30px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 4px;
}

.platform__name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(15px, 1.25vw, 17px);
  color: var(--text);
}

.platform__rating { display: flex; align-items: center; gap: 8px; }

.platform__value {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  color: var(--text);
}

.platform__count { font-size: 13px; color: var(--text-muted-2); }

/* Обёртка карточки отзыва в сетке — чтобы карточка тянулась на всю высоту */
.review-wrap { display: flex; }
.review-wrap > .review { flex: 1; }


/* ==========================================================================
   ИСТОРИЯ КОМПАНИИ
   ========================================================================== */

.story {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3vw, 52px);
  align-items: flex-start;
}

.story__body { flex: 1 1 380px; min-width: 0; }

.story__title { margin: 8px 0 clamp(14px, 1.6vw, 20px); }

.story__text {
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.65;
  color: var(--text-muted-3);
  margin-bottom: 14px;
  max-width: 62ch;
  text-wrap: pretty;
}
.story__text:last-child { margin-bottom: 0; }

.story__photo {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--bg-icon);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}


/* ==========================================================================
   РЕКВИЗИТЫ
   ========================================================================== */

.requisites {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(18px, 2.2vw, 30px);
}

.requisites__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(20px, 2.6vw, 44px);
}

/* Подпись группы реквизитов: «Организация», «Банк».
   В макете это не заголовок, а мелкая подпись заглавными — такая же,
   как надзаголовки секций. Раньше здесь стоял крупный тёмный заголовок. */
.requisites__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}


/* ==========================================================================
   СПОСОБЫ СВЯЗИ
   ========================================================================== */

.channel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(18px, 2vw, 26px);
  color: var(--text);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.channel:hover {
  border-color: var(--line-card);
  box-shadow: var(--shadow-card);
  color: var(--text);
}

/* --- ЗНАК КАНАЛА -------------------------------------------------------------
   Плашка — кружок, как у кнопок сбоку экрана, и знаки в ней те же самые
   (partials/brand-mark.php). Раньше здесь были бледные подложки с
   контурными значками, и вставший рядом фирменный знак MAX выбивался
   из ряда. Теперь ряд собран из настоящих знаков и читается сразу.

   Заливка нужна только тем каналам, чей знак приходит без фона. Под
   знаками со своим фоном она остаётся на время загрузки, чтобы на их
   месте не мигало белое пятно.
---------------------------------------------------------------------------- */

.channel__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.channel__icon--phone    { background: var(--navy); }
.channel__icon--whatsapp { background: var(--whatsapp); }
.channel__icon--telegram { background: var(--telegram); }
.channel__icon--email    { background: var(--mailru); }
.channel__icon--max      { background: var(--max-blue); }

/* Знак со своим фоном — во всю плашку */
.channel__logo {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

/* Знак без фона — поверх заливки, белым. Про перекраску подробнее
   в layout.css, у кнопок сбоку экрана: приём тот же. */
.channel__logo--glyph {
  width: 52%;
  height: 52%;
  border-radius: 0;
  filter: brightness(0) invert(1);
}

.channel__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.channel__value {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.25;
  color: var(--text);
}

.channel__note { font-size: 13.5px; line-height: 1.5; color: var(--text-muted-2); }


/* ==========================================================================
   ОФИС И КАРТА
   ========================================================================== */

.office {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 2.6vw, 40px);
  align-items: flex-start;
}

.office__rows {
  flex: 1 1 320px;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(18px, 2.2vw, 30px);
}

.office__map { flex: 1 1 380px; min-width: 0; }


/* ==========================================================================
   ОБЕЩАНИЯ (форма на странице контактов)
   ========================================================================== */

.promises {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: clamp(18px, 2.2vw, 26px);
}

.promises__item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--on-dark-body);
}

.promises__icon { flex: 0 0 auto; color: #7BE6A6; display: flex; padding-top: 2px; }


/* ==========================================================================
   ТАБЛИЦА-СТРОКА «ЯРЛЫК → ЗНАЧЕНИЕ» (реквизиты, офис)
   ========================================================================== */

.rows { display: flex; flex-direction: column; }

.rows__item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 16px;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.rows__item:last-child { border-bottom: none; }

/* Подпись строки — «Адрес», «ИНН». В макете она заметно светлее значения,
   чтобы взгляд цеплялся за само значение, а не за подпись. */
.rows__label { font-size: 13.5px; color: var(--text-dim); flex: 0 0 auto; }

.rows__value {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  text-align: right;
  min-width: 0;
  word-break: break-word;
}

@media (max-width: 640px) {
  .rows__item { flex-direction: column; align-items: flex-start; gap: 4px; }
  .rows__value { text-align: left; }
}

/* --- Стрелки прокрутки ленты ------------------------------------------------ */

.strip__nav { display: flex; gap: 8px; flex: 0 0 auto; }

.strip__arrow {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--r);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: var(--on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--ease), opacity var(--ease);
}
.strip__arrow:hover { background: var(--glass-line-3); }
.strip__arrow[disabled] { opacity: 0.35; cursor: default; }
.strip__arrow[disabled]:hover { background: transparent; }

/* Зона выезда: ровный тёмный фон с границей снизу, без диагональной штриховки */
.section--geo {
  background-image: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Всё помещается на экран — стрелки прячем */
.strip.is-static .strip__nav { display: none; }

/* Лента отзывов на странице услуги */
.strip__track--reviews .review {
  flex: 0 0 clamp(268px, 30vw, 400px);
  scroll-snap-align: start;
}

/* ==========================================================================
   СТРАНИЦА «СПАСИБО»
   ==========================================================================
   Шапка страницы — общий блок .page-hero, отдельных стилей ей не нужно.
   Здесь только то, чего больше нигде нет.
   ========================================================================== */

/* --- Когда именно (в карточках «Что дальше») ----------------------------- */

.thanks__when {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* --- Куда пойти, пока ждёшь ---------------------------------------------- */

.thanks__link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(18px, 2vw, 26px);
  color: var(--text);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.thanks__link:hover {
  border-color: var(--line-card);
  box-shadow: var(--shadow-card);
  color: var(--text);
}

.thanks__link-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: var(--r);
  background: var(--bg-icon-blue);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.thanks__link-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.25;
  color: var(--text);
}

.thanks__link-text { font-size: 13.5px; line-height: 1.55; color: var(--text-muted-2); }

.thanks__link-action {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--blue-hover);
}


/* ---------------------------------------------------------------------------
   Зелёный кружок с галочкой над заголовком — только на «Спасибо»

   Цвет — var(--green), тот же фирменный зелёный, что у цен и подтверждений
   по всему сайту. Отдельного оттенка для этой страницы намеренно нет:
   тогда зелёный на сайте перестал бы быть одним.

   Анимация проигрывается один раз при загрузке и складывается из трёх шагов,
   идущих внахлёст:

     1. кружок появляется с лёгким перелётом (520 мс)
     2. галочка внутри прорисовывается, как будто её ведут пером (с 300 мс)
     3. от кружка один раз расходится мягкое кольцо (с 380 мс)

   Всё вместе укладывается меньше чем в полторы секунды и ничем не мешает:
   человек уже прочитал «Заявка принята», пока оно доигрывает.
--------------------------------------------------------------------------- */
.page-hero__mark {
  position: relative;
  width: clamp(64px, 6vw, 84px);
  height: clamp(64px, 6vw, 84px);
  border-radius: 50%;
  background: var(--green);
  color: var(--on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(18px, 2.2vw, 28px);

  animation: mark-in 520ms cubic-bezier(.34, 1.4, .64, 1) both;
}

/* Кольцо, расходящееся от кружка. Только оформление, разметки не требует */
.page-hero__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--green);
  animation: mark-ring 900ms 380ms ease-out both;
}

/* Прорисовка самой галочки.

   Линия галочки в системе координат значка длиной около 20 единиц.
   Ставим пунктир длиной 22 и сдвигаем его так, что штрих оказывается
   за пределами линии — галочки не видно. Затем сдвиг уводим в ноль,
   и штрих «въезжает» на место. Это обычный приём для рисующихся линий. */
.page-hero__mark .icon path {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  animation: mark-draw 420ms 300ms cubic-bezier(.65, 0, .35, 1) forwards;
}

@keyframes mark-in {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes mark-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes mark-ring {
  from { opacity: .5; transform: scale(1); }
  to   { opacity: 0;  transform: scale(1.5); }
}

/* Если в системе выключены анимации — показываем сразу готовый вид.
   Сбросить сдвиг пунктира здесь обязательно: без этого галочка
   осталась бы невидимой, ведь рисовать её было бы нечему. */
@media (prefers-reduced-motion: reduce) {
  .page-hero__mark,
  .page-hero__mark .icon path {
    animation: none;
  }
  .page-hero__mark .icon path {
    stroke-dashoffset: 0;
  }
  .page-hero__mark::after {
    display: none;
  }
}


/* ==========================================================================
   ЛЕНТУ МОЖНО ТАЩИТЬ МЫШЬЮ
   --------------------------------------------------------------------------
   Курсор-ладонь подсказывает, что ленту можно потянуть. Пока тянут —
   ладонь сжимается, а выделение текста отключается: иначе при быстром
   движении подсвечиваются заголовки карточек.

   Только для мыши. На телефоне курсора нет, а прокрутка пальцем работает
   средствами браузера и ни в каких подсказках не нуждается.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {

  /* Ладонь показываем только когда листать действительно есть что.
     Класс is-static ставит сам скрипт ленты, когда карточки помещаются
     целиком, — там ладонь обманывала бы. */
  [data-carousel]:not(.is-static) .strip__track {
    cursor: grab;
  }

  [data-carousel]:not(.is-static) .strip__track.is-dragging {
    cursor: grabbing;
    user-select: none;
  }

  /*
     Пока тащим, содержимое ленты курсор не перехватывает.

     Без этого ладонь пропадала бы каждый раз, когда указатель проходит
     над ссылкой карточки: браузер рисовал бы «палец». Заодно отменяются
     наведения — карточки не подсвечиваются вслед за курсором.

     Это безопасно: движения указателя во время перетаскивания приходят
     самой ленте (она их захватывает), а класс снимается раньше, чем
     браузер отправит клик.
  */
  .strip__track.is-dragging * {
    cursor: grabbing;
    pointer-events: none;
  }
}


/* ==========================================================================
   РАЗМЕР НАЖИМАЕМЫХ ЭЛЕМЕНТОВ НА ТЕЛЕФОНЕ
   --------------------------------------------------------------------------
   Google проверяет, что по каждой ссылке и кнопке можно уверенно попасть
   пальцем: не меньше 48×48 точек. Если целей меньше — снижает оценку
   страницы и в отчёте пишет «интерактивные элементы расположены слишком
   близко друг к другу».

   Замер главной страницы на экране 375 точек показал 44 такие цели из 102.
   Больше всего — ссылки в подвале: их 29, высота 38. Палец между соседними
   строками промахивается, и человек попадает не туда, куда целился.

   Что здесь поднято до 48:
     · ссылки в подвале и в столбце контактов;
     · кнопки — были 46, не хватало двух точек;
     · стрелки у лент — были 40;
     · телефон в верхней строке — был 30;
     · поле ввода в форме — само поле 20 точек высотой, палец попадал
       в него только точным касанием.

   Только для телефонов и планшетов: на компьютере мышь попадает точно,
   и раздувать там элементы незачем — вид страницы остаётся прежним.

   ВАЖНО, ГДЕ ЭТОТ БЛОК ЛЕЖИТ. Он должен быть в pages.css, потому что
   файлы стилей подключаются по порядку: tokens, base, layout, components,
   pages. Положишь это правило в layout.css — и components.css, который
   идёт позже, вернёт кнопкам прежние 46 точек. Проверено: так и вышло
   с первого раза.
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {

  /* --- Подвал: самая заметная часть проблемы ------------------------------ */

  .footer__links a,
  .footer__contacts a {
    min-height: 48px;
  }

  /* Промежуток можно убрать: высота строки теперь и так разводит ссылки */
  .footer__links { gap: 0; }

  /* --- Кнопки: не хватало двух точек -------------------------------------- */

  .btn,
  .strip__arrow {
    min-height: 48px;
  }

  /*
     Телефон в служебной полосе — особый случай.

     Поднять ему высоту до 48, как остальным, нельзя: полоса вырастет
     вместе с ним и займёт на телефоне вдвое больше места, чем должна
     служебная строка. Замерено: было 66 точек вместо 38.

     Поэтому увеличиваем не саму ссылку, а НЕВИДИМУЮ область вокруг неё.
     Слой растянут за края ссылки и добирает до 48 точек по высоте,
     но в поток вёрстки не попадает и полосу не двигает: палец попадает
     уверенно, а полоса остаётся тонкой.
  */
  .topbar__phone::after {
    content: "";
    position: absolute;

    /* Ровно во всю высоту полосы: сверху и снизу добираем её собственные
       отступы, тем же clamp, что и у .topbar. Больше растягивать некуда —
       ниже начинается шапка, она выше по слою и нажатие перехватит. */
    inset: calc(-1 * clamp(6px, 0.55vw, 9px)) -12px;
  }

  .strip__arrow {
    width: 48px;
    height: 48px;
  }

  /*
     Поле формы. Сама строка ввода — 20 точек высотой, и попасть в неё
     пальцем можно было только точным касанием. Расширяем не рамку,
     а сам ввод: подчёркивание и вид поля от этого не меняются, просто
     область попадания становится во всю высоту.
  */
  .field__input {
    min-height: 30px;
  }

  .field {
    padding-top: 4px;
  }

  /* Нижняя строка подвала и логотип — тоже не дотягивали */
  .footer__bottom a,
  .logo {
    min-height: 48px;
    display: flex;
    align-items: center;
  }
}


/* ==========================================================================
   ПОСЛЕДНЯЯ КАРТОЧКА ЛЕНТЫ ПРИЛИПАЕТ КОНЦОМ, А НЕ НАЧАЛОМ
   --------------------------------------------------------------------------
   Все карточки прилипают левым краем к левому краю ленты. Для последней
   это недостижимо, и вот почему — цифры замерены на «Сданных объектах»
   при ширине экрана 375:

       карточка 268 + промежуток 16   →  шаг 284
       пять карточек                  →  точка прилипания пятой = 1136
       вся прокрутка ленты            →  максимум 1061

   1136 больше 1061: чтобы поставить последнюю карточку началом к краю,
   ленте пришлось бы проехать дальше, чем она вообще может. Браузер
   упирался в конец, прилипание тянуло назад к четвёртой, и лента
   замирала в случайном месте — последняя карточка обрезана справа,
   слева пустота. Особенно заметно при быстрых нажатиях на стрелку.

   Решение: последняя карточка прилипает ПРАВЫМ краем к правому краю
   ленты. Такая точка достижима — она ровно в конце прокрутки, и лента
   останавливается там, где и должна.
   ========================================================================== */

.strip__track > :last-child {
  scroll-snap-align: end;
}