/* =============================================================================
   Шаблон Lead Link · стиральные машины · вариант 1
   Основа: рабочий шаблон «1. Stir Site1» (WasherPRO). Блоки и тексты его,
   поменяны только вид и вес. Задача: не быть близнецом исходника и работать
   на телефоне лучше него.
   Что взято у соседей по сетке: цены прямо на плитках поломок (шаблон стиралки
   №4) и липкая шапка с номером (приём с сайта частного мастера).
   ========================================================================== */

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

/* ── Токены ─────────────────────────────────────────────────────────────── */
:root{
  --blue:#1B5FCC;         /* основной синий: шапка героя, заголовки, ссылки */
  --blue-d:#134BA8;
  --blue-l:#EFF5FE;       /* светлая заливка блоков */
  --blue-line:#D3E1F7;
  --sun:#FFB020;          /* кнопка действия */
  --sun-d:#F09A00;
  --ink:#111C28;
  --mute:#5A6B7A;
  --line:#E4EAF1;
  --paper:#ffffff;
  --ok:#17A06A;

  --f:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --pad:16px;            /* боковой отступ страницы: на него равняются карусели */
  --hd:58px;
  --wrap:1180px;
}

/* ── Основа ─────────────────────────────────────────────────────────────── */
*,*::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(--ink);font:400 16px/1.55 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(--sun);outline-offset:2px;border-radius:4px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.01em;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(26px,6.4vw,44px)}
h2{font-size:clamp(22px,4.6vw,34px)}
h3{font-size:clamp(17px,2.6vw,20px);font-weight:700}
.sub{font-size:clamp(15px,3.4vw,18px);line-height:1.5;color:var(--mute);margin:10px 0 0;max-width:62ch}
.sec{padding:44px 0}
.sec--l{background:var(--blue-l)}
.sec--b{background:var(--blue);color:#fff}
.sec__h{margin:0 0 22px}
.sec--b .sub{color:rgba(255,255,255,.8)}
.tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);margin:0 0 10px}
.sec--b .tag{color:#9EC4FF}

/* ── Кнопки ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:0 24px;white-space:nowrap;
  border:0;border-radius:10px;font-weight:700;font-size:16px;line-height:1;text-align:center;
  transition:background .15s ease,box-shadow .15s ease,transform .06s ease}
.btn:active{transform:translateY(1px)}
.btn--sun{background:var(--sun);color:#3B2A00;box-shadow:0 6px 16px rgba(255,176,32,.35)}
.btn--sun:hover{background:var(--sun-d)}
.btn--blue{background:var(--blue);color:#fff}
.btn--blue:hover{background:var(--blue-d)}
.btn--line{background:#fff;color:var(--blue);border:1.5px solid var(--blue-line)}
.btn--line:hover{border-color:var(--blue)}
.btn--w{width:100%}
/* Звонок в герое: на телефоне это второй путь к заявке, на десктопе
   номер и так крупно в шапке, поэтому там кнопка прячется. */
.btn--zvon{display:flex;width:100%;margin-top:10px;background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.34);font-size:15px}
.btn--zvon svg{fill:none;stroke:var(--sun);stroke-width:2.2}
.btn--zvon:hover{background:rgba(255,255,255,.22)}

/* ── Шапка ──────────────────────────────────────────────────────────────── */
/* Липкая, номер виден всё время: на телефоне это главный путь к заявке. */
.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 .2s ease}
.hd.is-stuck{box-shadow:0 4px 18px rgba(17,28,40,.1)}
.hd__in{display:flex;align-items:center;gap:12px;width:100%}
.hd__logo{display:flex;align-items:center;gap:9px;margin-right:auto;min-width:0;overflow:hidden}
.hd__mark{width:34px;height:34px;flex:0 0 34px;border-radius:9px;background:var(--blue);display:grid;place-items:center}
.hd__mark svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.9}
.hd__name{display:block;font-weight:800;font-size:18px;line-height:1.05;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd__sub{display:none}
.hd__nav{display:none}
.hd__tel{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 13px;border-radius:9px;
  background:var(--blue-l);color:var(--blue);font-weight:700;font-size:15px;white-space:nowrap;flex:0 0 auto}
.hd__tel svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.hd__cta{display:none}

/* ── Герой ──────────────────────────────────────────────────────────────── */
.hero{background:var(--blue);color:#fff;position:relative;overflow:hidden;padding:26px 0 0}
.hero::after{content:'';position:absolute;right:-12%;top:-30%;width:70%;height:150%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.1),transparent);pointer-events:none}
.hero__in{position:relative;z-index:1}
.hero h1{color:#fff}
.hero__ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.hero__ul li{display:flex;gap:9px;align-items:flex-start;font-size:15px;color:rgba(255,255,255,.92)}
.hero__ul svg{width:19px;height:19px;flex:0 0 19px;margin-top:1px;fill:none;stroke:var(--sun);stroke-width:2.4}
.hero__free{display:inline-flex;align-items:center;gap:8px;margin:16px 0 0;padding:8px 13px;border-radius:8px;
  background:rgba(255,255,255,.14);font-weight:700;font-size:15px}
.hero__foto{position:relative;margin:14px auto -6px;max-width:330px}
.hero__foto img{width:100%;filter:drop-shadow(0 18px 30px rgba(0,0,0,.28))}

/* ── Форма ──────────────────────────────────────────────────────────────── */
.frm{position:relative;margin:18px 0 0}
.frm__row{display:grid;gap:10px}
.inp{width:100%;min-height:54px;padding:0 16px;border-radius:10px;background:#fff;color:var(--ink);
  border:1.5px solid transparent;font-size:16px;font-weight:500}
.inp::placeholder{color:#93A3B4;font-weight:400}
.inp:focus{outline:none;border-color:var(--sun);box-shadow:0 0 0 3px rgba(255,176,32,.28)}
.inp.is-bad{border-color:#E5484D;box-shadow:0 0 0 3px rgba(229,72,77,.18)}
textarea.inp{min-height:96px;padding:13px 16px;resize:vertical;line-height:1.45}
.frm__note{font-size:11.5px;line-height:1.45;color:rgba(255,255,255,.62);margin:9px 0 0}
.frm__note a{text-decoration:underline;text-underline-offset:2px}
.frm__err{display:none;font-size:13px;color:#FFD0C7;margin:8px 0 0;font-weight:500}
.frm__err.is-on{display:block}
.done{display:none;border-radius:10px;padding:17px;background:rgba(23,160,106,.16);border:1px solid rgba(23,160,106,.5)}
.done.is-on{display:block}
.done__t{font-weight:800;font-size:19px;margin:0}
.done__d{font-size:14px;opacity:.82;margin:5px 0 0}
.frm.is-done .frm__row,.frm.is-done .frm__note,.frm.is-done .frm__err{display:none}
/* Формы на светлом фоне */
.frm--l .inp{border-color:var(--line)}
.frm--l .frm__note{color:var(--mute)}
.frm--l .frm__err{color:#C42B30}
.frm--l .done{background:rgba(23,160,106,.1)}

/* ── Преимущества ───────────────────────────────────────────────────────── */
.adv{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.adv li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 14px;text-align:center}
.adv__i{width:44px;height:44px;margin:0 auto 10px;border-radius:12px;background:var(--blue-l);display:grid;place-items:center}
.adv__i svg{width:23px;height:23px;fill:none;stroke:var(--blue);stroke-width:1.8}
.adv b{display:block;font-weight:700;font-size:14.5px;line-height:1.3}

/* ── Причины поломки: плитки с ценой (цены взяты у шаблона стиралки №4) ─── */
.reasons{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.reason{width:100%;background:#fff;border:1px solid var(--line);border-radius:11px;padding:13px 12px;
  display:flex;flex-direction:column;gap:5px;text-align:left;transition:border-color .15s,box-shadow .15s}
.reason:hover{border-color:var(--blue);box-shadow:0 8px 20px rgba(27,95,204,.1)}
.reason img{width:30px;height:30px;object-fit:contain;opacity:.9}
.reason b{font-weight:600;font-size:14.5px;line-height:1.25}
.reason span{margin-top:auto;font-weight:700;font-size:13px;color:var(--blue)}

/* ── Расчёт стоимости ───────────────────────────────────────────────────── */
.calc{background:var(--blue);color:#fff;border-radius:16px;padding:22px 18px;position:relative;overflow:hidden}
.calc__free{display:inline-block;margin:0 0 12px;padding:6px 12px;border-radius:99px;background:var(--sun);
  color:#3B2A00;font-weight:800;font-size:12.5px;letter-spacing:.02em}

/* ── Шаги (порядок важен, потому и пронумерованы) ───────────────────────── */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 16px 16px 56px;position:relative;counter-increment:s}
.step::before{content:counter(s,decimal-leading-zero);position:absolute;left:14px;top:13px;
  font-weight:800;font-size:19px;color:var(--blue);opacity:.45}
.step b{display:block;font-weight:700;font-size:16px;margin-bottom:4px}
.step p{margin:0;font-size:14px;color:var(--mute)}

/* ── Марки ──────────────────────────────────────────────────────────────── */
.brands{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.brands li{background:#fff;border:1px solid var(--line);border-radius:10px;height:56px;display:grid;place-items:center;padding:9px}
.brands img{max-height:22px;width:auto;object-fit:contain;filter:grayscale(1) contrast(1.35) brightness(.55)}

/* ── Документы ──────────────────────────────────────────────────────────── */
.docs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.doc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;gap:13px;align-items:flex-start}
.doc__i{width:42px;height:42px;flex:0 0 42px;border-radius:11px;background:var(--blue-l);display:grid;place-items:center}
.doc__i svg{width:22px;height:22px;fill:none;stroke:var(--blue);stroke-width:1.7}
.doc b{display:block;font-weight:700;font-size:15px;margin-bottom:4px}
.doc p{margin:0;font-size:13.5px;color:var(--mute)}

/* ── Мастера ────────────────────────────────────────────────────────────── */
.masters{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.master{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-align:center}
/* ⚠️ .master__f это span: без display:block высота НЕ применяется,
   коробка растягивается по картинке и кадрирование не работает. */
.master__f{display:block;background:var(--blue-l);height:200px;overflow:hidden}
.master__f img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.master__t{padding:11px 10px 13px}
.master b{display:block;font-weight:700;font-size:15px}
.master span{font-size:13px;color:var(--mute)}

/* ── Призыв с фото бригады ──────────────────────────────────────────────── */
.cta{background:var(--blue);color:#fff;border-radius:16px;overflow:hidden}
.cta__t{padding:22px 18px}
.cta__f img{width:100%;display:block}

/* ── Отзывы ─────────────────────────────────────────────────────────────── */
.revs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rev{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.rev__h{display:flex;align-items:center;gap:10px;margin:0 0 9px}
.rev__av{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:var(--blue-l);color:var(--blue);
  display:grid;place-items:center;font-weight:800;font-size:14px}
.rev__n{font-weight:700;font-size:15px;display:block}
.stars{display:flex;gap:2px}
.stars svg{width:13px;height:13px;fill:var(--sun)}
.rev p{margin:0;font-size:14px;line-height:1.55}

/* ── Вопросы ────────────────────────────────────────────────────────────── */
.qa{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.qa details{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.qa summary{list-style:none;cursor:pointer;padding:15px 44px 15px 16px;position:relative;font-weight:700;font-size:15px;line-height:1.35}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'';position:absolute;right:18px;top:50%;width:9px;height:9px;margin-top:-6px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(45deg);transition:transform .18s}
.qa details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.qa p{margin:0;padding:0 16px 16px;font-size:14px;line-height:1.55;color:var(--mute)}

/* ── Контакты и подвал ──────────────────────────────────────────────────── */
.cnt{display:grid;gap:22px}
.cnt__tel{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:800;font-size:clamp(23px,6vw,32px);color:#fff}
.cnt__tel svg{width:25px;height:25px;fill:none;stroke:var(--sun);stroke-width:2}
.cnt__list{list-style:none;margin:15px 0 0;padding:0;display:grid;gap:7px;font-size:14px;color:rgba(255,255,255,.82)}
.ft{background:#0F2136;color:rgba(255,255,255,.55);padding:24px 0 96px;font-size:12.5px;line-height:1.6}
.ft a{text-decoration:underline;text-underline-offset:2px}
.ft__row{display:grid;gap:10px}

/* ── Нижняя панель на телефоне ──────────────────────────────────────────── */
.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 12px calc(8px + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:1fr 1fr;gap:9px;box-shadow:0 -6px 20px rgba(17,28,40,.1);
  transform:translateY(115%);transition:transform .22s ease}
.bar.is-on{transform:none}
.bar .btn{min-height:48px;font-size:15px;padding:0 10px}
@media (prefers-reduced-motion:reduce){.bar{transition:none}}

/* ── Планшет ────────────────────────────────────────────────────────────── */
@media (min-width:700px){
  .adv{grid-template-columns:repeat(4,1fr)}
  .reasons{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:repeat(4,1fr)}
  .brands{grid-template-columns:repeat(9,1fr)}
  .docs{grid-template-columns:repeat(3,1fr)}
  .masters{grid-template-columns:repeat(4,1fr)}
  .revs{grid-template-columns:repeat(3,1fr)}
  .sec{padding:60px 0}
  .frm__row--pair{grid-template-columns:1fr auto}
  .frm__row--pair .btn{padding:0 30px}
  .cta{display:grid;grid-template-columns:1.15fr .85fr;align-items:center}
  .cta__t{padding:28px}
  .cta__f img{height:100%;object-fit:cover}
}

/* ── Десктоп ────────────────────────────────────────────────────────────── */
@media (min-width:1024px){
  :root{--hd:70px}
  .wrap{padding:0 28px}
  .hd__nav{display:flex;gap:24px;font-size:15px;color:var(--mute);font-weight:500}
  .hd__nav a:hover{color:var(--blue)}
  .hd__logo{margin-right:30px}
  .hd__sub{display:block;font-size:11.5px;color:var(--mute);line-height:1.1;margin-top:2px}
  .hd__name{font-size:20px}
  .hd__tel{margin-left:auto;font-size:19px;background:none;padding:0;height:auto}
  .hd__cta{display:inline-flex;min-height:44px;font-size:15px;margin-left:18px}
  .hero{padding:0}
  .hero__in{display:grid;grid-template-columns:1.06fr .94fr;gap:40px;align-items:center;min-height:498px;padding:36px 0 0}
  .hero__foto{margin:0;max-width:none;align-self:end}
  .hero__foto img{filter:drop-shadow(0 26px 44px rgba(0,0,0,.34))}
  .hero__ul{grid-template-columns:1fr;gap:9px}
  .btn--zvon{display:none}
  .bar{display:none}
  .cnt{grid-template-columns:1fr 1fr;gap:52px;align-items:start}
  .ft{padding:30px 0}
  .ft__row{grid-template-columns:1fr auto}
  .master__f{height:240px}
}

/* ── Узкие телефоны (320-400px) ──────────────────────────────────────────
   На 320px номер в шапке выталкивал название, а «Позвонить +7 (969) …»
   не помещался в строку. Поймал автор 18.09.2026. */
@media (max-width:400px){
  :root{--pad:12px}
  .hd__name{font-size:16px}
  .hd__tel{font-size:13.5px;padding:0 10px;gap:5px}
  .hd__mark{width:30px;height:30px;flex-basis:30px}
  .btn{font-size:15px;padding:0 16px}
  .btn--zvon .nomer{display:none}
  .bar .btn{font-size:14px;padding:0 6px}
  .reasons{gap:8px}
  .reason b{font-size:13.5px}
}
/* На 320px даже «Рассчитать стоимость ремонта» не влезает: там кегль ещё меньше. */
@media (max-width:360px){
  .btn{font-size:14px}
  .hd__name{font-size:15px}
}
/* Промежуток, где меню и кнопка в шапке уже рядом, но места ещё мало. */
@media (min-width:1024px) and (max-width:1180px){
  .hd__nav{gap:16px;font-size:14px}
  .hd__cta{padding:0 14px;font-size:14px;margin-left:12px}
  .hd__tel{font-size:17px}
}

/* ── Всплывающее окно с формой ───────────────────────────────────────────
   Было в рабочем шаблоне, я его сначала потерял. Открывается кнопкой
   «Перезвоните мне» в шапке и кнопкой в нижней панели на телефоне. */
.okno{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px}
.okno[hidden]{display:none}
.okno__fon{position:absolute;inset:0;background:rgba(10,24,40,.6)}
.okno__box{position:relative;width:100%;max-width:420px;background:#fff;border-radius:16px;
  padding:22px 20px 20px;box-shadow:0 24px 60px rgba(10,24,40,.32);max-height:92vh;overflow:auto}
.okno__x{position:absolute;right:8px;top:6px;width:40px;height:40px;border:0;background:none;
  font-size:30px;line-height:1;color:var(--mute)}
.okno__x:hover{color:var(--ink)}
.okno__t{margin:0 30px 14px 0;font-weight:800;font-size:19px;line-height:1.25}


/* ── Свайп на телефоне: мастера и отзывы листаются пальцем ───────────────
   В рабочем шаблоне это делала карусель на библиотеке. Здесь то же самое
   средствами браузера: ни одного килобайта скриптов. */
@media (max-width:699px){
  .masters,.revs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);
    margin:0 calc(var(--pad) * -1);padding:2px var(--pad) 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .masters::-webkit-scrollbar,.revs::-webkit-scrollbar{display:none}
  .master,.rev{scroll-snap-align:start}
  .svajp{display:block}
}
.svajp{display:none;margin:8px 0 0;font-size:12.5px;color:var(--mute)}