/* ЛодкиПроф — стили внутренних страниц (страницы услуг). Эталон — «Зимнее хранение», 09.10.2026.
   Цвета — только переменные :root из style.css. */

/* ───────── Хлебные крошки ───────── */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:18px 0 14px;font-size:.9rem;color:var(--text-2)}
.crumbs a{color:var(--text-2);text-decoration:none}
.crumbs a:hover{color:var(--link);text-decoration:underline}
.crumbs .i{width:14px;height:14px;transform:rotate(-90deg);opacity:.6}
.crumbs [aria-current]{color:var(--text);font-weight:600}
/* «Назад» вместо «Главная» (владелец, 15.10.2026): плашка со стрелкой влево, потом черта и название страницы */
.crumbs .crumbs__back{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px 6px 10px;border:1px solid var(--line);border-radius:999px;
  background:var(--bg);color:var(--text);font-weight:600;text-decoration:none;transition:border-color .2s,color .2s,background-color .2s}
.crumbs .crumbs__back .i{width:16px;height:16px;transform:rotate(180deg);opacity:1;color:var(--link);transition:transform .2s var(--ease)}
.crumbs .crumbs__back:hover{border-color:var(--link);color:var(--link);text-decoration:none}
.crumbs .crumbs__back:hover .i{transform:rotate(180deg) translateX(3px)}
.crumbs__sep{width:1px;height:18px;margin:0 6px;background:var(--line)}

/* ───────── 1. Шапка страницы услуги (владелец, 09.10.2026): не спорит с главной —
   уже и ниже, текст по центру, заголовок другим шрифтом (Oswald, заглавными), фото ангара фоном под ровным затемнением ───────── */
.sh{padding-bottom:clamp(76px,9vw,128px)} /* от кнопок до первого раздела (владелец: 09.10.2026 было 36–56, мало → 56–96; 15.10.2026 «дай немного воздуха» → 76–128) */
/* ВСЕ блоки страницы услуги — по одним краям: краям видимой шапки (левый край логотипа — правый край «Записаться»),
   как баннер (владелец, 09.10.2026: «блоки разной ширины»). --hdr-pad — в style.css, общий с шапкой. Подвал не трогаем */
main .wrap{max-width:none;padding-inline:var(--hdr-pad)}
main .wave{max-width:none;padding-inline:var(--hdr-pad)}
main .cb{max-width:none} /* «Хотите узнать что-то ещё?» — была уже (1152 px) */
.sh__card{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;text-align:center;
  min-height:clamp(340px,48vh,420px);border-radius:24px;background:var(--text);
  box-shadow:0 40px 80px -50px rgb(var(--text-rgb) / .8)}
.sh__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.js .sh__bg{animation:sh-zoom 1.8s var(--ease) both}
@keyframes sh-zoom{from{transform:scale(1.08)}}
/* затемнение — ровное тёмно-синее (цвет текста сайта), к краям чуть плотнее */
.sh__card::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 50% 45%,rgb(var(--text-rgb) / .62) 0%,rgb(var(--text-rgb) / .84) 100%)}
.sh__in{width:min(100%,820px);padding:clamp(36px,5vw,64px) clamp(20px,4vw,48px);color:#fff}
.sh h1{font-family:var(--font-page);font-weight:600;text-transform:uppercase;letter-spacing:.025em;line-height:1.12;
  color:#fff;font-size:clamp(1.9rem,1.1rem + 2.9vw,3.35rem);margin:0 auto .5em}
/* акцент — светлый оттенок фирменного синего */
.sh h1 .accent{color:color-mix(in srgb,var(--link) 30%,#fff)}
/* короткая черта под заголовком — знак шапки страницы */
.sh h1::after{content:"";display:block;width:56px;height:3px;margin:.5em auto 0;border-radius:2px;background:color-mix(in srgb,var(--link) 55%,#fff)}
.sh__lead{max-width:34em;margin:0 auto;font-size:clamp(1.02rem,1rem + .25vw,1.15rem);color:rgb(var(--bg-rgb) / .86)}
/* кнопки — под баннером, по центру (владелец, 09.10.2026) */
.sh__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:28px}
/* «20 мест» — круглая печать-наклейка на правом верхнем углу баннера (владелец, 09.10.2026).
   Белый круг на тёмном фото — самое яркое пятно шапки; надпись по кругу медленно вращается, число — Oswald */
.sh__box{position:relative}
.seal{position:absolute;z-index:2;top:6px;right:-30px;width:156px;height:156px;margin:0;border-radius:50%;
  display:grid;place-items:center;background:#fff;color:var(--brand);transform:rotate(-10deg);
  box-shadow:0 18px 40px -14px rgb(var(--text-rgb) / .55),0 0 0 6px rgb(var(--bg-rgb) / .22)}
/* внутреннее пунктирное кольцо — граница между надписью и числом */
.seal::before{content:"";position:absolute;inset:30px;border-radius:50%;border:1.5px dashed rgb(var(--link-rgb) / .45)}
.seal__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.seal__ring text{font:700 15px/1 "Manrope",sans-serif;letter-spacing:.12em;fill:var(--brand)}
.js .seal__ring{animation:seal-spin 36s linear infinite}
@keyframes seal-spin{to{transform:rotate(360deg)}}
.seal__in{position:relative;display:grid;justify-items:center;line-height:1}
.seal__in b{font-family:var(--font-page);font-weight:700;font-size:3.1rem;letter-spacing:.01em;color:var(--link)}
.seal__in span{margin-top:2px;font-family:var(--font-page);font-weight:600;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
/* появление: «прилипает» к углу после заголовка */
.js .seal{animation:seal-in .7s cubic-bezier(.34,1.56,.64,1) .7s both}
@keyframes seal-in{from{opacity:0;transform:scale(.4) rotate(-50deg)}}
/* 15.10.2026: печать ниже (было top −34 / −28 / −22) — верх срезала закреплённая строка крошек под шапкой */
@media (max-width:1119px){.seal{right:-8px;top:6px;width:132px;height:132px}.seal::before{inset:25px}.seal__ring text{font-size:16.5px}.seal__in b{font-size:2.6rem}.seal__in span{font-size:.82rem}}
/* телефон (владелец, 20.10.2026: «размещена неровно» — печать срезал край экрана и она наезжала на заголовок):
   целиком внутри баннера, в правом верхнем углу с отступом 12 px; заголовок — ниже печати */
@media (max-width:719px){.seal{width:100px;height:100px;top:12px;right:12px}.seal::before{inset:19px}.seal__ring text{font-size:18px}.seal__in b{font-size:1.95rem}.seal__in span{font-size:.66rem}
  .sh__in{padding-top:96px}.sh__box:has(.seal) .sh__in{padding-top:124px}}
@media (prefers-reduced-motion:reduce){.js .seal__ring{animation:none}}@media (max-width:719px){
  .sh__card{min-height:0;border-radius:20px}
  .sh__btns .btn{width:100%}
}

/* ───────── 2. Блоки «текст | фото» через один зеркально.
   При прокрутке текст и фото «приезжают» со своих сторон (.slide, app.js) ───────── */
.zz{display:grid;gap:clamp(104px,13vw,200px);padding:0 0 clamp(100px,12vw,170px);overflow-x:clip} /* больше воздуха между блоками (владелец, 09.10.2026) */
.zz__row{display:grid;gap:32px;align-items:center}
.zz__text > .zz__center{display:flex;width:fit-content;margin:clamp(28px,3vw,44px) auto 0} /* с воздухом над кнопкой (владелец, 14.10.2026) */ /* кнопка по центру колонки текста (владелец, 14.10.2026: «Обсудить доставку») */
.zz--top .zz__row{align-items:start} /* текст — по верхнему краю фото (владелец, 14.10.2026: «Зимнее хранение») */
/* 16.10.2026: плашек над заголовками на страницах услуг больше нет (владелец: «перегружают экран») —
   заголовок первым в колонке, верх букв на линии верхнего края фото (минус межстрочный зазор над буквами) */
.zz--top .zz__text > h2:first-child{margin-top:-.12em}
@media (min-width:960px){
  .zz__row{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(48px,6vw,96px)}
  .zz__row--rev .zz__text{order:2}
  /* фото за край колонки больше не выходит: все блоки по краям шапки (09.10.2026) */
}

.zz__text > p{color:var(--text-2);font-size:1.06rem}
.zz__text h2{margin-bottom:.55em}
.zz__kicker{display:flex;align-items:center;gap:14px;margin:0 0 14px;font-size:.82rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--link)!important}
/* подпись раздела плашкой со значком — вместо номеров 01–05 (владелец, 14.10.2026, «Зимнее хранение»);
   16.10.2026 со страниц услуг и квиза убрана, осталась на Контактах, в блоге и документах */
.zz__kicker--tag{width:fit-content;gap:9px;margin-bottom:18px;padding:7px 16px 7px 8px;border-radius:999px;
  background:rgb(var(--link-rgb) / .08);box-shadow:inset 0 0 0 1px rgb(var(--link-rgb) / .16);font-size:.78rem;letter-spacing:.11em}
.zz__kicker--tag .i{flex:none;width:28px;height:28px;padding:6px;border-radius:50%;background:var(--link);color:#fff}
.zz__num{font-family:var(--font-head);font-size:3.2rem;font-weight:800;line-height:.8;letter-spacing:0;color:transparent;-webkit-text-stroke:1.5px var(--link);opacity:.55}
.zz__media{position:relative;margin:0;overflow:hidden;border-radius:28px;background:var(--bg-alt);aspect-ratio:4/3;
  box-shadow:0 40px 70px -50px rgb(var(--text-rgb) / .6)}
@media (min-width:960px){.zz__media{aspect-ratio:auto;height:clamp(420px,38vw,600px)}}
/* узкий десктоп: фото в своём формате 4:3, без обрезки краёв лодки и ниже (владелец, 09.10.2026) */
@media (min-width:960px) and (max-width:1439px){.zz__media{height:auto;aspect-ratio:4/3}}
.zz__media img{width:100%;height:100%;object-fit:cover}
/* несколько кадров в одной рамке сменяют друг друга (.js-fade, app.js; подготовка к сезону, 21.10.2026).
   Без JS виден первый кадр, точки скрыты */
.zz__frame{position:absolute;inset:0;opacity:0;overflow:hidden}
.zz__frame.is-on{opacity:1;z-index:1}
/* смена кадра «прилив» (21.10.2026): новый кадр заливается снизу водой. Маска — два волновых гребня разного шага
   (объединяются), бегут навстречу друг другу, уровень поднимается. Маска в 3 раза выше рамки: верх прозрачный, ниже
   гребня — непрозрачно; mask-position-y −7,5 % → 57,5 % = окно от «над водой» до «под водой». По гребню — пена (.zz__foam),
   её фон — та же волна и та же анимация. Старый кадр «уходит под воду» (.is-out) */
.zz__fade{--wave-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300' preserveAspectRatio='none'%3E%3Cpath d='M0 100 Q12.5 88 25 100 T50 100 T75 100 T100 100 T125 100 T150 100 T175 100 T200 100 V300 H0Z'/%3E%3C/svg%3E");
  --wave-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300' preserveAspectRatio='none'%3E%3Cpath d='M0 104 Q8.33 96 16.67 104 T33.33 104 T50 104 T66.67 104 T83.33 104 T100 104 T116.67 104 T133.33 104 T150 104 T166.67 104 T183.33 104 T200 104 V300 H0Z'/%3E%3C/svg%3E");
  /* пена: под гребнем — синеватая толща воды (градиент вниз), по гребню — мягкая белая полоса в три слоя */
  --wave-foam:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231565C0' stop-opacity='.38'/%3E%3Cstop offset='1' stop-color='%231565C0' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 100 Q12.5 88 25 100 T50 100 T75 100 T100 100 T125 100 T150 100 T175 100 T200 100 V128 H0Z' fill='url(%23g)'/%3E%3Cg fill='none' stroke='%23fff' vector-effect='non-scaling-stroke'%3E%3Cpath d='M0 100 Q12.5 88 25 100 T50 100 T75 100 T100 100 T125 100 T150 100 T175 100 T200 100' stroke-opacity='.16' stroke-width='22' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 100 Q12.5 88 25 100 T50 100 T75 100 T100 100 T125 100 T150 100 T175 100 T200 100' stroke-opacity='.35' stroke-width='9' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 100 Q12.5 88 25 100 T50 100 T75 100 T100 100 T125 100 T150 100 T175 100 T200 100' stroke-opacity='.8' stroke-width='2.5' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
  --wave-t:1.8s;--wave-e:cubic-bezier(.45,0,.35,1)}
.zz__frame.is-wave{opacity:1;z-index:2;
  -webkit-mask-image:var(--wave-a),var(--wave-b);mask-image:var(--wave-a),var(--wave-b);
  -webkit-mask-size:200% 300%,200% 300%;mask-size:200% 300%,200% 300%;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  animation:wave-in var(--wave-t) var(--wave-e) both}
@keyframes wave-in{
  from{-webkit-mask-position:0 -7.5%,-100% -7.5%;mask-position:0 -7.5%,-100% -7.5%}
  to{-webkit-mask-position:-100% 57.5%,0 57.5%;mask-position:-100% 57.5%,0 57.5%}}
/* старый кадр только чуть темнеет — без сдвига, масштаба и размытия (с ними смена «дёргалась», владелец 21.10.2026) */
.zz__frame.is-out{animation:wave-sink var(--wave-t) ease-in-out both}
@keyframes wave-sink{to{filter:brightness(.88)}}
.zz__foam{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:var(--wave-foam) 0 -7.5% / 200% 300% repeat-x}
.zz__fade.is-run .zz__foam{animation:foam-move var(--wave-t) var(--wave-e) both,foam-fade var(--wave-t) linear both}
@keyframes foam-move{from{background-position:0 -7.5%}to{background-position:-100% 57.5%}}
@keyframes foam-fade{0%{opacity:0}12%{opacity:1}72%{opacity:1}100%{opacity:0}}
.zz__dots{position:absolute;left:50%;bottom:14px;z-index:2;display:none;gap:6px;transform:translateX(-50%);padding:6px 8px;border-radius:999px;background:rgb(30 51 72 / .35);backdrop-filter:blur(4px)}
.js .zz__dots{display:flex}
.zz__dots button{width:24px;height:8px;padding:0;border:0;border-radius:999px;background:rgb(255 255 255 / .55);cursor:pointer;transition:background-color .3s,width .3s}
.zz__dots button.is-on{width:36px;background:#fff}
.zz__dots button:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.zz__frame:not(.is-on){visibility:hidden}}
/* стрелки «назад / вперёд» по краям рамки (владелец, 23.10.2026: «не понятно, что картинку можно листать»).
   Ставит app.js (без JS их нет). Заметные: синий круг с белой обводкой, покачиваются наружу, пока посетитель
   сам не полистал (.is-used); листать можно и свайпом / перетаскиванием */
.zz__fade{touch-action:pan-y;-webkit-user-select:none;user-select:none}
.zz__fade img{-webkit-user-drag:none}
.zz__nav{position:absolute;top:50%;z-index:4;display:grid;place-items:center;width:52px;height:52px;margin-top:-26px;padding:0;
  border:2px solid rgb(255 255 255 / .85);border-radius:50%;background:rgb(14 90 138 / .28);color:#fff;cursor:pointer; /* полупрозрачные — фото видно сквозь (владелец, 23.10.2026) */
  box-shadow:0 6px 18px -8px rgb(0 0 0 / .45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:background-color .2s,transform .2s}
.zz__nav .i{width:24px;height:24px;stroke-width:2.6;filter:drop-shadow(0 1px 2px rgb(0 0 0 / .45))}
.zz__nav--prev{left:16px}.zz__nav--prev .i{transform:scaleX(-1)}
.zz__nav--next{right:16px}
.zz__nav:hover{background:rgb(14 90 138 / .75)}
.zz__nav:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* покачиваются только на первом кадре и до первого нажатия (владелец, 23.10.2026) */
.zz__fade.is-first:not(.is-used) .zz__nav--prev{animation:nav-nudge-l 1.8s var(--ease) infinite}
.zz__fade.is-first:not(.is-used) .zz__nav--next{animation:nav-nudge-r 1.8s var(--ease) infinite}
@keyframes nav-nudge-l{0%,55%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}}
@keyframes nav-nudge-r{0%,55%,100%{transform:translateX(0)}25%{transform:translateX(8px)}}
@media (max-width:639px){.zz__nav{width:44px;height:44px;margin-top:-22px}.zz__nav .i{width:20px;height:20px}.zz__nav--prev{left:10px}.zz__nav--next{right:10px}}
@media (prefers-reduced-motion:reduce){.zz__nav{animation:none!important}}
/* этапы рядом со сменой кадров (.js-stages; подготовка к сезону, 21.10.2026): текущий — мягко подсвечен, остальные приглушены */
.stg{list-style:none;margin:18px 0 22px;padding:0;display:grid;gap:4px}
.stg button{display:grid;grid-template-columns:32px minmax(0,1fr);gap:2px 14px;align-items:start;padding:10px 14px;margin:0 -14px;width:calc(100% + 28px);
  border:0;border-radius:16px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background-color .7s var(--ease)}
.stg__n{grid-row:1 / 3;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);color:var(--text-2);
  font-weight:800;font-size:.9rem;transition:background-color .7s var(--ease),border-color .7s var(--ease),color .7s var(--ease)}
.stg b{align-self:center;min-height:32px;display:flex;align-items:center;color:var(--text-2);font-weight:800;transition:color .7s var(--ease)}
.stg__t{color:var(--text-2);font-size:.98rem;line-height:1.5;opacity:.7;transition:opacity .7s var(--ease)}
.stg li.is-on button{background:var(--bg-alt)}
.stg li.is-on .stg__n{background:var(--brand);border-color:var(--brand);color:#fff}
.stg li.is-on b{color:var(--brand)}
.stg li.is-on .stg__t{opacity:1}
.stg button:hover b{color:var(--brand)}
.stg button:focus-visible{outline:2px solid var(--link);outline-offset:2px}
@media (min-width:960px) and (max-width:1439px){.stg{margin:12px 0 16px;gap:2px}.stg button{padding:7px 12px;margin:0 -12px;width:calc(100% + 24px)}.stg__t{font-size:.94rem;line-height:1.45}}

/* условия хранения — сетка 2×3 со значками */
.cond{display:grid;gap:12px;list-style:none;margin:26px 0 0;padding:0}
@media (min-width:560px){.cond{grid-template-columns:1fr 1fr}}
.cond li{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:16px;background:var(--bg-alt)}
.cond__ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--bg);color:var(--link);box-shadow:var(--shadow-sm)}
.cond b{display:block;font-size:.95rem;line-height:1.3;color:var(--text)}
.cond span:not(.cond__ico){display:block;margin-top:3px;font-size:.92rem;color:var(--text-2)}

/* что входит / за доплату */
.incl{display:grid;gap:14px;margin:24px 0 20px}
@media (min-width:560px){.incl{grid-template-columns:1fr 1fr}}
.incl__col{padding:20px;border-radius:18px;border:1px solid var(--line);background:var(--bg)}
.incl__col--in{background:var(--green-bg);border-color:transparent}
.incl__h{margin:0 0 12px;font-weight:800;font-size:.95rem;color:var(--text)}
.incl ul{display:grid;gap:10px;list-style:none;margin:0;padding:0}
.incl li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;line-height:1.4}
.incl li .i{margin-top:1px;color:var(--link)}
.incl__col--in li .i{color:var(--green)} /* зелёная галочка «входит в цену» — концепция 6.2 */
.incl small{display:block;color:var(--text-2);font-size:.85rem}
.zz__price{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:0;font-weight:600;color:var(--text)!important}
.zz__price b{font-size:1.2rem}

/* что сделаем зимой — ссылки на услуги */
.jobs{display:grid;gap:10px;list-style:none;margin:26px 0 0;padding:0}
@media (min-width:560px){.jobs{grid-template-columns:1fr 1fr}}
.jobs a{position:relative;display:block;height:100%;padding:16px 44px 16px 18px;border-radius:16px;border:1px solid var(--line);background:var(--bg);text-decoration:none;
  transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.jobs b{display:block;color:var(--brand)}
.jobs span{display:block;margin-top:2px;font-size:.9rem;color:var(--text-2)}
.jobs .i{position:absolute;right:16px;top:50%;margin-top:-.58em;color:var(--link);transition:transform .2s var(--ease)}
.jobs a:hover{border-color:var(--link);box-shadow:var(--shadow);transform:translateY(-2px)}
.jobs a:hover .i{transform:translateX(4px)}

/* осень → зима → весна */
.year{display:flex;flex-wrap:wrap;list-style:none;margin:24px 0 26px;padding:0;counter-reset:y}
.year li{position:relative;flex:1 1 120px;display:grid;gap:2px;padding:0 18px 0 0}
.year li + li{padding-left:18px;border-left:1px solid var(--line)}
.year .i{width:26px;height:26px;margin-bottom:8px;color:var(--link)}
.year b{font-family:var(--font-head);font-size:1.1rem;color:var(--brand)}
.year span{font-size:.92rem;color:var(--text-2)}
.year li:last-child .i{color:var(--green)}
/* три сезона не помещаются в ряд (~450 px) — «Весна» на своей строке по центру, без разделителя (владелец, 20.10.2026) */
.year{container-type:inline-size}
@container (max-width:449px){
  .year li:nth-child(3):last-child{flex-basis:100%;justify-items:center;text-align:center;margin-top:20px;padding:0;border-left:0}
}

.zz__note{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:var(--bg-alt);font-size:.98rem!important}
.zz__note .i{margin-top:3px;color:var(--link)}
/* миниатюры работ в колонке текста (оклейка на тюнинге, 16.10.2026): по клику фото встаёт вместо большого (app.js .js-thumbs) */
#okleyka-main{transition:transform 1.9s cubic-bezier(.16,1,.3,1) .1s,opacity .18s var(--ease)} /* transform — «доезд» фото из раздела 2а */
#okleyka-main.is-swap{opacity:0}
.zz__thumbs a.is-active{cursor:default}
.zz__thumbs a.is-active::after{box-shadow:inset 0 0 0 3px var(--brand)!important}
.zz__thumbs a.is-active img{transform:none!important}
.zz__thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0 0;padding:0;list-style:none}
.zz__thumbs a{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:14px;background:var(--bg-alt);box-shadow:var(--shadow-sm)}
.zz__thumbs img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.zz__thumbs a::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .2s}
.zz__thumbs a:hover img{transform:scale(1.07)}
.zz__thumbs a:hover::after,.zz__thumbs a:focus-visible::after{box-shadow:inset 0 0 0 2px var(--link)}

/* ───────── Появление со сторон ───────── */
/* блоки, ещё не «приехавшие» сбоку, не дают странице ездить вбок на телефоне (было +20 px, 16.10.2026);
   clip, а не hidden: не ломает закреплённые элементы (содержание документов, заголовок FAQ) */
main{overflow-x:clip}
.js .slide{opacity:0;transition:opacity .9s var(--ease),transform 1s var(--ease)}
.js .slide--l{transform:translateX(-90px)}
.js .slide--r{transform:translateX(90px)}
.js .slide--up{transform:translateY(40px)}
.js .slide.is-in{opacity:1;transform:none}
/* у фото ещё и лёгкий «наезд» картинки внутри рамки */
.js .zz__media.slide img{transform:scale(1.14);transition:transform 1.6s var(--ease)}
.js .zz__media.slide.is-in img{transform:none}
/* строки текста — лесенкой следом за блоком */
.js .zz__text.slide > *{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .zz__text.slide.is-in > *{opacity:1;transform:none}
.js .zz__text.slide.is-in > :nth-child(2){transition-delay:.12s}
.js .zz__text.slide.is-in > :nth-child(3){transition-delay:.22s}
.js .zz__text.slide.is-in > :nth-child(4){transition-delay:.32s}
.js .zz__text.slide.is-in > :nth-child(n+5){transition-delay:.42s}
@media (max-width:959px){.js .slide--l{transform:translateX(-40px)}.js .slide--r{transform:translateX(40px)}}
@media (prefers-reduced-motion:reduce){
  .js .slide,.js .slide > *,.js .zz__media.slide img{opacity:1!important;transform:none!important}
  .js .sh__slots i{opacity:1}
}

/* ───────── 2а. Размашистое появление разделов: колонки съезжаются (владелец, 16.10.2026).
   Класс .zz--fx у ленты .zz — на всех шести страницах услуг (проба на «Зимнем хранении», затем на всех — владелец, 16.10.2026).
   Замысел: при открытии раздела текст и фото выезжают из-за краёв экрана — каждый со своей стороны — и едут навстречу
   друг другу, плавно вставая на место. Срабатывает весь ряд сразу
   (app.js следит за .zz__row: колонки в начале стоят за краем экрана и сами в кадр не попадают).
   Первая версия того же дня (шторка, синяя «плёнка», «пишущийся» заголовок) прятала движение — убрана. ───────── */
.zz--fx{--fx-x:58vw}
.zz--fx .zz__row > .slide--l{--fx-dir:-1}   /* приезжает слева */
.zz--fx .zz__row > .slide--r{--fx-dir:1}    /* приезжает справа */
/* базовое .slide у рядов здесь не работает — свой сценарий; прочие .slide в ленте (карточка «Рыбалка под ключ») — как обычно */
.js .zz--fx .zz__row > .slide{transition:none}
/* до появления — за краем экрана и невидимы */
.js .zz--fx .zz__row > .slide:not(.is-in){opacity:0;transform:translateX(calc(var(--fx-x) * var(--fx-dir)))}
/* съезд: быстро набирает ход и плавно встаёт на место, без «столкновения» (убрано владельцем 16.10.2026: «лишнее») */
@keyframes fx-meet{
  0%  {opacity:0;transform:translateX(calc(var(--fx-x) * var(--fx-dir)))}
  18% {opacity:1}
  100%{opacity:1;transform:none}
}
.js .zz--fx .zz__row > .slide.is-in{animation:fx-meet 1.3s cubic-bezier(.16,1,.3,1) both}

/* фото внутри рамки: крупнее и сдвинуто против хода, «доезжает» дольше колонки — глубина */
.js .zz--fx .zz__media.slide img{transform:scale(1.25) translateX(calc(6% * var(--fx-dir)));transition:transform 1.9s cubic-bezier(.16,1,.3,1) .1s}
.js .zz--fx .zz__media.slide.is-in img{transform:none}
.js .zz--fx .zz__media.slide .ba__img{transform:none;transition:none} /* шторка «было / стало»: кадры не сдвигаем, иначе разъедутся */

/* строки текста — следом лесенкой, коротким ходом (главное движение — у колонки); --k ставит app.js */
.js .zz--fx .zz__text.slide > :nth-child(n){opacity:0;transform:translateX(calc(40px * var(--fx-dir)));
  transition:opacity .6s ease,transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(.45s + var(--k, 0) * .09s)}
.js .zz--fx .zz__text.slide.is-in > :nth-child(n){opacity:1;transform:none}
/* строки списков (условия, «входит», работы, сезоны) — ещё одна лесенка внутри; --i ставит app.js */
.js .zz--fx .zz__text.slide :is(.cond,.jobs,.year,.incl ul,.ticks,.sys,.plist) > li{opacity:0;transform:translateX(calc(28px * var(--fx-dir)));
  transition:opacity .5s ease,transform .8s cubic-bezier(.16,1,.3,1);transition-delay:calc(.7s + var(--i, 0) * .06s)}
.js .zz--fx .zz__text.slide.is-in :is(.cond,.jobs,.year,.incl ul,.ticks,.sys,.plist) > li{opacity:1;transform:none}

@media (max-width:959px){
  /* телефон и планшет: колонки друг под другом — тоже с двух сторон */
  .zz--fx{--fx-x:70vw}
}
/* Фото после первого абзаца (владелец, 20.10.2026: сначала по разделам классом .zz__row--pm, затем «сделай» — на всех
   разделах «текст | фото» всех шести страниц услуг, лента .zz--fx). На телефоне и планшете: заголовок → первый абзац → фото →
   остальное (факты, списки, цены). Колонка текста растворяется (display:contents), порядок — order; появление строк лесенкой
   работает (оно по классу is-in у колонки), съезд самой колонки — нет. .zz__row--pm — то же для ряда вне .zz--fx */
@media (max-width:959px){
  :is(.zz--fx .zz__row, .zz__row--pm){display:flex;flex-direction:column;align-items:stretch;gap:0}
  :is(.zz--fx .zz__row, .zz__row--pm) > .zz__text{display:contents}
  :is(.zz--fx .zz__row, .zz__row--pm) > .zz__text > *{order:4}
  :is(.zz--fx .zz__row, .zz__row--pm) > .zz__text > :is(h2,h2 + p){order:1}
  :is(.zz--fx .zz__row, .zz__row--pm) > .zz__media{order:2;margin:4px 0 24px}
  /* .zz__row--price-up («Что входит в цену» на хранении): строка цены — сразу за фото, перечни — ниже */
  .zz__row--price-up > .zz__text > .zz__price{order:3;margin:0 0 24px}
}
@media (prefers-reduced-motion:reduce){
  .js .zz--fx .slide,.js .zz--fx .slide *{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
}
/* «Узнать точную цену →» в конце раздела (владелец, 20.10.2026): не кнопка — жирная ссылка к расчёту (parts/price-link.njk) */
.price-link{display:flex;width:fit-content;margin-top:20px;font-weight:800;font-size:1.02rem;color:var(--link)} /* своей строкой, даже рядом с другой ссылкой .more */
@media (min-width:960px) and (max-width:1439px),(min-width:1440px) and (max-height:820px){.price-link{margin-top:12px}}
@media (max-width:959px){.price-link{align-self:center;margin-inline:auto}} /* телефон и планшет — по центру экрана (владелец, 20.10.2026) */ /* узкий / невысокий ПК — раздел целиком на экране (2б, 2в) */
.price-link:hover{color:var(--brand)}
/* поле расчёта, выбранное этой ссылкой, — короткая подсветка */
.is-picked select,.is-picked .chip input:checked + span{animation:pick-glow 1.8s var(--ease)}
@keyframes pick-glow{0%,35%{box-shadow:0 0 0 4px rgb(var(--link-rgb) / .35)}100%{box-shadow:0 0 0 4px rgb(var(--link-rgb) / 0)}}
@media (prefers-reduced-motion:reduce){.is-picked select,.is-picked .chip input:checked + span{animation:none}}

/* ───────── 3. Расчёт хранения (заглушка калькулятора) ───────── */
/* фон блока — от левого до правого края экрана, содержимое — по краям шапки, как остальные блоки (клиент, 15.10.2026; была карточка со скруглением) */
#raschet.sec{position:relative;overflow:hidden;padding:clamp(48px,6.5vw,96px) 0;margin-bottom:clamp(80px,10vw,140px);background:var(--bg-alt)}
#raschet.sec::after{content:"";position:absolute;right:-110px;top:-140px;width:320px;height:320px;border-radius:50%;border:2px dashed rgb(var(--brand-rgb) / .14);pointer-events:none}
.sc{position:relative}
.sc__head{max-width:none;margin-bottom:clamp(36px,4vw,52px)} /* больше воздуха (владелец, 09.10.2026) */
@media (min-width:720px){.sc__head h2{white-space:nowrap}} /* заголовок — в одну строку (владелец, 09.10.2026) */
.sc__head h2{margin-bottom:.45em}
.sc__head p{margin:0;color:var(--text-2);font-size:1.05rem}
.sc__grid{display:grid;gap:28px 28px}
@media (min-width:720px){.sc__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.sc__grid{grid-template-columns:auto minmax(130px,.6fr) auto minmax(220px,1fr);align-items:end}}
/* хранение: без выбора прицепа (храним только на прицепе — владелец, 10.10.2026) — три поля */
@media (min-width:720px) and (max-width:1099px){.sc__grid--hr .sc__tel{grid-column:1 / -1}}
@media (min-width:1100px){.sc__grid--hr{grid-template-columns:auto minmax(130px,.5fr) minmax(220px,1fr)}}
.sc__set{margin:0;padding:0;border:0;min-width:0}
.sc__set legend{margin-bottom:10px;padding:0;font-weight:600;font-size:.92rem;color:var(--text)}
.chips{display:flex;gap:6px;padding:4px;border-radius:14px;background:var(--bg);border:1.5px solid var(--line)}
.chip{position:relative;flex:1}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:grid;place-items:center;min-height:44px;padding:8px 18px;border-radius:10px;font-weight:700;font-size:.95rem;color:var(--text-2);white-space:nowrap;transition:background-color .2s,color .2s}
.chip input:checked + span{background:var(--brand);color:#fff}
.chip input:focus-visible + span{outline:3px solid var(--link);outline-offset:2px}
.chip:hover input:not(:checked) + span{color:var(--link)}
.sc__foot{display:grid;gap:24px 40px;align-items:center;margin-top:clamp(32px,3.5vw,44px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--line)}
@media (min-width:900px){.sc__foot{grid-template-columns:minmax(0,1fr) auto}}

/* ───────── 6. Бронирование + карта ───────── */
.bk{display:grid;gap:24px}
@media (min-width:960px){.bk{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:stretch}}
.bk__form{padding:clamp(24px,3vw,40px);background:var(--bg);border-radius:24px;box-shadow:var(--shadow)}
.bk__form > p{color:var(--text-2)}
/* форма из двух полей (имя и телефон, владелец 14.10.2026): поля друг под другом во всю ширину,
   содержимое — по центру высоты карточки (она тянется по высоте «Как с нами связаться»), без пустоты снизу */
.bk__form{display:flex;flex-direction:column;justify-content:center}
.bk__form > p{margin-bottom:clamp(20px,2.4vw,28px)}
.bk .form{gap:18px}
.bk .form__row{grid-template-columns:1fr;gap:18px}
.bk .form .btn--block{margin-top:6px}
.bk__form .form__note{text-align:center} /* по центру блока (владелец, 09.10.2026) */
/* справа — способы связи вместо карты (владелец, 09.10.2026) */
.ct{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,3vw,36px);background:var(--bg);border-radius:24px;box-shadow:var(--shadow)}
.ct__h{margin:0 0 6px;font-size:1.35rem}
.ct__row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:var(--bg-alt);color:var(--text);text-decoration:none}
a.ct__row{transition:background-color .2s,box-shadow .2s}
a.ct__row:hover{background:var(--bg);box-shadow:0 0 0 1.5px var(--link)}
.ct__row small{display:block;font-size:.8rem;font-weight:600;color:var(--text-2)}
.ct__row b{display:block;font-size:1.02rem;line-height:1.35}
.ct__ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--bg);color:var(--link);box-shadow:var(--shadow-sm)}
.ct__row--phone{background:var(--brand);color:#fff} /* без подписи «Телефон»: значок и номер рядом, по левому краю (владелец, 09.10.2026) */
.ct__row--phone small{color:rgb(var(--bg-rgb) / .75)}
.ct__row--phone b{font-size:1.3rem;font-weight:800}
.ct__row--phone .ct__ico{background:rgb(var(--bg-rgb) / .14);color:#fff;box-shadow:none}
a.ct__row--phone:hover{background:var(--link);box-shadow:none}
/* 5 в одну строку: WhatsApp, Telegram, MAX, YouTube, Instagram (15.10.2026). Подстраиваются под ширину карточки (container),
   а не экрана: карточка бывает и узкой колонкой рядом с формой, и шире на «Контактах» */
.ct{container-type:inline-size}
.ct__msgs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.ct__msg{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 2px;border-radius:16px;border:1px solid var(--line);
  font-size:.84rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap;color:var(--text);text-decoration:none;text-align:center;transition:border-color .2s,transform .2s var(--ease)}
.ct__msg .msg--yt svg,.ct__msg .msg--ig svg{width:21px;height:21px}
@container (max-width:420px){.ct__msgs{gap:6px}.ct__msg{font-size:.72rem;padding:10px 0}}
@container (max-width:330px){.ct__msgs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ct__msg .msg{width:40px;height:40px}
.ct__msg .msg svg{width:22px;height:22px}
.ct__msg .msg--tg svg{width:40px;height:40px}
a.ct__msg:hover{border-color:var(--link);transform:translateY(-2px)}
.ct__msg .todo{font-size:.7rem}
.ct__route{align-self:center;margin-top:8px} /* по центру, зелёная обводка (владелец, 09.10.2026) */
/* расчёт хранения: поля и переключатели одной высоты (09.10.2026) */
.sc .field{gap:10px}
.sc .field input{min-height:54px}
.sc .chips{min-height:54px;align-items:center}
/* «Телефон / E-mail» вместо подписи поля (владелец, 23.10.2026; как на НИКС): маленькая капсула,
   синий бегунок переезжает к выбранному. Поля формы — по нижнему краю, капсула чуть выше подписей соседей */
@media (min-width:720px){.sc__grid{align-items:end}}
.via-field__head{display:flex;align-items:center;gap:6px}
.via-field__in{display:grid;gap:10px}
.via{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:999px;background:var(--bg-alt);box-shadow:inset 0 0 0 1px var(--line)}
.via__thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--brand);
  box-shadow:0 4px 10px -4px rgb(var(--brand-rgb) / .7);transition:transform .45s cubic-bezier(.34,1.45,.64,1)}
.via:has(input[value="email"]:checked) .via__thumb{transform:translateX(100%)}
.via__opt{position:relative;z-index:1;cursor:pointer}
.via__opt input{position:absolute;opacity:0;width:1px;height:1px}
.via__opt span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:30px;padding:0 14px;border-radius:999px;
  font-size:.85rem;font-weight:700;color:var(--text-2);white-space:nowrap;transition:color .3s}
.via__opt .i{width:14px;height:14px;transition:transform .45s cubic-bezier(.34,1.45,.64,1)}
.via__opt:hover span{color:var(--brand)}
.via__opt input:checked + span{color:#fff}
.via__opt input:checked + span .i{transform:scale(1.12) rotate(-8deg)}
.via__opt input:focus-visible + span{outline:3px solid rgb(var(--link-rgb) / .35);outline-offset:1px}
@media (max-width:719px){.via__opt span{min-height:36px}}
@media (prefers-reduced-motion:reduce){.via__thumb,.via__opt .i{transition:none}}

/* узкий / невысокий десктоп: блок бронирования компактнее (владелец, 09.10.2026) */
@media (min-width:960px) and (max-width:1439px),(min-width:960px) and (max-height:900px){
  #bron.sec{padding:56px 0}
  .bk{gap:20px}
  .bk__form,.ct{padding:28px 30px}
  .bk__form h2{font-size:clamp(1.6rem,1.1rem + 1.2vw,2.1rem);margin-bottom:.4em}
  .bk__form > p{font-size:1rem;line-height:1.5;margin-bottom:1.1em}
  .bk .form{gap:12px}
  .bk .form__row{gap:12px}
  .bk .field{gap:4px}
  .bk .field input{min-height:46px;padding:10px 14px}
  .bk .consent{font-size:.86rem}
  .bk .btn--lg{min-height:50px;padding:12px 22px}
  .ct{gap:10px}
  .ct__h{font-size:1.2rem;margin-bottom:2px}
  .ct__row{padding:10px 14px;gap:12px}
  .ct__ico{width:38px;height:38px;border-radius:10px}
  .ct .ct__row--phone b{font-size:1.4rem} /* номер крупнее (владелец, 09.10.2026); .ct — иначе перебивает .ct__row b ниже */
  .ct__row b{font-size:.96rem}
  .ct__msg{padding:9px 2px;gap:4px;font-size:.8rem}
  .ct__msg .msg{width:34px;height:34px}
  .ct__msg .msg svg{width:19px;height:19px}
  .ct__msg .msg--tg svg{width:34px;height:34px}
  .ct__route{min-height:44px;padding:9px 18px;font-size:.95rem;margin-top:4px}
}

/* ═════════ Ремонт моторов (09.10.2026) ═════════ */
/* квиз «Что случилось с мотором?» — первый блок под шапкой, виден сразу */
.qz-sec{padding:clamp(24px,3.5vw,56px) 0 clamp(100px,12vw,170px)} /* сверху — больше воздуха от кнопок шапки (владелец, 09.10.2026) */
.qz{display:grid;gap:28px;align-items:start}
@media (min-width:960px){.qz{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(40px,5vw,80px)}}
.qz__sub{color:var(--text-2);font-size:1.06rem;margin-bottom:24px}
.qz__opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.qz__opt{display:flex;align-items:center;gap:12px;min-height:60px;padding:12px 16px;border:1.5px solid var(--line);border-radius:16px;background:var(--bg);
  font-weight:700;font-size:1rem;text-align:left;color:var(--text);cursor:pointer;transition:border-color .2s,background-color .2s,color .2s,box-shadow .2s}
.qz__opt .i{width:22px;height:22px;color:var(--link);transition:color .2s}
.qz__opt:hover{border-color:var(--link)}
.qz__opt[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 14px 30px -18px rgb(var(--brand-rgb) / .9)}
.qz__opt[aria-selected="true"] .i{color:#fff}
.qz__panels{position:relative}
.qz__panel{padding:clamp(24px,3vw,36px);border-radius:24px;background:var(--bg-alt);margin-bottom:12px}
.js .qz__panel{margin:0}
.js .qz__panel[hidden]{display:none}
.js .qz__panel:not([hidden]){animation:qz-in .35s var(--ease)}
@keyframes qz-in{from{opacity:0;transform:translateY(10px)}}
.qz__h{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-family:var(--font-head);font-weight:700;font-size:1.45rem;color:var(--brand)}
.qz__h .i{width:30px;height:30px;color:var(--link)}
.qz__label{margin:0 0 8px;font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--link)}
.qz__causes{display:grid;gap:8px;margin:0 0 20px;padding:0;list-style:none}
.qz__causes li{position:relative;padding-left:20px;line-height:1.45}
.qz__causes li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--link);opacity:.55}
.qz__do{margin:0 0 16px;font-weight:600;color:var(--text)}
.qz__rule{display:flex;gap:10px;align-items:flex-start;margin:0 0 22px;padding:12px 14px;border-radius:14px;background:var(--bg);font-size:.95rem;color:var(--text-2)}
.qz__rule .i{margin-top:2px;color:var(--link)}
@media (max-width:420px){.qz__opts{grid-template-columns:1fr}}
/* телефон и планшет (владелец, 20.10.2026: «кнопка не умещается на экран»): к ответу страница прокручивается сама —
   карточка плотнее, чтобы вместе с кнопкой была на одном экране */
@media (max-width:959px){
  /* первый вариант того же дня владелец счёл пережатым («чуть разожми») — середина между ним и десктопом */
  .qz__panel{padding:22px 20px 24px;border-radius:22px}
  .qz__h{gap:12px;margin-bottom:15px;font-size:1.35rem}
  .qz__h .i{width:28px;height:28px}
  .qz__label{margin-bottom:7px;font-size:.78rem}
  .qz__causes{gap:6px;margin-bottom:17px}
  .qz__do{margin-bottom:14px}
  .qz__rule{margin-bottom:19px;padding:11px 13px;font-size:.9rem;line-height:1.45}
  .qz__panel .btn{width:100%}
}
.zz--after{padding-top:0}

/* список работ ТО с галочками (синие: зелёные — только «входит в цену») */
.ticks{display:grid;gap:10px;margin:22px 0;padding:0;list-style:none}
@media (min-width:560px){.ticks{grid-template-columns:1fr 1fr}}
.ticks li{display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.ticks .i{margin-top:2px;color:var(--link)}
/* узлы, которые ремонтируем — плашки */
.sys{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 6px;padding:0;list-style:none}
.sys li{padding:8px 14px;border-radius:999px;background:var(--bg-alt);font-weight:600;font-size:.95rem;color:var(--text)}
/* плашки, связанные с кадрами справа (.js-stages; электрика на тюнинге, 21.10.2026): плашка текущего фото — фирменный синий.
   Переходы цвета — свои, без задержки «лесенки» появления (её задержка — только для opacity и transform) */
.sys.js-stages li{cursor:pointer;transition:background-color .6s var(--ease),color .6s var(--ease)}
.sys.js-stages li:hover{color:var(--brand)}
.sys.js-stages li.is-on{background:var(--brand);color:#fff}
.js .zz--fx .zz__text.slide .sys.js-stages > li{transition:opacity .5s ease,transform .8s cubic-bezier(.16,1,.3,1),background-color .6s var(--ease),color .6s var(--ease);
  transition-delay:calc(.7s + var(--i, 0) * .06s),calc(.7s + var(--i, 0) * .06s),0s,0s}

/* «С китайскими моторами не работаем» */
.nocn-sec{padding-bottom:clamp(90px,11vw,150px)}
.nocn{display:grid;gap:28px;align-items:center;padding:clamp(28px,4vw,52px);border-radius:28px;border:1.5px solid var(--line);background:var(--bg)}
@media (min-width:960px){.nocn{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.nocn h2{margin-bottom:.4em;font-size:clamp(1.5rem,1.1rem + 1.2vw,2.1rem)}
.nocn p{margin:0;color:var(--text-2);font-size:1.05rem}
.nocn p b{display:inline-flex;align-items:center;gap:6px;color:var(--text)}
.nocn p b .i{color:var(--brand)} /* красный --sos здесь нельзя: он только для SOS-плашки */
.nocn__logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;align-items:center;justify-items:center;margin:0;padding:0;list-style:none}
.nocn__logos img{width:auto;height:auto;max-width:150px;max-height:40px}
.nocn__logos .brands__logo--suzuki,.nocn__logos .brands__logo--yamaha{max-height:44px}

/* форма стоимости по мотору: 4 поля в ряд на широком */
@media (min-width:1100px){.sc__grid--motor{grid-template-columns:minmax(0,.9fr) minmax(0,.6fr) minmax(0,1.3fr) minmax(0,1fr)}}
.sc .field select{min-height:54px}
.sc__sym{display:inline-block;margin-left:6px;padding:2px 10px;border-radius:999px;background:var(--bg);font-weight:700;font-size:.92rem;color:var(--brand)}
.qz__opt--wide{grid-column:1 / -1;justify-content:center} /* «Другая проблема» — во всю ширину под симптомами (владелец, 09.10.2026) */
.qz__panel .js-qz-cta{display:flex;width:fit-content;margin:0 auto} /* кнопка ответа квиза — по центру блока (владелец, 09.10.2026) */

/* ═════════ Ремонт лодок (09.10.2026) ═════════ */
/* «было / стало» шторкой (владелец, 09.10.2026): снизу «стало», сверху «было», обрезано слева по --pos (меняет app.js) */
.ba{isolation:isolate;user-select:none;touch-action:pan-y}
.ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__img--before{clip-path:inset(0 0 0 var(--pos))} /* «было» — справа от линии, «стало» — слева (владелец, 09.10.2026: шторка в обратную сторону) */
.js .zz__media.slide .ba__img{transform:none} /* без «наезда» картинки — иначе два кадра разъедутся */
.ba__tag{position:absolute;z-index:2;left:calc(var(--pos) + 16px);top:16px;transition:opacity .2s;padding:6px 14px;border-radius:999px;background:rgb(var(--text-rgb) / .78);color:#fff;
  font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(4px);pointer-events:none}
.ba__tag--after{left:auto;right:calc(100% - var(--pos) + 16px);background:var(--brand)}
/* плашки идут за линией: «Было» — справа от неё, «Стало» — слева; плашка видна, только когда её части фото хватает места (app.js: is-after, is-full; владелец, 09.10.2026) */
.ba .ba__tag--after{opacity:0}.ba.is-after .ba__tag--after{opacity:1}
.ba.is-full .ba__tag:not(.ba__tag--after){opacity:0}
.ba__line{position:absolute;z-index:2;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 12px rgb(var(--text-rgb) / .4);pointer-events:none}
.ba__knob{position:absolute;top:50%;left:50%;display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:#fff;color:var(--brand);box-shadow:0 8px 24px -6px rgb(var(--text-rgb) / .55);transition:transform .2s var(--ease)}
.ba__knob .i{width:18px;height:18px}
.ba__knob .i:first-child{transform:rotate(180deg);margin-right:-3px}
.ba:hover .ba__knob,.ba__range:focus-visible ~ .ba__line .ba__knob{transform:scale(1.08)}
.ba__range{position:absolute;z-index:3;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y;-webkit-appearance:none;appearance:none}
.ba:has(.ba__range:focus-visible){outline:3px solid var(--link);outline-offset:4px}
.ba__cap{position:absolute;z-index:2;left:50%;bottom:16px;transform:translateX(-50%);padding:6px 14px;border-radius:999px;background:rgb(var(--bg-rgb) / .9);
  font-size:.85rem;font-weight:600;color:var(--text);white-space:nowrap;box-shadow:var(--shadow-sm);pointer-events:none}
/* подсказка справа от ручки — только стрелка, без текста (владелец, 10.10.2026): покачивается; после первого движения шторки — исчезает (.is-touched, app.js) */
.ba__hint{position:absolute;z-index:2;top:50%;left:calc(var(--pos) + 38px);transform:translateY(-50%);display:grid;place-items:center;
  width:36px;height:36px;border-radius:50%;background:var(--bg);color:var(--brand);box-shadow:var(--shadow);pointer-events:none;transition:opacity .3s}
.ba__hint .i{width:18px;height:18px;animation:ba-nudge 1.2s var(--ease) infinite}
@keyframes ba-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.ba.is-touched .ba__hint,.ba.is-after .ba__hint{opacity:0}

/* ═════════ Тюнинг (09.10.2026) ═════════ */
/* быстрые переходы по разделам — первый блок под шапкой, виден сразу */
.qn-sec{padding:clamp(24px,3.5vw,56px) 0 clamp(100px,12vw,170px)}
.qn__head{max-width:720px;margin-bottom:clamp(24px,3vw,36px)}
.qn__head p:last-child{margin:0;color:var(--text-2);font-size:1.06rem}
.qn{display:grid;gap:12px;margin:0;padding:0;list-style:none}
@media (min-width:640px){.qn{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.qn{grid-template-columns:repeat(3,minmax(0,1fr))}}
.qn__card{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:center;height:100%;
  padding:20px 52px 20px 20px;border:1.5px solid var(--line);border-radius:20px;background:var(--bg);text-decoration:none;color:var(--text);
  transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.qn__ico{grid-row:1 / 3;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--bg-alt);color:var(--link);transition:background-color .2s,color .2s}
.qn__ico .i{width:26px;height:26px}
.qn__card b{font-family:var(--font-head);font-size:1.15rem;color:var(--brand);line-height:1.2}
.qn__card > span:not(.qn__ico){font-size:.92rem;color:var(--text-2)}
.qn__go{position:absolute;right:18px;top:50%;margin-top:-.58em;color:var(--link);transition:transform .2s var(--ease)}
.qn__card:hover{border-color:var(--link);box-shadow:var(--shadow);transform:translateY(-2px)}
.qn__card:hover .qn__ico{background:var(--brand);color:#fff}
.qn__card:hover .qn__go{transform:translateX(4px)}
/* разделы — с отступом под шапку при переходе по якорю */
.zz__row[id]{scroll-margin-top:calc(var(--hdr) + var(--crumbs-h) + 32px)}

/* строки «услуга — цена» (все цены «от …», нет цены — «по запросу») */
.plist{margin:22px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.plist li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.plist span{color:var(--text)}
.plist b{flex:none;font-weight:800;color:var(--brand);white-space:nowrap}

/* «Соберём лодку для рыбалки под ключ» — синяя карточка, как «Хотите узнать что-то ещё?» */
/* фон — синей полосой от левого до правого края экрана, содержимое — по краям шапки, как у расчёта (владелец, 16.10.2026; была карточка со скруглением) */
.pk-sec{position:relative;overflow:hidden;padding:clamp(56px,7vw,104px) 0;color:#fff;
  background:linear-gradient(120deg,var(--brand) 0%,color-mix(in srgb,var(--brand) 78%,var(--text)) 100%)}
.pk-sec::before{content:"";position:absolute;right:-110px;top:-130px;width:320px;height:320px;border-radius:50%;border:2px dashed rgb(var(--bg-rgb) / .18);pointer-events:none}
.pk{position:relative;display:grid;gap:28px clamp(40px,5vw,80px);align-items:center}
@media (min-width:960px){.pk{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.pk__kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;font-size:.82rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgb(var(--bg-rgb) / .8)}
.pk__kicker .i{width:22px;height:22px}
.pk h2{color:#fff;margin-bottom:.45em}
.pk__text p{color:rgb(var(--bg-rgb) / .82);font-size:1.06rem}
.pk__btn{margin-top:8px;background:#fff;color:var(--brand)}
.pk__btn:hover{background:var(--bg-alt)}
.pk__list{position:relative;display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:pk}
@media (min-width:560px){.pk__list{grid-template-columns:1fr 1fr}}
.pk__list li{counter-increment:pk;padding:18px 18px 18px 58px;border-radius:18px;background:rgb(var(--bg-rgb) / .1);border:1px solid rgb(var(--bg-rgb) / .2);position:relative}
.pk__list li::before{content:counter(pk);position:absolute;left:16px;top:16px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--brand);font-weight:800;font-size:.9rem}
.pk__list b{display:block;font-size:1.02rem}
.pk__list span{display:block;margin-top:2px;font-size:.9rem;color:rgb(var(--bg-rgb) / .75)}
.pk__list a{color:#fff}

/* форма из трёх полей */
@media (min-width:1100px){.sc__grid--3{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr)}}

/* ═════════ Тенты (09.10.2026) ═════════ */
/* «Как мы шьём тент» — 4 шага в ряд, первый блок под шапкой */
.steps{display:grid;gap:12px;margin:0;padding:0;list-style:none;counter-reset:none}
@media (min-width:640px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.step{position:relative;display:grid;gap:6px;align-content:start;padding:22px 22px 24px;border-radius:20px;background:var(--bg-alt)}
.step__n{position:absolute;right:20px;top:14px;font-family:var(--font-head);font-weight:800;font-size:2.6rem;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--link);opacity:.45}
.step__ico{display:grid;place-items:center;width:48px;height:48px;margin-bottom:8px;border-radius:14px;background:var(--bg);color:var(--link);box-shadow:var(--shadow-sm)}
.step__ico .i{width:24px;height:24px}
.step b{font-family:var(--font-head);font-size:1.2rem;color:var(--brand)}
.step > span:last-child{font-size:.95rem;color:var(--text-2);line-height:1.45}
/* стрелка между шагами на широком экране */
@media (min-width:1100px){.step + .step::before{content:"";position:absolute;left:-12px;top:46px;width:12px;height:2px;background:var(--line)}}
@media (min-width:720px){.nowrap-lg{white-space:nowrap}} /* заголовок в одну строку на планшете и шире (владелец, 09.10.2026) */
/* марки эхолотов и электромоторов на тюнинге (10.10.2026): логотипы в ряд между линиями; высоты подобраны на глаз — у логотипов разные пропорции */
.sonar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 34px;margin:22px 0 4px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);list-style:none}
.sonar li{display:flex;align-items:center}
.sonar__logo{width:auto;height:24px}
.sonar__logo--garmin{height:38px}
.sonar__logo--lowrance{height:18px}
.sonar__logo--humminbird{height:24px}
.sonar__logo--minnkota{height:30px}
/* те же ряды для марок моторов (ремонт моторов, блок ТО; 10.10.2026) — пропорции как на главной */
.sonar__logo--mercury{height:27px}
.sonar__logo--suzuki{height:33px}
.sonar__logo--tohatsu{height:21px}
.sonar__logo--yamaha{height:29px}
/* телефон (владелец, 20.10.2026: «центрируй и выровняй»): сетка 2×2 — равные колонки, логотип по центру ячейки */
@media (max-width:639px){.sonar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;align-items:center;gap:20px 16px}.sonar__logo--garmin{height:32px}.sonar__logo--humminbird{height:20px}.sonar__logo--lowrance{height:15px}.sonar__logo--minnkota{height:25px}}

/* «Материалы» — 4 карточки-спецификации (10.10.2026): ткани главные, на фирменном синем; марка слева, страна справа */
.mat-sec{margin:clamp(40px,5vw,72px) 0 clamp(90px,11vw,150px)} /* отступы снаружи: «долистывание» ставит по центру сам блок (16.10.2026) */
.mat{display:grid;gap:12px;margin:0;padding:0;list-style:none}
@media (min-width:640px){.mat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.mat{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mat__card{display:flex;flex-direction:column;padding:22px 22px 18px;border-radius:20px;background:var(--bg-alt)}
.mat__card h3{margin:0;font-size:1.2rem;color:var(--brand)}
.mat__for{margin:4px 0 14px;font-size:.95rem;color:var(--text-2);line-height:1.45}
.mat__list{margin:auto 0 0;padding:0;list-style:none}
.mat__list li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.mat__list b{font-family:var(--font-head);font-weight:700;font-size:1.08rem;color:var(--text)}
.mat__list span{font-size:.82rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2)}
.mat__card--fabric{background:var(--brand);color:#fff}
.mat__card--fabric h3,.mat__card--fabric .mat__list b{color:#fff}
.mat__card--fabric .mat__for,.mat__card--fabric .mat__list span{color:rgba(255,255,255,.78)}
.mat__card--fabric .mat__list li{border-top-color:rgba(255,255,255,.22)}
/* «Хит продаж» у ткани (клиент, 15.10.2026): красная плашка — исключение из палитры, как SOS-красный (--sos) */
.mat__hit{display:inline-flex;align-items:center;gap:5px;margin-right:auto;padding:3px 10px 3px 8px;border-radius:999px;
  background:linear-gradient(135deg,#E53935,var(--sos));color:#fff;font-style:normal;font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;line-height:1.5;
  box-shadow:0 4px 12px -4px rgb(198 40 40 / .8),inset 0 1px 0 rgb(255 255 255 / .25);align-self:center}
.mat__hit .i{width:12px;height:12px;fill:currentColor}
.mat__list li:has(.mat__hit){justify-content:flex-start}
.mat__card--fabric .step__ico{background:rgba(255,255,255,.14);color:#fff;box-shadow:none}

/* «Наши работы» на тентах (10.10.2026): плитка .gallery__grid из style.css, во всю ширину экрана (заголовок и кнопка — по краям шапки).
   До «Смотреть ещё» виден один ряд: 4 / 3 на планшете / 2 ряда по 2 на телефоне. Без JS видно всё */
.rab-sec{margin-bottom:clamp(90px,11vw,150px)} /* отступ снаружи: «долистывание» ставит по центру сам блок (16.10.2026) */
.rab__grid{background:var(--text)} /* во всю ширину экрана, без скруглений — как лента на главной (10.10.2026) */
.js .rab:not(.is-open) .rab__grid > li:nth-child(n+5){display:none}
@media (max-width:1023px) and (min-width:640px){.js .rab:not(.is-open) .rab__grid > li:nth-child(n+4){display:none}}
.js .rab.is-open .rab__grid > li:nth-child(n+5){animation:rab-in .5s var(--ease) both}
@keyframes rab-in{from{opacity:0;transform:translateY(14px)}}
.rab__more{display:none;justify-content:center;margin-top:28px}
.js .rab__more{display:flex}
.rab__more .i{transition:transform .3s var(--ease)}
.rab.is-open .rab__more .i{transform:rotate(180deg)}

/* 8 работ пакета «Лодка к сезону» — 4 в ряд на широком (09.10.2026) */
@media (min-width:1100px){.steps--8 .step + .step::before{display:none}}

/* ═════════ Контакты (14.10.2026) ═════════ */
/* как нас найти: карта слева, способы связи справа (.ct — общий блок parts/contacts.njk); виден сразу под шапкой */
.kt-sec{padding:clamp(8px,1.5vw,24px) 0 clamp(100px,12vw,170px)}
.kt__head{max-width:760px}
.kt__head h2,h2.kt__head{margin-bottom:.45em}
.kt__head p{margin:0;color:var(--text-2);font-size:1.06rem}
/* сетка: строка заголовков («Как нас найти» | «Как с нами связаться»), под ними карта | способы связи (14.10.2026).
   На узком — по очереди: заголовок, карта, заголовок, способы связи */
.kt{display:grid;gap:24px;grid-template-areas:"head" "map" "chead" "ct"}
.kt > .kt__head:first-child{grid-area:head}
.kt__head--ct{grid-area:chead;margin-top:clamp(24px,5vw,40px)}
.kt__map{grid-area:map}
.kt > .ct{grid-area:ct}
@media (min-width:960px){
  .kt{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"head chead" "map ct";align-items:stretch;row-gap:clamp(24px,3vw,36px)}
  .kt__head{align-self:start}
  .kt__head--ct{margin-top:0}
}
.kt__map{display:flex;flex-direction:column;gap:14px}
.kt__frame{flex:1;min-height:380px;border-radius:24px;overflow:hidden;background:var(--line);border:1px solid var(--line);box-shadow:var(--shadow)}
.kt__frame iframe{display:block;width:100%;height:100%;min-height:380px;border:0}
.kt__map .zz__note{margin:0}
.kt__map .zz__note .i{flex:none}

/* О нас: цифры с досчитыванием */
.zz--kt{padding-bottom:clamp(100px,12vw,170px)}
.zz--kt .zz__row{align-items:start} /* текст «О нас» — по верхнему краю фото (владелец, 14.10.2026) */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:26px 0 0;padding:0;list-style:none}
.facts li{display:grid;gap:4px;align-content:start;padding:18px 18px 16px;border-radius:18px;background:var(--bg-alt)}
.facts li:first-child{background:var(--brand);color:#fff}
.facts b{font-family:var(--font-head);font-weight:800;font-size:clamp(2.1rem,1.6rem + 1.4vw,2.9rem);line-height:1;color:var(--brand);font-variant-numeric:tabular-nums}
.facts li:first-child b{color:#fff}
.facts span{font-size:.92rem;line-height:1.35;color:var(--text-2)}
.facts li:first-child span{color:rgb(var(--bg-rgb) / .8)}
@media (max-width:479px){.facts{grid-template-columns:1fr}.facts li{grid-template-columns:auto 1fr;align-items:center;column-gap:16px}}

/* Реквизиты ИП: слева заголовок и «Скопировать», справа строки «поле — значение» */
.rq-sec{padding-top:0;padding-bottom:clamp(64px,8vw,104px)} /* сверху без своего отступа: хватает нижнего у «Как нас найти» (владелец, 14.10.2026: пробел был велик) */
.rq{display:grid;gap:28px clamp(40px,5vw,80px);padding:clamp(28px,4vw,52px);border-radius:28px;border:1.5px solid var(--line);background:var(--bg)}
@media (min-width:960px){.rq{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);align-items:start}}
.rq__ico{display:grid;place-items:center;width:52px;height:52px;margin-bottom:16px;border-radius:14px;background:var(--bg-alt);color:var(--link)}
.rq__ico .i{width:26px;height:26px}
.rq__side h2{margin-bottom:.35em}
.rq__side p{color:var(--text-2);font-size:1.02rem}
.rq__side .btn.is-done{background:var(--bg-alt)}
.rq__list{margin:0;border-top:1px solid var(--line)}
.rq__row{display:grid;gap:2px 24px;padding:13px 0;border-bottom:1px solid var(--line)}
@media (min-width:640px){.rq__row{grid-template-columns:minmax(170px,.75fr) minmax(0,1.25fr);align-items:baseline}}
.rq__row dt{font-size:.9rem;font-weight:600;color:var(--text-2)}
.rq__row dd{margin:0;font-weight:700;color:var(--text);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}

/* ═════════ Блог (14.10.2026): лента /blog/, страница статьи, «Полезное» на страницах услуг ═════════ */
.blog-sec{padding:clamp(8px,1.5vw,24px) 0 clamp(80px,10vw,140px)}
.blog__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:clamp(24px,3vw,36px)}
.blog__head h2,.blog__h2{margin:0}
.blog__filter{display:flex;flex-wrap:wrap;gap:8px}
.blog__chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border:1.5px solid var(--line);border-radius:999px;background:var(--bg);
  font:inherit;font-weight:700;font-size:.92rem;color:var(--text);cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.blog__chip span{min-width:22px;padding:1px 7px;border-radius:999px;background:var(--bg-alt);font-size:.78rem;color:var(--text-2);text-align:center}
.blog__chip:hover{border-color:var(--link)}
.blog__chip.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.blog__chip.is-on span{background:rgb(var(--bg-rgb) / .18);color:#fff}
.blog__chip:focus-visible{outline:3px solid var(--link);outline-offset:2px}
.blog__empty,.blog__more{margin:28px 0 0;color:var(--text-2)}
.blog__more{text-align:center}
/* «Скоро здесь будут ещё статьи» — небольшой баннер под соцсетями, пока статей ≤ 3 (владелец, 23.10.2026) */
.blog-soon{display:flex;gap:20px;align-items:center;max-width:760px;margin:0 auto 28px;padding:22px 28px;border:2px dashed rgb(14 90 138 / .35);border-radius:22px;background:var(--bg-alt)}
.blog-soon__ico{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--brand);color:#fff}
.blog-soon__ico .i{width:24px;height:24px}
.blog-soon p{margin:0}
.blog-soon__t{font-family:var(--font-head);font-weight:700;font-size:1.25rem;color:var(--brand);line-height:1.25}
.blog-soon__d{margin-top:6px!important;color:var(--text-2);font-size:.98rem;line-height:1.5}
@media (max-width:639px){.blog-soon{flex-direction:column;align-items:flex-start;gap:14px;padding:20px}}

/* карточка статьи */
.ac-grid{display:grid;gap:20px;margin:0;padding:0;list-style:none}
@media (min-width:640px){.ac-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.ac-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} /* три статьи в ряд на одном уровне (владелец, 14.10.2026) */
.ac[hidden]{display:none}
.ac__link{display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:22px;border:1px solid var(--line);background:var(--bg);text-decoration:none;color:var(--text);
  transition:box-shadow .25s,transform .25s var(--ease),border-color .25s}
.ac__link:hover{border-color:transparent;box-shadow:var(--shadow);transform:translateY(-3px)}
.ac__img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bg-alt)}
.ac__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.ac__link:hover .ac__img img{transform:scale(1.05)}
.ac__body{display:flex;flex-direction:column;gap:10px;flex:1;padding:20px 22px 22px}
.ac__meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ac__topic{padding:4px 12px;border-radius:999px;background:rgb(var(--link-rgb) / .08);font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--link)}
.ac__draft{padding:4px 12px;border-radius:999px;border:1.5px dashed var(--text-2);font-size:.76rem;font-weight:700;color:var(--text-2)}
.ac__title{margin:0;font-size:1.22rem;line-height:1.25;color:var(--brand)}
.ac__lead{font-size:.95rem;line-height:1.5;color:var(--text-2)}
.ac__foot{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:6px;font-size:.86rem;color:var(--text-2)}
.ac__foot .i{margin-left:auto;color:var(--link);transition:transform .2s var(--ease)}
.ac__link:hover .ac__foot .i{transform:translateX(4px)}

/* страница статьи: узкая колонка текста для чтения */
.art__head{padding-bottom:clamp(28px,3.5vw,44px)}
.art__in{max-width:820px;margin:clamp(12px,2vw,24px) auto 0;text-align:center}
.art__kick{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin:0 0 18px}
.art__kick .zz__kicker{margin:0;text-decoration:none}
.art h1{margin:0 0 .45em;font-size:clamp(1.9rem,1.2rem + 2.4vw,3rem);line-height:1.15;color:var(--brand)}
.art__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:0 0 20px;font-size:.92rem;color:var(--text-2)}
.art__meta > *{display:inline-flex;align-items:center;gap:6px}
.art__meta > * + *::before{content:"";width:4px;height:4px;margin-right:12px;border-radius:50%;background:var(--line)}
.art__meta .i{width:16px;height:16px;color:var(--link)}
.art__lead{margin:0 auto;max-width:42em;font-size:clamp(1.05rem,1rem + .3vw,1.2rem);line-height:1.6;color:var(--text)}
.art__cover{max-width:1040px;margin:clamp(28px,3.5vw,44px) auto 0;overflow:hidden;border-radius:26px;box-shadow:0 40px 70px -50px rgb(var(--text-rgb) / .6)}
.art__cover img{display:block;width:100%;height:auto}
.art__body{padding-bottom:clamp(64px,8vw,104px)}
.art__text{max-width:760px;margin:0 auto;font-size:1.08rem;line-height:1.7;color:var(--text)}
.art__text > p{margin:0 0 1.1em}
.art__text h2{margin:1.9em 0 .6em;font-size:clamp(1.45rem,1.1rem + 1vw,1.9rem);line-height:1.2}
.art__text h3{margin:1.5em 0 .5em;font-size:1.25rem}
.art__text ul,.art__text ol{margin:0 0 1.2em;padding-left:1.3em}
.art__text li{margin:.45em 0}
.art__text li::marker{color:var(--link)}
.art__text a:not(.btn):not(.art__video){color:var(--link)}
.art__tip{display:flex;gap:14px;align-items:flex-start;margin:1.6em 0;padding:18px 20px;border-radius:18px;background:var(--bg-alt);border-left:4px solid var(--link)}
.art__tip .i{flex:none;width:24px;height:24px;margin-top:3px;color:var(--link)}
.art__tip p{margin:0}
.art__fig{margin:1.8em 0}
.art__fig img{width:100%;height:auto;border-radius:18px}
.art__fig figcaption{margin-top:8px;font-size:.9rem;color:var(--text-2);text-align:center}
/* видео — обложка с ▶ (без встраивания YouTube) */
.art__video{position:relative;display:block;margin:2em 0;overflow:hidden;border-radius:20px;background:var(--text)}
.art__video img{display:block;width:100%;height:auto;opacity:.85;transition:opacity .3s}
.art__video:hover img{opacity:1}
.art__play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:#fff;color:var(--brand);box-shadow:var(--shadow)}
.art__play .i{width:30px;height:30px;margin-left:4px}
.art__vcap{position:absolute;left:16px;bottom:14px;padding:6px 12px;border-radius:999px;background:rgb(var(--text-rgb) / .75);font-size:.85rem;font-weight:700;color:#fff}
/* «Полезное от мастеров» на странице услуги */
.useful-sec{margin-bottom:clamp(80px,9.5vw,130px)} /* отступ снаружи блока: «долистывание» ставит по центру сам блок, без пустоты под ним */
.useful__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:clamp(20px,2.5vw,32px)}

/* заявка в середине статьи (parts/art-lead.njk, 14.10.2026): светлая карточка с синей полосой слева, поля в ряд на широком */
.al{margin:2.2em 0;padding:clamp(20px,2.6vw,28px);border-radius:22px;background:var(--bg-alt);box-shadow:inset 4px 0 0 var(--brand);font-size:1rem;line-height:1.5}
.al__intro{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.al__ico{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--brand);color:#fff}
.al__ico .i{width:22px;height:22px}
.al__h{margin:0 0 4px;font-family:var(--font-head);font-weight:700;font-size:1.25rem;line-height:1.25;color:var(--brand)}
.al__p{margin:0;color:var(--text-2)}
.al__fields{display:grid;gap:12px;align-items:end;margin-bottom:14px}
@media (min-width:640px){.al__fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}}
.al .field input{background:var(--bg)}
.al .btn{min-height:50px;white-space:nowrap}
.al .consent{font-size:.86rem}

/* «Следите за нами в соцсетях» на ленте блога (14.10.2026): слева текст, справа карточки YouTube и Instagram, снизу сноска про Meta */
.blog-sec{padding-bottom:clamp(56px,7vw,96px)}
.soc-sec{padding:0 0 clamp(80px,10vw,140px)}
.soc{display:grid;gap:24px clamp(40px,5vw,80px);align-items:center;padding:clamp(26px,4vw,52px);border-radius:28px;background:var(--bg-alt)}
/* фон — «Моторка в горах» во всю ширину экрана вместо голубой карточки (владелец, 22.10.2026): сток Pexels 15015461, ч/б,
   лицо и надписи на борту убраны (img/soc-fog.jpg). Почти прозрачный, сверху и снизу растворяется в белом, как фоны на главной.
   Моторка справа, у края экрана, след дугой уходит влево за карточки соцсетей; под текстом слева фото бледнее. Содержимое — по краям сетки */
.soc-sec{position:relative;isolation:isolate;overflow:hidden;padding:clamp(56px,7vw,104px) 0} /* сверху и снизу — волны .wave-gap */
.soc-sec::before{content:"";position:absolute;inset:0;z-index:-2;opacity:.22;filter:contrast(.9) brightness(1.05);
  background:url("../img/soc-fog.jpg") 0% 88% / 160% auto no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
.soc-sec::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(255 255 255 / .4) 0%,rgb(255 255 255 / .15) 45%,transparent 65%)}
.soc-sec .soc{background:none;border-radius:0;padding-left:0;padding-right:0}
/* содержимое на пару строк выше того места, куда его ставит долистывание (владелец, 22.10.2026); фон не двигается */
@media (min-width:960px) and (hover:hover) and (pointer:fine){.soc-sec > .wrap{position:relative;top:-56px}}
/* карточки соцсетей короче, по левому краю своей колонки — справа видна моторка (владелец, 22.10.2026) */
@media (min-width:960px){.soc-sec .soc__list{width:100%;max-width:470px;justify-self:start}}
@media (max-width:959px){.soc-sec::before{background-size:cover;background-position:30% 70%}.soc-sec::after{background:rgb(255 255 255 / .35)}}
@media (min-width:960px){.soc{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.soc__text h2{margin-bottom:.4em}
.soc__text > p:last-child{margin:0;color:var(--text-2);font-size:1.06rem}
.soc__list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.soc__card{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:20px;background:var(--bg);color:var(--text);text-decoration:none;
  box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s var(--ease)}
.soc__card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.soc__ico{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--brand);color:#fff}
.soc__ico .i{width:26px;height:26px}
.soc__card b{display:block;font-family:var(--font-head);font-size:1.2rem;color:var(--brand)}
.soc__card sup{font-size:.7em;margin-left:1px}
.soc__card small{display:block;margin-top:2px;font-size:.92rem;color:var(--text-2)}
.soc__go{margin-left:auto;color:var(--link);transition:transform .2s var(--ease)}
.soc__card:hover .soc__go{transform:translateX(4px)}
.soc__note{grid-column:1 / -1;margin:0;font-size:.8rem;line-height:1.45;color:var(--text-2)}
.soc__ico--yt{background:var(--yt)} /* оригинальные цвета соцсетей (владелец, 14.10.2026) */
.soc__ico--ig{background:var(--ig)}
/* остальные статьи (с 4-й) — под блоком соцсетей (14.10.2026) */
.blog-rest-sec{padding:0 0 clamp(80px,10vw,140px)}
.blog-rest-sec .ac-grid{margin-bottom:8px}
.blog-rest-sec .blog__more{margin-top:0}
.soc-sec{padding-bottom:clamp(48px,6vw,80px)}

/* ═════════ Документы: политика, оферта, cookie (15.10.2026, layouts/doc.njk) ═════════ */
/* ширина: на узком — по краям шапки, как все страницы; на широком — не шире 1180 px по центру (длинный текст читать удобнее) */
.doc .wrap,.doc-more .wrap{max-width:calc(1180px + 2 * var(--hdr-pad))}
.doc__head{padding-bottom:clamp(28px,3.5vw,48px)}
/* шапка документа: светлая подложка, фоном строки «в линейку» и контурный знак § справа */
.doc__hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(30px,5vw,60px) clamp(22px,5vw,64px);
  border-radius:24px;background:var(--bg-alt);border:1px solid var(--line)}
.doc__hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0 31px,rgb(var(--brand-rgb) / .07) 31px 32px);
  -webkit-mask-image:linear-gradient(to left,#000,transparent 75%);mask-image:linear-gradient(to left,#000,transparent 75%)}
.doc__hero::before{content:"§";position:absolute;z-index:-1;right:clamp(20px,5vw,72px);top:50%;transform:translateY(-50%);
  font-family:var(--font-page);font-weight:500;font-size:clamp(9rem,16vw,15rem);line-height:1;color:transparent;-webkit-text-stroke:2px rgb(var(--link-rgb) / .2)}
@media (max-width:767px){.doc__hero::before{display:none}}
.doc__hero > *{max-width:min(100%,820px)}
.doc__hero h1{margin:0 0 .45em;font-family:var(--font-page);font-weight:600;text-transform:uppercase;letter-spacing:.025em;line-height:1.12;
  font-size:clamp(1.9rem,1.2rem + 2.6vw,3.2rem);color:var(--brand)}
.doc__hero h1::after{content:"";display:block;width:56px;height:3px;margin-top:.45em;border-radius:2px;background:var(--link)}
.doc__lead{margin:0 0 22px;font-size:clamp(1.02rem,1rem + .25vw,1.15rem);color:var(--text-2)}
.doc__meta{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.doc__meta li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--bg);border:1px solid var(--line);
  font-size:.9rem;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.doc__meta .i{width:16px;height:16px;color:var(--link)}

/* содержание слева + текст; на телефоне содержание — свёрнутый список над текстом */
.doc__body{display:grid;gap:28px;padding-bottom:clamp(64px,8vw,104px)}
@media (min-width:1024px){.doc__body{grid-template-columns:270px minmax(0,1fr);gap:clamp(40px,5vw,64px);align-items:start}}
.doc__toc details{border:1px solid var(--line);border-radius:18px;background:var(--bg);padding:4px}
.doc__toc summary{display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:0 16px;cursor:pointer;list-style:none;
  font-size:.8rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--link)}
.doc__toc summary::-webkit-details-marker{display:none}
.doc__toc summary::after{content:"";width:9px;height:9px;border-right:2px solid;border-bottom:2px solid;transform:translateY(-3px) rotate(45deg);transition:transform .2s var(--ease)}
.doc__toc details[open] summary::after{transform:translateY(2px) rotate(225deg)}
.doc__toc ol{margin:0;padding:0 0 8px;list-style:none}
.doc__toc a{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 16px;border-radius:10px;font-size:.95rem;line-height:1.35;
  color:var(--text-2);text-decoration:none;transition:color .2s,background-color .2s,border-color .2s}
.doc__toc a span{flex:none;min-width:1.5em;font-weight:700;color:var(--link);font-variant-numeric:tabular-nums}
.doc__toc a:hover{color:var(--text);background:var(--bg-alt)}
.doc__toc a.is-current{color:var(--brand);font-weight:700;background:rgb(var(--link-rgb) / .07)}
@media (min-width:1024px){
  .doc__toc{position:sticky;top:calc(var(--hdr) + var(--crumbs-h) + 24px);max-height:calc(100vh - var(--hdr) - var(--crumbs-h) - 48px);overflow:auto}
  .doc__toc details{border:0;border-radius:0;padding:0;background:none}
  .doc__toc summary{min-height:0;margin-bottom:12px;padding:0 0 0 16px;pointer-events:none}
  .doc__toc summary::after{display:none}
  .doc__toc ol{padding:0;border-left:2px solid var(--line)}
  .doc__toc a{min-height:0;margin-left:-2px;padding:8px 14px;border-left:2px solid transparent;border-radius:0 10px 10px 0}
  .doc__toc a.is-current{border-left-color:var(--link)}
}

/* текст документа */
.doc__text{max-width:800px;font-size:1.04rem;line-height:1.7;color:var(--text)}
.doc__text > p{margin:0 0 1em}
.doc__text h2{display:flex;align-items:center;gap:14px;margin:2em 0 .7em;font-size:clamp(1.3rem,1.1rem + .7vw,1.6rem);line-height:1.25;
  scroll-margin-top:calc(var(--hdr) + var(--crumbs-h) + 24px)}
.doc__text h2:first-child{margin-top:0}
.doc__n{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--brand);color:#fff;
  font-family:var(--font-page);font-size:1.1rem;font-weight:600;font-variant-numeric:tabular-nums}
.doc__text ul{margin:0 0 1.1em;padding-left:1.3em}
.doc__text li{margin:.4em 0}
.doc__text li::marker{color:var(--link)}
.doc__text a{color:var(--link)}
/* реквизиты в конце оферты — строки «поле: значение», как блок реквизитов на «Контактах» */
.doc__rq{margin:0;border-top:1px solid var(--line)}
.doc__rq > div{display:grid;gap:2px 24px;padding:11px 0;border-bottom:1px solid var(--line)}
@media (min-width:640px){.doc__rq > div{grid-template-columns:minmax(170px,.7fr) minmax(0,1.3fr);align-items:baseline}}
.doc__rq dt{font-size:.9rem;font-weight:600;color:var(--text-2)}
.doc__rq dd{margin:0;font-weight:700;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
/* «Остались вопросы по документу?» */
.doc__ask{display:flex;gap:16px;align-items:flex-start;margin-top:2.6em;padding:20px 22px;border-radius:18px;background:var(--bg-alt);border-left:4px solid var(--link)}
.doc__ask p{margin:0}
.doc__ask-ico{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--link);color:#fff}

/* «Другие документы» */
.doc-more{padding:clamp(56px,7vw,88px) 0;background:var(--bg-alt)}
.doc-more h2{margin:0 0 24px}
.doc-more__list{display:grid;gap:16px;margin:0;padding:0;list-style:none}
@media (min-width:720px){.doc-more__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.doc-more__card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:16px;row-gap:2px;align-items:center;height:100%;
  padding:22px 24px;border-radius:20px;background:var(--bg);border:1px solid var(--line);color:var(--text);text-decoration:none;
  transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.doc-more__ico{grid-row:1 / 3;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:rgb(var(--link-rgb) / .08);color:var(--link)}
.doc-more__ico .i{width:24px;height:24px}
.doc-more__t{font-family:var(--font-head);font-size:1.15rem;font-weight:700;color:var(--brand)}
.doc-more__d{grid-column:2;font-size:.92rem;color:var(--text-2)}
.doc-more__arr{grid-row:1 / 3;grid-column:3;width:22px;height:22px;color:var(--link);transition:transform .25s var(--ease)}
.doc-more__card:hover{transform:translateY(-2px);border-color:rgb(var(--link-rgb) / .45);box-shadow:var(--shadow)}
.doc-more__card:hover .doc-more__arr{transform:translateX(4px)}

/* ═════════ «Спасибо» и 404 (15.10.2026) ═════════ */
.end{padding:clamp(56px,8vw,112px) 0 clamp(72px,9vw,128px);text-align:center;
  background:radial-gradient(ellipse 70% 50% at 50% 0%,rgb(var(--link-rgb) / .08),transparent 70%)}
main .end__in{max-width:calc(1000px + 2 * var(--hdr-pad))}
/* зелёная галочка — как в окне «Спасибо» (dialogs.njk, владелец 08.10.2026) */
.end__ok{display:grid;place-items:center;width:84px;height:84px;margin:0 auto 26px;border-radius:50%;background:var(--green);color:#fff;box-shadow:0 0 0 10px var(--green-bg)}
.end__ok .i{width:40px;height:40px}
.js .end__ok{animation:end-pop .6s var(--ease) both}
@keyframes end-pop{from{opacity:0;transform:scale(.6)}}
.end h1{margin:0 0 .4em;font-size:clamp(2rem,1.3rem + 2.6vw,3.2rem);line-height:1.15;color:var(--brand)}
.end__lead{max-width:36em;margin:0 auto;font-size:clamp(1.05rem,1rem + .3vw,1.2rem);color:var(--text-2)}
.end__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:30px}
@media (max-width:479px){.end__btns .btn{width:100%}}
.end__h{margin:clamp(56px,7vw,80px) 0 22px;font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem)}
.end__svc{display:grid;gap:12px;margin:0;padding:0;list-style:none;text-align:left}
@media (min-width:600px){.end__svc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.end__svc{grid-template-columns:repeat(3,minmax(0,1fr))}}
.end__svc a{display:flex;align-items:center;gap:14px;min-height:66px;height:100%;padding:12px 18px 12px 12px;border-radius:16px;border:1px solid var(--line);
  background:var(--bg);font-weight:700;color:var(--text);text-decoration:none;transition:border-color .25s,box-shadow .25s,transform .25s var(--ease)}
.end__ico{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--bg-alt);color:var(--link)}
.end__ico .i{width:22px;height:22px}
.end__arr{margin-left:auto;width:18px;height:18px;color:var(--link);opacity:.45;transition:opacity .25s,transform .25s var(--ease)}
.end__svc a:hover{transform:translateY(-2px);border-color:rgb(var(--link-rgb) / .45);box-shadow:var(--shadow)}
.end__svc a:hover .end__arr{opacity:1;transform:translateX(3px)}
.end__more{display:flex;justify-content:center;gap:28px;margin:26px 0 0;font-weight:700}
.end__more a{color:var(--link)}
/* 404: контурные цифры, до середины «залиты водой», уровень воды мягко покачивается */
.end__code{margin:0 0 6px;line-height:.9}
.end__code span{display:inline-block;font-family:var(--font-page);font-weight:700;font-size:clamp(7rem,4rem + 15vw,13rem);letter-spacing:.04em;
  color:transparent;-webkit-text-stroke:2px var(--link);
  background:linear-gradient(to bottom,transparent 54%,rgb(var(--link-rgb) / .25) 54%,rgb(var(--brand-rgb) / .9)) 0 0 / 100% 114% no-repeat;
  -webkit-background-clip:text;background-clip:text}
.js .end__code span{animation:end-tide 4.5s ease-in-out infinite alternate}
@keyframes end-tide{to{background-position:0 100%}}
@media (prefers-reduced-motion:reduce){.js .end__ok,.js .end__code span{animation:none}}

/* ───────── 2б. Узкий десктоп 960–1439 px: раздел «текст | фото» целиком на экране (владелец, 16.10.2026).
   Не влезал текст (фото и так ниже): на 1280×720 под шапкой и крошками ~500 px, а «Условия хранения» были 746 px.
   Тексту — больше ширины (меньше переносов), фото — уже и потому ниже (формат 4:3 сохраняем), заголовок мельче,
   абзацы и списки плотнее. Широкий десктоп и телефон не трогаем.
   Стоит В КОНЦЕ файла: иначе базовые правила списков (.plist, .ticks, .sys, .sonar…), объявленные ниже, его перебивают. ───────── */
@media (min-width:960px) and (max-width:1439px){
  .zz__row{grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:clamp(36px,4vw,60px)}
  .zz__row--rev{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr)}
  .zz__text h2{font-size:clamp(1.55rem,.85rem + 1.4vw,2.05rem);margin-bottom:.38em}
  .zz__text > p{font-size:.96rem;line-height:1.52;margin-bottom:.75em}
  .zz__note{padding:10px 14px;font-size:.92rem!important}
  .zz__price b{font-size:1.1rem}
  /* условия хранения */
  .cond{gap:8px;margin-top:16px}
  .cond li{gap:10px;padding:8px 10px;border-radius:14px}
  .cond__ico{width:32px;height:32px;border-radius:10px}
  .cond__ico .i{width:18px;height:18px}
  .cond b{font-size:.9rem}
  .cond span:not(.cond__ico){margin-top:1px;font-size:.86rem;line-height:1.4}
  /* что входит / за доплату */
  .incl{gap:10px;margin:16px 0 14px}
  .incl__col{padding:12px 14px;border-radius:16px}
  .incl__h{margin-bottom:6px;font-size:.9rem}
  .incl ul{gap:4px}
  .incl li{font-size:.86rem;line-height:1.32}
  .incl small{font-size:.8rem}
  /* ссылки на работы, галочки, плашки систем, цены */
  .jobs{gap:8px;margin-top:16px}
  .jobs a{padding:11px 40px 11px 14px;border-radius:14px}
  .jobs span{font-size:.85rem}
  .ticks{gap:6px;margin:14px 0}
  .sys{gap:6px;margin:14px 0 4px}
  .sys li{padding:6px 12px;font-size:.88rem}
  .plist{margin-top:14px}
  .plist li{padding:5px 0;font-size:.9rem;line-height:1.4}
  .year{margin:16px 0 18px}
  /* ряд логотипов — в одну строку, мельче (16.10.2026: в две строки эхолоты не влезали) */
  .sonar{flex-wrap:nowrap;justify-content:space-between;gap:14px;margin:12px 0 2px;padding:9px 4px}
  .sonar__logo{height:17px}
  .sonar__logo--garmin{height:26px}.sonar__logo--lowrance{height:12px}.sonar__logo--humminbird{height:16px}.sonar__logo--minnkota{height:20px}
  .sonar__logo--mercury{height:19px}.sonar__logo--suzuki{height:23px}.sonar__logo--tohatsu{height:15px}.sonar__logo--yamaha{height:20px}
}

/* ───────── 2в. Широкий, но невысокий экран (≥1440 px и окно ниже 820 px): 1920×1080 с масштабом 125 % = ~1536×700 CSS px
   (экран владельца, 16.10.2026). Полное уплотнение 2б здесь «пережимало» (владелец) — тут мягко: шрифты и колонки как на
   широком экране, только логотипы в одну строку, цены и условия чуть плотнее, фото не выше видимой части экрана. ───────── */
@media (min-width:1440px) and (max-height:820px){
  .zz__media{height:min(clamp(420px,38vw,600px),calc(100vh - var(--hdr) - var(--crumbs-h) - 56px))}
  .zz__text h2{margin-bottom:.45em}
  .zz__text > p{margin-bottom:.85em}
  .cond{gap:8px;margin-top:16px}
  .cond li{padding:9px 12px}
  .incl{margin:18px 0 16px}
  .incl__col{padding:16px 18px}
  .incl ul{gap:7px}
  .jobs{margin-top:20px}
  .jobs a{padding:13px 44px 13px 16px}
  .ticks{gap:8px;margin:18px 0}
  .plist{margin-top:16px}
  .plist li{padding:9px 0}
  .sonar{flex-wrap:nowrap;justify-content:space-between;gap:16px;margin:16px 0 4px;padding:12px 4px}
  .sonar__logo{height:20px}
  .sonar__logo--garmin{height:31px}.sonar__logo--lowrance{height:15px}.sonar__logo--humminbird{height:20px}.sonar__logo--minnkota{height:25px}
  .sonar__logo--mercury{height:23px}.sonar__logo--suzuki{height:28px}.sonar__logo--tohatsu{height:18px}.sonar__logo--yamaha{height:25px}
}
/* ───────── 2г. «Полезное от мастеров» — целиком на экране невысокого ПК (16.10.2026) ─────────
   При «долистывании» блок встаёт по центру; на окне ниже 820 px карточки статей ниже: фото 21:9 (ниже 740 px — 16:5), анонс в 2 строки */
@media (min-width:960px) and (max-height:820px){
  .useful-sec .useful__head{margin-bottom:16px}
  .useful-sec .ac__img{aspect-ratio:21/9}
  .useful-sec .ac__body{gap:8px;padding:14px 18px 16px}
  .useful-sec .ac__title{font-size:1.08rem}
  .useful-sec .ac__lead{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.9rem}
}
@media (min-width:960px) and (max-height:740px){
  .useful-sec .ac__img{aspect-ratio:16/5}
}

/* ───────── 2д. «Материалы» на тентах — целиком на экране узкого и невысокого ПК (владелец, 16.10.2026) ─────────
   Четыре карточки в ряд с 960 px, всё чуть плотнее широкого вида; на совсем низком окне (ниже 660 px) — ещё плотнее */
@media (min-width:960px) and (max-width:1439px), (min-width:960px) and (max-height:820px){
  .mat{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .mat-sec .qn__head{margin-bottom:26px}
  .mat-sec .qn__head h2{font-size:clamp(1.8rem,1rem + 1.6vw,2.4rem)}
  .mat__card{padding:20px 20px 14px}
  .mat__card .step__ico{width:44px;height:44px;margin-bottom:8px;border-radius:13px}
  .mat__card h3{font-size:1.16rem}
  .mat__for{margin:4px 0 12px;font-size:.93rem}
  .mat__list li{padding:8px 0}
  .mat__list b{font-size:1.04rem}
  .mat__list span{font-size:.78rem}
}
@media (min-width:960px) and (max-height:660px){
  .mat{gap:10px}
  .mat-sec .qn__head{margin-bottom:18px}
  .mat-sec .qn__head h2{font-size:clamp(1.7rem,1rem + 1.4vw,2.1rem)}
  .mat-sec .qn__head p:last-child{font-size:.98rem}
  .mat__card{padding:16px 18px 10px;border-radius:18px}
  .mat__card .step__ico{width:38px;height:38px;margin-bottom:6px;border-radius:11px}
  .mat__card h3{font-size:1.08rem}
  .mat__for{margin:2px 0 8px;font-size:.88rem;line-height:1.4}
  .mat__list li{padding:6px 0;gap:8px}
  .mat__list b{font-size:.98rem}
  .mat__list span{font-size:.74rem}
  .mat__hit{padding:2px 8px 2px 6px;font-size:.66rem}
}

/* ───────── 2е. Невысокое окно ПК (ниже 820 px) — оставшиеся блоки целиком на экране (21.10.2026) ─────────
   После правок шапки (20.10.2026) и ссылок «Узнать точную цену» не помещались: ТО моторов, квиз моторов, «Как нас найти»,
   а на окне ниже 720 px — бронирование и реквизиты. Замер — Edge без окна: блок ≤ окно − шапка − строка крошек */
@media (min-width:960px) and (max-height:820px){
  /* заголовки разделов «текст | фото» чуть меньше (было до 2.6rem): длинный заголовок ТО моторов шёл в три строки */
  .zz__text h2{font-size:min(2.25rem,clamp(1.7rem,1.25rem + 1.7vw,2.6rem))}
  /* квиз: варианты ниже, ответ плотнее */
  .qz__sub{margin-bottom:16px}
  .qz__opts{gap:8px}
  .qz__opt{min-height:50px;padding:9px 14px}
  .qz__panel{padding:22px 26px}
  .qz__h{margin-bottom:12px;font-size:1.3rem}
  .qz__causes{gap:5px;margin-bottom:14px}
  .qz__do{margin-bottom:12px}
  .qz__rule{margin-bottom:16px;padding:10px 12px}
  /* «Как нас найти»: карта ниже, строки контактов плотнее */
  .kt__frame,.kt__frame iframe{min-height:300px}
  .kt-sec .ct__row{padding:8px 12px}
  .kt__head p{font-size:1rem}
}
@media (min-width:960px) and (max-height:720px){
  #bron.sec{padding:40px 0}
  .bk__form,.ct{padding:22px 26px}
  .bk__form > p{margin-bottom:.8em}
  .bk .form,.bk .form__row{gap:10px}
  .bk .field input{min-height:44px}
  .bk__form h2{margin-bottom:.3em}
  .bk .btn--lg{min-height:46px}
  .bk .form .btn--block{margin-top:0}
  .ct{gap:6px}
  .ct__row{padding:7px 12px}
  .ct__msg{padding:6px 2px}
  .rq{padding:24px 32px;gap:20px 40px}
}