/* =============================================================================
   Шаблон Lead Link · холодильники · вариант 2 «ХолодПрофи» (сайт №07)
   Вид ПОВТОРЯЕТ макет 07_ХолодПрофи (правило K1), тексты свои (K2, A7).

   ⚠️ ТЕЛЕФОН ГЛАВНЫЙ (правило L). Файл написан от узкого экрана к широкому:
      сначала телефон, потом 700, потом 1024. Ни одна фотография на телефоне
      не спрятана, картинки просто уезжают под текст.

   Чем этот сайт обязан отличаться от соседей по сетке (паспорт вида, файл 09):
     · шрифт Inter (у №1 Onest, у №3 Montserrat);
     · палитра «лёд + огонь»: чернильный тёмно-синий и морковный оранжевый,
       секции чередуются белой и ледяной бело-голубой полосой всю страницу;
     · кнопки ПИЛЮЛЯМИ (радиус 999) со стрелкой, а не скруглённые прямоугольники;
     · цены построчной таблицей «работа / гарантия / цена», клик по строке
       открывает окно с формой; карточек-цен и цен-пилюль нет вовсе;
     · снежинка сквозным мотивом: значок сайта, логотип, декор-лёд у баннера;
     · «Лучшие работники» и «Подарки недели» стоят парой в одной секции;
     · портретов и рукописных выносок нет ни одной (в макете они сочинены).
   Цвета сняты пипеткой с самого макета (scripts/_ll_pipetka.cjs):
   кнопка #FC4F08, крупный заголовок #1A2B42, ледяная полоса #F3F8FE,
   плитка логотипов #F4F9FE, значки первого экрана #558FFB.

   ⛔ Не переименовывать классы состояний: is-stuck, is-bad, is-on, is-sending,
      is-done. Их ставит app.js, и без них форма молча перестанет отвечать.
   ⚠️ Боковой отступ страницы живёт в --pad. Всё, что вылезает за край
      (полосы на всю ширину, карусели), равняется на НЕЁ, а не на своё число.
   ⚠️ padding у элемента с классом .wrap писать ТОЛЬКО как X var(--pad) Y:
      у .wrap поле задано сокращением padding:0 var(--pad), и своё сокращение
      с нулём по бокам стирает его начисто.
   ========================================================================== */

/* ── Шрифты: лежат у нас, обращений к чужим доменам нет ─────────────────── */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Inter-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Inter-400-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;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/Inter-500-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/Inter-500-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;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/Inter-600-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/Inter-600-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;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Inter-700-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Inter-700-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;}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/Inter-800-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/Inter-800-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;}

/* ── Токены. Цвета сняты пипеткой с макета 07_ХолодПрофи ───────────────── */
:root{
  --main:#FD5209;        /* акцент: кнопки, цены, цифры, «Профи» в логотипе */
  --main-d:#E24503;      /* наведение и нажатие */
  --main-l:#FFF0E8;      /* тёплая подложка под оранжевый значок */
  --main-line:#FFC9AE;   /* оранжевая обводка полей у баннера скидки */
  --sky:#F3F8FE;         /* ледяная полоса секции */
  --sky2:#E9F3FE;        /* кружок под синим значком первого экрана */
  --sky-line:#DCE8F7;    /* рамки полей и плиток */
  --blue:#5A9BF9;        /* линии значков первого экрана */
  --ink:#20314B;         /* основной тёмно-синий, почти чернильный */
  --ink-d:#12223A;       /* самые жирные заголовки уходят темнее */
  --text:#56657F;
  --mute:#7C8AA0;
  --line:#E7EEF7;
  --paper:#ffffff;
  --ok:#17A06A;

  --f:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --pad:20px;            /* боковое поле: на телефоне 20, дальше шире */
  --hd:58px;
  --wrap:1180px;
  --r:16px;              /* скругление карточек макета */
  --r-b:22px;            /* скругление широких полос-баннеров */
  --ten:0 8px 26px rgba(32,49,75,.07);
  --ten-k:0 4px 16px rgba(32,49,75,.06);
}

/* ── Основа ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hd) + 10px)}
body{margin:0;background:var(--paper);color:var(--text);font:400 14px/1.45 var(--f);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
/* Страховка: значок без своего правила не должен разворачиваться
   в полотно 300x150 (это размер svg по умолчанию). */
svg{max-width:100%;vertical-align:middle}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--main);outline-offset:2px;border-radius:6px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

h1,h2,h3{margin:0;color:var(--ink-d);font-weight:800;letter-spacing:-.02em;line-height:1.16;text-wrap:balance}
h1{font-size:clamp(25px,6vw,42px)}
h2{font-size:clamp(21px,4.6vw,32px)}
h3{font-size:clamp(18px,3.8vw,25px)}
.sub{font-size:14px;line-height:1.45;color:var(--mute);margin:8px 0 0;max-width:62ch}
.sec{padding:36px 0}
.sec--sky{background:var(--sky)}
.sec__h{margin:0 0 20px}
.nw{white-space:nowrap}
/* Номер телефона внутри текста: ссылка, но выглядит как часть предложения. */
.tel-l{color:var(--main);font-weight:700;text-decoration:none}
.tel-l:hover{text-decoration:underline}

/* ── Кнопки: ПИЛЮЛИ, как в макете ───────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
  padding:0 24px;border:0;border-radius:999px;font-weight:700;font-size:14.5px;line-height:1.1;
  text-align:center;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s}
.btn svg{fill:none;stroke:currentColor;stroke-width:2}
.btn--main{background:var(--main);color:#fff;box-shadow:0 6px 16px rgba(253,82,9,.26)}
.btn--main:hover{background:var(--main-d)}
.btn--line{background:#fff;color:var(--main);box-shadow:inset 0 0 0 2px var(--main)}
.btn--line:hover{background:var(--main-l)}
.btn--w{width:100%}
.btn--sm{min-height:44px;font-size:14px;padding:0 20px;box-shadow:none}
/* «Позвонить» в герое нужна только на телефоне: на компьютере номер в шапке */
.btn--zvon{display:flex;width:100%;margin-top:8px;background:#fff;color:var(--ink);
  box-shadow:inset 0 0 0 2px var(--sky-line)}
.btn--zvon svg{stroke:var(--main)}

/* ── Шапка: белая, всё в одну строку (как на макете) ────────────────────── */
.hd{position:sticky;top:0;z-index:60;background:#fff;height:var(--hd);display:flex;align-items:center;
  border-bottom:1px solid var(--line);transition:box-shadow .18s}
.hd.is-stuck{box-shadow:0 4px 18px rgba(32,49,75,.09)}
.hd__in{display:flex;align-items:center;gap:10px;width:100%}
/* min-height: логотип это ссылка на верх страницы, пальцем по 30 px не попасть. */
.hd__logo{display:flex;align-items:center;gap:9px;margin-right:auto;min-width:0;min-height:44px}
.hd__mark{width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:var(--main);
  display:grid;place-items:center;box-shadow:0 4px 12px rgba(253,82,9,.28)}
.hd__mark svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:1.9}
.hd__wds{min-width:0}
/* ⛔ Имя сайта НЕ режем многоточием: на сайте №3 автор поймал обрезанное
   название на телефоне. Лучше уменьшить кегль (медиазапросы ниже). */
.hd__name{display:block;color:var(--ink-d);font-weight:800;font-size:17.5px;line-height:1.05;
  letter-spacing:-.02em;white-space:nowrap}
.hd__name i{font-style:normal;color:var(--main)}
.hd__sub{display:none}
.hd__nav{display:none}
.hd__time{display:none}
.hd__tel{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--main);
  font-weight:700;font-size:14px}
.hd__tel svg{width:16px;height:16px;fill:none;stroke:var(--main);stroke-width:2}
.hd__cta{display:none}

/* ── Формы ──────────────────────────────────────────────────────────────── */
.frm{margin:0}
.frm__row{display:grid;gap:8px}
/* Парная строка «поле + кнопка». На телефоне в столбик (кнопка во всю ширину,
   в неё проще попасть пальцем), от 700 px в одну строку, как в макете. */
.frm__row--pair{grid-template-columns:1fr}
.inp{width:100%;min-height:48px;padding:0 16px;border:1.5px solid var(--sky-line);border-radius:999px;
  background:#fff;font-size:14.5px;transition:border-color .15s,box-shadow .15s}
.inp--t{min-height:96px;padding:13px 16px;border-radius:18px;resize:vertical;line-height:1.45}
.inp:focus{outline:0;border-color:var(--main);box-shadow:0 0 0 3px rgba(253,82,9,.16)}
.inp::placeholder{color:#9AA8BC}
.inp.is-bad{border-color:#E5484D;box-shadow:0 0 0 3px rgba(229,72,77,.18)}
.frm__err{display:none;font-size:12.5px;color:#C42B30;margin:8px 0 0;font-weight:600}
.frm__err.is-on{display:block}
/* Приписка о данных: 11 px и серым, 12 автор забраковал (правило D2).
   ⚠️ Сверху 14 px, а не 6: 6 читаются как наезд текста на поле (правило I6). */
.frm__note{font-size:11px;line-height:1.4;color:#8494A6;margin:14px 0 0;text-wrap:pretty}
.frm__note a{color:var(--main);text-decoration:underline}
.done{display:none;border-radius:var(--r);padding:16px;background:rgba(23,160,106,.1);
  border:1px solid rgba(23,160,106,.45)}
.done.is-on{display:block}
.done__t{color:var(--ink-d);font-weight:800;font-size:17px;margin:0;line-height:1.25}
.done__d{font-size:13.5px;color:var(--text);margin:6px 0 0}
.frm.is-done .frm__row,.frm.is-done .frm__note,.frm.is-done .frm__err,.frm.is-done .btn--zvon{display:none}
.frm__t{margin:0 0 12px;color:var(--ink-d);font-weight:800;font-size:18px;line-height:1.25}

/* ── Герой ──────────────────────────────────────────────────────────────── */
.hero{background:linear-gradient(180deg,#FFFFFF 0%,#F1F7FE 100%)}
/* ⛔ Боковое поле писать ОБЯЗАТЕЛЬНО: padding:X 0 Y стёр бы поле .wrap. */
.hero__in{padding:24px var(--pad) 0;display:grid;gap:22px}
.hero__txt{min-width:0}
/* Город отдельной строкой (правило B1). ⛔ Кегль НЕ уменьшать: это часть
   заголовка, а не подпись, мелкий город автор забраковал 20.09.2026. */
.hero__gorod{display:block}
.hero__niz{display:block}
/* Цена плашкой-пилюлей прямо в заголовке, как «от 550 руб» в оригинале. */
.hero__cena{display:inline-block;vertical-align:middle;margin-top:6px;padding:4px 14px;border-radius:999px;
  background:var(--main);color:#fff;font-size:.62em;font-weight:800;white-space:nowrap}
.hero__pod{margin:14px 0 0;font-size:15px;line-height:1.45;color:var(--text);max-width:46ch}
/* Белая карточка формы: в макете формы на первом экране нет вовсе, но у своего
   шаблона она есть и это главный сбор заявок (правило K3). */
.hero__card{margin-top:20px;background:#fff;border-radius:var(--r-b);padding:18px;
  box-shadow:var(--ten);border:1px solid var(--line)}
.hero__brow{margin:0;color:var(--main);font-weight:800;font-size:11.5px;letter-spacing:.09em}
.hero__note{margin:8px 0 0;font-size:13.5px;line-height:1.45;color:var(--text)}
.hero__free{margin:6px 0 14px}
.hero__free u{color:var(--ink-d);font-weight:700;font-size:13.5px;
  text-decoration:underline;text-decoration-color:var(--main);text-underline-offset:3px}
/* ⛔ На телефоне фотографию НЕ прячем (правило L2): она уезжает под форму
   и ложится вровень с низом первого экрана. Скруглён только верхний левый
   угол крупным радиусом, как в макете. */
.hero__foto{margin-inline:calc(var(--pad) * -1);overflow:hidden}
.hero__foto img{width:100%;height:auto;border-radius:28px 0 0 0}

/* ── Три преимущества: родной блок hol2 ─────────────────────────────────── */
.prm{list-style:none;margin:0;padding:0;display:grid;gap:12px}
/* ⛔ Не flex: у карточки ТРИ ребёнка (значок, заголовок, описание), и flex
   поставил бы их в один ряд тремя колонками, разрубив текст. */
.prm__c{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:14px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:16px;box-shadow:var(--ten-k)}
.prm__i{grid-row:1 / span 2;width:50px;height:50px;border-radius:50%;background:var(--sky2);
  display:grid;place-items:center}
.prm__i svg{width:24px;height:24px;fill:none;stroke:var(--blue);stroke-width:1.8}
.prm__c b{align-self:end;color:var(--ink-d);font-weight:800;font-size:15.5px;line-height:1.25}
.prm__c b span{color:var(--main)}
.prm__c p{align-self:start;margin:4px 0 0;font-size:13px;line-height:1.4;color:var(--mute)}
/* Значки здесь БЕЗ подложки и оранжевые, как в макете: второй рисунок значка
   на странице, чтобы блоки не выглядели одинаково. */
.why__l svg{flex:0 0 24px;fill:none;stroke:var(--main);stroke-width:1.9}

/* ── «Мы ремонтируем»: родной блок hol2 ─────────────────────────────────── */
.prod{list-style:none;margin:0;padding:0;display:grid;gap:12px}
/* Колонкой: кнопка прижата к низу, ряд карточек одной высоты (правило C4). */
.prod__c{display:flex;flex-direction:column;align-items:flex-start;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--ten-k)}
.prod__i{width:54px;height:54px;border-radius:18px;background:var(--sky2);display:grid;
  place-items:center;margin-bottom:12px}
.prod__i svg{width:26px;height:26px;fill:none;stroke:var(--blue);stroke-width:1.7}
.prod__c b{color:var(--ink-d);font-weight:800;font-size:16.5px;line-height:1.25}
.prod__c p{margin:8px 0 16px;font-size:13.5px;line-height:1.45;color:var(--mute);flex:1}

/* ── Прайс: построчная таблица, клик по строке открывает окно ───────────── */
.price{background:#fff;border-radius:var(--r-b);padding:8px;box-shadow:var(--ten);
  border:1px solid var(--line)}
/* Шапка колонок нужна только там, где строка идёт в один ряд (от 700). */
.price__h{display:none}
.price__l{list-style:none;margin:0;padding:0}
.price__l li + li{border-top:1px solid var(--line)}
.price__r{display:grid;grid-template-columns:1fr auto;gap:4px 12px;width:100%;
  min-height:56px;padding:12px 10px;border:0;background:none;border-radius:12px;
  text-align:left;align-items:center;transition:background .15s}
.price__r:hover{background:var(--sky)}
.price__n{grid-column:1;color:var(--ink-d);font-weight:600;font-size:14px;line-height:1.35}
.price__g{grid-column:1;color:var(--mute);font-size:12.5px;line-height:1.3}
.price__c{grid-column:2;grid-row:1 / span 2;color:var(--main);font-weight:800;font-size:15px;
  white-space:nowrap;justify-self:end}
/* «Заказать» на телефоне не показываем: по строке и так жмут пальцем целиком,
   а лишняя ссылка рядом с ценой съедает место и путает цель касания. */
.price__z{display:none}

/* ── Полоса-призыв под прайсом ──────────────────────────────────────────── */
.cta{margin-top:18px;border-radius:var(--r-b);padding:22px 18px;
  background:linear-gradient(135deg,#FFF3EC 0%,#FFFFFF 55%,#EFF6FE 100%);
  border:1px solid var(--line);display:grid;gap:16px}
.cta__i{width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(253,82,9,.16)}
.cta__i svg{width:26px;height:26px;fill:none;stroke:var(--main);stroke-width:1.8}
.cta h3{line-height:1.25}

/* ── «Лучшие работники» и «Подарки недели» парой в одной секции ──────────
   ⛔ Две колонки тут НЕ делаем ни на какой ширине. Splide считает perPage по
   ширине ОКНА, а не колонки: в узкой колонке на 768 он ставил бы 3 карточки
   по 143 px, и карточка мастера превращалась в кашу. Блоки идут друг под
   другом во всю ширину, а парой их держит общая секция. */
/* ⛔ Ряд сетки тоже не сжимается ниже содержимого: без min-width:0 у детей
   вложенный блок «Подарки» распирал секцию до 2376 px при окне 768. */
.dvoe{display:grid;gap:16px;min-width:0}
/* Карточка мастера: имя и три настоящие цифры hol4. Фотографий у четырёх из
   пяти нет, и ЗАГЛУШКУ вместо лица мы не ставим (правило J4) — карточка
   построена на цифрах, а не на портрете. */
.rab{height:100%;display:flex;flex-direction:column;background:var(--sky);border-radius:var(--r);
  padding:16px}
/* ⛔ Ячейки сетки по умолчанию не сжимаются ниже своего содержимого, и блок
   «Подарки» распирало до 2376 px при окне 768 (картинка была ни при чём).
   min-width:0 разрешает колонкам сжиматься. */
.dar,.dar__l,.dar__l li,.dar__l li > *{min-width:0}

/* ── Отзывы ─────────────────────────────────────────────────────────────── */
/* Раскладку ряда задаёт карусель (Splide), здесь только вид карточек.
   Верхнее поле больше остальных: под кавычкой, она лежит в углу абсолютом. */
.rev{position:relative;height:100%;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:54px 18px 18px;box-shadow:var(--ten-k)}
/* ⛔ Кавычка ВЫНЕСЕНА ИЗ ПОТОКА. В потоке она занимала блок 48 px при рисунке
   26 px, и над текстом отзыва висела пустая полоса. Явная высота не помогает:
   браузер считает размер этого svg по-своему. */
.rev__q{position:absolute;top:18px;left:18px;width:26px;fill:var(--main);opacity:.3}
/* ⚠️ Межстрочный 1.6 делает текст рыхлым: у рабочих шаблонов сетки 1.4-1.45. */
.rev p{margin:0;font-size:13.5px;line-height:1.45;color:var(--text);flex:1}
.rev__f{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line)}
/* Кружок с буквой вместо аватарки: фотографий у отзывов нет и в оригинале. */
.rev__a{width:40px;height:40px;flex:0 0 40px;border-radius:50%;background:var(--sky2);
  display:grid;place-items:center;color:var(--main);font-weight:800;font-size:17px}
.rev__f b{color:var(--ink-d);font-size:14.5px;font-weight:700}

/* ── «О компании» ───────────────────────────────────────────────────────── */
.about{display:grid;gap:18px}
.about__f{position:relative;border-radius:var(--r-b);overflow:hidden;box-shadow:var(--ten)}
.about__f img{width:100%}
/* Подпись на фото: название компании и её тег, как в оригинале. */
.about__cap{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;
  background:linear-gradient(180deg,rgba(18,34,58,0) 0%,rgba(18,34,58,.82) 62%)}
.about__cap b{display:block;color:#fff;font-weight:800;font-size:18px;letter-spacing:-.02em}
.about__cap b i{font-style:normal;color:#FFAE84}
.about__cap span{display:block;margin-top:2px;color:rgba(255,255,255,.82);font-size:12.5px}
/* min-width:0 колонке сетки: длинное слово иначе распирает колонку шире экрана */
.about__t{min-width:0}
.about__p{margin:0;font-size:14.5px;line-height:1.45;color:var(--text)}
.about__l{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px}
.about__l li{display:flex;align-items:flex-start;gap:12px}
.about__i{width:44px;height:44px;flex:0 0 44px;border-radius:14px;background:var(--main-l);
  display:grid;place-items:center}
.about__i svg{width:22px;height:22px;fill:none;stroke:var(--main);stroke-width:1.8}
.about__l b{display:block;color:var(--ink-d);font-weight:700;font-size:15px;line-height:1.3}
.about__l i{display:block;margin-top:3px;font-style:normal;font-size:12.5px;line-height:1.4;color:var(--mute)}
/* Пять пунктов нанизаны на оранжевую линию с точками: приём из макета,
   больше нигде на странице такой связки нет. */
.resp__l{list-style:none;margin:16px 0 0;padding:0 0 0 26px;position:relative}

/* ── Баннер скидки 10% ──────────────────────────────────────────────────── */
.skidka{position:relative;overflow:hidden;margin-top:22px;border-radius:var(--r-b);
  padding:22px 18px;background:linear-gradient(135deg,#EAF3FE 0%,#F7FBFF 55%,#FFF1E9 100%);
  border:1px solid var(--line);display:grid;gap:16px}
/* Лёд с мятой: единственный декоративный предмет на странице, из макета. */
.skidka__led{position:absolute;right:-26px;bottom:-22px;width:130px;opacity:.55;
  pointer-events:none;z-index:0}
.skidka .inp{border-color:var(--main-line)}

/* ── «Заработает как новенький» ─────────────────────────────────────────── */
.novyj{display:grid;gap:18px;align-items:center;background:#fff;border-radius:var(--r-b);
  padding:20px 18px;box-shadow:var(--ten);border:1px solid var(--line)}
.novyj__f img{width:52%;max-width:210px;margin:0 auto}
.novyj__t{min-width:0}
.novyj h2 span{display:block;color:var(--main)}
.novyj .sub{margin-bottom:16px}

/* ── «Наши контакты» ────────────────────────────────────────────────────── */
.kont{display:grid;gap:18px}
.kont__f{background:#fff;border-radius:var(--r-b);padding:18px;box-shadow:var(--ten);
  border:1px solid var(--line)}
/* ⛔ nowrap обязателен: на 320 номер рвался на две строки, а значок оставался
   висеть слева отдельно от него (поймано автором на сайте №3). */
.kont__tel{display:inline-flex;align-items:center;gap:10px;min-height:48px;
  white-space:nowrap;font-weight:800;font-size:clamp(20px,5.6vw,30px);color:var(--main);
  letter-spacing:-.02em}
.kont__tel svg{flex:0 0 22px;fill:none;stroke:currentColor;stroke-width:2}

/* ── Подвал ─────────────────────────────────────────────────────────────── */
.ft{background:var(--sky);border-top:1px solid var(--line);padding:24px 0}
.ft__in{display:grid;gap:16px;align-items:center}
/* Зазор между строками 20 px, а не 16: ровно на столько ссылки ниже
   «вырастают» невидимым отступом, и зоны попадания соседних строк смыкаются
   встык, а не налезают друг на друга (оговорка правила 10.1). */
.ft__nav{display:flex;flex-wrap:wrap;gap:20px 18px;font-size:14px;color:var(--text);font-weight:500}
/* ⛔ Ссылки меню давали зону попадания 23 px, пальцем в них тесно. Отступ
   сверху и снизу гасим отрицательным полем: зона растёт до 43 px, а шрифт,
   цвет, расстояния и высота подвала не меняются ни на пиксель. */
.ft__nav a{display:inline-block;padding-block:10px;margin-block:-10px}
.ft__nav a:hover{color:var(--main)}
.ft__time,.ft__tel{display:grid;gap:1px;font-size:12.5px;color:var(--mute);line-height:1.3}
.ft__time b{color:var(--ink-d);font-weight:800;font-size:15px}
.ft__time i{font-style:normal}
.ft__tel a{display:inline-block;min-height:44px;padding-block:11px;margin-block:-11px;
  color:var(--main);font-weight:800;font-size:16px}
/* Реквизиты: служебная строка, а не часть вида. Тот же фон, что у подвала,
   мелко, серым и по центру (правило I1, на все сайты). */
.ft__low{margin-top:18px;padding-top:14px;border-top:1px solid var(--sky-line);
  display:grid;gap:2px;text-align:center;font-size:11.5px;line-height:1.5;color:#8494A6}
.ft__low p{margin:0;text-wrap:pretty}
.ft__low a{color:var(--main);text-decoration:none}
.ft__low a:hover{text-decoration:underline}
.ft__tochka{color:var(--sky-line);margin:0 2px}

/* ── Всплывающее окно ───────────────────────────────────────────────────── */
/* ⛔ Обычное скрытие [hidden] перебивается своим display:grid, пишем явно. */
.okno[hidden]{display:none}
/* ⛔ Не place-items:center: при высокой форме на коротком экране центрирование
   срезает ВЕРХ окна и до крестика не добраться. margin:auto центрирует так же,
   но при нехватке места честно отдаёт прокрутку. */
.okno{position:fixed;inset:0;z-index:90;display:flex;padding:var(--pad);overflow-y:auto}
.okno__fon{position:fixed;inset:0;background:rgba(18,34,58,.6)}
.okno__box{position:relative;margin:auto;width:100%;max-width:430px;background:#fff;
  border-radius:22px;padding:22px}
.okno__x{position:absolute;right:10px;top:10px;width:40px;height:40px;border:0;background:none;
  font-size:27px;line-height:1;color:var(--mute);border-radius:50%}
.okno__x:hover{background:var(--sky);color:var(--ink-d)}
.okno__t{margin:0 30px 16px 0;color:var(--ink-d);font-weight:800;font-size:18px;line-height:1.25}
.okno__rabota{margin:-6px 0 16px;padding:10px 14px;border-radius:14px;background:var(--main-l);
  color:var(--main);font-size:13px;font-weight:700;line-height:1.35}
.okno__rabota[hidden]{display:none}
/* Внутри окна карточка формы уже лишняя: рамка в рамке. */
.okno .frm--l{border:0;padding:0;margin:0;max-width:none;box-shadow:none}
.okno .done__d{margin-top:12px}

/* ── Нижняя панель на телефоне ──────────────────────────────────────────── */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:8px var(--pad);
  display:grid;grid-template-columns:1fr 1fr;gap:8px;transform:translateY(105%);transition:transform .22s}
.bar.is-on{transform:none}
.bar .btn{min-height:48px;font-size:14.5px;padding:0 8px}

/* ── Карусели (Splide 4; в рабочих шаблонах сетки это Swiper) ────────────
   ⛔ Своя лента на scroll-snap автором забракована: стрелки висели за краем
   блока и гасли на концах. Лента идёт ПО КРУГУ, стрелки лежат ВНУТРИ блока
   и не поверх карточек, под лентой ряд точек. */
.sl{position:relative;padding-bottom:26px}
.sl .splide__track{overflow:hidden;border-radius:var(--r)}
/* Карточки в ряду одной высоты: слайд тянется по самому высокому (правило C4). */
.sl .splide__list{align-items:stretch}
.sl .splide__slide{height:auto}
/* ⛔ Растягиваем ТОЛЬКО карточку, а не всех детей слайда: правило цепляло бы
   и значок кавычки (он тоже прямой ребёнок), svg растягивался на всю высоту
   карточки, рисунок вписывался по центру, и кавычка уезжала к подписи. */
.sl .splide__slide > *:not(.rev__q){height:100%}
/* Обёртка стрелок места не занимает: сами стрелки стоят абсолютом. */
.sl__arrows{position:static}
.sl__b{position:absolute;top:calc((100% - 34px) / 2);transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--main);
  display:none;place-items:center;box-shadow:0 4px 16px rgba(32,49,75,.18);
  transition:background .15s,color .15s}
.sl__b:hover{background:var(--main);color:#fff}
.sl__b svg{fill:none;stroke:currentColor;stroke-width:2.2}
.sl .splide__arrow--prev{left:2px}
.sl .splide__arrow--prev svg{transform:rotate(180deg)}
.sl .splide__arrow--next{right:2px}
/* Точки: активная вытягивается в полоску. */
.sl__dots{position:absolute;left:0;right:0;bottom:2px;display:flex;justify-content:center;
  align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.sl__dots li{display:flex}
.sl__dots .splide__pagination__page{width:8px;height:8px;padding:0;border:0;border-radius:999px;
  background:var(--sky-line);transition:width .2s,background .2s}
.sl__dots .splide__pagination__page.is-active{width:24px;background:var(--main)}
/* Всё влезло в ряд: ни стрелок, ни точек, ни места под них (правило G4). */
.sl--celikom{padding-bottom:0}
.sl--celikom .sl__b,.sl--celikom .sl__dots{display:none}
/* ⛔ Обычное скрытие [hidden] перебивается своим display:grid, пишем явно. */
.sl__b[hidden]{display:none}

/* ═════════════════════════════════════════ «сократить движение» ═════════ */
@media (prefers-reduced-motion:reduce){
  .bar{transition:none}
  html{scroll-behavior:auto}
}

/* ═══════════════════════════════════════════ только телефон ═════════════ */
/* ⚠️ Это ОТДЕЛЬНЫЙ медиазапрос, не вложенный в «сократить движение» выше:
   на сайте №1 незакрытая скобка проглотила такой блок целиком, и карточки
   вставали столбиком, а страница вырастала на треть. */
@media (max-width:699px){
  /* ⛔ Липкая нижняя панель перекрывает самый низ страницы: под ней прятались
     реквизиты и ссылка на политику обработки данных. */
  body{padding-bottom:72px}
  /* Карточки «Мы ремонтируем» едут каруселью вбок, а не тремя экранами
     столбиком (правило D5). Прайс и отзывы листаются по-своему. */
  .prod{
    grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:82%;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    /* ⛔ Без scroll-padding снэп прижимает первую карточку к самому краю
       скроллбокса и съедает боковое поле. */
    scroll-padding-inline:var(--pad);
    scrollbar-width:none;-ms-overflow-style:none;
    margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);
    padding:4px var(--pad) 8px}
  .prod::-webkit-scrollbar{display:none}
  .prod__c{scroll-snap-align:start}
}

/* ═══════════════════════════════════════════════ от 700: планшет ═════════ */
@media (min-width:700px){
  :root{--pad:24px}
  .sec{padding:48px 0}
  .sec__h{margin-bottom:26px}
  body{font-size:14.5px}

  .hero__in{padding:34px var(--pad) 0;grid-template-columns:1.06fr .94fr;gap:26px;align-items:center}
  /* Фото тянется на всю высоту первого экрана и уходит вровень с правым краем
     контейнера, как в макете; лишнее кадрируется. */
  .hero__foto{margin:0 calc(var(--pad) * -1) 0 0;align-self:stretch;display:flex}
  .hero__foto img{border-radius:28px 0 0 0;object-fit:cover;height:100%}
  .hero__card{max-width:520px}
  .btn--zvon{display:none}
  .frm__row--pair{grid-template-columns:1fr auto}
  .frm__row--pair .btn{padding:0 26px}

  .prm{grid-template-columns:repeat(3,1fr)}
  .prm__c{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto;
    align-items:start;padding:20px}
  .prm__i{grid-row:auto;margin-bottom:12px}
  .prm__c b{align-self:auto}
  .prm__c p{align-self:auto}

  .prod{grid-template-columns:repeat(3,1fr);gap:14px}

  /* Прайс в один ряд: работа, гарантия, цена, «Заказать». Появляется и шапка
     колонок, как в оригинале. */
  .price{padding:6px 14px 14px}
  .price__h{display:grid;grid-template-columns:1fr 132px 108px 104px;gap:12px;
    padding:14px 10px 10px;color:var(--mute);font-size:12.5px;font-weight:600}
  .price__hg{grid-column:2}
  .price__hc{grid-column:3}
  .price__r{grid-template-columns:1fr 132px 108px 104px;gap:12px;min-height:52px}
  .price__n{grid-column:1;font-size:14.5px}
  .price__g{grid-column:2;font-size:13px}
  .price__c{grid-column:3;grid-row:auto;justify-self:start;font-size:15.5px}
  .price__z{grid-column:4;display:block;justify-self:end;color:var(--main);
    font-weight:700;font-size:13.5px;text-decoration:underline;text-underline-offset:3px}

  .cta{grid-template-columns:auto 1fr;align-items:center;padding:26px 30px;gap:18px 22px}
  .cta h3{grid-column:2}
  .cta .frm{grid-column:1 / -1}
  /* На планшете Splide даёт по 3 карточки мастеров в ряд, и цифра с подписью
     в одну строку уже не помещаются: ставим подпись под число. */
  .rab__l li{flex-direction:column;align-items:flex-start;gap:2px}
  /* Подарки в строку: два подарка слева, коробка справа, как в макете. */
  .dar{display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px 26px}

  .about{grid-template-columns:.85fr 1.15fr;gap:26px;align-items:center}
  .about__l{grid-template-columns:1fr 1fr;gap:16px 20px}
  /* ⛔ «Ступенька» из макета (пункты смещены по кривой) тут НЕ делается сдвигом
     текста: точка стоит абсолютом от края строки и с текстом не едет, выходит
     ровный ряд точек при рваном тексте. Линия остаётся прямой. */
  .skidka{grid-template-columns:1fr 1fr;align-items:center;padding:26px 30px;gap:20px 26px}

  .novyj{grid-template-columns:.5fr 1fr;gap:26px;padding:26px 30px}
  .novyj__f img{width:100%;max-width:210px}
  .novyj .frm__row{grid-template-columns:1fr 1fr;align-items:start}
  .novyj .frm__row .btn--w{grid-column:1 / -1}

  .kont{grid-template-columns:1fr 1fr;gap:26px;
    grid-template-areas:'h f' 't f';align-items:start}
  .kont__h{grid-area:h}
  .kont__f{grid-area:f;padding:24px}
  .kont__tel{grid-area:t;align-self:start}

  .bar{display:none}

  /* ⛔ Стрелки НЕ кладём поверх карточек: они съедают слова в крайних
     отзывах. Даём карусели боковые поля и сажаем стрелки в них. */
  .sl{padding-inline:56px}
  .sl__b{display:grid}
}

/* ═══════════════════════════════════════════ от 1024: компьютер ═════════ */
@media (min-width:1024px){
  :root{--hd:76px;--pad:32px}
  .sec{padding:64px 0}
  .sec__h{margin-bottom:34px}

  .hd__logo{margin-right:26px}
  .hd__sub{display:block;font-size:11px;color:var(--mute);line-height:1.1;margin-top:3px}
  .hd__name{font-size:20px}
  .hd__nav{display:flex;gap:24px;font-size:14px;color:var(--text);font-weight:500;margin-right:auto}
  .hd__nav a{display:inline-block;min-height:44px;padding-block:11px;margin-block:-11px}
  .hd__nav a:hover{color:var(--main)}
  /* Часы работы из макета: круглый оранжевый значок и две строки.
     ⛔ Показываем их только от 1200: на 1024 шапка со всеми пятью блоками
     (лого, меню на 4 пункта, часы, номер, кнопка) даёт 1050 px при доступных
     960 и вылезает за край экрана. Включение стоит ниже, отдельным запросом. */
  .hd__timei{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:var(--main-l);
    display:grid;place-items:center}
  .hd__timei svg{width:19px;height:19px;fill:none;stroke:var(--main);stroke-width:1.9}
  /* ⛔ nowrap обязателен: на 1440 строка ломалась внутри «10:00 – 22:00», и
     «22:00» уезжало отдельной строкой под часы (мина M2, разрыв по тире). */
  .hd__time b{display:block;color:var(--ink-d);font-weight:800;font-size:14.5px;line-height:1.1;
    white-space:nowrap}
  .hd__time i{display:block;font-style:normal;color:var(--mute);font-size:11.5px;line-height:1.2}
  .hd__tel{font-size:17px;gap:8px;margin-left:8px}
  .hd__tel svg{width:18px;height:18px}
  .hd__cta{display:inline-flex;min-height:46px;font-size:14.5px;margin-left:14px}

  .hero__in{grid-template-columns:1.02fr .98fr;gap:34px;min-height:530px;padding:48px var(--pad) 0}
  .hero__pod{font-size:16.5px}
  .hero__foto img{border-radius:40px 0 0 0}

  .prm{gap:18px}
  .prod{gap:18px}
  .prod__c{padding:24px}

  .price{padding:8px 20px 18px}
  .price__h{grid-template-columns:1fr 160px 120px 116px}
  .price__r{grid-template-columns:1fr 160px 120px 116px;padding:12px 14px}
  .cta{grid-template-columns:auto 1fr 1fr;padding:30px 40px}
  .cta h3{grid-column:2}
  .cta .frm{grid-column:3;min-width:0}
  .about{gap:40px}
  .novyj{padding:30px 44px;gap:40px}
  .kont{gap:40px}
  .ft{padding:30px 0}
  .ft__in{grid-template-columns:auto 1fr auto auto auto;gap:24px}
  .ft__nav{justify-content:center}
}

/* ═══════════════════════════════ от 1200: в шапке помещаются и часы ═════ */
@media (min-width:1200px){
  .hd__time{display:inline-flex;align-items:center;gap:9px;margin-right:4px}
}

/* ═══════════════════════════════ узкие экраны: 390 и ниже ═══════════════ */
/* ⛔ Боковое поле держим ОТДЕЛЬНО от шрифтовых сжатий. Перелом на 400 px
   захватывал бы обычный телефон (iPhone 12-15 это 390) и давал ему 16 px,
   которые автор забраковал. Шкала: 390 → 20, 360 → 16, 320 → 14. */
@media (max-width:374px){:root{--pad:16px}}
@media (max-width:339px){:root{--pad:14px}}
@media (max-width:400px){
  /* ⛔ Название сайта обрезалось многоточием: телефонная плашка съедала строку.
     На узких телефон идёт мельче, значок меньше, имя не режется. */
  .hd__name{font-size:15.5px}
  .hd__tel{font-size:12.5px;gap:5px}
  .hd__tel svg{width:15px;height:15px}
  .hd__mark{width:32px;height:32px;flex-basis:32px}
  .hd__mark svg{width:19px;height:19px}
  .hd__logo{gap:7px}
  .btn{font-size:14px;padding:0 18px}
  .bar .btn{font-size:13.5px;padding:0 4px}
  .hero__card{padding:16px}
  .prod__c,.best,.dar,.kont__f{padding:16px}
  .cta,.skidka,.novyj{padding:18px 16px}
}
@media (max-width:360px){
  .hd__name{font-size:14px}
  .hd__tel{font-size:11.5px;gap:4px}
  .hd__tel svg{width:14px;height:14px}
  .btn{font-size:13.5px}
  h1{font-size:23px}
  .price__n{font-size:13.5px}
}