/*
 * Базовые состояния интерфейса вместо Bootstrap и owl.carousel.
 * Один файл на обе темы оформления. Подключается последним, поэтому
 * перебивает остатки старых правил, где они ещё есть.
 */

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

.modal.is-open {display: block; opacity: 1;}
body.modal-open {overflow: hidden;}

/* ─── аккордеоны ───────────────────────────────────────────────────────── */

.collapse {display: none;}
.collapse.show {display: block;}

/* ─── табы ─────────────────────────────────────────────────────────────── */

.tab-pane {display: none;}
.tab-pane.active {display: block;}

/* ─── карусель ─────────────────────────────────────────────────────────── */

.owl-carousel, .flexslider {position: relative;}
.owl-carousel.kpc {display: block; visibility: visible;}
.owl-stage-outer {overflow: hidden; width: 100%;}
.owl-stage {display: flex; align-items: stretch; will-change: transform; transition: transform .45s cubic-bezier(.22, .61, .36, 1);}
.owl-item {flex: 0 0 100%; min-width: 0; padding: 0 5px; box-sizing: border-box;}
.owl-item > * {height: 100%;}

.owl-nav {display: flex; width: 100%; gap: 10px; justify-content: center; margin-top: 18px;}
.owl-nav[hidden], .owl-dots[hidden] {display: none !important;}
.owl-nav button {display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: var(--kp-lime, #a4d020); cursor: pointer; transition: background .18s, transform .15s;}
.owl-nav button:hover {background: var(--kp-deep, #2b8750); transform: translateY(-1px);}
.owl-nav button::before {content: ""; width: 10px; height: 10px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff;}
.owl-nav .owl-prev::before {transform: rotate(45deg); margin-left: 3px;}
.owl-nav .owl-next::before {transform: rotate(-135deg); margin-right: 3px;}

.owl-dots {display: flex; flex-wrap: wrap; gap: 0; justify-content: center; margin-top: 14px; padding: 0 12px;}
.owl-dots button {padding: 0; border: 0; background: none; cursor: pointer;}

@media (max-width: 767px) {
	.owl-item {padding: 0 4px;}
	.owl-nav button {width: 40px; height: 40px;}
}

/* ── заголовки на тёмных подложках ────────────────────────────────────────
 * Общий стиль задаёт заголовкам тёмный цвет; на первом экране и в блоках
 * с фотографией фон тёмный, поэтому текст там белый. Файл подключается
 * после оформления темы, поэтому перебивает её правила.
 */

#formas h2, #formas .text,

/* Капслок делал заголовки нечитаемыми: на телефоне H1 занимал пол-экрана. */
/* Капслок перебивался правилами вида «#prem2 h2», поэтому селектор усилен
   идентификатором секции — иначе заголовки оставались капсом. */
h1, h2, h3, .title,
#inf h2, #gall h2, #prem2 h2, #prem-pod-ban h2, #about h2, #kak h2, #etap h2,
#price h2, #calc h2, #formas h2, #form1 h2, #rews h2, #tabs h2, #map h2,
#work h2, #trust h2, #block4 h2, #block5 h2, #block6 h2, #block7 h2, #reviews h2,
#faq h2, #catalog h2, #anchors h2 {text-transform: none;}

/* Заголовок секции: акцент даёт черта, а не капслок */
#block5 .title, #block4 .title, #block6 .title, #block7 .title {position: relative; padding-top: 14px; color: var(--kp-ink);}
#block5 .title::before, #block4 .title::before, #block6 .title::before, #block7 .title::before {content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 4px; border-radius: 4px; background: var(--kp-lime);}

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


@media (min-width: 992px) {
}

@media (min-width: 992px) {
	/* Порядок первого экрана. Блок кнопок — новый контейнер, без явного
	   order он вставал первым и телефон оказывался над заголовком. */

	/* Заголовок и текст не шире колонки: иначе строка уходит под карточку. */
	/* Плашки преимуществ в две колонки — вертикаль первого экрана короче
	   и кнопка расчёта попадает в видимую часть без прокрутки. */
}

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

#footer {position: relative; margin-top: 0; padding: 54px 0 26px; background: #17200d; color: #c3cbb6;}
#footer::before {content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--kp-grad);}
#footer a {color: #dfe6d3 !important;}
#footer a:hover {color: var(--kp-lime) !important;}
#footer .widget-title, #footer h3 {margin: 0 0 14px; color: #fff; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;}
#footer .menu, #footer ul {margin: 0; padding: 0; list-style: none;}
#footer li {margin-bottom: 9px; font-size: 15px; line-height: 1.4;}
#footer img {max-width: 100%;}
#footer .grid.col-pc-4 {gap: 30px;}

#footer .phone {display: inline-flex; align-items: center; gap: 9px; margin-bottom: 8px; font-size: 22px; font-weight: 700; color: #fff !important; line-height: 1.1;}
#footer .phone svg {flex: none; padding: 7px; border-radius: 50%; background: rgba(164, 208, 32, .16); color: var(--kp-lime); box-sizing: content-box;}
#footer .phone:hover svg {background: var(--kp-lime); color: #17200d;}
#footer .time, #footer .ad, #footer .mail {display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14.5px;}
#footer .time svg, #footer .ad svg, #footer .mail svg {flex: none; color: var(--kp-lime);}
#footer .req {margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12.5px; line-height: 1.5; color: #8d9880;}

#footer .button {display: inline-block; margin-top: 18px; padding: 14px 28px; border: 0; border-radius: 999px; background: var(--kp-grad); color: #fff !important; font-weight: 700; font-size: 15px;}
#footer .soc {display: flex; gap: 10px; margin-top: 14px;}
#footer .soc a {display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .08); transition: background .16s, transform .16s;}
#footer .soc a:hover {background: rgba(164, 208, 32, .22); transform: translateY(-2px);}
#footer .soc img {width: 22px; height: 22px;}

#footer .inform {margin-top: 38px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13.5px; color: #8d9880; align-items: start;}
#footer .legal-links a {display: block; margin-bottom: 6px; font-size: 13.5px;}
#footer .made a {border-bottom: 1px dotted rgba(255, 255, 255, .3);}

@media (max-width: 767px) {
	#footer {padding: 38px 0 22px;}
	#footer .grid.col-pc-4 {gap: 26px;}
	#footer .phone {font-size: 20px;}
	#footer .inform {margin-top: 26px; gap: 14px;}
}

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

.msg-widget {position: fixed; right: 24px; bottom: 24px; z-index: var(--kp-z-float, 900);}
.msg-toggle {position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-left: auto; border: 0; border-radius: 50%; background: var(--kp-grad); cursor: pointer; box-shadow: 0 8px 24px rgba(30, 60, 15, .32); transition: transform .18s, box-shadow .18s;}
.msg-toggle:hover {transform: scale(1.05);}
.msg-toggle .msg-close {display: none;}
.msg-widget.active .msg-toggle .msg-open {display: none;}
.msg-widget.active .msg-toggle .msg-close {display: block;}

.msg-list {position: absolute; right: 0; bottom: 70px; width: 286px; padding: 8px; border-radius: 18px; background: #fff; box-shadow: 0 20px 50px rgba(20, 40, 10, .24); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .2s, transform .2s, visibility .2s;}
.msg-widget.active .msg-list {opacity: 1; visibility: visible; transform: none;}

.msg-head {padding: 10px 12px 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #7c8571;}
.msg-row {display: flex; width: 100%; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 12px; background: none; text-align: left; text-decoration: none; cursor: pointer; transition: background .14s;}
.msg-row:hover {background: #f4f9e7;}
.msg-ic {flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #f1f5e9; color: var(--kp-green);}
.msg-ic img {width: 20px; height: 20px;}
.msg-row--call .msg-ic {background: #eaf5df; color: #3f7a10;}
.msg-row--wa .msg-ic {background: #e4f7e8;}
.msg-row--tg .msg-ic {background: #e5f2fb;}
.msg-row--form .msg-ic {background: var(--kp-lime); color: #1e2c05;}
.msg-txt {min-width: 0; line-height: 1.25;}
.msg-txt b {display: block; font-size: 15px; font-weight: 600; color: var(--kp-ink);}
.msg-txt i {display: block; font-style: normal; font-size: 12.5px; color: #8a9280;}

@media (max-width: 767px) {
	.msg-widget {right: 14px; bottom: 14px;}
	.msg-toggle {width: 52px; height: 52px;}
	.msg-list {right: 0; bottom: 64px; width: calc(100vw - 28px); max-width: 300px;}
}

/* ── горизонтальный скролл ────────────────────────────────────────────────
 * У классической темы .container от Bootstrap 3 имеет фиксированную ширину
 * (750px на планшете) плюс внутренние отступы — на экране 768 это давало
 * лишние 6 px и появлялась горизонтальная прокрутка.
 */

/* ☠️ overflow-x:hidden сразу на html и body делает каждый из них контейнером прокрутки:
 * window.scrollTo перестаёт работать, якоря промахиваются, а на iOS ломается
 * инерционный скролл. clip подрезает выезд, но контейнер не создаёт. */
body {overflow-x: hidden;}
@supports (overflow: clip) {
	html, body {overflow-x: clip;}
}
/* ☠️ Безусловный `.container{max-width:100%}` ставился против горизонтального
 * скролла на планшете: у старой сетки Bootstrap 3 контейнер шириной 750 px вместе
 * с паддингами выходил за экран 768. Но он же перебил ограничение 1300 px
 * на больших экранах — сайт растягивался на всю ширину монитора. Держим только
 * там, где помогал. */
@media (max-width: 1199px) {
	.container {max-width: 100%;}
}

/* ── первый экран на телефоне ─────────────────────────────────────────────
 * Порядок задаём здесь: правила в landing-new.css не знают про новый блок
 * кнопок, и телефон оказывался над заголовком.
 */

@media (max-width: 991px) {
}

/* Кнопку расчёта в блоке действий прячет старое правило темы — возвращаем. */

@media (max-width: 767px) {
	/* На телефоне первый экран не должен быть длиннее двух прокруток:
	   показываем два первых преимущества, остальные повторяются в тексте ниже. */
	.hero-card__list li:nth-child(n+4) {display: none;}
}

/* ── плашка cookie ────────────────────────────────────────────────────────
 * Плагин рисует её фиксированной внизу. На планшете она занимала четыре
 * строки и накрывала кнопки; сжимаем и отодвигаем от неё контент.
 */

.wolf-cookie {font-size: 13.5px; line-height: 1.45;}
.wolf-cookie-in {gap: 14px;}
body:has(.wolf-cookie:not([hidden])) {padding-bottom: 96px;}

@media (max-width: 767px) {
	.wolf-cookie {font-size: 12.5px;}
	body:has(.wolf-cookie:not([hidden])) {padding-bottom: 128px;}
	/* виджет связи поднимаем над плашкой, пока она на экране */
	body:has(.wolf-cookie:not([hidden])) .msg-widget {bottom: 122px;}
	body:has(.wolf-cookie:not([hidden])) .btn-back-top {bottom: 186px;}
}

/* ── сквозной блок географии ──────────────────────────────────────────────
 * Раньше здесь печатались все 125 городов сети — простыня ссылок в подвале
 * каждой страницы. Теперь цифры компании, популярные направления и одна
 * ссылка на полный список.
 */

#map.geo {padding: var(--kp-section, 72px) 0; background: #17200d;}
.geo-in {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 44px; align-items: start;}

.geo-head h2 {margin: 0 0 14px; color: #fff; text-align: left; text-transform: none;}
.geo-head h2 span {color: var(--kp-lime);}
.geo-lead {max-width: 56ch; margin: 0 0 26px; font-size: 16px; line-height: 1.65; color: #b6c0a6;}

.geo-nums {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 26px; padding: 0; list-style: none;}
.geo-nums li {padding: 16px 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);}
.geo-nums b {display: block; margin-bottom: 6px; color: var(--kp-lime); font-size: 27px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;}
.geo-nums span {font-size: 13px; line-height: 1.35; color: #a9b498;}

.geo-act {display: flex; flex-wrap: wrap; gap: 12px;}
.geo-btn {display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px; 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; transition: transform .15s, filter .15s;}
.geo-btn:hover {transform: translateY(-1px); filter: brightness(1.06); color: #fff !important;}
.geo-btn--ghost {background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28);}
.geo-btn--ghost:hover {box-shadow: inset 0 0 0 1.5px var(--kp-lime);}

.geo-cities {padding: 24px 24px 26px; border-radius: 22px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);}
.geo-cities__t {margin-bottom: 14px; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;}
.geo-chips {display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none;}
.geo-chips a {display: inline-block; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .07); color: #d5ddc8 !important; font-size: 14.5px; line-height: 1.2; text-decoration: none; transition: background .15s, color .15s;}
.geo-chips a:hover {background: var(--kp-lime); color: #17200d !important;}

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

@media (max-width: 767px) {
	#map.geo {padding: var(--kp-section-m, 44px) 0;}
	.geo-lead {margin-bottom: 20px; font-size: 15.5px;}
	.geo-nums {gap: 10px; margin-bottom: 20px;}
	.geo-nums li {padding: 13px 12px; border-radius: 14px;}
	.geo-nums b {font-size: 23px;}
	.geo-act {gap: 10px;}
	.geo-btn {flex: 1 1 100%; justify-content: center; padding: 14px 18px; font-size: 15px;}
	.geo-cities {padding: 18px 16px 20px; border-radius: 18px;}
	.geo-chips {gap: 7px;}
	.geo-chips a {padding: 8px 12px; font-size: 14px;}
}

/* ── мессенджеры в подвале ───────────────────────────────────────────────
 * Была одна безымянная иконка Telegram. Стали подписанные кнопки: у клиента
 * Telegram и MAX привязаны к тому же номеру, что и звонок.
 */

#footer .soc {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;}
#footer .soc a {display: inline-flex; width: auto; height: auto; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, .07); color: #dfe6d3 !important; font-size: 14px; font-weight: 600; line-height: 1;}
#footer .soc a:hover {background: rgba(164, 208, 32, .2); color: #fff !important; transform: translateY(-1px);}
#footer .soc svg, #footer .soc img {flex: none; width: 19px; height: 19px;}
#footer .soc-tg svg {color: #2ba0da;}
#footer .soc-call svg {color: var(--kp-lime);}

/* ── широкие таблицы ──────────────────────────────────────────────────────
 * Таблица цен на копке — пять колонок; на телефоне она выходила за экран
 * на 28 пикселей. Прокручиваем её внутри своей рамки, страницу не двигаем.
 */

.table-wrapper, .entry table, #price .tab-content {max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;}
.table-wrapper table {min-width: 520px;}

@media (max-width: 767px) {
	.table-wrapper {margin-inline: -2px; padding-bottom: 4px;}
	.table-wrapper table {font-size: 14px;}
}

/* ── карточки услуг ───────────────────────────────────────────────────────
 * Блок собран на старой сетке Bootstrap: колонки плавали по высоте, фото шли
 * в своих пропорциях, подписи скакали по вертикали. Переводим на грид
 * с единым кадром 4:3 — ряд выравнивается сам.
 */

#live .cat {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0;}
#live .cat > [class*="col-"] {width: auto; float: none; padding: 0;}
#live .cat .item {height: 100%; margin: 0; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px #e7ece0; overflow: hidden; transition: box-shadow .18s, transform .18s;}
#live .cat .item:hover {transform: translateY(-3px); box-shadow: 0 14px 30px rgba(28, 46, 12, .13);}
#live .cat .item > a {display: flex; flex-direction: column; height: 100%; text-decoration: none;}
#live .cat .image {margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--kp-tint, #f7faf1);}
#live .cat .image img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s;}
#live .cat .item:hover .image img {transform: scale(1.04);}
#live .cat .item h2, #live .cat .item .item-title {flex: 1; display: flex; align-items: center; gap: 8px; margin: 0; padding: 15px 18px 17px; font-size: 17px; font-weight: 700; line-height: 1.3; text-align: left; text-transform: none; color: var(--kp-ink);}
#live .cat .item h2::after, #live .cat .item .item-title::after {content: ""; flex: none; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--kp-lime); border-top: 2px solid var(--kp-lime); transform: rotate(45deg);}

@media (max-width: 900px) {
	#live .cat {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;}
	#live .cat .item h2, #live .cat .item .item-title {padding: 12px 14px 14px; font-size: 15.5px;}
}

@media (max-width: 520px) {
	#live .cat {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
	#live .cat .item {border-radius: 14px;}
	#live .cat .item h2, #live .cat .item .item-title {padding: 10px 12px 12px; font-size: 14px;}
}

/* Крошки в баннере переносим по словам: на телефоне длинное название
   услуги обрезалось краем секции. И заголовок делаем компактнее, чтобы
   над сгибом помещались телефон и кнопка. */

@media (max-width: 575px) {
}

/* ── страница цен ─────────────────────────────────────────────────────────
 * Была серая таблица Bootstrap на всю ширину и вкладки текстовыми ссылками.
 * Стало: вкладки-чипы, таблица с выделенной ценой и врезками «что входит».
 */

.pricepage {margin: 20px 0 10px;}
.plead {max-width: 74ch; margin: 0 0 22px; font-size: 16.5px; line-height: 1.65; color: var(--kp-text, #3a4232);}

.ptabs {display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; border: 0; list-style: none;}
.ptabs > li {margin: 0; float: none;}
.ptabs > 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; line-height: 1.2; text-decoration: none; transition: border-color .15s, background .15s, color .15s;}
.ptabs > li > a:hover {border-color: var(--kp-lime, #a4d020); background: #fff;}
.ptabs > li.active > a, .ptabs > li > a.active {border-color: var(--kp-green, #4d9b42); background: var(--kp-green, #4d9b42); color: #fff !important;}

.ptable {width: 100%; margin: 0 0 16px; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--kp-line, #e7ece0);}
.ptable thead th {padding: 14px 18px; background: var(--kp-tint, #f7faf1); color: var(--kp-ink, #1c2410); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: left; border: 0;}
.ptable thead th:nth-child(2) {width: 130px;}
.ptable thead th:nth-child(3) {width: 150px; text-align: right;}
.ptable td {padding: 14px 18px; border: 0; border-top: 1px solid var(--kp-line, #e7ece0); font-size: 15.5px; line-height: 1.45; vertical-align: top; color: var(--kp-text, #3a4232);}
.ptable td.u {color: var(--kp-muted, #7c8571); font-size: 14.5px; white-space: nowrap;}
.ptable td.p {text-align: right; font-size: 17px; font-weight: 800; color: var(--kp-ink, #1c2410); white-space: nowrap;}
.ptable tr.is-key td {background: rgba(164, 208, 32, .09);}
.ptable tr.is-key td.p {color: var(--kp-green, #4d9b42);}
.ptable .note {display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.4; color: var(--kp-muted, #7c8571);}

.pnote {margin: 0 0 26px; padding: 16px 20px; border-left: 3px solid var(--kp-lime, #a4d020); border-radius: 0 14px 14px 0; background: var(--kp-tint, #f7faf1); font-size: 15px; line-height: 1.6; color: var(--kp-text, #3a4232);}
.pnote b {color: var(--kp-ink, #1c2410);}

.pconds {margin-top: 34px; padding: 30px 32px; border-radius: 22px; background: var(--kp-tint, #f7faf1); box-shadow: inset 0 0 0 1px var(--kp-line, #e7ece0);}
.pconds h2 {margin: 0 0 20px; text-align: left; text-transform: none;}
.pconds-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;}
.pconds-grid > div {padding: 16px 18px; border-radius: 14px; background: #fff;}
.pconds-grid b {display: block; margin-bottom: 5px; font-size: 15.5px; color: var(--kp-ink, #1c2410);}
.pconds-grid span {font-size: 14.5px; line-height: 1.5; color: var(--kp-text, #3a4232);}

.pcta {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding: 22px 26px; border-radius: 18px; background: var(--kp-grad); color: #fff;}
.pcta b {display: block; font-size: 19px;}
.pcta span {font-size: 15px; color: rgba(255, 255, 255, .9);}
.pcta-tel {padding: 14px 26px; border-radius: 999px; background: #fff; color: var(--kp-ink) !important; font-size: 19px; font-weight: 800; text-decoration: none; white-space: nowrap;}
.pcta-tel:hover {background: #17200d; color: #fff !important;}

@media (max-width: 900px) {
	.pconds-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
	.pconds {padding: 22px 18px; border-radius: 18px;}
}

@media (max-width: 640px) {
	.plead {font-size: 15.5px;}
	.ptabs {gap: 6px; margin-bottom: 18px;}
	.ptabs > li > a {padding: 9px 14px; font-size: 14px;}
	.ptable {min-width: 480px;}
	.ptable td, .ptable thead th {padding: 11px 13px;}
	.ptable td {font-size: 14.5px;}
	.ptable td.p {font-size: 15.5px;}
	.pnote {padding: 14px 16px; font-size: 14.5px;}
	.pconds-grid {grid-template-columns: 1fr; gap: 10px;}
	.pcta {flex-direction: column; align-items: flex-start; padding: 18px 18px 20px;}
	.pcta-tel {width: 100%; text-align: center;}
}

/* Заголовок внутренней страницы выравниваем по левому краю: текст под ним
   идёт слева, и центрированный H1 висел отдельно от содержимого. */
.pagetitle h1, .ppage h1 {text-align: left;}
.pagetitle {margin-bottom: 6px;}

/* ── страница контактов ───────────────────────────────────────────────────
 * Сведения шли узкой колонкой слева, карта — справа. Колонка выходила втрое
 * выше карты, и справа под ней зияло около 900 px пустоты. Раскладываем
 * карточки лентой, карту даём во всю ширину.
 */

#contpage {margin: 18px 0 10px;}
#contpage .info {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px;}
#contpage .item {position: relative; padding: 18px 20px 20px 58px; border-radius: 18px; background: var(--kp-tint, #f7faf1); box-shadow: inset 0 0 0 1px var(--kp-line, #e7ece0);}
#contpage .item .title {margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7b8a5a;}
#contpage .item b {display: block; font-size: 17px; font-weight: 700; color: var(--kp-ink, #1c2410); line-height: 1.3;}
#contpage .item p {margin: 7px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--kp-text, #3a4232);}
#contpage .item .phone {display: inline-block; font-size: 24px; font-weight: 800; color: var(--kp-ink, #1c2410) !important; line-height: 1.15;}
#contpage .item .mail {font-size: 17px; font-weight: 600;}

#contpage .item::before {content: ""; position: absolute; left: 18px; top: 18px; width: 30px; height: 30px; border-radius: 50%; background: rgba(164, 208, 32, .22) center / 17px 17px no-repeat;}
#contpage .item--tel::before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d9b42' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.1 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7A2 2 0 0 1 22 16.9z'/%3E%3C/svg%3E");}
#contpage .item--mail::before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d9b42' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");}
#contpage .item--geo::before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d9b42' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");}
#contpage .item--home::before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d9b42' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E");}
#contpage .item--time::before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d9b42' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");}
#contpage .item--doc::before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d9b42' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");}

#contpage .cmsg {display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px;}
#contpage .cmsg a {display: inline-flex; align-items: center; padding: 8px 15px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #e2e9d6; color: var(--kp-ink, #1c2410) !important; font-size: 14px; font-weight: 600;}
#contpage .cmsg a:hover {box-shadow: inset 0 0 0 1.5px var(--kp-lime, #a4d020);}

#contpage .cmap {min-height: 440px; border-radius: 20px; overflow: hidden; background: var(--kp-tint, #f7faf1); box-shadow: inset 0 0 0 1px var(--kp-line, #e7ece0);}
#contpage .cmap iframe {display: block; width: 100% !important; border: 0;}

#contpage .ccta {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding: 24px 28px; border-radius: 20px; background: var(--kp-grad); color: #fff;}
#contpage .ccta__t b {display: block; margin-bottom: 4px; font-size: 20px;}
#contpage .ccta__t span {font-size: 15px; color: rgba(255, 255, 255, .9);}
#contpage .ccta__b {display: flex; flex-wrap: wrap; gap: 10px;}
#contpage .ccta__tel {padding: 14px 26px; border-radius: 999px; background: #fff; color: var(--kp-ink) !important; font-size: 19px; font-weight: 800; white-space: nowrap;}
#contpage .ccta__tel:hover {background: #17200d; color: #fff !important;}
#contpage .ccta__btn {padding: 14px 26px; border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 999px; background: transparent; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;}
#contpage .ccta__btn:hover {border-color: #fff; background: rgba(255, 255, 255, .12);}

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

@media (max-width: 640px) {
	#contpage .info {grid-template-columns: 1fr; gap: 10px;}
	#contpage .item {padding: 15px 16px 17px 52px; border-radius: 15px;}
	#contpage .item::before {left: 15px; top: 15px; width: 27px; height: 27px;}
	#contpage .item .phone {font-size: 22px;}
	#contpage .cmap {min-height: 320px; border-radius: 16px;}
	#contpage .ccta {padding: 20px 18px; border-radius: 16px;}
	#contpage .ccta__t b {font-size: 18px;}
	#contpage .ccta__b {width: 100%;}
	#contpage .ccta__tel, #contpage .ccta__btn {flex: 1 1 100%; text-align: center;}
}

/* На телефоне заголовок внутренней страницы занимал весь первый экран:
   пять строк по 40 px. Уменьшаем и прижимаем крошки влево. */
@media (max-width: 640px) {
	.pagetitle h1, .ppage h1 {font-size: 26px; line-height: 1.2;}
	.pagetitle {text-align: left;}
	.pagetitle .breadcrumbs, .breadcrumbs {text-align: left; font-size: 13px;}
}

/* ── готовые работы ───────────────────────────────────────────────────────
 * Портфолио на сайте не было. Карточка показывает то, по чему заказчик
 * сравнивает со своим участком: город, схему и цену под ключ.
 */

.wlist {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 28px 0 10px;}
.wcard {border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--kp-line, #e7ece0); overflow: hidden; transition: box-shadow .18s, transform .18s;}
.wcard:hover {transform: translateY(-3px); box-shadow: 0 16px 34px rgba(28, 46, 12, .14);}
.wcard__link {display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit;}
.wcard__img {position: relative; aspect-ratio: 4 / 3; background: var(--kp-tint, #f7faf1); overflow: hidden;}
.wcard__img img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s;}
.wcard:hover .wcard__img img {transform: scale(1.04);}
.wcard__tag {position: absolute; left: 12px; top: 12px; padding: 6px 13px; border-radius: 999px; background: rgba(12, 22, 6, .74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #fff; font-size: 12.5px; font-weight: 600;}
/* ☠️ Карточка без снимка: пустая плашка 4:3 убрана, метка услуги переезжает
   в тело. Правило должно стоять ПОСЛЕ .wcard__tag — специфичность у них
   одинаковая, и выше по файлу оно просто проигрывало. */
.wcard__tag--inline {position: static; display: inline-block; margin: 0 0 12px; background: var(--kp-tint, #f2f7e6); color: #3f7a10; backdrop-filter: none; -webkit-backdrop-filter: none;}
.wcard__link--nopic .wcard__body {padding-top: 24px;}
.wcard__body {flex: 1; display: flex; flex-direction: column; padding: 18px 20px 20px;}
.wcard__body h2 {margin: 0 0 10px; font-size: 18px; font-weight: 700; line-height: 1.3; text-align: left; text-transform: none; color: var(--kp-ink, #1c2410);}
.wcard__facts {display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; padding: 0; list-style: none;}
.wcard__facts li {position: relative; padding-left: 18px; font-size: 14px; color: var(--kp-muted, #7c8571);}
.wcard__facts li::before {content: ""; position: absolute; left: 0; top: 4px; width: 11px; height: 11px; background: center / contain no-repeat;}
.wcard__facts .is-geo::before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d9b42' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");}
.wcard__facts .is-scheme::before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d9b42' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");}
.wcard__text {margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--kp-text, #3a4232);}
.wcard__price {display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--kp-line, #e7ece0);}
.wcard__price span {font-size: 13px; color: var(--kp-muted, #7c8571);}
.wcard__price b {font-size: 21px; font-weight: 800; color: var(--kp-green, #4d9b42);}

.wempty {margin: 34px 0 40px; font-size: 17px; color: var(--kp-muted, #7c8571);}

.wbody {margin: 34px 0 10px;}
.wgal-title {margin: 34px 0 18px; text-align: left; text-transform: none;}
.wgal {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 10px;}
.wgal figure {margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--kp-tint, #f7faf1);}
.wgal img {width: 100%; height: 100%; object-fit: cover; display: block;}

.wfacts li {padding-left: 0 !important;}
.wfacts li::before, .wfacts li::after {display: none !important;}
.wfacts li b {color: var(--kp-muted, #7c8571); font-weight: 600;}

@media (max-width: 900px) {
	.wlist, .wgal {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;}
}

@media (max-width: 560px) {
	.wlist {grid-template-columns: 1fr; gap: 14px;}
	.wgal {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
	.wcard {border-radius: 16px;}
	.wcard__body {padding: 15px 16px 17px;}
	.wcard__body h2 {font-size: 17px;}
	.wcard__price b {font-size: 19px;}
}

/* На телефоне карточки контактов идут одна под другой и с общим светлым фоном
   сливались в сплошное поле. Даём им белую подложку с рамкой. */
@media (max-width: 640px) {
	#contpage .item {background: #fff; box-shadow: inset 0 0 0 1.5px var(--kp-line, #e7ece0);}
}

/* ── окна заявок ──────────────────────────────────────────────────────────
 * Старые стили открывали модалку серой шторкой во всю высоту справа: без
 * затемнения, без карточки, фон #eeeeee. Делаем обычное окно по центру.
 * Мобильное меню (#mmenu) сюда не входит — у него своя полноэкранная форма.
 */

.modal.lmodal {display: none; position: fixed; inset: 0; z-index: var(--kp-z-modal, 1000); padding: 24px 16px; background: rgba(12, 22, 6, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); overflow-y: auto;}
.modal.lmodal.is-open {display: flex; align-items: flex-start; justify-content: center;}

.modal.lmodal .modal-dialog {position: static; width: 100%; max-width: 460px; margin: auto; padding: 0; height: auto; border-radius: 22px; background: #fff !important; box-shadow: 0 30px 70px rgba(8, 16, 4, .38); overflow: hidden; animation: kp-modal-in .18s ease-out;}
.modal.lmodal .modal-content {border: 0; border-radius: 0; background: none; box-shadow: none;}
.modal.lmodal .modal-header {position: relative; padding: 26px 28px 0; border: 0;}
.modal.lmodal .modal-body {padding: 16px 28px 28px;}

.modal.lmodal .title {margin: 0; font-size: 25px; line-height: 1.2; font-weight: 800; color: var(--kp-ink, #1c2410); text-align: left;}
.modal.lmodal .text {margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--kp-text, #3a4232);}
.modal.lmodal .mb-3 {margin-bottom: 18px;}

.modal.lmodal .close {position: absolute; top: -4px; right: 20px; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: #f2f6ea; cursor: pointer;}
.modal.lmodal .close:hover {background: var(--kp-lime, #a4d020);}
.modal.lmodal .close svg {width: 16px; height: 16px;}
.modal.lmodal .close svg line {stroke: var(--kp-ink, #1c2410); stroke-width: 3;}

@keyframes kp-modal-in {
	from {opacity: 0; transform: translateY(-12px);}
	to {opacity: 1; transform: none;}
}

@media (max-width: 640px) {
	.modal.lmodal {padding: 12px;}
	.modal.lmodal .modal-dialog {max-width: none; border-radius: 18px;}
	.modal.lmodal .modal-header {padding: 20px 18px 0;}
	.modal.lmodal .modal-body {padding: 12px 18px 20px;}
	.modal.lmodal .title {font-size: 21px;}
	.modal.lmodal .close {right: 12px;}
}

/* Перетаскивание карусели мышью: курсор показывает, что ленту можно тянуть,
   а во время протяжки гасим выделение текста и «призрак» перетаскивания
   картинки, иначе браузер начинает свой drag-and-drop вместо листания. */
.kpc {cursor: grab;}
.kpc.is-dragging {cursor: grabbing; user-select: none;}
.kpc.is-dragging .owl-stage {transition: none;}
.kpc img {-webkit-user-drag: none; user-select: none;}
.kpc .owl-nav, .kpc .owl-dots {cursor: default;}

/* ── сезонный блок ────────────────────────────────────────────────────────
 * Живая практика бригад: что делают в этом месяце и почему. Текст меняется
 * по сезону, поэтому страница не выглядит написанной один раз и навсегда.
 */

.season {padding: var(--kp-section, 72px) 0;}
.season-in {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 40px; align-items: start; padding: 34px 36px; border-radius: 24px; background: var(--kp-tint, #f7faf1); box-shadow: inset 0 0 0 1px var(--kp-line, #e7ece0);}

.season-tag {display: inline-block; margin-bottom: 12px; padding: 6px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--kp-line, #e7ece0); font-size: 13px; font-weight: 600; color: var(--kp-green, #4d9b42); text-transform: capitalize;}
.season-main h2 {margin: 0 0 14px; text-align: left; text-transform: none;}
.season-lead {max-width: 62ch; margin: 0 0 22px; font-size: 16.5px; line-height: 1.65; color: var(--kp-text, #3a4232);}

.season-cta {display: flex; flex-wrap: wrap; gap: 12px;}
.season-tel {display: inline-flex; align-items: center; padding: 14px 26px; border-radius: 999px; background: var(--kp-grad); color: #fff !important; font-size: 17px; font-weight: 700; text-decoration: none;}
.season-tel:hover {filter: brightness(1.06); color: #fff !important;}
.season-btn {padding: 14px 24px; border: 1.5px solid var(--kp-line, #e7ece0); border-radius: 999px; background: #fff; color: var(--kp-ink, #1c2410); font-size: 15.5px; font-weight: 600; cursor: pointer;}
.season-btn:hover {border-color: var(--kp-lime, #a4d020);}

.season-list {margin: 0; padding: 0; list-style: none; display: grid; gap: 12px;}
.season-list li {position: relative; padding: 16px 18px 16px 52px; border-radius: 16px; background: #fff;}
.season-list li::before {content: ""; position: absolute; left: 17px; top: 17px; width: 22px; height: 22px; border-radius: 50%; background: rgba(164, 208, 32, .22) center / 13px 13px no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d9b42' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");}
.season-list b {display: block; margin-bottom: 4px; font-size: 15.5px; color: var(--kp-ink, #1c2410);}
.season-list span {font-size: 14.5px; line-height: 1.5; color: var(--kp-text, #3a4232);}

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

@media (max-width: 640px) {
	.season {padding: var(--kp-section-m, 44px) 0;}
	.season-in {padding: 20px 16px; border-radius: 18px;}
	.season-lead {font-size: 15.5px;}
	.season-tel, .season-btn {flex: 1 1 100%; justify-content: center; text-align: center;}
	.season-list li {padding: 14px 15px 14px 46px; border-radius: 14px;}
	.season-list li::before {left: 14px; top: 15px;}
}

/* ── ссылки на отзывы со стороны ──────────────────────────────────────────
 * Свои отзывы можно написать самому, поэтому рядом даём внешние площадки:
 * профиль на Авито заказчик проверит сам, и это работает на доверие сильнее
 * любого рассказа о себе.
 */

.trust-links {margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--kp-line, #e7ece0);}
.trust-links__t {margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #7b8a5a;}
.trust-links__row {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;}

.trust-link {display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 16px 54px; border: 0; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--kp-line, #e7ece0); text-align: left; text-decoration: none; cursor: pointer; position: relative; transition: box-shadow .16s, transform .16s;}
.trust-link:hover {transform: translateY(-2px); box-shadow: 0 10px 24px rgba(28, 46, 12, .1), inset 0 0 0 1px var(--kp-lime, #a4d020);}
.trust-link__name {font-size: 15.5px; font-weight: 700; color: var(--kp-ink, #1c2410);}
.trust-link__note {font-size: 13.5px; line-height: 1.4; color: var(--kp-muted, #7c8571);}
.trust-link::before {content: ""; position: absolute; left: 16px; top: 17px; width: 26px; height: 26px; border-radius: 50%; background: rgba(164, 208, 32, .2) center / 15px 15px no-repeat;}
.trust-link--avito::before {background-color: rgba(0, 170, 255, .14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h7v7'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5'/%3E%3C/svg%3E");}
.trust-link--site::before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234d9b42'%3E%3Cpath d='m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.9L12 17.8 5.8 21l1.2-6.9-5-4.9 6.9-1z'/%3E%3C/svg%3E");}
.trust-link--ask::before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d9b42' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");}

@media (max-width: 900px) {
	.trust-links__row {grid-template-columns: 1fr;}
}

/* ── чистка сетки от старого Bootstrap ────────────────────────────────────
 * ☠️ `.row` в Bootstrap 3 очищает обтекание через `::before`/`::after`
 * с `display: table`. Для флоатов это невидимо, но в гриде псевдоэлементы
 * становятся полноценными ячейками: первая карточка «Наших услуг» уезжала
 * во вторую колонку, а первая оставалась пустой.
 */

#live .cat::before, #live .cat::after,
.wlist::before, .wlist::after,
.geo-chips::before, .geo-chips::after {content: none; display: none;}

/* ── плавность ────────────────────────────────────────────────────────────
 * Наведение на фото и карточки было резким: переход либо отсутствовал,
 * либо шёл линейно за 0,15 с. Даём общий мягкий тайминг — движение
 * начинается быстро и мягко тормозит, как в хороших интерфейсах.
 */

:root {
	--kp-ease: cubic-bezier(.22, .61, .36, 1);
	--kp-fast: .22s;
	--kp-slow: .45s;
}

/* карточки: тень и подъём */
.wcard, .rvcard, #live .cat .item, .geo-chips a, .trust-link, .season-list li,
.ptabs > li > a, .rvchip, .kpform__btn, .rvform__btn, .phero-btn, .geo-btn,
.hbtn, .cbutton, .season-btn, .season-tel, .msg-row {transition: transform var(--kp-fast) var(--kp-ease), box-shadow var(--kp-fast) var(--kp-ease), background-color var(--kp-fast) var(--kp-ease), border-color var(--kp-fast) var(--kp-ease), color var(--kp-fast) var(--kp-ease), filter var(--kp-fast) var(--kp-ease);}

/* фотографии: приближение медленнее движения карточки — так глаз читает
   это как «камера наехала», а не как рывок */
#live .cat .image img, .wcard__img img, .wgal img,
#gallary .thumb img, #gallary img, .box img {transition: transform var(--kp-slow) var(--kp-ease), opacity var(--kp-fast) linear;}

#gallary .thumb, #gallary a {overflow: hidden; border-radius: 14px; display: block;}
#gallary .thumb:hover img, #gallary a:hover img {transform: scale(1.05);}

/* ссылки и мелочи */
a, .msg-toggle, .owl-dot, .owl-prev, .owl-next, .mm-more, .close, .mm-close {transition: color var(--kp-fast) var(--kp-ease), background-color var(--kp-fast) var(--kp-ease), opacity var(--kp-fast) var(--kp-ease), transform var(--kp-fast) var(--kp-ease);}

/* Кому движение мешает — уважаем системную настройку. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important;}
}

/* ── лента отзывов на страницах услуг ─────────────────────────────────────
 * Единый вид со страницей отзывов: аватар-буква, город, услуга, свои звёзды.
 * Раньше здесь была отдельная разметка со шрифтовыми значками и кнопками
 * на несуществующий адрес /reviews/.
 */

.rews {padding: var(--kp-section, 72px) 0;}
.rews-head {display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px;}
.rews-head h2 {margin: 0 0 8px; text-align: left; text-transform: none;}
.rews-lead {max-width: 62ch; margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--kp-text, #3a4232);}

.rews-score {flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-radius: 999px; background: var(--kp-tint, #f7faf1); box-shadow: inset 0 0 0 1px var(--kp-line, #e7ece0);}
.rews-score b {font-size: 27px; font-weight: 800; color: var(--kp-ink, #1c2410); line-height: 1;}
.rews-score span {font-size: 13.5px; color: var(--kp-muted, #7c8571);}

.rews-card {height: 100%; margin: 0 8px; padding: 22px 24px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--kp-line, #e7ece0);}
.rews-card__top {display: flex; align-items: center; gap: 12px; margin-bottom: 12px;}
.rews-card__ava {flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--kp-grad); color: #fff; font-size: 19px; font-weight: 700;}
.rews-card__who {flex: 1; min-width: 0;}
.rews-card__name {font-size: 16.5px; font-weight: 700; color: var(--kp-ink, #1c2410); line-height: 1.2;}
.rews-card__meta {display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; font-size: 13px; color: var(--kp-muted, #7c8571);}
.rews-card__city {position: relative; padding-left: 15px;}
.rews-card__city::before {content: ""; position: absolute; left: 0; top: 3px; width: 9px; height: 9px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--kp-lime, #a4d020);}
.rews-card__tag {display: inline-block; margin-bottom: 10px; padding: 4px 11px; border-radius: 8px; background: var(--kp-lime-soft, #eef6dc); color: #4f6d1c; font-size: 12.5px; font-weight: 600;}
.rews-card__text {margin: 0; font-size: 15px; line-height: 1.6; color: var(--kp-text, #3a4232);}

.rews-act {display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px;}
.rews-btn {display: inline-flex; align-items: center; padding: 14px 26px; border-radius: 999px; background: var(--kp-grad); color: #fff !important; font-size: 15.5px; font-weight: 700; text-decoration: none;}
.rews-btn:hover {filter: brightness(1.06); color: #fff !important;}
.rews-btn--ghost {background: #fff; color: var(--kp-ink) !important; box-shadow: inset 0 0 0 1.5px var(--kp-line, #e7ece0);}
.rews-btn--ghost:hover {box-shadow: inset 0 0 0 1.5px var(--kp-lime, #a4d020); color: var(--kp-ink) !important; filter: none;}

/* ── вопросы и ответы ─────────────────────────────────────────────────────
 * Был голый список ссылок без рамок: непонятно, где заканчивается один
 * вопрос и начинается следующий. Делаем карточки со значком раскрытия.
 */

#faq {padding: var(--kp-section, 72px) 0;}
#faq h2 {margin-bottom: 26px; text-align: left; text-transform: none;}

#faq .card {border: 0; border-radius: 16px; background: var(--kp-tint, #f7faf1); box-shadow: inset 0 0 0 1px var(--kp-line, #e7ece0); overflow: hidden; transition: box-shadow .18s var(--kp-ease, ease);}
#faq .card:hover {box-shadow: inset 0 0 0 1px var(--kp-lime, #a4d020);}
#faq .card > a {position: relative; display: block; padding: 18px 58px 18px 22px; color: var(--kp-ink, #1c2410) !important; font-size: 17px; font-weight: 700; line-height: 1.35; text-decoration: none; cursor: pointer;}
#faq .card > a::after {content: ""; position: absolute; right: 22px; top: 50%; width: 11px; height: 11px; margin-top: -7px; border-right: 2.4px solid var(--kp-green, #4d9b42); border-bottom: 2.4px solid var(--kp-green, #4d9b42); transform: rotate(45deg); transition: transform .22s var(--kp-ease, ease);}
#faq .card > a:not(.collapsed)::after {transform: rotate(-135deg); margin-top: -3px;}
#faq .collapse {padding: 0 22px;}
#faq .collapse.show, #faq .collapse.in {padding-bottom: 20px;}
#faq .collapse p {margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--kp-text, #3a4232);}

/* ── наши работы ──────────────────────────────────────────────────────────
 * Плитка одинаковых кадров 4:3 вместо разнокалиберных превью.
 */

#gallary {padding: var(--kp-section, 72px) 0;}
#gallary h2 {margin-bottom: 24px; text-align: left; text-transform: none;}
#gallary .gall, #gallary .grid, #gallary .row {display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0;}
#gallary .gall::before, #gallary .gall::after, #gallary .grid::before, #gallary .grid::after, #gallary .row::before, #gallary .row::after {content: none; display: none;}
#gallary .thumb, #gallary [class*="col-"] {width: auto; max-width: none; float: none; padding: 0; margin: 0;}
#gallary a {position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--kp-tint, #f7faf1);}
#gallary a::after {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(12, 22, 6, .45) 100%); opacity: 0; transition: opacity var(--kp-fast, .22s) var(--kp-ease, ease);}
#gallary a:hover::after {opacity: 1;}
#gallary img {width: 100%; height: 100%; object-fit: cover; display: block;}
#gallary .button, #gallary .more {margin-top: 22px;}

@media (max-width: 1023px) {
	#gallary .gall, #gallary .grid, #gallary .row {grid-template-columns: repeat(3, minmax(0, 1fr));}
}

@media (max-width: 640px) {
	.rews {padding: var(--kp-section-m, 44px) 0;}
	.rews-head {margin-bottom: 20px;}
	.rews-score {padding: 10px 16px;}
	.rews-score b {font-size: 23px;}
	.rews-card {margin: 0 5px; padding: 18px 17px; border-radius: 16px;}
	.rews-btn {flex: 1 1 100%; justify-content: center;}
	#faq {padding: var(--kp-section-m, 44px) 0;}
	#faq .card > a {padding: 15px 46px 15px 16px; font-size: 15.5px;}
	#faq .card > a::after {right: 17px;}
	#faq .collapse {padding: 0 16px;}
	#faq .collapse.show, #faq .collapse.in {padding-bottom: 16px;}
	#gallary {padding: var(--kp-section-m, 44px) 0;}
	#gallary .gall, #gallary .grid, #gallary .row {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
}

/* Старая тема рисует значок аккордеона текстом: «+» в закрытом состоянии
   и длинное тире в открытом. Свой шеврон мы уже нарисовали рамкой, поэтому
   чужой символ убираем — иначе они накладываются друг на друга. */
#faq #faq-acc .card > a::after,
#faq #faq-acc .card .collapsed::after {content: "" !important; font-size: 0 !important; line-height: 0 !important;}
#faq #faq-acc .card > a {display: block !important; padding: 18px 58px 18px 22px !important;}
#faq #faq-acc .card > a::after {position: absolute; right: 22px; top: 50%; width: 11px; height: 11px; margin-top: -7px; border-right: 2.4px solid var(--kp-green, #4d9b42); border-bottom: 2.4px solid var(--kp-green, #4d9b42); border-top: 0; border-left: 0; transform: rotate(45deg);}
#faq #faq-acc .card > a:not(.collapsed)::after {transform: rotate(-135deg); margin-top: -3px;}

@media (max-width: 640px) {
	#faq #faq-acc .card > a {padding: 15px 46px 15px 16px !important;}
	#faq #faq-acc .card > a::after {right: 17px;}
}

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

.kinds {padding: var(--kp-section, 72px) 0;}
.kinds h2 {margin: 0 0 12px; text-align: left; text-transform: none;}
.kinds__lead {max-width: 70ch; margin: 0 0 26px; font-size: 16.5px; line-height: 1.65; color: var(--kp-text, #3a4232);}
.kinds__grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;}
.kinds__item {padding: 24px 26px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--kp-line, #e7ece0);}
.kinds__item.is-main {background: var(--kp-tint, #f7faf1); box-shadow: inset 0 0 0 2px var(--kp-lime, #a4d020);}
.kinds__tag {display: inline-block; margin-bottom: 10px; padding: 5px 12px; border-radius: 999px; background: var(--kp-grad); color: #fff; font-size: 12.5px; font-weight: 700;}
.kinds__item h3 {margin: 0 0 10px; font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--kp-ink, #1c2410);}
.kinds__item p {margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--kp-text, #3a4232);}
.kinds__item ul {margin: 0; padding: 14px 0 0; border-top: 1px solid var(--kp-line, #e7ece0); list-style: none;}
.kinds__item li {position: relative; margin-bottom: 7px; padding-left: 20px; font-size: 14.5px; line-height: 1.45; color: var(--kp-text, #3a4232);}
.kinds__item li:last-child {margin-bottom: 0;}
.kinds__item li::before {content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--kp-lime, #a4d020);}

/* ── почему не копают сами ────────────────────────────────────────────────
 * Снимает главное возражение: «сделаю сам». Факты отраслевые — вес кольца,
 * поведение плывуна, углекислый газ на дне шахты.
 */

.self {padding: 0 0 var(--kp-section, 72px);}
.self__in {display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 34px; align-items: start; padding: 32px 34px; border-radius: 24px; background: #17200d; color: #c3cbb6;}
.self__text h2 {margin: 0 0 14px; color: #fff; text-align: left; text-transform: none;}
.self__text p {margin: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: #b6c0a6;}
.self__cta {display: flex; flex-wrap: wrap; gap: 10px;}
.self__tel {display: inline-flex; align-items: center; padding: 13px 24px; border-radius: 999px; background: var(--kp-grad); color: #fff !important; font-size: 17px; font-weight: 700; text-decoration: none;}
.self__btn {padding: 13px 22px; border: 1.5px solid rgba(255, 255, 255, .28); border-radius: 999px; background: transparent; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;}
.self__btn:hover {border-color: var(--kp-lime, #a4d020);}
.self__list {display: grid; gap: 12px; margin: 0; padding: 0; list-style: none;}
.self__list li {padding: 18px 20px; border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);}
.self__list b {display: block; margin-bottom: 5px; font-size: 16px; color: #fff;}
.self__list span {font-size: 14.5px; line-height: 1.55; color: #a9b498;}

@media (max-width: 1023px) {
	.kinds__grid {grid-template-columns: 1fr;}
	.self__in {grid-template-columns: 1fr; gap: 24px; padding: 24px 20px;}
}

@media (max-width: 640px) {
	.kinds {padding: var(--kp-section-m, 44px) 0;}
	.kinds__item {padding: 20px 18px; border-radius: 16px;}
	.self {padding-bottom: var(--kp-section-m, 44px);}
	.self__in {padding: 20px 16px; border-radius: 18px;}
	.self__tel, .self__btn {flex: 1 1 100%; justify-content: center; text-align: center;}
	.self__list li {padding: 15px 16px; border-radius: 14px;}
}

/* Старый блок про время года на копке дублирует сезонный: тот меняется
   по месяцу и написан со слов бригад, этот — общий текст. Оставляем один. */
.page-template-kopka #inf-season {display: none;}

/* ☠️ Обёртка галереи называется `.gall`, а не `.grid` — стили сетки на неё
   не попадали, и снимки выводились во всю ширину контейнера по одному.
   Заодно снимаем ширину со старых bootstrap-колонок внутри. */
#gallary .gall {gap: 14px;}
#gallary .gall > .thumb, #gallary .gall > [class*="col-"] {width: auto !important; max-width: none; float: none; padding: 0; margin: 0;}
#gallary .gall .thumb > a, #gallary .gall > a {display: block; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden;}
#gallary .gall img {width: 100%; height: 100%; object-fit: cover; display: block;}

/* ☠️ Общий слой раскладывает `.row` на 12 колонок и даёт `.col-sm-4`
   ширину `span 4`. У блока услуг своя сетка из трёх колонок — там span 4
   занимает всю строку, и первая карточка растягивалась во всю ширину.
   Внутри своих сеток span отменяем. */
#live .cat > [class*="col-"],
#gallary .gall > [class*="col-"],
.wlist > [class*="col-"] {grid-column: auto;}

/* Широкие таблицы внутри вкладок прайса тоже должны прокручиваться:
   раньше они исключались из обёртки, потому что у `.tab-content` свой
   overflow — но у вложенной панели его нет. */
.tab-content, .tab-pane {max-width: 100%;}
.tab-pane > table, .entry > table, .block .row table {display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;}