/* ═══ Общая основа для всех шаблонов ══════════════════════════════════════
 *
 * ☠️ На сайте живут две ветки оформления: страницы на старом шаблоне тянут
 * Bootstrap 3 и style.css от 2019 года, лендинги — landing-new.css. Замер
 * 05.09.2026 показал, насколько они разошлись:
 *
 *   контейнер   — без ограничения против 1300 px
 *   шрифт       — Helvetica Neue против Montserrat
 *   кегль       — 18 px против 16 px
 *   H2          — 45 px по центру против 25 px слева
 *   отступы     — 72/72 против 85/15
 *
 * Человек кликает из меню на соседнюю страницу и попадает будто на другой
 * сайт. Переписывать старую разметку целиком — недели, поэтому здесь общий
 * слой поверх обеих тем: он выравнивает то, что видно глазом. Файл грузится
 * последним, значит перебивает обе.
 */

/* ─── основа ───────────────────────────────────────────────────────────────
 * ☠️ Это правило приходило из Bootstrap. Сняли библиотеку — и на старых
 * шаблонах padding снова начал добавляться к ширине: контейнер выходил
 * за экран ровно на свои 15 + 15 px, правый край текста прижимался к краю.
 */

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

img, svg, video {max-width: 100%;}

/* ─── контейнер ────────────────────────────────────────────────────────── */

.container {width: 100%; max-width: 1300px; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto;}

@media (max-width: 1199px) {
	.container {max-width: 100%;}
}

/* ─── типографика ──────────────────────────────────────────────────────── */

body {font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.55; color: var(--kp-ink, #1c2410);}

h1, h2, h3, h4, .title, .item-title {font-family: 'Montserrat', Arial, Helvetica, sans-serif;}

h2 {margin: 0 0 22px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; line-height: 1.2; text-align: left; text-transform: none; color: var(--kp-ink, #1c2410); text-wrap: balance;}
h3 {font-size: clamp(18px, 1.6vw, 21px); font-weight: 700; line-height: 1.3;}

p {line-height: 1.6;}

/* Заголовки на тёмных секциях остаются светлыми. */
.hero h1, .hero h2, .season h2, .self__text h2, .geo-head h2, #gallary h2, #footer h3 {color: inherit;}

/* ─── ритм секций ──────────────────────────────────────────────────────── */

.block {padding-top: var(--kp-section, 72px); padding-bottom: var(--kp-section, 72px);}
.block + .block {padding-top: 0;}

@media (max-width: 767px) {
	.block {padding-top: var(--kp-section-m, 44px); padding-bottom: var(--kp-section-m, 44px);}
}

/* ─── сетка старых шаблонов ────────────────────────────────────────────────
 * `.row` с флоатами даёт разъезжающиеся ряды разной высоты. Переводим на
 * грид, сохраняя привычные классы колонок: разметку в шаблонах не трогаем.
 */

.block .row {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; margin: 0;}
.block .row::before, .block .row::after {content: none; display: none;}
/* ☠️ min-width: 0 обязателен: у элемента грида ширина по умолчанию `auto`,
   и он не сжимается меньше своего содержимого. Широкая таблица цен
   растягивала колонку до 520 px, обёртка со скроллом не срабатывала,
   а контейнер уезжал за экран правым краем. */
.block .row > [class*="col-"] {width: auto; min-width: 0; float: none; padding: 0; grid-column: span 12;}

@media (min-width: 768px) {
	.block .row > .col-sm-3 {grid-column: span 3;}
	.block .row > .col-sm-4 {grid-column: span 4;}
	.block .row > .col-sm-6 {grid-column: span 6;}
	.block .row > .col-sm-7 {grid-column: span 7;}
	.block .row > .col-sm-8 {grid-column: span 8;}
	.block .row > .col-sm-5 {grid-column: span 5;}
	.block .row > .col-sm-9 {grid-column: span 9;}
	.block .row > .col-sm-12 {grid-column: span 12;}
}

@media (max-width: 767px) {
	.block .row {gap: 14px;}
	.block .row > .col-sm-3 {grid-column: span 6;}
}

/* ─── кнопки старой темы ───────────────────────────────────────────────── */

.block .button, .block .cbutton, .block .but1, .block .but2 {display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 28px; border: 0; border-radius: 999px; background: var(--kp-grad); color: #fff !important; font-size: 15.5px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer;}
.block .button:hover, .block .cbutton:hover {filter: brightness(1.06); color: #fff !important;}
.block .but2 {background: #fff; color: var(--kp-ink) !important; box-shadow: inset 0 0 0 1.5px var(--kp-line, #e7ece0);}

/* ─── добиваем расхождение ──────────────────────────────────────────────────
 * Обе старые темы задают своё: `.block h2 {text-align: center}` в style.css
 * и в landing-new.css, плюс размеры 40 px и 28 px в медиазапросах. Селектор
 * `.block h2` весит больше голого `h2`, поэтому повторяем его здесь —
 * файл грузится последним и выигрывает при равном весе.
 */

.block h2, .block .h2 {font-size: clamp(24px, 2.6vw, 32px); text-align: left; margin-bottom: 22px;}
.block p, .block li, .block td, .block .text, .block .desc {font-size: 16px;}
.block h3, .block .item-title {font-size: clamp(17px, 1.5vw, 20px);}

/* Заголовок по центру оставляем там, где так задумано: узкие блоки
   с призывом и формой читаются лучше по центру. */
.modal h2, .kpform__title {text-align: center;}
.modal h2 {text-align: left;}

@media (max-width: 767px) {
	.block h2, .block .h2 {font-size: 22px; margin-bottom: 16px;}
	.block p, .block li, .block td {font-size: 15.5px;}
}

/* ═══ Замена Bootstrap 3 ══════════════════════════════════════════════════
 *
 * Библиотека весила ~120 КБ и грузилась на каждой странице старого шаблона
 * ради сетки, десятка утилит и разметки модалок. Сетку мы уже перевели
 * на грид, поведение (модалки, аккордеоны, вкладки) с самого начала делает
 * свой ui.js. Оставалось оформление — оно ниже, и его тут меньше двух
 * килобайт вместо ста двадцати.
 */

/* ─── сетка: остальные брейкпоинты ─────────────────────────────────────── */

@media (min-width: 992px) {
	.block .row > .col-md-3 {grid-column: span 3;}
	.block .row > .col-md-4 {grid-column: span 4;}
	.block .row > .col-md-6 {grid-column: span 6;}
	.block .row > .col-md-8 {grid-column: span 8;}
	.block .row > .col-md-9 {grid-column: span 9;}
	.block .row > .col-md-12 {grid-column: span 12;}
}

@media (min-width: 1200px) {
	.block .row > .col-lg-3 {grid-column: span 3;}
	.block .row > .col-lg-4 {grid-column: span 4;}
	.block .row > .col-lg-6 {grid-column: span 6;}
}

.block .row > .col-xs-6 {grid-column: span 6;}
.block .row > .col-xs-12 {grid-column: span 12;}

/* ─── утилиты ──────────────────────────────────────────────────────────── */

.text-center {text-align: center;}
.text-left {text-align: left;}
.text-right, .text-r {text-align: right;}
.pull-left {float: left;}
.pull-right {float: right;}
.clearfix::after {content: ""; display: table; clear: both;}
.hide, .hidden {display: none;}
.sr-only {position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}

.img-responsive, .img-fluid {display: block; max-width: 100%; height: auto;}
.center-block {display: block; margin-left: auto; margin-right: auto;}

/* ─── поля ввода старых форм ───────────────────────────────────────────── */

.form-control {width: 100%; padding: 13px 15px; border: 1.5px solid var(--kp-line, #e7ece0); border-radius: var(--kp-r-md, 12px); background: #fff; color: var(--kp-ink, #1c2410); font: inherit; font-size: 16px; line-height: 1.4;}
.form-control:focus {outline: none; border-color: var(--kp-lime, #a4d020); box-shadow: 0 0 0 3px rgba(164, 208, 32, .18);}

/* ─── аккордеоны ────────────────────────────────────────────────────────
 * Свой ui.js помечает открытую панель классом `show`, старая разметка
 * в контенте — классом `in`. Понимаем оба.
 */

.collapse {display: none;}
.collapse.show, .collapse.in {display: block;}
.collapsing {display: block; overflow: hidden;}

/* ─── модальные окна ───────────────────────────────────────────────────── */

.modal {display: none; position: fixed; inset: 0; z-index: var(--kp-z-modal, 1000); overflow-y: auto; background: rgba(12, 22, 6, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);}
.modal.is-open, .modal.in {display: block;}
.modal-dialog {position: relative; width: 100%; max-width: 560px; margin: 40px auto;}
.modal-content {position: relative; border-radius: 22px; background: #fff; box-shadow: 0 30px 70px rgba(8, 16, 4, .38);}
.modal-header {position: relative; padding: 24px 26px 0;}
.modal-body {padding: 16px 26px 26px;}
.modal-footer {padding: 0 26px 24px;}
.modal-open {overflow: hidden;}

/* ─── вкладки ──────────────────────────────────────────────────────────── */

.nav-tabs {display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; border: 0;}
.nav-tabs > li {margin: 0; float: none;}
.nav-tabs > li > a {display: inline-block; padding: 11px 18px; border: 1.5px solid var(--kp-line, #e7ece0); border-radius: 999px; background: #fff; color: var(--kp-text, #3a4232) !important; font-size: 15px; font-weight: 600; text-decoration: none;}
.nav-tabs > li.active > a, .nav-tabs > li > a.active {border-color: var(--kp-green, #4d9b42); background: var(--kp-green, #4d9b42); color: #fff !important;}
.tab-content > .tab-pane {display: none;}
.tab-content > .tab-pane.active, .tab-content > .tab-pane.in {display: block;}

/* ─── таблицы ──────────────────────────────────────────────────────────── */

.table {width: 100%; margin-bottom: 18px; border-collapse: collapse; background: #fff;}
.table th, .table td {padding: 12px 15px; border-top: 1px solid var(--kp-line, #e7ece0); text-align: left; vertical-align: top; font-size: 15.5px; line-height: 1.45;}
.table th {background: var(--kp-tint, #f7faf1); font-weight: 700; color: var(--kp-ink, #1c2410); border-top: 0;}
.table-hover tbody tr:hover {background: rgba(164, 208, 32, .08);}
.table-bordered, .table-bordered th, .table-bordered td {border: 1px solid var(--kp-line, #e7ece0);}

/* ─── кнопки ───────────────────────────────────────────────────────────── */

.btn {display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border: 0; border-radius: 999px; background: var(--kp-grad); color: #fff; font-size: 15.5px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer;}
.btn:hover {filter: brightness(1.06); color: #fff;}
.btn-link {background: none; color: var(--kp-green, #4d9b42); padding: 0;}
.caret {display: none;}

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

.hero + .container, .hero + .block, .hero + section, .hero + article {padding-top: 34px;}
.hero + .container > *:first-child, .ppage > *:first-child {margin-top: 0;}

@media (max-width: 767px) {
	.hero + .container, .hero + .block, .hero + section, .hero + article {padding-top: 22px;}
}

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

a {text-decoration: none; color: var(--kp-green, #4d9b42);}
a:hover {color: var(--kp-lime, #a4d020);}

/* Подчёркиваем только ссылки в тексте: внутри абзацев, списков и врезок.
   Кнопки, вкладки, телефоны и списки городов — интерфейс, им подчёркивание
   не нужно, оно делает страницу пёстрой. */
.entry p a, .entry li a, .entry td a, .entry blockquote a,
.block p a, .block td a,
.pnote a, .season-lead a, .kinds__item a, .rvform__consent a, .kpform__consent a,
#contpage .item p a {text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;}

/* А эти — интерфейс, даже если стоят внутри абзаца. */
.entry p a.btn, .entry p a.button, .block p a.btn, .block p a.button,
.entry p a[class*="__btn"], .block p a[class*="__btn"],
.entry a[href^="tel:"], .block a[href^="tel:"],
.entry a[href^="mailto:"], .block a[href^="mailto:"] {text-decoration: none;}

/* Ссылки, которые оформлены как элементы интерфейса, подчёркивать нельзя:
   они уже выглядят кликабельными. */
#header a, #mobile a, #mmenu a, #footer a, .hero a, .nav a, .nav-tabs a,
.wcard a, .rews-btn, .trust-link, .geo-chips a, .msg-row, .btn, .button, .cbutton,
.mm-msg a, .kpform__btn, .rvform__btn, .pcta-tel, .ccta__tel,
.kp-acc__head, .faq-ask__tel, .faq-ask__btn, .tabs-nav__link {text-decoration: none;}

#footer a:hover, #header a:hover {text-decoration: none;}

/* Обычный текст страницы в едином шаблоне: те же поля и ритм, что у блоков. */
.entry-block {padding-top: 0;}
.entry > *:first-child {margin-top: 0;}
.entry h2 {margin-top: 34px;}
.entry h3 {margin: 26px 0 12px;}
.entry p, .entry li {font-size: 16px; line-height: 1.65;}
.entry ul, .entry ol {margin: 0 0 18px; padding-left: 22px;}
.entry li {margin-bottom: 7px;}
.entry img {border-radius: 16px;}

/* ══ Блоки внутри текста страницы ═══════════════════════════════════════════

   ☠️ Раньше советы «Где выкопать колодец» и «Как узнать глубину» были набраны
   как <div class="flex"> с картинкой-галочкой и абзацем во всю ширину 1240 px.
   Класс `.flex` в теме ничего не раскладывал, поэтому галочка висела сама
   по себе, текст шёл под ней строками по 200 символов, а между пунктами
   зияли пустые полосы. Тот же приём был в характеристиках кольца.

   Теперь это карточки в сетке: строка короче, иконка рядом с текстом,
   у секции есть ритм. Появление — через `.kp-anim` в assets/ui.js.          */

.kp-tips {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0;}
.kp-tip {display: flex; gap: 16px; padding: 24px 26px; border: 1px solid var(--kp-line, #e7ece0); border-radius: 18px; background: #fff; transition: box-shadow .2s, transform .2s, border-color .2s;}
.kp-tip:hover {border-color: #d4e3b4; box-shadow: 0 10px 30px rgba(20, 40, 10, .08); transform: translateY(-2px);}
.kp-tip__ico {flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(150deg, #eef6dc 0%, #e2eec6 100%); color: #3f7a10;}
.kp-tip__ico svg {width: 22px; height: 22px;}
.kp-tip p {margin: 0; font-size: 16px; line-height: 1.6; color: var(--kp-text, #3a4232);}
.kp-tip p + p {margin-top: 9px;}
.kp-tip strong {color: var(--kp-ink, #1c2410);}

/* Кольца: характеристики, снимок, доставка. */
.kp-ring {display: grid; grid-template-columns: 1fr 0.9fr 1fr; gap: 26px; align-items: stretch; margin-top: 26px;}
.kp-ring__col {display: flex; flex-direction: column; padding: 26px 28px; border: 1px solid var(--kp-line, #e7ece0); border-radius: 20px; background: #fff;}
.kp-ring__col h3 {margin: 0 0 16px; font-size: 20px; font-weight: 700; color: var(--kp-ink, #1c2410);}
.kp-ring__col p {font-size: 16px; line-height: 1.6;}
.kp-specs {margin: 0; padding: 0; list-style: none;}
.kp-spec {display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px dashed #e4ead8;}
.kp-spec:last-child {border-bottom: 0;}
.kp-spec img {width: 26px; height: 26px; flex: none; opacity: .85;}
.kp-spec__name {flex: 1; min-width: 0; font-size: 15.5px; color: #6f7d51;}
.kp-spec__val {font-size: 17px; font-weight: 700; color: var(--kp-ink, #1c2410); white-space: nowrap;}
.kp-ring__photo {align-self: stretch; min-height: 260px; border-radius: 20px; background: #f5f9ee url(../images/ring-fon.png) no-repeat center / 78%;}
.kp-ring__note {margin: 26px 0 0; padding: 18px 22px; border-left: 3px solid var(--kp-lime, #a4d020); border-radius: 0 14px 14px 0; background: #f7faf1; font-size: 16px; line-height: 1.6;}

/* Аккордеон вопросов: одна открытая вкладка, плавное раскрытие.

   ☠️ Раскладка в две колонки здесь не работает: открытая карточка растягивает
   строку сетки, а соседняя остаётся короткой — справа получается пустое поле
   на пол-экрана. Поэтому колонка одна, а длину строки ответа держим текстом. */
.kp-acc {display: grid; grid-template-columns: 1fr; gap: 12px;}
.kp-acc__item {border: 1px solid var(--kp-line, #e7ece0); border-radius: 16px; background: #fff; overflow: hidden; transition: border-color .18s, box-shadow .18s;}
.kp-acc__item:hover {border-color: #d4e3b4;}
.kp-acc__head {display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 18px 22px; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--kp-ink, #1c2410); text-align: left; cursor: pointer; text-decoration: none;}
.kp-acc__head::after {content: ""; flex: none; width: 11px; height: 11px; border-right: 2px solid #7c8571; border-bottom: 2px solid #7c8571; transform: rotate(45deg) translate(-2px, -2px); transition: transform .22s;}
.kp-acc__head:not(.collapsed) {color: #3f7a10;}
.kp-acc__head:not(.collapsed)::after {transform: rotate(-135deg) translate(-3px, -3px); border-color: #3f7a10;}
.kp-acc__body {padding: 0 22px;}
.kp-acc__body > *:first-child {margin-top: 0;}
.kp-acc__body > *:last-child {margin-bottom: 18px;}
.kp-acc__body p {max-width: 84ch; font-size: 16px; line-height: 1.65; color: var(--kp-text, #3a4232);}

/* Тот же аккордеон на тёмной подложке — блок «Наши преимущества» на копке. */
.kp-acc--dark .kp-acc__item {border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);}
.kp-acc--dark .kp-acc__item:hover {border-color: rgba(205, 234, 108, .6);}
.kp-acc--dark .kp-acc__head {color: #fff;}
.kp-acc--dark .kp-acc__head::after {border-color: rgba(255, 255, 255, .75);}
.kp-acc--dark .kp-acc__head:not(.collapsed) {color: #cdea6c;}
.kp-acc--dark .kp-acc__head:not(.collapsed)::after {border-color: #cdea6c;}
.kp-acc--dark .kp-acc__body p {color: rgba(255, 255, 255, .9);}

/* Появление блока при прокрутке.
   ☠️ Прячем только под классом `js-anim` — его ставит на <html> сам скрипт
   в assets/ui.js. Если скрипт не выполнился или браузер не умеет
   IntersectionObserver, класса нет и карточки видны сразу: пустая страница
   с невидимым текстом хуже, чем страница вовсе без анимации. */
.js-anim .kp-anim {opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease;}
.js-anim .kp-anim.is-in {opacity: 1; transform: none;}
.js-anim .kp-anim:nth-child(2) {transition-delay: .07s;}
.js-anim .kp-anim:nth-child(3) {transition-delay: .14s;}
.js-anim .kp-anim:nth-child(4) {transition-delay: .21s;}

@media (prefers-reduced-motion: reduce) {
	.js-anim .kp-anim {opacity: 1; transform: none; transition: none;}
}

@media (max-width: 1023px) {
	.kp-ring {grid-template-columns: 1fr 1fr;}
	.kp-ring__photo {grid-column: span 2; min-height: 200px;}
}

@media (max-width: 767px) {
	.kp-tips {grid-template-columns: 1fr;}
	.kp-tip {padding: 18px 18px; gap: 13px;}
	.kp-tip__ico {width: 38px; height: 38px; border-radius: 11px;}
	.kp-ring {grid-template-columns: 1fr; gap: 16px;}
	.kp-ring__photo {grid-column: auto; min-height: 180px;}
	.kp-ring__col {padding: 20px 18px;}
	.kp-acc__head {padding: 15px 17px; font-size: 16px;}
	.kp-acc__body {padding: 0 17px;}
}

/* Вопросы и ответы: слева аккордеон, справа карточка «спросить мастера».
   Раньше аккордеон упирался в max-width 900 px, и справа оставалось пустое
   поле — блок выглядел недоделанным. */
.faq-grid {display: grid; grid-template-columns: 1fr 340px; gap: 26px; align-items: start;}
.faq-ask {position: sticky; top: 90px; padding: 26px 26px 24px; border-radius: 20px; background: linear-gradient(160deg, #37701f 0%, #2f7d3b 55%, #1f6f45 100%); color: #fff;}
.faq-ask__title {margin-bottom: 10px; font-size: 21px; font-weight: 700; line-height: 1.25;}
.faq-ask__text {margin: 0 0 18px; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, .88);}
.faq-ask__tel {display: inline-flex; align-items: center; gap: 9px; margin-bottom: 12px; font-size: 21px; font-weight: 700; color: #fff !important;}
.faq-ask__btn {display: block; width: 100%; padding: 14px 18px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #a6d120 0%, #7ab52f 100%); color: #1e2c05; font-size: 16px; font-weight: 700; cursor: pointer; transition: transform .15s, filter .18s;}
.faq-ask__btn:hover {transform: translateY(-1px); filter: brightness(1.05);}
.faq-ask__time {margin-top: 11px; font-size: 13px; color: rgba(255, 255, 255, .75); text-align: center;}

@media (max-width: 1023px) {
	.faq-grid {grid-template-columns: 1fr;}
	.faq-ask {position: static;}
}

/* Блок «Почему мы»: пункты слева, снимок справа. Пункты бывают двух видов —
   с раскрытием (тогда это kp-acc) и просто списком, если текстов нет. */
.about-grid {display: grid; grid-template-columns: 1fr 0.85fr; gap: 30px; align-items: stretch;}
.about-list {display: grid; gap: 12px; margin: 0; padding: 0; list-style: none;}
.about-list li {position: relative; padding: 16px 20px 16px 54px; border: 1px solid var(--kp-line, #e7ece0); border-radius: 16px; background: #fff; font-size: 16.5px; line-height: 1.5; color: var(--kp-text, #3a4232);}
.about-list li::before {content: ""; position: absolute; left: 18px; top: 50%; width: 20px; height: 11px; margin-top: -8px; border-left: 2.6px solid #3f7a10; border-bottom: 2.6px solid #3f7a10; transform: rotate(-45deg);}
/* Снимок тянется по высоте списка: иначе колонка справа была на 400 px выше,
   и слева под последним пунктом зияла пустота. */
.about-img {height: 100%;}
.about-img img {width: 100%; height: 100%; max-height: 560px; object-fit: cover; border-radius: 20px;}

@media (max-width: 767px) {
	.about-grid {grid-template-columns: 1fr; gap: 20px;}
	.about-img img {max-height: 300px;}
	.about-list li {padding: 14px 16px 14px 46px; font-size: 15.5px;}
	.about-list li::before {left: 15px;}
}

/* ══ Блок с вкладками ═══════════════════════════════════════════════════════
   Вкладки сверху, под ними две колонки: текст и снимок. Активная вкладка
   в фирменном зелёном — раньше она была чёрной, такого цвета в палитре нет. */

.tabs-head {display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: end; margin-bottom: 24px;}
.tabs-head h2 {margin: 0;}
.tabs-lead {font-size: 16.5px; line-height: 1.6; color: var(--kp-text, #3a4232);}
.tabs-lead p {margin: 0;}

.tabs-nav {display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 22px; padding: 0; list-style: none;}
.tabs-nav__link {display: inline-flex; align-items: center; padding: 11px 20px; border: 1.5px solid var(--kp-line, #e7ece0); border-radius: 999px; background: #fff; color: var(--kp-text, #3a4232); font-size: 15.5px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: border-color .16s, background .16s, color .16s;}
.tabs-nav__link:hover {border-color: var(--kp-lime, #a4d020); color: var(--kp-text, #3a4232);}
.tabs-nav__link.active {border-color: var(--kp-green, #4d9b42); background: var(--kp-green, #4d9b42); color: #fff !important;}

.tabs-body {display: grid; grid-template-columns: 1fr 0.95fr; gap: 30px; align-items: stretch;}
.tabs-body .tab-content {padding: 28px 30px; border: 1px solid var(--kp-line, #e7ece0); border-radius: 20px; background: #fff;}
.tabs-body .tab-pane {display: none;}
.tabs-body .tab-pane.active, .tabs-body .tab-pane.show {display: block;}
.tabs-body h3 {margin: 0 0 12px; font-size: 21px; font-weight: 700; color: var(--kp-ink, #1c2410);}
.tabs-body p {margin: 0 0 12px; font-size: 16px; line-height: 1.65;}
.tabs-body p:last-child {margin-bottom: 0;}
/* ☠️ Снимки товара нельзя кадрировать по `cover`: у кольца срезало
   верх и низ. Вписываем целиком, поля добираем фоном. */
.tabs-photo {display: grid; place-items: center; min-height: 280px; padding: 18px; border: 1px solid var(--kp-line, #e7ece0); border-radius: 20px; background: #fff; overflow: hidden;}
.tabs-photo img {width: 100%; height: auto; max-height: 340px; object-fit: contain; display: block;}

@media (max-width: 1023px) {
	.tabs-head {grid-template-columns: 1fr; gap: 12px; align-items: start;}
	.tabs-body {grid-template-columns: 1fr;}
	.tabs-photo {min-height: 220px;}
	.tabs-photo img {max-height: 260px;}
}

@media (max-width: 767px) {
	.tabs-nav {gap: 7px;}
	.tabs-nav__link {padding: 9px 15px; font-size: 14.5px;}
	.tabs-body .tab-content {padding: 20px 18px;}
}

/* ══ Этапы работы ═══════════════════════════════════════════════════════════
   Карточки с номером шага. Раньше это были четыре колонки текста без рамок:
   ни порядка, ни границ — читалось как сплошная простыня. */

.steps {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: step;}
.steps__item {position: relative; display: flex; flex-direction: column; padding: 24px 24px 22px; border: 1px solid var(--kp-line, #e7ece0); border-radius: 20px; background: #fff; transition: box-shadow .2s, transform .2s, border-color .2s;}
.steps__item:hover {border-color: #d4e3b4; box-shadow: 0 12px 32px rgba(20, 40, 10, .08); transform: translateY(-2px);}
.steps__top {display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px;}
.steps__num {display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(150deg, #eef6dc 0%, #dcecb8 100%); color: #3f7a10; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums;}
.steps__ico {width: 44px; height: 44px; object-fit: contain; opacity: .9;}
.steps__title {margin: 0 0 8px; font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--kp-ink, #1c2410);}
.steps__text p {margin: 0 0 8px; font-size: 15.5px; line-height: 1.6; color: var(--kp-text, #3a4232);}
.steps__text p:last-child {margin-bottom: 0;}

/* Тонкая линия между карточками — показывает, что шаги идут по порядку. */
@media (min-width: 1024px) {
	.steps__item:not(:last-child)::after {content: ""; position: absolute; right: -13px; top: 42px; width: 8px; height: 8px; border-right: 2px solid #cfe0ab; border-top: 2px solid #cfe0ab; transform: rotate(45deg);}
}

@media (max-width: 1023px) {
	.steps {grid-template-columns: repeat(2, minmax(0, 1fr));}
}

@media (max-width: 599px) {
	.steps {grid-template-columns: 1fr; gap: 12px;}
	.steps__item {padding: 18px 18px 16px;}
}

/* ══ Блок «Точная цена за 10 минут» ═════════════════════════════════════════
   Слева обещание и телефон, справа кнопки. Раньше здесь была белая рамка
   поверх пёстрого снимка: текст читался через раз, кнопка терялась. */

.cta {display: grid; grid-template-columns: 1fr 320px; gap: 34px; align-items: center; padding: 36px 40px; border-radius: 24px; background: linear-gradient(100deg, rgba(12, 22, 6, .94) 0%, rgba(12, 22, 6, .86) 55%, rgba(20, 45, 12, .78) 100%); color: #fff;}
.cta h2 {margin: 0 0 12px; color: #fff;}
.cta__text p {max-width: 62ch; margin: 0 0 18px; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .88);}
.cta__tel {display: inline-flex; align-items: center; gap: 10px; font-size: 27px; font-weight: 800; color: #fff !important; letter-spacing: -.01em;}
.cta__time {margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, .72);}
.cta__act {display: grid; gap: 10px;}
.cta__btn {width: 100%; padding: 16px 22px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #a6d120 0%, #7ab52f 100%); color: #1e2c05; font-size: 16.5px; font-weight: 700; cursor: pointer; transition: transform .15s, filter .18s;}
.cta__btn:hover {transform: translateY(-1px); filter: brightness(1.06);}
.cta__msg {display: flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 20px; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 999px; color: #fff !important; font-size: 15.5px; font-weight: 600; text-decoration: none; transition: border-color .18s, background .18s;}
.cta__msg:hover {border-color: #cdea6c; background: rgba(255, 255, 255, .08);}
.cta__msg img {filter: brightness(0) invert(1);}
.cta__note {font-size: 13px; color: rgba(255, 255, 255, .7); text-align: center;}

@media (max-width: 1023px) {
	.cta {grid-template-columns: 1fr; gap: 22px; padding: 28px 24px;}
}

@media (max-width: 767px) {
	.cta {padding: 22px 18px; border-radius: 18px;}
	.cta__tel {font-size: 23px;}
}

/* ══ Калькулятор стоимости ══════════════════════════════════════════════════
   Слева поля, справа липкая карточка с итогом. Цены приходят из inc/calc.php,
   чтобы расчёт на странице и прайс не разъезжались. */

.calc__lead {max-width: 68ch; margin: -6px 0 24px; font-size: 16.5px; line-height: 1.6; color: var(--kp-text, #3a4232);}
.calc__grid {display: grid; grid-template-columns: 1fr 360px; gap: 26px; align-items: start;}
.calc__form {display: grid; gap: 18px; padding: 28px 30px; border: 1px solid var(--kp-line, #e7ece0); border-radius: 20px; background: #fff;}
.calc__field {display: block;}
.calc__label {display: block; margin-bottom: 8px; font-size: 15.5px; font-weight: 600; color: var(--kp-ink, #1c2410);}
.calc__input {width: 100%; padding: 13px 16px; border: 1.5px solid var(--kp-line, #e7ece0); border-radius: 12px; background: #fff; font-family: inherit; font-size: 16.5px; color: var(--kp-ink, #1c2410); outline: 0; transition: border-color .16s;}
.calc__input:focus {border-color: var(--kp-lime, #a4d020);}
.calc__hint {display: block; margin-top: 7px; font-size: 14px; line-height: 1.45; color: #7c8571;}
.calc__check {display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; font-size: 15.5px; line-height: 1.45; color: var(--kp-text, #3a4232); cursor: pointer;}
.calc__check input {flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #4d9b42; cursor: pointer;}

.calc__out {position: sticky; top: 90px; padding: 26px 26px 24px; border-radius: 20px; background: linear-gradient(160deg, #37701f 0%, #2f7d3b 55%, #1f6f45 100%); color: #fff;}
.calc__out-label {font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .75);}
.calc__sum {margin: 6px 0 16px; font-size: clamp(28px, 3.2vw, 38px); font-weight: 800; line-height: 1.1; color: #cdea6c;}
.calc__lines {margin: 0 0 16px; padding: 16px 0 0; border-top: 1px solid rgba(255, 255, 255, .2); list-style: none;}
.calc__lines li {display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14.5px; line-height: 1.4; color: rgba(255, 255, 255, .88);}
.calc__lines b {flex: none; font-weight: 700; color: #fff; white-space: nowrap;}
.calc__note {margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .75);}
.calc__btn {display: block; width: 100%; padding: 15px 20px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #a6d120 0%, #7ab52f 100%); color: #1e2c05; font-size: 16px; font-weight: 700; cursor: pointer; transition: transform .15s, filter .18s;}
.calc__btn:hover {transform: translateY(-1px); filter: brightness(1.06);}
.calc__tel {display: block; margin-top: 12px; font-size: 19px; font-weight: 700; color: #fff !important; text-align: center; text-decoration: none;}

/* Пресеты: типовой случай одной кнопкой — по ним человек попадает
   в свою ситуацию, не разбираясь в кольцах и схемах. */
.calc__presets {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
.calc__preset {display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 13px; border: 1.5px solid var(--kp-line, #e7ece0); border-radius: 16px; background: #fff; text-align: left; cursor: pointer; transition: border-color .16s, background .16s, transform .12s;}
.calc__preset:hover {border-color: var(--kp-lime, #a4d020); transform: translateY(-1px);}
.calc__preset.is-on {border-color: var(--kp-green, #4d9b42); background: #f4faea;}
.calc__pic {width: 100%; height: 118px; border-radius: 11px; object-fit: cover; background: #eef6dc;}
.calc__preset b {padding: 0 4px; font-size: 15.5px; font-weight: 700; line-height: 1.25; color: var(--kp-ink, #1c2410);}
.calc__preset i {padding: 0 4px; margin-top: 3px; font-size: 13.5px; font-style: normal; color: #7c8571;}

/* Ползунок: тянешь — схема и цена меняются на глазах. */
.calc__range {width: 100%; height: 6px; margin: 6px 0 2px; border-radius: 6px; background: linear-gradient(90deg, #a4d020 0%, #e7ece0 0%); background: #e7ece0; outline: 0; -webkit-appearance: none; appearance: none; cursor: pointer;}
.calc__range::-webkit-slider-thumb {-webkit-appearance: none; width: 26px; height: 26px; border: 3px solid #fff; border-radius: 50%; background: linear-gradient(135deg, #a6d120 0%, #7ab52f 100%); box-shadow: 0 3px 10px rgba(20, 40, 10, .25); cursor: grab;}
.calc__range::-moz-range-thumb {width: 22px; height: 22px; border: 3px solid #fff; border-radius: 50%; background: #7ab52f; box-shadow: 0 3px 10px rgba(20, 40, 10, .25); cursor: grab;}
.calc__label b {color: #3f7a10;}

/* Обустройство карточками с иконкой — в них видно, что именно берут. */
.calc__extras {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
.calc__extra {display: grid; grid-template-columns: 20px 64px 1fr; align-items: center; gap: 12px; padding: 10px 13px; border: 1.5px solid var(--kp-line, #e7ece0); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .16s, background .16s;}
.calc__extra:hover {border-color: #d4e3b4;}
.calc__extra:has(input:checked) {border-color: var(--kp-green, #4d9b42); background: #f4faea;}
.calc__extra input {width: 20px; height: 20px; margin: 0; accent-color: #4d9b42; cursor: pointer;}
.calc__extra .calc__pic {width: 64px; height: 64px; border-radius: 12px; object-fit: contain; background: #f2f7e4; padding: 4px;}
.calc__extra-txt {display: grid;}
.calc__extra-txt b {font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--kp-ink, #1c2410);}
.calc__extra-txt i {font-size: 13px; font-style: normal; color: #7c8571;}

/* Схема в карточке итога: колодец достраивается кольцами, септик — камерами. */
.calc__scheme {margin: -6px 0 16px; padding: 12px 12px 8px; border-radius: 14px; background: rgba(255, 255, 255, .1);}
.calc__scheme svg {display: block; margin: 0 auto;}
.calc__scheme-cap {margin-top: 8px; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .82); text-align: center;}

/* Схема — цельный разрез на нужную глубину, а не стек из кусков. */
.calc__scheme {display: grid; justify-items: center; margin: -6px 0 16px;}
.calc__scheme-img {width: 100%; max-width: 300px; height: auto; max-height: 320px; object-fit: contain; border-radius: 14px;}

/* Дренаж: пресеты без картинок — снимков своих траншей у нас пока нет. */
.calc__presets--text {grid-template-columns: repeat(3, minmax(0, 1fr));}
.calc__presets--text .calc__preset {gap: 2px; padding: 13px 12px;}

/* Выбор типа системы. Собственный вид: браузерный select ломает ритм формы. */
.calc__select {width: 100%; padding: 13px 40px 13px 14px; border: 1.5px solid var(--kp-line, #e7ece0); border-radius: 14px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%237c8571' stroke-width='2'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E") right 15px center no-repeat; font: inherit; font-size: 15px; color: var(--kp-ink, #1c2410); cursor: pointer; -webkit-appearance: none; appearance: none;}
.calc__select:focus {border-color: var(--kp-green, #4d9b42); outline: 0;}

/* Вместо разреза — из чего складывается погонный метр трассы. */
.calc__layers {display: grid; gap: 2px; width: 100%; margin-bottom: 10px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .08);}
.calc__layer {display: grid; gap: 1px; padding: 9px 12px; border-radius: 11px; background: rgba(255, 255, 255, .07);}
.calc__layer b {font-size: 14px; font-weight: 700; color: #fff;}
.calc__layer i {font-size: 12.5px; font-style: normal; line-height: 1.4; color: rgba(255, 255, 255, .74);}

/* «От чего цена меняется» — держит левую колонку вровень с карточкой итога. */
.calc__why {padding-top: 4px;}
.calc__why-list {display: grid; gap: 9px; margin: 0; padding: 0; list-style: none;}
.calc__why-list li {position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.5; color: #5c6752;}
.calc__why-list li::before {content: ""; position: absolute; top: 8px; left: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--kp-lime, #a4d020);}
.calc__why-list b {font-weight: 700; color: var(--kp-ink, #1c2410);}

/* переключатель услуг: только там, где вид работ со страницы не понятен */
.calc__tabs {display: flex; gap: 12px; margin: 0 0 20px;}
.calc__tab {display: grid; gap: 3px; padding: 14px 24px; border: 1.5px solid var(--kp-line, #e7ece0); border-radius: 16px; background: #fff; text-align: left; cursor: pointer; transition: border-color .16s, background .16s, transform .12s;}
.calc__tab:hover {border-color: var(--kp-lime, #a4d020); transform: translateY(-1px);}
.calc__tab.is-on {border-color: var(--kp-green, #4d9b42); background: #f4faea;}
.calc__tab-name {font-size: 17px; font-weight: 700; color: var(--kp-ink, #1c2410);}
.calc__tab-note {font-size: 13.5px; color: #7c8571;}

@media (max-width: 560px) {
	.calc__tabs {gap: 8px;}
	.calc__tab {flex: 1; padding: 12px 14px;}
	.calc__tab-name {font-size: 15.5px;}
	.calc__tab-note {font-size: 12.5px;}
}

@media (max-width: 767px) {
	.calc__presets, .calc__extras {grid-template-columns: 1fr;}
}

@media (max-width: 1023px) {
	.calc__grid {grid-template-columns: 1fr;}
	.calc__out {position: static;}
}

@media (max-width: 767px) {
	.calc__form {padding: 20px 18px; gap: 14px;}
	.calc__out {padding: 20px 18px;}
}

/* ─── Футер: где нас проверить ──────────────────────────────────────────
 * Ссылки на площадки с отзывами. Цифру рейтинга показываем только там,
 * где она заработана: 4,8 при 69 отзывах убеждает, 4,1 при четырёх — нет.
 */
.footer-proof {margin: 34px 0 4px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .12);}
.footer-proof__t {margin-bottom: 14px; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .55);}
.footer-proof__row {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;}
.fproof {display: grid; gap: 3px; padding: 14px 18px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; text-decoration: none !important; transition: border-color .16s, background .16s, transform .12s;}
.fproof:hover {border-color: rgba(164, 208, 32, .55); background: rgba(255, 255, 255, .04); transform: translateY(-1px);}
.fproof__name {font-size: 16px; font-weight: 700; color: #fff;}
.fproof__rate {font-size: 14.5px; color: #cdea6c;}
.fproof__rate b {font-size: 17px; font-weight: 800;}
.fproof__note {font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .5);}

@media (max-width: 860px) {
	.footer-proof__row {grid-template-columns: 1fr;}
	.footer-proof {margin-top: 26px;}
}

/* Наши работы на странице услуги: чужой объект убеждает лучше текста. */
.ourworks__head {display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; margin-bottom: 26px;}
.ourworks__head h2 {margin-bottom: 10px;}
.ourworks__lead {max-width: 720px; margin: 0; font-size: 16px; line-height: 1.55; color: #5c6752;}
.ourworks__all {flex: none; padding: 12px 20px; border: 1.5px solid var(--kp-line, #e7ece0); border-radius: 12px; font-weight: 600; color: var(--kp-ink, #1c2410); white-space: nowrap; transition: border-color .16s, background .16s;}
.ourworks__all:hover {border-color: var(--kp-green, #4d9b42); background: #f4faea;}
.ourworks__grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;}
.owork {display: flex; flex-direction: column; overflow: hidden; border: 1.5px solid var(--kp-line, #e7ece0); border-radius: 18px; background: #fff; transition: border-color .16s, transform .14s, box-shadow .16s;}
.owork:hover {border-color: var(--kp-lime, #a4d020); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(20, 40, 10, .1);}
.owork__img {display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #f2f5ec;}
.owork__img img {width: 100%; height: 100%; object-fit: cover;}
.owork__body {display: flex; flex: 1; flex-direction: column; gap: 9px; padding: 16px 18px 18px;} /* flex:1 — иначе цены в карточках не встают на одну линию: у объектов разной длины заголовки */
.owork__title {font-size: 16.5px; font-weight: 700; line-height: 1.3; color: var(--kp-ink, #1c2410);}
.owork__facts {display: flex; flex-wrap: wrap; gap: 6px 14px;}
.owork__facts i {font-size: 13.5px; font-style: normal; color: #7c8571;}
.owork__price {display: flex; gap: 8px; align-items: baseline; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--kp-line, #e7ece0);}
.owork__price span {font-size: 13px; color: #7c8571;}
.owork__price b {font-size: 18px; font-weight: 800; color: #3f7a10;}
@media (max-width: 900px) {.ourworks__grid {grid-template-columns: repeat(2, minmax(0, 1fr));} .ourworks__head {flex-direction: column;}}
@media (max-width: 600px) {.ourworks__grid {grid-template-columns: 1fr;}}

/* Подзаголовки внутри прайса липли к предыдущему абзацу — таблица, текст и h3 шли встык. */
#price h3 {margin: 34px 0 14px; font-size: clamp(19px, 1.7vw, 22px); font-weight: 800; line-height: 1.25; color: var(--kp-ink, #1c2410);}
#price table + p, #price p + h3 {margin-top: 18px;}

/* ☠️ Таблицы прайса на телефоне обрезались. Ширина считается по контенту
   (table-layout: auto), длинная колонка растягивала таблицу до 1300 px,
   а обёртка была overflow: visible — страница не прокручивалась вбок,
   и половина таблицы вместе с ценой просто пропадала за краем экрана.
   Теперь таблица прокручивается внутри своего блока, а не режется. */
@media (max-width: 900px) {
	#price .table, #price div:has(> table) {overflow-x: auto; -webkit-overflow-scrolling: touch;}
	/* min-width не задаём: узкие таблицы («работа — цена») тогда растягивались
	   на 620 px и теряли колонку цены, хотя спокойно влезали в экран. */
	#price table {font-size: 14px;}
	#price table td {padding: 10px 12px;}
	/* ☠️ Первая колонка липкая, чтобы при прокрутке было видно, к какой строке
	   относится цена. Пробовал вместо этого table-layout: fixed — четыре
	   колонки на 375 px сжались так, что слова рвались по слогам:
	   «Схе-ма», «коль-ца», «2+2-+2». Читать невозможно. */
	#price table td:first-child {position: sticky; left: 0; background: #fff; box-shadow: 1px 0 0 var(--kp-line, #e7ece0);}
	#price table tr:nth-child(odd) td:first-child {background: #f7f9f3;}
}