/* Кардан-Лидер — собственные стили поверх блочной темы.
   Палитра чёрно-оранжевая, как просил заказчик в брифе (п. 5.2).
   Никаких внешних фреймворков и CDN: каждый такой запрос — передача
   данных посетителя за рубеж, что для сайта под 152-ФЗ недопустимо. */

:root {
	/* Шаг сетки — 8 px. Все отступы, зазоры и размеры берутся отсюда,
	   поэтому по сайту держится один вертикальный ритм. Промежуточных
	   значений вроде 18px или 1.15rem быть не должно. */
	--kl-1: 4px;
	--kl-2: 8px;
	--kl-3: 12px;
	--kl-4: 16px;
	--kl-5: 24px;
	--kl-6: 32px;
	--kl-7: 48px;
	--kl-8: 64px;
	--kl-9: 88px;

	/* Производные величины. Меняются плавно с шириной экрана,
	   без скачков на границах брейкпоинтов. */
	--kl-space: var(--kl-6);
	--kl-section: clamp(40px, 6vw, 88px);
	--kl-gutter: clamp(16px, 3vw, 24px);
	--kl-fab-gap: var(--kl-3);
	--kl-fab-size: 46px;

	--kl-radius: 11px;
	--kl-radius-sm: 8px;
	--kl-header-h: 68px;
	--kl-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
	--kl-ring: 0 0 0 2px var(--wp--preset--color--accent);
}

/* Футер всегда внизу: даже на короткой странице под ним нет пустоты */
html { scroll-behavior: smooth; }

body {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	/* Никакого overflow у body. И hidden, и clip делают его собственным
	   контейнером прокрутки — тогда position: sticky у шапки не работает,
	   и она уезжает вверх при листании. Горизонтального выезда у нас нет:
	   ширины ограничены контейнером, а таблицы листаются внутри себя. */
}

body > .wp-site-blocks {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

body > .wp-site-blocks > main { flex: 1 0 auto; }

body > .wp-site-blocks > footer { flex-shrink: 0; margin-top: auto; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ===========================================================================
   ШАПКА
   Липнет к верху на всех устройствах, включая iOS: там position:sticky
   работает только если у родителей нет overflow, поэтому его нигде не ставим.
   ========================================================================= */

.kl-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(11, 10, 8, .92);
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.kl-logo {
	font-weight: 800;
	font-size: 1.3rem;
	letter-spacing: .01em;
	line-height: 1.1;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
}

a.kl-logo:hover { color: var(--wp--preset--color--accent); }

.kl-phone {
	font-weight: 700;
	font-size: 1rem;
	white-space: nowrap;
	margin: 0;
}

.kl-phone a { color: var(--wp--preset--color--contrast); text-decoration: none; }

.kl-phone a:hover { color: var(--wp--preset--color--accent); }

.kl-phone small {
	display: block;
	font-size: .68rem;
	font-weight: 500;
	color: var(--wp--preset--color--contrast-2);
	letter-spacing: .02em;
}

/* --- Навигация: десктоп --- */
.kl-header .wp-block-navigation {
	font-weight: 600;
	font-size: .94rem;
}

.kl-header .wp-block-navigation a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	padding: .45rem 0;
	position: relative;
	transition: color .16s ease;
}

.kl-header .wp-block-navigation a:hover,
.kl-header .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--accent);
}

/* Тонкая подсветка активного пункта — вместо тяжёлых подложек */
.kl-header .wp-block-navigation-item > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -.2rem;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s ease;
}

.kl-header .wp-block-navigation-item > a:hover::after,
.kl-header .wp-block-navigation-item.current-menu-item > a::after { transform: scaleX(1); }

/* Выпадающие подменю */
.kl-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--kl-radius);
	padding: .5rem;
	min-width: 250px;
	box-shadow: var(--kl-shadow);
	/* Никакого margin-top: разрыв между пунктом и подменю рвёт наведение —
	   курсор проходит по пустоте, и меню закрывается. Отступ рисуем
	   прозрачной перемычкой ниже. */
	margin-top: 0;
	top: 100%;
}

/* Перемычка: держит подменю открытым, пока курсор идёт к нему сверху вниз */
.kl-header .wp-block-navigation .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -14px;
	height: 14px;
	background: transparent;
}

/* Зона наведения самого пункта тоже без щелей */
.kl-header .wp-block-navigation .has-child > .wp-block-navigation-item__content {
	padding-bottom: .55rem;
	margin-bottom: -.55rem;
}

.kl-header .wp-block-navigation .wp-block-navigation__submenu-container a {
	padding: .55rem .75rem;
	border-radius: var(--kl-radius-sm);
	display: block;
	font-weight: 500;
	transition: background-color .15s ease, color .15s ease;
}

.kl-header .wp-block-navigation .wp-block-navigation__submenu-container a::after { display: none; }

.kl-header .wp-block-navigation .wp-block-navigation__submenu-container a:hover {
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--accent);
}

.kl-header .wp-block-navigation__submenu-icon { margin-left: .3rem; opacity: .65; }

/* --- Навигация: планшет и телефон --- */
.kl-header .wp-block-navigation__responsive-container-open,
.kl-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--contrast);
	padding: .55rem;
	border-radius: var(--kl-radius-sm);
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.kl-header .wp-block-navigation__responsive-container-open:hover { color: var(--wp--preset--color--accent); }

/* ===========================================================================
   ТИПОВЫЕ БЛОКИ КОНТЕНТА
   ========================================================================= */

.kl-lead {
	font-size: clamp(1.05rem, .98rem + .5vw, 1.28rem);
	line-height: 1.55;
	color: var(--wp--preset--color--contrast);
	margin-bottom: 2rem;
}

.kl-note {
	font-size: .87rem;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast-2);
	border-left: 3px solid var(--wp--preset--color--accent);
	padding: .35rem 0 .35rem 1rem;
	margin: 2rem 0;
}

.kl-figure { margin: 2rem 0; }

.kl-figure img {
	width: 100%;
	height: auto;
	border-radius: var(--kl-radius);
	display: block;
	border: 1px solid var(--wp--preset--color--line);
}

.kl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-weight: 700;
	text-decoration: none;
	padding: .9rem 1.75rem;
	border-radius: var(--kl-radius);
	margin: 0 .55rem .6rem 0;
	min-height: 48px;
	line-height: 1.3;
	transition: background-color .18s ease, transform .12s ease, box-shadow .18s ease;
}

.kl-btn:hover {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--on-accent);
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(223, 154, 50, .22);
}

.kl-btn:active { transform: translateY(0); }

.kl-btn:focus-visible { outline: none; box-shadow: var(--kl-ring); }

.kl-btn--ghost {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--line);
}

.kl-btn--ghost:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	box-shadow: none;
}

/* --- Карточки --- */
.kl-grid { display: grid; gap: 1rem; margin: 2rem 0; }

.kl-grid--2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

.kl-grid--3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }

.kl-card {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--kl-radius);
	padding: clamp(1.15rem, 3vw, 1.6rem);
	background: var(--wp--preset--color--surface);
	transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}

.kl-card:hover {
	border-color: rgba(223, 154, 50, .5);
	background: var(--wp--preset--color--surface-2);
	transform: translateY(-2px);
}

.kl-card h2,
.kl-card h3 { margin: 0 0 .6rem; font-size: 1.08rem; line-height: 1.3; }

.kl-card h3 a { text-decoration: none; color: var(--wp--preset--color--contrast); }

.kl-card:hover h3 a { color: var(--wp--preset--color--accent); }

.kl-card p { margin: 0 0 .6rem; font-size: .94rem; color: var(--wp--preset--color--contrast-2); }

.kl-card p:last-child { margin-bottom: 0; }

.kl-card .kl-price {
	font-weight: 800;
	color: var(--wp--preset--color--accent);
	font-size: 1rem;
}

/* Карточка-ссылка целиком кликабельна */
.kl-card--link { position: relative; }

.kl-card--link h3 a::before { content: ""; position: absolute; inset: 0; }

/* --- Списки --- */
.kl-checks { list-style: none; padding: 0; margin: 1.5rem 0; }

.kl-checks li { position: relative; padding-left: 1.75rem; margin-bottom: .8rem; line-height: 1.6; }

.kl-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: 9px;
	height: 9px;
	border-radius: 2px;
	background: var(--wp--preset--color--accent);
}

.kl-steps { counter-reset: kl-step; list-style: none; padding: 0; margin: 1.5rem 0; }

.kl-steps li { counter-increment: kl-step; position: relative; padding-left: 2.9rem; margin-bottom: 1.2rem; line-height: 1.6; }

.kl-steps li::before {
	content: counter(kl-step);
	position: absolute;
	left: 0;
	top: -.1rem;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-weight: 800;
	font-size: .92rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --- Таблицы цен --- */
.kl-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--kl-radius);
	margin: 1.75rem 0;
	background: var(--wp--preset--color--surface);
}

.kl-table-wrap table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .93rem; }

.kl-table-wrap th,
.kl-table-wrap td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--wp--preset--color--line); vertical-align: top; }

.kl-table-wrap thead th {
	background: var(--wp--preset--color--surface-2);
	font-weight: 700;
	position: sticky;
	top: 0;
	white-space: nowrap;
}

/* Цены во всех колонках кроме первой: один цвет, одно выравнивание.
   Первая ячейка строки — <th scope="row">, поэтому селектор по td + td
   не доставал до колонки «Легковые» и она одна шла белой и по левому краю. */
.kl-table-wrap tbody tr > :not(:first-child) {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

.kl-table-wrap tbody tr > :first-child { font-weight: 600; }

/* Цену не рвём по слогам, а вот перечень диаметров переносим по строкам */
.kl-table-wrap tbody tr > :not(:first-child) { white-space: normal; }

.kl-table-wrap thead th + th { color: var(--wp--preset--color--contrast); font-weight: 700; }

.kl-table-wrap tbody tr:last-child td { border-bottom: 0; }

.kl-table-wrap tbody tr:hover td { background: rgba(223, 154, 50, .04); }

/* --- FAQ --- */
.kl-faq { margin: 2rem 0; }

.kl-faq details {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--kl-radius);
	background: var(--wp--preset--color--surface);
	margin-bottom: .75rem;
	overflow: hidden;
}

.kl-faq summary {
	cursor: pointer;
	padding: 1.05rem 3rem 1.05rem 1.25rem;
	font-weight: 700;
	list-style: none;
	position: relative;
	transition: color .16s ease;
}

.kl-faq summary::-webkit-details-marker { display: none; }

.kl-faq summary:hover { color: var(--wp--preset--color--accent); }

.kl-faq summary::after {
	content: "+";
	position: absolute;
	right: 1.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--wp--preset--color--accent);
	line-height: 1;
	transition: transform .2s ease;
}

.kl-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }

.kl-faq details > *:not(summary) { padding: 0 1.25rem; }

.kl-faq details > *:last-child { padding-bottom: 1.25rem; }

/* --- Отзывы --- */
.kl-review {
	border-left: 3px solid var(--wp--preset--color--accent);
	padding: .35rem 0 .35rem 1.15rem;
	margin: 1.5rem 0;
}

.kl-review__author { font-size: .87rem; color: var(--wp--preset--color--contrast-2); margin-top: .6rem; }

/* ===========================================================================
   ГАЛЕРЕЯ И ЛАЙТБОКС
   ========================================================================= */

.kl-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: .85rem;
	margin: 2rem 0;
}

.kl-gallery__item {
	display: block;
	overflow: hidden;
	border-radius: var(--kl-radius);
	border: 1px solid var(--wp--preset--color--line);
	line-height: 0;
	position: relative;
	background: var(--wp--preset--color--surface);
}

.kl-gallery__item img {
	width: 100%;
	height: 100%;
	aspect-ratio: 8 / 5;
	object-fit: cover;
	transition: transform .35s ease;
}

.kl-gallery__item:hover img { transform: scale(1.05); }

.kl-gallery__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(11, 10, 8, 0);
	transition: background-color .25s ease;
}

.kl-gallery__item:hover::after { background: rgba(11, 10, 8, .2); }

.kl-gallery__item:focus-visible { outline: none; box-shadow: var(--kl-ring); }

.kl-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(6, 6, 5, .96);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4rem 1rem 4.5rem;
}

.kl-lightbox[hidden] { display: none; }

.kl-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: var(--kl-radius-sm);
	animation: kl-zoom .2s ease;
}

@keyframes kl-zoom { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: scale(1); } }

.kl-lightbox__caption {
	position: absolute;
	left: 0; right: 0; bottom: 1.5rem;
	text-align: center;
	color: var(--wp--preset--color--contrast-2);
	font-size: .9rem;
	padding: 0 1rem;
	margin: 0;
}

.kl-lightbox button {
	position: absolute;
	background: rgba(246, 243, 238, .08);
	border: 1px solid rgba(246, 243, 238, .22);
	color: var(--wp--preset--color--contrast);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.35rem;
	line-height: 1;
	transition: background-color .18s ease, transform .18s ease, border-color .18s ease;
}

.kl-lightbox button:hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	transform: scale(1.05);
}

.kl-lightbox__close { top: 1rem; right: 1rem; }
.kl-lightbox__prev { left: 1rem; top: 50%; margin-top: -23px; }
.kl-lightbox__next { right: 1rem; top: 50%; margin-top: -23px; }

.kl-lightbox__counter { position: absolute; top: 1.6rem; left: 1.25rem; color: var(--wp--preset--color--contrast-2); font-size: .85rem; }

/* ===========================================================================
   ФОРМЫ
   ========================================================================= */

.wpcf7 form { max-width: 580px; }

.wpcf7 label { display: block; font-weight: 600; margin-bottom: 1rem; }

.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	margin-top: .4rem;
	padding: .8rem .95rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--kl-radius-sm);
	font: inherit;
	font-weight: 400;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	min-height: 48px;
}

.wpcf7 ::placeholder { color: #7d766c; }

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus { outline: none; border-color: var(--wp--preset--color--accent); box-shadow: 0 0 0 3px rgba(223, 154, 50, .16); }

.wpcf7 textarea { min-height: 128px; resize: vertical; }

.wpcf7 .kl-consent {
	font-weight: 400;
	font-size: .84rem;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast-2);
	display: block;
	margin-bottom: 1.25rem;
}

.wpcf7 .kl-consent .wpcf7-list-item { margin: 0; display: flex; gap: .6rem; align-items: flex-start; }

.wpcf7 .kl-consent input[type="checkbox"] {
	margin-top: .15rem;
	width: 19px;
	height: 19px;
	flex: 0 0 19px;
	accent-color: var(--wp--preset--color--accent);
}

.wpcf7 input[type="submit"] {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	border: 0;
	border-radius: var(--kl-radius);
	padding: .95rem 1.9rem;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	min-height: 48px;
	transition: background-color .18s ease, transform .12s ease, box-shadow .18s ease;
}

.wpcf7 input[type="submit"]:hover { background: var(--wp--preset--color--accent-2); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(223, 154, 50, .22); }

.wpcf7 input[type="submit"]:active { transform: translateY(0); }

.wpcf7 input[type="submit"]:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.wpcf7-response-output { border-radius: var(--kl-radius-sm); border-width: 1px !important; padding: .8rem 1rem !important; }

.wpcf7-not-valid-tip { color: #ff8f6b; font-size: .82rem; }

.kl-hp { position: absolute !important; left: -9999px !important; }

/* ===========================================================================
   COOKIE-БАННЕР, КНОПКА НАВЕРХ, МЕССЕНДЖЕРЫ
   ========================================================================= */

.kl-cookie {
	position: fixed;
	left: 1rem; right: 1rem; bottom: 1rem;
	z-index: 9999;
	background: var(--wp--preset--color--surface-2);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
	border-radius: var(--kl-radius);
	padding: 1.1rem 1.25rem;
	box-shadow: var(--kl-shadow);
	display: flex;
	flex-wrap: wrap;
	gap: .9rem 1.25rem;
	align-items: center;
	justify-content: space-between;
	font-size: .89rem;
	line-height: 1.55;
	max-width: 940px;
	margin: 0 auto;
}

.kl-cookie p { margin: 0; max-width: 60ch; color: var(--wp--preset--color--contrast-2); }

.kl-cookie a { color: var(--wp--preset--color--accent); }

.kl-cookie-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.kl-cookie button {
	font: inherit;
	font-weight: 700;
	border-radius: var(--kl-radius-sm);
	padding: .65rem 1.25rem;
	cursor: pointer;
	border: 1px solid var(--wp--preset--color--line);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	min-height: 44px;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.kl-cookie button:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }

.kl-cookie button.kl-cookie-accept {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

.kl-cookie button.kl-cookie-accept:hover { background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--on-accent); }

.kl-top {
	position: fixed;
	right: var(--kl-5);
	bottom: var(--kl-5);
	z-index: 80;
	width: var(--kl-fab-size);
	height: var(--kl-fab-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}

.kl-top:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	border-color: var(--wp--preset--color--accent);
	transform: translateY(-3px);
}

.kl-top:focus-visible { outline: none; box-shadow: var(--kl-ring); }

/* Кнопки мессенджеров: WhatsApp не ставим — он недоступен в России с февраля 2026 */
.kl-messengers {
	position: fixed;
	right: var(--kl-5);
	bottom: calc(var(--kl-5) + var(--kl-fab-size) + var(--kl-fab-gap));
	z-index: 80;
	display: flex;
	flex-direction: column;
	gap: var(--kl-fab-gap);
}

.kl-messengers a {
	width: var(--kl-fab-size);
	height: var(--kl-fab-size);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--surface-2);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-weight: 700;
	font-size: .78rem;
	transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}

.kl-messengers a:hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	transform: translateY(-2px);
}

/* ===========================================================================
   ХЛЕБНЫЕ КРОШКИ
   ========================================================================= */

.kl-crumbs { margin-bottom: 1.4rem; font-size: .82rem; color: var(--wp--preset--color--contrast-2); }

.kl-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .55rem; }

.kl-crumbs li { display: flex; align-items: center; gap: .55rem; }

.kl-crumbs li:not(:last-child)::after { content: "/"; color: var(--wp--preset--color--line); }

.kl-crumbs a { color: var(--wp--preset--color--contrast-2); text-decoration: none; }

.kl-crumbs a:hover { color: var(--wp--preset--color--accent); }

.kl-crumbs [aria-current="page"] { color: var(--wp--preset--color--contrast); }

/* ===========================================================================
   ПОДВАЛ
   ========================================================================= */

.kl-footer {
	background: var(--wp--preset--color--surface);
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast-2);
	font-size: .92rem;
}

.kl-footer a { color: var(--wp--preset--color--contrast-2); text-decoration: none; }

.kl-footer a:hover { color: var(--wp--preset--color--accent); text-decoration: underline; }

.kl-footer h2,
.kl-footer h3 { color: var(--wp--preset--color--contrast); }

.kl-footer ul { list-style: none; padding: 0; margin: 0; }

.kl-footer li { margin-bottom: .45rem; }

.kl-requisites { font-size: .8rem; line-height: 1.6; color: #7d766c; }

/* ===========================================================================
   404
   ========================================================================= */

.kl-404 { text-align: center; }

.kl-404__code {
	font-size: clamp(4rem, 3rem + 8vw, 7.5rem);
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	letter-spacing: -.06em;
	margin: 0 0 .5rem;
}

.kl-404 .kl-grid { text-align: left; }

/* ===========================================================================
   АДАПТИВ
   ========================================================================= */

/* Планшет */
@media (min-width: 782px) and (max-width: 1100px) {
	.kl-header .wp-block-navigation { font-size: .88rem; }
	.kl-phone small { display: none; }
}

/* Телефон */
@media (max-width: 781px) {
	:root { --kl-header-h: 60px; }

	.kl-logo { font-size: 1.15rem; }

	.kl-phone { font-size: .95rem; }

	.kl-cookie { flex-direction: column; align-items: stretch; left: .6rem; right: .6rem; bottom: .6rem; }

	.kl-cookie-actions button { width: 100%; }

	.kl-top { right: .8rem; bottom: .8rem; width: 44px; height: 44px; }

	.kl-messengers { right: .8rem; bottom: 4.4rem; }

	.kl-messengers a { width: 44px; height: 44px; }

	.kl-table-wrap table { min-width: 560px; font-size: .88rem; }

	.kl-table-wrap th,
	.kl-table-wrap td { padding: .65rem .75rem; }

	.kl-gallery { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: .55rem; }

	.kl-lightbox { padding: 3.5rem .5rem 4.5rem; }

	.kl-lightbox__prev { left: .5rem; }

	.kl-lightbox__next { right: .5rem; }

	.kl-footer li a { display: inline-block; padding: .2rem 0; }

	.kl-btn { width: 100%; margin-right: 0; }
}

@media (max-width: 400px) {
	.kl-logo { font-size: 1.05rem; }
	.kl-phone { font-size: .88rem; }
}

/* Печать: убираем всё лишнее */
@media print {
	.kl-header, .kl-cookie, .kl-top, .kl-messengers, .wpcf7, .kl-crumbs { display: none !important; }
	body { background: #fff; color: #000; }
}

/* --- Раскладка подвала --- */
.kl-footer__cols {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 2rem 2.5rem;
	margin-bottom: 2.5rem;
}

.kl-footer__brand {
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: -.035em;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 .75rem;
}

.kl-footer__contacts { margin-top: 1rem; line-height: 1.75; }

.kl-footer__contacts a { color: var(--wp--preset--color--accent); font-weight: 700; font-size: 1.05rem; }

.kl-footer__msg { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }

.kl-footer__msg a {
	display: inline-flex;
	align-items: center;
	padding: .45rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 600;
	min-height: 40px;
	transition: border-color .16s ease, color .16s ease;
}

.kl-footer__msg a:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); text-decoration: none; }

.kl-footer h3 { font-size: .95rem; margin: 0 0 .9rem; letter-spacing: .01em; }

.kl-requisites p { margin: 0 0 .5rem; }

@media (max-width: 1000px) {
	.kl-footer__cols { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 600px) {
	.kl-footer__cols { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ===========================================================================
   МЕНЮ: собственный брейкпоинт
   WordPress прячет бургер уже с 600 px, но полноценное меню сервиса в такую
   ширину не помещается. Возвращаем мобильное поведение вплоть до 1080 px —
   планшет получает тот же удобный полноэкранный оверлей, что и телефон.
   ========================================================================= */

@media (max-width: 1175px) {

	.kl-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
}

/* Телефон в шапке: подпись про часы работы съедает место на планшете */
@media (max-width: 1175px) and (min-width: 561px) {
	.kl-phone small { display: none; }
}

@media (max-width: 560px) {
	.kl-header .kl-phone { display: none; }
}

/* Кнопка в шапке не должна сжиматься в вертикальную полоску */
.kl-header .wp-block-buttons,
.kl-header .wp-block-button,
.kl-header .kl-phone { flex-shrink: 0; }

.kl-header .wp-block-button__link { white-space: nowrap; }

/* --- Мелочи страниц --- */
.kl-muted { color: #7d766c; font-size: .85rem; }

.kl-map-placeholder {
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: var(--kl-radius);
	background: var(--wp--preset--color--surface);
	padding: 3rem 1.5rem;
	text-align: center;
	color: var(--wp--preset--color--contrast-2);
	margin: 1.75rem 0;
}

.kl-map-placeholder p { margin: 0 0 .5rem; }

.kl-map-placeholder strong { color: var(--wp--preset--color--contrast); }

/* Заголовок страницы: воздух сверху, чтобы липкая шапка не наезжала */
main > .wp-block-post-title { margin-top: .5rem; }

/* Якорные переходы не должны прятать заголовок под шапкой */
:target { scroll-margin-top: calc(var(--kl-header-h) + 1rem); }

/* ===========================================================================
   ПОДМЕНЮ: непрозрачный фон
   Блок навигации задаёт свой фон инлайном, поэтому здесь нужен приоритет —
   иначе выпадающий список просвечивает и наезжает на текст страницы.
   ========================================================================= */

.kl-header .wp-block-navigation .wp-block-navigation__submenu-container,
.kl-header .wp-block-navigation ul.wp-block-navigation__submenu-container {
	background-color: #17140f !important;
	border: 1px solid #2c271f !important;
	color: var(--wp--preset--color--contrast) !important;
	border-radius: var(--kl-radius) !important;
	padding: .5rem !important;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .55) !important;
	backdrop-filter: none;
}

.kl-header .wp-block-navigation .wp-block-navigation__submenu-container li,
.kl-header .wp-block-navigation .wp-block-navigation__submenu-container a {
	background-color: transparent !important;
	color: var(--wp--preset--color--contrast) !important;
}

.kl-header .wp-block-navigation .wp-block-navigation__submenu-container a:hover {
	background-color: #1f1b15 !important;
	color: var(--wp--preset--color--accent) !important;
}

/* ===========================================================================
   ПРАВКИ ПОСЛЕ ПРОВЕРКИ В БРАУЗЕРЕ
   ========================================================================= */

/* Крошки — не нумерованный список: маркеры темы перебивали сброс */
.kl-crumbs ol,
.wp-block-post-content .kl-crumbs ol,
.entry-content .kl-crumbs ol {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.kl-crumbs li { list-style: none !important; margin: 0 !important; }

/* Списки внутри контента: свои маркеры вместо стандартных точек */
.kl-checks li,
.kl-steps li { list-style: none !important; }

.kl-checks,
.kl-steps { padding-left: 0 !important; }

/* Шапка на телефоне: компактнее */
@media (max-width: 781px) {
	.kl-header { padding-top: .5rem !important; padding-bottom: .5rem !important; }
}

/* Заголовок страницы на телефоне не должен упираться в шапку */
@media (max-width: 781px) {
	main > .wp-block-post-title { margin-top: .25rem; }
}

/* Пока открыто меню, ничего поверх него висеть не должно */
body.has-modal-open .kl-cookie,
body.has-modal-open .kl-top,
body.has-modal-open .kl-messengers { display: none !important; }

/* Cookie-баннер не должен перекрывать первый экран целиком на телефоне */
@media (max-width: 560px) {
	.kl-cookie { max-height: 62vh; overflow-y: auto; }
	.kl-cookie p { font-size: .84rem; }
}

/* ===========================================================================
   ИСПРАВЛЕНИЕ ОВЕРЛЕЯ
   backdrop-filter у шапки делает её точкой отсчёта для position:fixed внутри —
   из-за этого меню открывалось со смещением и вылезало за экран. На ширинах,
   где меню становится оверлеем, размытие отключаем: фон и так непрозрачный.
   ========================================================================= */

@media (max-width: 1175px) {
	.kl-header {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: #0b0a08;
	}
}

/* ===========================================================================
   ПРАВКИ ПОСЛЕ ПРОВЕРКИ НА ДЕСКТОПЕ
   ========================================================================= */

/* На широком экране бургер не нужен — меню и так развёрнуто.
   Раньше кнопку показывало собственное правило темы для мобильных. */
@media (min-width: 1176px) {
	.kl-header .wp-block-navigation__responsive-container-open,
	.kl-header .wp-block-navigation__responsive-container-close { display: none !important; }
}

/* Широкие таблицы цен выходят за колонку текста: на большом экране прайс
   читается целиком, на узком — прокручивается пальцем. */
@media (min-width: 1000px) {
	.kl-table-wrap,
	.wp-block-post-content > .kl-table-wrap,
	.entry-content > .kl-table-wrap {
		width: min(1180px, calc(100vw - 4rem)) !important;
		max-width: none !important;
		margin-left: calc(50% - min(590px, calc(50vw - 2rem))) !important;
	}
}

/* Мелкие ссылки в подвале и списках — увеличиваем область нажатия */
.kl-footer a,
.kl-crumbs a { min-height: 32px; display: inline-flex; align-items: center; }

@media (max-width: 781px) {
	.kl-footer a { min-height: 40px; }
	.kl-card h3 a { display: inline-block; padding: .15rem 0; }
}

/* ===========================================================================
   ИСПРАВЛЕНИЕ НАЛОЖЕНИЙ И СКРЫТИЯ (после проверки на живых страницах)
   ========================================================================= */

/* Padding должен входить в ширину и высоту. Без этого карточка с height:100%
   считала высоту БЕЗ отступов, вылезала из своей ячейки грида на величину
   padding и наезжала на следующий ряд. */
*,
*::before,
*::after { box-sizing: border-box; }

/* Карточка тянется до высоты ряда штатным растягиванием грида */
.kl-card { align-self: stretch; height: auto; }

.kl-grid { align-items: stretch; }

/* Приподнятая карточка не должна уходить под соседнюю: поднимаем её слой */
.kl-card { position: relative; z-index: 0; }

.kl-card:hover { z-index: 1; }

/* Атрибут hidden обязан скрывать элемент. Собственные display у этих блоков
   перебивали браузерное [hidden] { display: none } — баннер не исчезал после
   нажатия «Принимаю», а кнопка «наверх» висела с самого верха страницы. */
.kl-cookie[hidden],
.kl-top[hidden],
.kl-messengers[hidden],
.kl-lightbox[hidden],
[hidden] { display: none !important; }

/* ===========================================================================
   ШИРИНА СТРАНИЦЫ
   Контейнер 1200 px — как на современных сайтах услуг. Шапка, контент и
   подвал делят одну сетку и одинаковые боковые поля, поэтому логотип стоит
   ровно над левым краем текста, а кнопка — над правым.
   ========================================================================= */

:root { --kl-container: 1200px; --kl-gutter: clamp(1rem, 3vw, 2.5rem); }

.kl-header > .wp-block-group,
.kl-footer > .wp-block-group,
.kl-footer > .kl-footer__cols,
.kl-footer > .kl-requisites,
main > .wp-block-post-title,
main > .wp-block-post-content > *,
main > .wp-block-post-date {
	max-width: var(--kl-container);
	margin-left: auto;
	margin-right: auto;
}

.kl-header,
.kl-footer,
main { padding-left: var(--kl-gutter); padding-right: var(--kl-gutter); }

main > .wp-block-post-content { max-width: none; }

/* Строка текста не должна тянуться через весь экран — читать такое тяжело.
   Ограничение только для абзацев и списков, сетки и таблицы идут во всю ширину. */
main > .wp-block-post-content > p,
main > .wp-block-post-content > ul:not(.kl-checks):not(.kl-steps),
main > .wp-block-post-content > ol,
main > .wp-block-post-content > .kl-lead,
main > .wp-block-post-content > .kl-note,
main > .wp-block-post-content > .kl-checks,
main > .wp-block-post-content > .kl-steps,
main > .wp-block-post-content > .kl-faq { max-width: 90ch; }

/* Заголовки и широкие блоки — по всей ширине контейнера */
main > .wp-block-post-content > .kl-grid,
main > .wp-block-post-content > .kl-gallery,
main > .wp-block-post-content > .kl-figure { max-width: var(--kl-container); }

/* Таблица прайса тянется на весь контейнер, а не наезжает на поля */
@media (min-width: 1000px) {
	.kl-table-wrap,
	.wp-block-post-content > .kl-table-wrap,
	.entry-content > .kl-table-wrap {
		width: 100% !important;
		max-width: var(--kl-container) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* Сетки на широком экране получают больше колонок — иначе карточки растянутся */
@media (min-width: 1100px) {
	.kl-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.kl-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.kl-grid { gap: 1.25rem; }
}

@media (min-width: 1400px) {
	.kl-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ===========================================================================
   ДОСТУПНОСТЬ: WCAG 2.1 AA
   Правки после аудита. Цифры контраста посчитаны, а не подобраны на глаз.
   ========================================================================= */

:root {
	/* Граница, по которой человек опознаёт поле ввода или кнопку, обязана
	   давать 3:1 к фону (критерий 1.4.11). Прежняя #2c271f давала 1.24:1. */
	--kl-line-ui: #7a7160;
	/* Декоративные линии между блоками — просто заметнее прежнего */
	--kl-line-soft: #3a3428;
	/* Мелкий приглушённый текст: 4.09:1 не проходил норму 4.5:1 */
	--kl-muted-strong: #a49c91;
}

/* --- 1.4.3: мелкий текст --- */
.kl-requisites { color: var(--kl-muted-strong); font-size: .82rem; }

.wpcf7 ::placeholder { color: var(--kl-muted-strong); opacity: 1; }

.kl-map-placeholder { color: var(--kl-muted-strong); }

/* --- 1.4.11: границы элементов управления --- */
.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 select,
.wpcf7 textarea,
.kl-btn--ghost,
.kl-cookie button,
.kl-top,
.kl-messengers a,
.kl-footer__msg a { border-color: var(--kl-line-ui); }

.kl-card,
.kl-table-wrap,
.kl-faq details,
.kl-gallery__item,
.kl-map-placeholder { border-color: var(--kl-line-soft); }

.kl-crumbs li:not(:last-child)::after { color: var(--kl-line-ui); }

/* --- 2.4.7: видимый фокус у всего, что реагирует на наведение --- */
.kl-header .wp-block-navigation a:focus-visible,
.kl-footer a:focus-visible,
.kl-crumbs a:focus-visible,
.kl-card a:focus-visible,
.kl-messengers a:focus-visible,
.kl-cookie button:focus-visible,
.kl-footer__msg a:focus-visible,
.kl-faq summary:focus-visible,
.kl-table-wrap:focus-visible,
main a:focus-visible,
.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible,
.wpcf7 input[type="submit"]:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Ссылка «Перейти к содержимому» должна быть видна, когда получила фокус */
.skip-link:focus {
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--on-accent) !important;
	outline: 3px solid var(--wp--preset--color--contrast);
	z-index: 100001;
}

/* --- 2.5.5: область нажатия --- */
.kl-header .wp-block-button__link {
	min-height: 46px;
	display: inline-flex;
	align-items: center;
	padding-top: .7rem;
	padding-bottom: .7rem;
}

.kl-header .wp-block-navigation a { padding-top: .6rem; padding-bottom: .6rem; }

.kl-faq summary { min-height: 48px; display: flex; align-items: center; }

/* --- 2.1.1: таблица прокручивается с клавиатуры --- */
.kl-table-wrap:focus-visible { outline-offset: -3px; }

.kl-table-wrap[tabindex] { cursor: default; }

/* Шапка блока таблицы: слева название, справа подсказка про прокрутку.
   Название поднято из <caption> — внутри таблицы оно шло по центру. */
.kl-table-caption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .35rem 1rem;
	font-size: .85rem;
	color: var(--kl-muted-strong);
	padding: .85rem 1rem .7rem;
	border-bottom: 1px solid var(--kl-line-soft);
	background: transparent;
	margin: 0;
}

.kl-table-caption__title {
	font-size: .95rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

/* Подсказка появляется, только если таблица действительно не влезла */
.kl-table-caption__hint { display: none; }

.kl-table-wrap.is-scrollable .kl-table-caption__hint { display: inline; }

/* Шапка таблицы без подписи: пока таблица влезает, показывать в ней нечего */
.kl-table-wrap:not(.is-scrollable) .kl-table-caption--bare { display: none; }

/* --- Модальные окна: пока открыт лайтбокс, фон не прокручивается --- */
body.kl-modal-open { overflow: hidden; }

/* ===========================================================================
   ДИЗАЙН-СИСТЕМА ИЗ МАКЕТА (Claude Design, файл «Кардан-Лидер.dc.html»)
   Контейнер 1320 + поля 40, секция 88 по вертикали.
   Телефон: контейнер 390, поля 20, секция 48.
   Радиусы 11 / 8 / 99. Тени sm и md. Наведение: рамка #f5a524, подъём 2 px.
   ========================================================================= */

:root {
	--kl-container: 1320px;
	--kl-gutter: 40px;
	--kl-radius: 11px;
	--kl-radius-sm: 8px;
	--kl-radius-pill: 99px;
	--kl-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
	--kl-shadow-md: 0 10px 26px rgba(0, 0, 0, .55);
	--kl-shadow: var(--kl-shadow-md);
}

@media (max-width: 781px) {
	:root { --kl-gutter: 16px; }
}

/* --- Вертикальный ритм: заголовок второго уровня открывает новую секцию --- */
main > .wp-block-post-content > h2 {
	margin-top: var(--kl-section);
	margin-bottom: 24px;
}

main > .wp-block-post-content > h2:first-child { margin-top: 24px; }

main > .wp-block-post-content > h3 { margin-top: 32px; margin-bottom: 12px; }

/* --- Цена: 28 px, вес 800 — как в макете --- */
.kl-card .kl-price {
	font-size: 1.75rem;
	line-height: 1;
	font-weight: 800;
	margin-top: 16px;
}

/* --- Надзаголовок: короткая строка над крупным заголовком --- */
.kl-eyebrow {
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 0 0 12px;
}

/* --- Наведение по макету: рамка акцентом и подъём на 2 px --- */
.kl-card:hover {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface-2);
	transform: translateY(-2px);
	box-shadow: var(--kl-shadow-md);
}

.kl-faq details:hover { border-color: var(--kl-line-ui); }

/* --- Секции с фоном во всю ширину экрана ---
   Подложка тянется от края до края, содержимое остаётся в контейнере.
   Класс ставится у блока в тексте страницы: <div class="kl-band">…</div> */
.kl-band {
	position: relative;
	padding: var(--kl-section) 0;
	margin: var(--kl-section) 0;
}

.kl-band::before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	top: 0;
	bottom: 0;
	background: var(--wp--preset--color--surface);
	z-index: -1;
}

.kl-band--deep::before { background: var(--wp--preset--color--surface-2); }

.kl-band > *:first-child { margin-top: 0; }

.kl-band > *:last-child { margin-bottom: 0; }

/* --- Двухколоночный блок «текст и картинка» --- */
.kl-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	margin: 48px 0;
}

.kl-split--reverse > *:first-child { order: 2; }

.kl-split img { width: 100%; height: auto; border-radius: var(--kl-radius); display: block; }

@media (max-width: 900px) {
	.kl-split { grid-template-columns: 1fr; gap: 24px; }
	.kl-split--reverse > *:first-child { order: 0; }
}

/* --- Строка фактов под первым экраном --- */
.kl-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1px;
	background: var(--kl-line-soft);
	border: 1px solid var(--kl-line-soft);
	border-radius: var(--kl-radius);
	overflow: hidden;
	margin: 32px 0 var(--kl-section);
}

.kl-facts div {
	background: var(--wp--preset--color--surface);
	padding: 24px;
}

.kl-facts dt,
.kl-facts .kl-facts__label {
	font-size: .875rem;
	color: var(--wp--preset--color--contrast-2);
	margin: 0 0 8px;
}

.kl-facts dd,
.kl-facts .kl-facts__value {
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.1;
	margin: 0;
	color: var(--wp--preset--color--contrast);
}

.kl-facts .kl-facts__value--accent { color: var(--wp--preset--color--accent); }

/* --- Кнопка звонка в шапке телефона ---
   Номер — главный канал обращения в сервис, на узком экране он обязан быть
   в один тап, а не через меню или подвал. */
.kl-call {
	display: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--kl-line-ui);
	border-radius: var(--kl-radius-sm);
	color: var(--wp--preset--color--contrast);
	flex-shrink: 0;
	transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.kl-call:hover,
.kl-call:focus-visible {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

@media (max-width: 560px) {
	.kl-call { display: inline-flex; }
	.kl-header .wp-block-button__link { padding-left: 1rem; padding-right: 1rem; font-size: .82rem; }
}

/* --- Выравнивание текста по левому краю контейнера ---
   Ограничение строки по 90ch вместе с margin:auto центрировало абзацы,
   и они «плавали» относительно заголовков. Текст должен начинаться там же,
   где начинается заголовок. */
main > .wp-block-post-content > p,
main > .wp-block-post-content > ul,
main > .wp-block-post-content > ol,
main > .wp-block-post-content > .kl-lead,
main > .wp-block-post-content > .kl-note,
main > .wp-block-post-content > .kl-checks,
main > .wp-block-post-content > .kl-steps,
main > .wp-block-post-content > .kl-faq,
main > .wp-block-post-content > .wpcf7,
main > .wp-block-post-content > figure {
	/* WordPress печатает для содержимого constrained-раскладки
	   margin-left/right: auto с !important — без своего !important
	   абзацы остаются по центру, а заголовки прижаты влево. */
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Кнопки первого экрана — от левого края, а не по центру колонки */
main > .wp-block-post-content > p:has(.kl-btn) { max-width: none; }

/* --- Контейнер контента и выравнивание внутри него ---
   Сам блок контента ограничен и центрирован — он и задаёт поля страницы.
   Всё, что внутри, прижимается к его левому краю: тогда абзац начинается
   ровно под заголовком, а не плавает по центру колонки. */
main > .wp-block-post-content {
	max-width: var(--kl-container) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100%;
}

main > .wp-block-post-content > * {
	margin-left: 0 !important;
	margin-right: auto !important;
	max-width: 100%;
}

main > .wp-block-post-content > p,
main > .wp-block-post-content > ul,
main > .wp-block-post-content > ol,
main > .wp-block-post-content > .kl-lead,
main > .wp-block-post-content > .kl-note,
main > .wp-block-post-content > .kl-checks,
main > .wp-block-post-content > .kl-steps,
main > .wp-block-post-content > .kl-faq { max-width: min(90ch, 100%); }

main > .wp-block-post-content > .kl-grid,
main > .wp-block-post-content > .kl-gallery,
main > .wp-block-post-content > .kl-facts,
main > .wp-block-post-content > .kl-table-wrap,
main > .wp-block-post-content > .kl-figure,
main > .wp-block-post-content > .kl-split { max-width: 100%; }

main > .wp-block-post-title,
main > .wp-block-post-date {
	max-width: var(--kl-container) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* --- Единый контейнер: одна ширина и одни поля для шапки, контента и подвала ---
   Поля живут внутри контейнера, а не на секции. Тогда на широком экране
   логотип, заголовок и карточки стоят на одной вертикали, а на телефоне
   текст не упирается в края стекла. */
.kl-header,
.kl-footer,
main { padding-left: 0; padding-right: 0; }

.kl-header > .wp-block-group,
.kl-footer > .wp-block-group,
.kl-footer > .kl-footer__cols,
.kl-footer > .kl-requisites,
main > .wp-block-post-content,
main > .wp-block-post-title,
main > .wp-block-post-date,
main > .kl-404 {
	box-sizing: border-box;
	max-width: var(--kl-container) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--kl-gutter);
	padding-right: var(--kl-gutter);
	width: 100%;
}

/* Подложка полноширинной секции должна выходить за поля контейнера */
.kl-band::before { width: 100vw; }

/* ===========================================================================
   ЛОГОТИП (вариант 09 «Вал между словами», выбран заказчиком 18.09.2026)
   Карданный вал стоит между словами КАРДАН и ЛИДЕР. Знак — вектор внутри
   разметки, поэтому логотип чёткий на любом экране и красится темой.
   Значок сайта — вариант 02 «Крестовина в кольце», favicon.svg в корне.
   ========================================================================= */

.kl-logo {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	text-decoration: none;
	line-height: 1;
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: .01em;
	text-transform: uppercase;
	white-space: nowrap;
}

.kl-logo__shaft {
	width: 2.7em;
	height: 1.35em;
	flex-shrink: 0;
	display: block;
	color: var(--wp--preset--color--accent);
}

.kl-logo__word { color: var(--wp--preset--color--contrast); }

.kl-logo__accent { color: var(--wp--preset--color--accent); }

/* Только у ссылки в шапке: логотип в подвале — не ссылка */
a.kl-logo:hover .kl-logo__word { color: var(--wp--preset--color--accent); }

.kl-logo:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Тот же замок в подвале, только на тёмном фоне */
.kl-footer__brand.kl-logo { font-size: 1.22rem; margin: 0 0 .6rem; }

@media (max-width: 781px) { .kl-logo { font-size: 1.1rem; } }

@media (max-width: 400px) { .kl-logo { font-size: .98rem; gap: .26em; } }

/* На узком экране в шапке помещаются логотип, звонок и меню.
   Кнопка «Записаться» упиралась в правый край, поэтому ниже 430 px она
   уходит: позвонить и открыть меню — действия важнее, а форма заявки
   всё равно ждёт в первом экране и в контактах. */
@media (max-width: 430px) {
	.kl-header .wp-block-buttons { display: none; }
	.kl-header > .wp-block-group > .wp-block-group { gap: 8px; }
}

/* Привычный порядок в мобильной шапке: логотип слева, дальше звонок,
   меню-бургер — крайним справа, под большой палец. */
@media (max-width: 1175px) {
	.kl-header > .wp-block-group { align-items: center; }
	.kl-header > .wp-block-group > .wp-block-navigation { order: 3; margin-left: 4px; }
	.kl-header > .wp-block-group > .wp-block-group { order: 2; margin-left: auto; }
	.kl-header .kl-logo { order: 1; }
}

/* ===========================================================================
   НИЧЕГО НЕ ДЁРГАЕТСЯ
   Сдвиг элемента под курсором (translateY) вызывает дрожание: на границе
   элемент уезжает, курсор оказывается снаружи, наведение слетает — и так по
   кругу. Поэтому при наведении меняем только цвет, рамку и тень, геометрия
   остаётся на месте.
   ========================================================================= */

.kl-card:hover,
.kl-btn:hover,
.kl-btn:active,
.wp-element-button:hover,
.wp-element-button:active,
.wp-block-button__link:hover,
.wp-block-button__link:active,
.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="submit"]:active,
.kl-top:hover,
.kl-messengers a:hover,
.kl-gallery__item:hover img,
.kl-lightbox button:hover {
	transform: none !important;
}

/* Вместо подъёма — подсветка рамкой и мягкая тень */
.kl-card {
	transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.kl-card:hover {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface-2);
	box-shadow: var(--kl-shadow-sm);
}

.kl-btn,
.wp-element-button,
.wp-block-button__link,
.wpcf7 input[type="submit"] {
	transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.kl-btn:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
.wpcf7 input[type="submit"]:hover {
	box-shadow: 0 0 0 3px rgba(223, 154, 50, .2);
}

/* Картинка в галерее увеличивалась под курсором и дёргала соседей */
.kl-gallery__item img { transition: opacity .2s ease; }

.kl-gallery__item:hover img { opacity: .85; }

/* --- Аккордеон раскрывается плавно, а не рывком --- */
.kl-faq details {
	transition: border-color .18s ease;
	overflow: hidden;
}

.kl-faq summary::after { transition: transform .22s ease; }

/* Подменю на десктопе появляется плавно */
.kl-header .wp-block-navigation .wp-block-navigation__submenu-container {
	transition: opacity .16s ease, visibility .16s ease;
}

/* ===========================================================================
   ПРАВКИ ПО ЗАМЕЧАНИЯМ: меню, галерея, формы, воздух
   ========================================================================= */

/* --- Пункты меню на одной линии ---
   Кнопка со стрелкой у «Услуг» и «Техники» добавляла свою высоту, и пункты
   с подменю стояли чуть выше остальных. Выравниваем всё по центру строки. */
.kl-header .wp-block-navigation__container,
.kl-header .wp-block-navigation-item,
.kl-header .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	line-height: 1.2;
}

.kl-header .wp-block-navigation-item { min-height: 40px; }

.kl-header .wp-block-navigation__submenu-icon {
	display: inline-flex;
	align-items: center;
	margin: 0 0 0 4px;
	padding: 0;
	height: 16px;
	width: 12px;
}

.kl-header .wp-block-navigation__submenu-icon svg { display: block; }

/* --- Галерея: одинаковые кадры, ровные промежутки ---
   Заглушки приходят с разными пропорциями, и сетка получалась рваной. */
.kl-gallery {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
	align-items: start;
}

.kl-gallery__item {
	aspect-ratio: 4 / 3;
	height: auto;
}

.kl-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: auto;
}

/* --- Форма не висит в пустоте, а лежит на панели --- */
.wpcf7 {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--kl-line-soft);
	border-radius: var(--kl-radius);
	padding: clamp(20px, 3vw, 32px);
	margin-top: 24px;
}

.wpcf7 form { max-width: 620px; }

.wpcf7 label { margin-bottom: 18px; }

.wpcf7 .kl-consent { margin-bottom: 20px; }

/* --- Воздух: секции были разрежены вдвое ---
   Отступ сверху у заголовка складывался с отступом самой секции. */


main > .wp-block-post-content > h2 { margin-top: var(--kl-section); margin-bottom: 20px; }

main > .wp-block-post-content > h2 + p,
main > .wp-block-post-content > h2 + .kl-lead { margin-top: 0; }

main > .wp-block-post-content > .kl-grid,
main > .wp-block-post-content > .kl-table-wrap,
main > .wp-block-post-content > .kl-gallery { margin-top: 24px; margin-bottom: 24px; }

main > .wp-block-post-content > .kl-checks,
main > .wp-block-post-content > .kl-steps { margin-top: 20px; margin-bottom: 24px; }

main > .wp-block-post-content > .kl-note { margin: 24px 0; }

main > .wp-block-post-content > *:last-child { margin-bottom: 0; }

main { padding-bottom: var(--kl-section); }

/* Только прозрачность: любой transform у контейнера делает его точкой
   отсчёта для position: fixed внутри, и кнопка закрытия съезжает
   относительно бургера, который она должна заменить. */
@keyframes kl-menu-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes kl-sub-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* ===========================================================================
   ПОЛОСА ПРОКРУТКИ В СТИЛЕ САЙТА
   Системная светлая полоса выбивалась из тёмной темы, особенно под таблицей
   цен. Стандартные scrollbar-color и scrollbar-width понимают Firefox и
   свежие Chrome и Safari; блок ::-webkit-scrollbar добавлен для остальных.
   ========================================================================= */

:root {
	scrollbar-color: #5c5445 var(--wp--preset--color--base);
	scrollbar-width: thin;
}

::-webkit-scrollbar { width: 12px; height: 12px; }

::-webkit-scrollbar-track { background: var(--wp--preset--color--base); }

::-webkit-scrollbar-thumb {
	background: #5c5445;
	border-radius: 99px;
	border: 3px solid var(--wp--preset--color--base);
}

::-webkit-scrollbar-thumb:hover { background: #7a7160; }

/* Внутри таблицы и меню ползунок акцентный — видно, что блок листается */
.kl-table-wrap::-webkit-scrollbar { height: 10px; }

.kl-table-wrap::-webkit-scrollbar-track {
	background: var(--wp--preset--color--surface-2);
	border-radius: 0 0 var(--kl-radius) var(--kl-radius);
}

.kl-table-wrap::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--accent);
	border: 3px solid var(--wp--preset--color--surface-2);
	border-radius: 99px;
}

.kl-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--wp--preset--color--accent-2); }

/* Подсказка, что таблица листается вбок, — мягкая тень у правого края */
.kl-table-wrap {
	background-image: linear-gradient(to right, rgba(11, 10, 8, .55), rgba(11, 10, 8, 0) 24px),
		linear-gradient(to left, rgba(11, 10, 8, .55), rgba(11, 10, 8, 0) 24px);
	background-position: left center, right center;
	background-repeat: no-repeat;
	background-size: 24px 100%, 24px 100%;
	background-attachment: local, local;
}

/* --- Пункты меню строго на одной линии ---
   У «Услуг», «Техники» и «Компании» рядом со ссылкой стоит кнопка со
   стрелкой: она делала строку выше, и такие пункты сидели на 5 px выше
   соседних. Задаём всем одинаковую высоту строки и убираем собственные
   отступы у ссылки и у кнопки. */
@media (min-width: 1176px) {
	.kl-header .wp-block-navigation__container > .wp-block-navigation-item {
		min-height: 44px;
		align-items: center;
	}

	.kl-header .wp-block-navigation__container > .wp-block-navigation-item > a,
	.kl-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.kl-header .wp-block-navigation-submenu__toggle {
		padding: 0 !important;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		background: none;
		border: 0;
	}

	/* Подчёркивание активного пункта тоже на одной высоте */
	.kl-header .wp-block-navigation-item > a::after,
	.kl-header .wp-block-navigation-item > .wp-block-navigation-item__content::after {
		bottom: 8px;
	}
}

/* Строка меню: выравниваем сам список и каждый пункт по центру.
   Без этого пункты со стрелкой получали свою высоту от кнопки и сидели
   на пять пикселей выше соседних. */
@media (min-width: 1176px) {
	.kl-header .wp-block-navigation__container {
		align-items: center !important;
		display: flex !important;
	}

	.kl-header .wp-block-navigation__container > .wp-block-navigation-item {
		align-self: center !important;
		height: 44px;
	}

	.kl-header .wp-block-navigation__container > .wp-block-navigation-item > a,
	.kl-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		height: 44px;
		line-height: 44px !important;
		align-self: center !important;
	}

	.kl-header .wp-block-navigation-submenu__toggle { height: 44px; align-self: center !important; }
}

/* Ссылка внутри пункта с подменю получала собственный внешний отступ
   и съезжала на четыре пикселя вниз относительно соседей. */
@media (min-width: 1176px) {
	.kl-header .wp-block-navigation__container > .wp-block-navigation-item > a,
	.kl-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
	.kl-header .wp-block-navigation__container > .wp-block-navigation-item > button {
		margin: 0 !important;
		align-self: center !important;
	}
}

/* ===========================================================================
   ЛИПКАЯ ШАПКА: прилипает внешняя обёртка
   WordPress оборачивает часть шаблона в <header class="wp-block-template-part">,
   и высота этой обёртки равна высоте шапки. Элемент с position: sticky не может
   выйти за границы своего родителя, поэтому шапка уезжала вместе с ним.
   Прилипание переносим на саму обёртку — её родитель высотой во всю страницу.
   ========================================================================= */

header.wp-block-template-part:has(> .kl-header),
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Внутренний блок больше не липнет — иначе получаются две точки отсчёта */
.kl-header {
	position: static;
	z-index: auto;
}

/* ===========================================================================
   ПРАВКИ ПО ОТЧЁТУ СУДЕЙ
   ========================================================================= */

/* П.3 — wpautop вставляет <br> между ссылками галереи, и каждый становится
   ячейкой сетки: фото раскидывало шахматкой с провалами. Плюс пустые <p>
   внутри карточек перехватывали :last-child и добавляли отступ под ценой. */
.kl-gallery > br { display: none; }

.kl-card > p:empty,
.wp-block-post-content > p:empty { display: none; }

/* П.5 — индикатор фокуса на полях и на галочке согласия.
   Раньше он рисовался сменой border-color, и правило ниже по файлу его
   перебивало: три поля из четырёх не реагировали вовсе. Outline не зависит
   от порядка правил и виден на чекбоксе, у которого своей рамки нет. */
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus { outline: revert; }

.wpcf7 input:focus-visible,
.wpcf7 select:focus-visible,
.wpcf7 textarea:focus-visible,
.wpcf7 .kl-consent input[type="checkbox"]:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent) !important;
	outline-offset: 2px;
	border-color: var(--wp--preset--color--accent);
}

/* П.9 — поле с ошибкой должно отличаться от заполненного верно */
.wpcf7 input.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid,
.wpcf7 select.wpcf7-not-valid {
	border-color: #ff8f6b;
	box-shadow: 0 0 0 3px rgba(255, 143, 107, .18);
}

.wpcf7 .kl-consent:has(.wpcf7-not-valid) {
	border-left: 3px solid #ff8f6b;
	padding-left: 12px;
	margin-left: -15px;
}

.wpcf7-response-output {
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--contrast);
	border-color: var(--kl-line-ui) !important;
}

.wpcf7 form.invalid .wpcf7-response-output { border-color: #ff8f6b !important; }

.wpcf7 form.sent .wpcf7-response-output { border-color: var(--wp--preset--color--accent) !important; }

/* П.6 — заглушка занимала до 104 % высоты экрана и была шире колонки текста */
.kl-figure {
	max-width: 800px;
	margin-left: 0;
	margin-right: auto;
}

.kl-figure img {
	max-width: 100%;
	max-height: 420px;
	object-fit: cover;
	aspect-ratio: 16 / 9;
}

/* П.8 — панель формы растягивалась на всю колонку, справа оставалось
   почти 600 px пустоты. Ограничиваем панель, а не форму внутри неё. */
main > .wp-block-post-content > .wpcf7 { max-width: 680px; }

.wpcf7 form { max-width: 100%; }

/* П.10 — без interpolate-size высота auto не анимируется, и аккордеон
   раскрывался рывком после мёртвой паузы. */
/* П.11 — на внутренних страницах не подсвечивался ни один пункт меню:
   WordPress ставит на родителя current-menu-ancestor, а стили знали только
   про current-menu-item. */
.kl-header .wp-block-navigation .current-menu-item > a,
.kl-header .wp-block-navigation .current-menu-ancestor > a,
.kl-header .wp-block-navigation .current-menu-parent > a,
.kl-header .wp-block-navigation .current_page_ancestor > a,
.kl-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content,
.kl-header .wp-block-navigation .current-menu-parent > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

.kl-header .wp-block-navigation-item.current-menu-ancestor > a::after,
.kl-header .wp-block-navigation-item.current-menu-parent > a::after,
.kl-header .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content::after,
.kl-header .wp-block-navigation-item.current-menu-item > a::after { transform: scaleX(1); }

/* П.12 — при 674–924 px четвёртый факт вставал один, и рядом светился
   пустой прямоугольник фона контейнера. */
@media (max-width: 924px) {
	.kl-facts { grid-template-columns: repeat(2, 1fr); }
}

/* П.16 — кнопки лайтбокса лежат поверх кадра: на светлой фотографии
   глиф давал контраст 1.05:1. Даём им собственную тёмную подложку. */
.kl-lightbox button {
	background: rgba(11, 10, 8, .65);
	border-color: rgba(246, 243, 238, .35);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

/* П.1 и П.15 — своя кнопка-стрелка в мобильном меню: настоящая цель нажатия
   44x44 и видимый значок. Прежняя схлопывалась в ноль: заданная ширина 12 px
   была меньше горизонтальных отступов 2x10 при box-sizing: border-box. */
@media (max-width: 1175px) {

	/* П.4 — шапка таблицы липнет только внутри собственного скроллера */
	.kl-table-wrap { max-height: calc(100dvh - var(--kl-header-h) - 2rem); overflow-y: auto; }

	.kl-table-wrap thead th { top: 0; }
}

@media (min-width: 1176px) {
	.kl-table-wrap { max-height: calc(100dvh - var(--kl-header-h) - 4rem); overflow-y: auto; }

	.kl-table-wrap thead th { top: 0; }
}

/* Подпись таблицы теперь отдельный абзац над ней и не уезжает вбок */
.kl-table-wrap > .kl-table-caption {
	position: sticky;
	left: 0;
	max-width: 100%;
}

.kl-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Ширину кадра задаём тем же селектором, каким ограничены остальные блоки
   контента, иначе правило max-width: 100% перебивает его по специфичности. */
main > .wp-block-post-content > .kl-figure { max-width: 800px; }

/* Шапка: логотип и кнопки не липнут друг к другу на узких экранах */
@media (max-width: 1175px) {
	.kl-header > .wp-block-group > .wp-block-group { gap: 10px; }

	.kl-header .kl-logo { margin-right: 12px; }

	.kl-header > .wp-block-group { gap: 12px; }
}

@media (max-width: 560px) {
	.kl-header .kl-logo { margin-right: 8px; }

	.kl-header > .wp-block-group { gap: 8px; }
}

/* ===========================================================================
   МОБИЛЬНОЕ МЕНЮ — ОДИН ЦЕЛЬНЫЙ БЛОК
   Всё, что касается полноэкранного меню, собрано здесь. Раньше правила
   накапливались слоями и конфликтовали между собой: подменю то раскрывались
   все сразу, то стрелка уезжала на вторую строку, то фон просвечивал.
   Правило: ниже — единственное место в файле, где упоминается is-menu-open.
   ========================================================================= */

@media (max-width: 1175px) {
	/* Горизонтальное меню прячем, показываем бургер */
	.kl-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }

	.kl-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }

	/* --- Оверлей --- */
	.wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		max-height: 100% !important;
		z-index: 10001 !important;
		display: block !important;
		background-color: #0b0a08 !important;
		color: var(--wp--preset--color--contrast) !important;
		padding: 12px 20px 40px !important;
		overflow-y: auto !important;
		overscroll-behavior: contain;
		animation: kl-menu-in .2s ease both;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		max-width: none;
		height: auto;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		display: flex !important;
		position: fixed;
		/* Ровно там же, где стоял бургер: центр строки шапки и то же поле
		   справа. Иначе кнопка при открытии прыгает вниз и влево. */
		top: calc((var(--kl-header-h) - 44px) / 2);
		right: var(--kl-gutter);
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 0;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		display: block !important;
		width: 100%;
		padding-top: 56px;
	}

	/* --- Список --- */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		display: block !important;
		width: 100%;
		gap: 0 !important;
	}

	/* --- Строка пункта: название слева, стрелка справа, подменю снизу --- */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		display: grid !important;
		grid-template-columns: 1fr 44px;
		align-items: center;
		width: 100%;
		border-bottom: 1px solid var(--kl-line-soft);
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > .wp-block-navigation-item__content {
		grid-column: 1;
		grid-row: 1;
		display: flex !important;
		align-items: center;
		min-height: 56px;
		padding: 0 !important;
		margin: 0 !important;
		font-size: 1.1rem;
		font-weight: 700;
		color: var(--wp--preset--color--contrast);
		text-decoration: none;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a::after,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > .wp-block-navigation-item__content::after {
		display: none !important;
	}

	/* Кнопка-стрелка: настоящая цель нажатия 44x44 с видимым значком */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
		grid-column: 2;
		grid-row: 1;
		width: 44px !important;
		height: 44px !important;
		padding: 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		background: none;
		border: 0;
		border-radius: var(--kl-radius-sm);
		color: var(--wp--preset--color--contrast-2);
		transition: transform .2s ease, background-color .16s ease, color .16s ease;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
		width: 16px !important;
		height: 16px !important;
		display: block;
		fill: currentColor;
	}

	/* --- Подменю: закрыто, пока не нажали стрелку --- */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		grid-column: 1 / -1;
		grid-row: 2;
		display: none !important;
		position: static !important;
		width: 100% !important;
		min-width: 0 !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		padding: 0 0 12px 12px !important;
		margin: 0 !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .kl-sub-open > .wp-block-navigation__submenu-container {
		display: block !important;
		animation: kl-sub-in .18s ease both;
	}

	.wp-block-navigation__responsive-container.is-menu-open .kl-sub-open > .wp-block-navigation-submenu__toggle {
		transform: rotate(180deg);
		background: var(--wp--preset--color--surface-2);
		color: var(--wp--preset--color--accent);
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
		border-bottom: 0;
		grid-template-columns: 1fr;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
		min-height: 44px;
		font-size: .98rem;
		font-weight: 500;
		color: var(--wp--preset--color--contrast-2);
	}

	/* Текущая страница подсвечена и внутри подменю */
	.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a,
	.wp-block-navigation__responsive-container.is-menu-open .current-menu-ancestor > a,
	.wp-block-navigation__responsive-container.is-menu-open .current-menu-ancestor > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--accent) !important;
	}

	/* Фокус — аккуратная рамка по размеру элемента, не во всю строку */
	.wp-block-navigation__responsive-container.is-menu-open a:focus-visible,
	.wp-block-navigation__responsive-container.is-menu-open button:focus-visible {
		outline: 2px solid var(--wp--preset--color--accent) !important;
		outline-offset: -4px;
		border-radius: 6px;
	}

	/* Пока меню открыто, ничего не висит поверх него */
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .kl-cookie,
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .kl-top,
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .kl-messengers { display: none !important; }
}

/* Страховка от wpautop: перевод строки между блоками сетки превращался
   в <br>, и тот становился полноценной ячейкой — сетка разъезжалась. */
.kl-grid > br,
.kl-facts > br,
.kl-gallery > br { display: none !important; }

/* ===========================================================================
   НИКАКОЙ ПОДСВЕТКИ ПРИ ТАПЕ
   Браузеры рисуют серую заливку по тапу, а элементы с tabindex (например,
   прокручиваемая таблица) получают рамку даже от клика мышью. Обводку
   оставляем только для клавиатуры.
   ========================================================================= */

html { -webkit-tap-highlight-color: transparent; }

a, button, summary, input, select, textarea,
.kl-table-wrap, .kl-gallery__item, .kl-card {
	-webkit-tap-highlight-color: transparent;
}

:focus:not(:focus-visible) { outline: none !important; }

.kl-table-wrap:focus:not(:focus-visible),
.kl-gallery__item:focus:not(:focus-visible),
summary:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; }

/* ===========================================================================
   ФОРМА НА ВСЮ ШИРИНУ, ПОЛЯ В ДВЕ КОЛОНКИ
   Раньше панель была ограничена 680 px, и справа оставалась пустая половина.
   Теперь панель занимает колонку целиком, а короткие поля встают парами.
   ========================================================================= */

main > .wp-block-post-content > .wpcf7 { max-width: 100%; }

.wpcf7 form.wpcf7-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 24px;
	row-gap: 0;
	max-width: 100%;
}

.wpcf7 form.wpcf7-form > * { grid-column: 1 / -1; }

/* Имя и телефон — в одну строку; организация и контактное лицо — тоже */
.wpcf7 form.wpcf7-form > p:has([data-name="kl-name"]),
.wpcf7 form.wpcf7-form > p:has([data-name="kl-phone"]),
.wpcf7 form.wpcf7-form > p:has([data-name="kl-email"]),
.wpcf7 form.wpcf7-form > p:has([data-name="kl-company"]) {
	grid-column: span 1;
}

.wpcf7 form.wpcf7-form > p { margin: 0 0 4px; }

.wpcf7 label { margin-bottom: 14px; }

/* Кнопка не растягивается на всю колонку */
.wpcf7 input[type="submit"] { justify-self: start; }

@media (max-width: 700px) {
	.wpcf7 form.wpcf7-form { grid-template-columns: 1fr; column-gap: 0; }

	.wpcf7 form.wpcf7-form > p:has([data-name]) { grid-column: 1 / -1; }

	.wpcf7 input[type="submit"] { justify-self: stretch; width: 100%; }
}

/* Панель формы: тёплая подсветка по верхней кромке — чтобы широкий блок
   не читался как пустая заливка */
main > .wp-block-post-content > .wpcf7 {
	position: relative;
	overflow: hidden;
}

main > .wp-block-post-content > .wpcf7::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent), rgba(223, 154, 50, 0));
}

/* Отзывы, добавленные через админку */
.kl-reviews { display: grid; gap: 16px; margin: 24px 0; }

.kl-reviews .kl-review {
	margin: 0;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--kl-line-soft);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: var(--kl-radius);
	padding: 20px 24px;
}

.kl-reviews blockquote { margin: 0; font-size: 1rem; }

.kl-reviews blockquote p:last-child { margin-bottom: 0; }

@media (min-width: 900px) {
	.kl-reviews { grid-template-columns: repeat(2, 1fr); }
}

/* Стрелка подменю стояла вплотную к слову — добавляем воздух */
@media (min-width: 1176px) {
	.kl-header .wp-block-navigation__submenu-icon { margin-left: 7px !important; }

	.kl-header .wp-block-navigation-submenu__toggle { padding-left: 3px !important; }
}

/* ===========================================================================
   Блоки-конструктор: хаб, команда, контакты, вопросы, блог
   Идеи вёрстки взяты с saaslandingpage.com, стилистика — наша, чёрно-оранжевая.
   =========================================================================== */

/* --- Иконки. Рисуются маской, поэтому красятся обычным color --- */
.kl-ico {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(223, 154, 50, .12);
	border: 1px solid rgba(223, 154, 50, .28);
	flex: 0 0 auto;
}

.kl-ico::before {
	content: "";
	width: 22px;
	height: 22px;
	background: var(--wp--preset--color--accent);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.kl-ico--pin::before   { -webkit-mask-image: var(--kl-i-pin);   mask-image: var(--kl-i-pin); }
.kl-ico--phone::before { -webkit-mask-image: var(--kl-i-phone); mask-image: var(--kl-i-phone); }
.kl-ico--clock::before { -webkit-mask-image: var(--kl-i-clock); mask-image: var(--kl-i-clock); }
.kl-ico--chat::before  { -webkit-mask-image: var(--kl-i-chat);  mask-image: var(--kl-i-chat); }
.kl-ico--truck::before { -webkit-mask-image: var(--kl-i-truck); mask-image: var(--kl-i-truck); }
.kl-ico--doc::before   { -webkit-mask-image: var(--kl-i-doc);   mask-image: var(--kl-i-doc); }
.kl-ico--tool::before  { -webkit-mask-image: var(--kl-i-tool);  mask-image: var(--kl-i-tool); }
.kl-ico--bolt::before  { -webkit-mask-image: var(--kl-i-bolt);  mask-image: var(--kl-i-bolt); }
.kl-ico--shield::before{ -webkit-mask-image: var(--kl-i-shield);mask-image: var(--kl-i-shield); }
.kl-ico--star::before  { -webkit-mask-image: var(--kl-i-star);  mask-image: var(--kl-i-star); }

:root {
	--kl-i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' 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");
	--kl-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' 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.2 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 1.7 2z'/%3E%3C/svg%3E");
	--kl-i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
	--kl-i-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 9 9 0 0 1-4.2-1L3 20.5l1.6-4.7A8.4 8.4 0 0 1 12 3.5a8.4 8.4 0 0 1 9 8z'/%3E%3C/svg%3E");
	--kl-i-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3h13v13H1z'/%3E%3Cpath d='M14 8h4l3 3v5h-7z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2'/%3E%3Ccircle cx='17.5' cy='18.5' r='2'/%3E%3C/svg%3E");
	--kl-i-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' 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%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E");
	--kl-i-tool: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 1 5.3 5L21 12l-9 9-3-3 9-9z'/%3E%3Cpath d='M9 9 4 4a2 2 0 0 1 0-2'/%3E%3C/svg%3E");
	--kl-i-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h8l-1 8 10-12h-8z'/%3E%3C/svg%3E");
	--kl-i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
	--kl-i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.3 6.4 20.2l1.1-6.2L3 9.6l6.2-.9z'/%3E%3C/svg%3E");
}

/* --- Хаб: сетка карточек «с чем помочь» --- */
.kl-hub {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	margin: 32px 0 var(--kl-section);
}

.kl-hub__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--kl-radius);
	background: var(--wp--preset--color--surface);
	transition: border-color .2s ease, background-color .2s ease;
}

.kl-hub__item:hover {
	border-color: rgba(223, 154, 50, .5);
	background: var(--wp--preset--color--surface-2);
}

.kl-hub__item h3 {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.3;
}

.kl-hub__item h3 a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.kl-hub__item h3 a::before { content: ""; position: absolute; inset: 0; }

.kl-hub__item:hover h3 a { color: var(--wp--preset--color--accent); }

.kl-hub__item p {
	margin: 0;
	font-size: .93rem;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast-2);
}

/* --- Полоса ссылок «что ещё пригодится» --- */
.kl-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1px;
	background: var(--kl-line-soft);
	border: 1px solid var(--kl-line-soft);
	border-radius: var(--kl-radius);
	overflow: hidden;
	margin: 24px 0 var(--kl-section);
}

.kl-links a {
	display: block;
	padding: 18px 20px;
	background: var(--wp--preset--color--surface);
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: background-color .2s ease;
}

.kl-links a:hover { background: var(--wp--preset--color--surface-2); }

.kl-links strong { display: block; font-size: .98rem; margin-bottom: 4px; }

.kl-links span { font-size: .86rem; color: var(--wp--preset--color--contrast-2); }

/* --- Команда --- */
.kl-team {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	margin: 32px 0 var(--kl-section);
}

.kl-team__card {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--kl-radius);
	background: var(--wp--preset--color--surface);
	overflow: hidden;
	transition: border-color .2s ease;
}

.kl-team__card:hover { border-color: rgba(223, 154, 50, .45); }

.kl-team__photo {
	aspect-ratio: 4 / 5;
	background: var(--wp--preset--color--surface-2);
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.kl-team__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kl-team__photo span {
	font-size: 2.2rem;
	font-weight: 800;
	color: rgba(223, 154, 50, .45);
	letter-spacing: .04em;
}

.kl-team__body { padding: 18px 20px 20px; }

.kl-team__body h3 { margin: 0 0 4px; font-size: 1.02rem; }

.kl-team__role {
	display: block;
	font-size: .78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin-bottom: 10px;
}

.kl-team__body p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--wp--preset--color--contrast-2); }

/* --- Контакты: слева данные, справа форма --- */
.kl-contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 32px;
	align-items: start;
	margin: 32px 0 var(--kl-section);
}

.kl-contact__list { display: grid; gap: 20px; }

.kl-contact__row { display: flex; gap: 16px; align-items: flex-start; }

.kl-contact__row dt,
.kl-contact__row h3 {
	margin: 0 0 4px;
	font-size: .82rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
	font-weight: 600;
}

.kl-contact__row dd,
.kl-contact__row p { margin: 0; font-size: 1.02rem; line-height: 1.5; }

.kl-contact__row p a { color: var(--wp--preset--color--contrast); }

.kl-contact__row small {
	display: block;
	margin-top: 6px;
	font-size: .85rem;
	color: var(--wp--preset--color--contrast-2);
	line-height: 1.5;
}

.kl-contact__form {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--kl-radius);
	background: var(--wp--preset--color--surface);
	padding: clamp(20px, 3vw, 32px);
}

.kl-contact__form > h2,
.kl-contact__form > h3 { margin-top: 0; }

@media (max-width: 900px) {
	.kl-contact { grid-template-columns: 1fr; gap: 24px; }
}

/* --- Вопросы и ответы: центральная колонка --- */
.kl-faq-hero {
	max-width: 720px;
	margin: 0 auto var(--kl-space);
	text-align: center;
}

.kl-faq-hero h1,
.kl-faq-hero h2 { margin-top: 0; }

.kl-faq-hero p { color: var(--wp--preset--color--contrast-2); margin-bottom: 0; }

.kl-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 24px auto 40px;
	padding: 0;
	list-style: none;
	max-width: 760px;
}

.kl-pills a {
	display: inline-block;
	padding: 9px 18px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	font-size: .9rem;
	text-decoration: none;
	color: var(--wp--preset--color--contrast-2);
	transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.kl-pills a:hover,
.kl-pills a:focus-visible {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface-2);
}

.kl-center { max-width: 860px; margin-left: auto; margin-right: auto; }

.kl-center > * { margin-left: auto; margin-right: auto; }

/* --- Блог: текст по центру --- */
.kl-post { max-width: 760px; margin-left: auto; margin-right: auto; }

.kl-post > * { margin-left: auto !important; margin-right: auto !important; }

.kl-post h2 { margin-top: 2.4rem; }

/* Плашки-врезки внутри статьи */
.kl-callout {
	position: relative;
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 20px 22px;
	margin: 28px 0;
	border: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: var(--kl-radius);
	background: var(--wp--preset--color--surface);
}

.kl-callout__body { min-width: 0; }

.kl-callout strong {
	display: block;
	margin-bottom: 6px;
	font-size: .8rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.kl-callout p { margin: 0; line-height: 1.65; }

.kl-callout p + p { margin-top: .7rem; }

/* Блок «коротко о главном» в начале статьи */
.kl-keypoints {
	padding: 24px 26px;
	margin: 28px 0 36px;
	border-radius: var(--kl-radius);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
}

.kl-keypoints h2,
.kl-keypoints h3 {
	margin: 0 0 14px;
	font-size: .82rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
}

.kl-keypoints ul { margin: 0; padding: 0; list-style: none; }

.kl-keypoints li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 10px;
	line-height: 1.6;
	font-size: .96rem;
}

.kl-keypoints li:last-child { margin-bottom: 0; }

.kl-keypoints li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--wp--preset--color--accent);
}

/* Цитата мастера */
.kl-quote {
	margin: 32px 0;
	padding: 24px 26px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--kl-radius);
	background: var(--wp--preset--color--surface-2);
}

.kl-quote p { margin: 0 0 12px; font-size: 1.06rem; line-height: 1.6; }

.kl-quote cite {
	font-style: normal;
	font-size: .88rem;
	color: var(--wp--preset--color--contrast-2);
}

/* Мини-таблица фактов внутри статьи */
.kl-post .kl-facts { margin: 28px 0; }

/* Сетка статей на странице блога */
.kl-posts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	margin: 32px 0 var(--kl-section);
}

.kl-posts__card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--kl-radius);
	background: var(--wp--preset--color--surface);
	overflow: hidden;
	transition: border-color .2s ease;
}

.kl-posts__card:hover { border-color: rgba(223, 154, 50, .45); }

.kl-posts__cover { aspect-ratio: 16 / 10; background: var(--wp--preset--color--surface-2); }

.kl-posts__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kl-posts__body { padding: 18px 20px 22px; }

.kl-tag {
	display: inline-block;
	margin-bottom: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(223, 154, 50, .14);
	color: var(--wp--preset--color--accent);
	font-size: .76rem;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.kl-posts__body h3 { margin: 0 0 8px; font-size: 1.05rem; line-height: 1.35; }

.kl-posts__body h3 a { text-decoration: none; color: var(--wp--preset--color--contrast); }

.kl-posts__body h3 a::before { content: ""; position: absolute; inset: 0; }

.kl-posts__card:hover h3 a { color: var(--wp--preset--color--accent); }

.kl-posts__body p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--wp--preset--color--contrast-2); }

/* --- Капча Яндекса --- */
.kl-captcha { margin: 18px 0 4px; }

@media (max-width: 600px) {
	.kl-hub__item { padding: 20px; }
	.kl-callout { padding: 18px; gap: 12px; }
	.kl-quote,
	.kl-keypoints { padding: 20px; }
}

/* ===========================================================================
   ЕДИНЫЙ РИТМ
   Последний блок в файле: приводит отступы всех строительных элементов
   к шагу сетки. Раньше они набирались вручную (2rem, 1.5rem, 18px, 20px)
   и на длинной странице расстояния между блоками заметно гуляли.
   =========================================================================== */

/* Вертикальные промежутки между блоками контента — один шаг на всё */
.kl-grid,
.kl-hub,
.kl-team,
.kl-posts,
.kl-links,
.kl-facts,
.kl-gallery,
.kl-reviews,
.kl-faq,
.kl-table-wrap,
.kl-checks,
.kl-steps,
.kl-contact,
.kl-keypoints,
.kl-quote,
.kl-callout,
.kl-figure,
.kl-note,
.kl-map-placeholder,
.wpcf7 {
	margin-top: var(--kl-space);
	margin-bottom: var(--kl-space);
}

/* Перед новым разделом воздуха больше, чем между абзацами внутри него */
.entry-content h2,
.kl-post h2,
.kl-band h2 {
	margin-top: var(--kl-7);
	margin-bottom: var(--kl-4);
}

.entry-content h3,
.kl-post h3 {
	margin-top: var(--kl-6);
	margin-bottom: var(--kl-3);
}

.entry-content > *:first-child,
.kl-post > *:first-child,
.kl-band > *:first-child,
.kl-card > *:first-child,
.kl-contact__form > *:first-child { margin-top: 0; }

.entry-content > *:last-child,
.kl-post > *:last-child,
.kl-band > *:last-child,
.kl-card > *:last-child,
.kl-contact__form > *:last-child { margin-bottom: 0; }

/* Внутренние зазоры сеток — тоже по шагу */
.kl-grid { gap: var(--kl-4); }
.kl-hub,
.kl-posts { gap: var(--kl-4); }
.kl-team { gap: var(--kl-5); }
.kl-contact { gap: var(--kl-6); }
.kl-contact__list { gap: var(--kl-5); }
.kl-contact__row { gap: var(--kl-4); }
.kl-split { gap: var(--kl-7); margin: var(--kl-section) 0; }
.kl-gallery { gap: var(--kl-3); }

/* Внутренние поля карточек: одна величина на все карточки сайта */
.kl-card,
.kl-hub__item,
.kl-keypoints,
.kl-quote,
.kl-callout,
.kl-facts div,
.kl-review { padding: var(--kl-5); }

.kl-team__body { padding: var(--kl-4) var(--kl-5) var(--kl-5); }
.kl-posts__body { padding: var(--kl-4) var(--kl-5) var(--kl-5); }
.kl-links a { padding: var(--kl-4) var(--kl-5); }
.kl-contact__form { padding: var(--kl-5); }

@media (min-width: 782px) {
	.kl-contact__form { padding: var(--kl-6); }
}

/* Полосы во всю ширину — одинаковая высота сверху и снизу */
.kl-band { padding: var(--kl-section) 0; margin: var(--kl-section) 0; }

/* Отступ первого экрана от шапки и подвала от последнего блока */
.kl-hp { padding-top: var(--kl-section); }

/* Телефон, адрес и почта не переносятся посреди номера: разорванный на две
   строки номер читается как две разные цифры и его неудобно набирать. */
a[href^="tel:"],
a[href^="mailto:"],
.kl-phone,
.kl-nowrap { white-space: nowrap; }

/* На узком экране номер в тексте абзаца всё же должен уместиться,
   поэтому разрешаем перенос всей ссылки целиком на новую строку.
   Кнопку звонка в шапке правило не трогает: селектор с атрибутом весит
   больше класса и перебивал её display: none — иконка вылезала рядом
   с полным номером на планшете и десктопе. */
a[href^="tel:"]:not(.kl-call):not(.kl-btn):not(.wp-element-button),
a[href^="mailto:"]:not(.kl-btn):not(.wp-element-button) { display: inline-block; max-width: 100%; }

/* --- Типографика переносов ---
   Браузер по умолчанию ломает строку жадно: последнее слово абзаца часто
   остаётся одно на строке, а заголовок рвётся посреди словосочетания.
   text-wrap выравнивает это без вмешательства в текст. */
h1, h2, h3, h4,
.kl-lead,
.kl-hub__item h3,
.kl-posts__body h3,
.kl-team__body h3 { text-wrap: balance; }

p, li, dd, figcaption, .kl-card p, summary { text-wrap: pretty; }

/* Слова не рубим дефисом и не растягиваем по ширине: в русском тексте
   и то, и другое даёт рваные дыры между словами. */
body { hyphens: none; text-align: left; }

/* Длинные ссылки и артикулы всё же переносим, иначе они вылезают из карточки */
.entry-content a:not([href^="tel:"]):not([href^="mailto:"]) { overflow-wrap: break-word; }

/* --- Карта проезда --- */
.kl-map {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--kl-radius);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	line-height: 0;
	margin-top: var(--kl-space);
}

.kl-map iframe { display: block; width: 100%; border: 0; }

.kl-map__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kl-4);
	margin-top: var(--kl-4);
	margin-bottom: var(--kl-space);
}

@media (max-width: 600px) {
	.kl-map iframe { height: 320px; }
}

/* Пояснение под контактом. wpautop заворачивает <small> в абзац,
   поэтому правило описывает оба варианта разметки. */
.kl-contact__row small,
.kl-contact__row p > small {
	display: block;
	margin-top: var(--kl-2);
	font-size: .85rem;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast-2);
	white-space: normal;
}

.kl-contact__row p:has(> small) { margin: 0; }

.kl-contact__row > div { min-width: 0; }

/* --- Выравнивание иконок и подписей ---
   Иконка 44 px, а подпись под ней — строка высотой 16 px. При обычном
   выравнивании по верху иконка визуально «висит» выше текста. Делаем
   подписи ростом с иконку и центрируем их содержимое: центры совпадают. */
.kl-contact__row { align-items: start; }

.kl-contact__row h3,
.kl-contact__row dt {
	min-height: var(--kl-fab-size);
	display: flex;
	align-items: center;
	margin: 0 0 var(--kl-2);
}

/* Значение контакта идёт сразу под подписью, без лишнего отступа */
.kl-contact__row > div > p:first-of-type { margin-top: 0; }

/* --- Галочки и переключатели в стилистике сайта ---
   Системный чекбокс на тёмном фоне выглядит белым пятном. Рисуем свой:
   appearance: none убирает системный вид, но элемент остаётся настоящим
   input — фокус с клавиатуры, чтение скринридером и клик по label работают. */
input[type="checkbox"],
input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0 var(--kl-2) 0 0;
	border: 1.5px solid var(--wp--preset--color--contrast-2);
	border-radius: 5px;
	background: var(--wp--preset--color--surface);
	cursor: pointer;
	position: relative;
	top: .18em;
	transition: border-color .15s ease, background-color .15s ease;
}

input[type="radio"] { border-radius: 50%; }

input[type="checkbox"]:hover,
input[type="radio"]:hover { border-color: var(--wp--preset--color--accent); }

input[type="checkbox"]:checked,
input[type="radio"]:checked {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

/* Галка рисуется рамкой повёрнутого прямоугольника — без картинок и шрифтов */
input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid var(--wp--preset--color--on-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(43deg);
}

input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--wp--preset--color--on-accent);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	outline: none;
	box-shadow: var(--kl-ring);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled { opacity: .45; cursor: not-allowed; }

/* Подпись рядом с галочкой: выравниваем по первой строке, а не по центру
   блока, иначе на двухстрочной подписи галочка уезжает вниз. */
.wpcf7 .wpcf7-list-item { margin: 0; display: block; }

.wpcf7 .wpcf7-list-item label,
.wpcf7 .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: var(--kl-2);
	line-height: 1.55;
	cursor: pointer;
}

.wpcf7 .wpcf7-list-item-label { flex: 1 1 auto; }

/* Галочки в админке оставляем системными: заказчику там привычнее */
.wp-admin input[type="checkbox"],
.wp-admin input[type="radio"] { appearance: auto; -webkit-appearance: auto; }

/* Плашки фактов на узком экране: значение крупное, а колонка всего
   в половину ширины — без уменьшения кегля длинное значение вылезает. */
@media (max-width: 560px) {
	.kl-facts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
	.kl-facts div { padding: var(--kl-4); }
	.kl-facts dd,
	.kl-facts .kl-facts__value { font-size: 1.25rem; }
}

@media (max-width: 380px) {
	.kl-facts dd,
	.kl-facts .kl-facts__value { font-size: 1.1rem; }
}

/* ===========================================================================
   БЛОГ
   Список — сетка карточек, статья — узкая колонка по центру.
   Разметку рисует WordPress, поэтому цепляемся за его классы.
   =========================================================================== */

.kl-blog-lead { max-width: 760px; }

/* Сетка статей. post-template выводит ul > li, поэтому карточка — это li. */
ul.kl-posts {
	list-style: none;
	margin: var(--kl-space) 0 var(--kl-section);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--kl-5);
}

ul.kl-posts > li {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--kl-radius);
	background: var(--wp--preset--color--surface);
	overflow: hidden;
	transition: border-color .2s ease, background-color .2s ease;
}

ul.kl-posts > li:hover {
	border-color: rgba(223, 154, 50, .45);
	background: var(--wp--preset--color--surface-2);
}

.kl-posts__cover { margin: 0; }

.kl-posts__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Без обложки карточка не должна начинаться пустым провалом */
.kl-posts__cover:empty { display: none; }

ul.kl-posts > li .kl-posts__body {
	padding: var(--kl-5);
	display: flex;
	flex-direction: column;
	gap: var(--kl-2);
	flex: 1 1 auto;
}

.kl-posts__date {
	font-size: .8rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
	margin: 0;
}

ul.kl-posts > li .wp-block-post-title {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.35;
}

ul.kl-posts > li .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

ul.kl-posts > li .wp-block-post-title a::before { content: ""; position: absolute; inset: 0; }

ul.kl-posts > li:hover .wp-block-post-title a { color: var(--wp--preset--color--accent); }

ul.kl-posts > li .wp-block-post-excerpt {
	margin: 0;
	font-size: .93rem;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast-2);
}

ul.kl-posts > li .wp-block-post-excerpt__more-text { display: none; }

/* Постраничная навигация */
.wp-block-query-pagination {
	gap: var(--kl-3);
	margin-top: var(--kl-space);
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	padding: var(--kl-2) var(--kl-3);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--kl-radius-sm);
	text-decoration: none;
	color: var(--wp--preset--color--contrast-2);
}

.wp-block-query-pagination .current {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* --- Страница статьи --- */
.kl-article__head { text-align: center; }

.kl-article__head h1 { margin-bottom: var(--kl-3); }

.kl-article__date {
	font-size: .82rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
	margin: 0;
}

.kl-article__cover {
	max-width: 960px;
	margin: var(--kl-7) auto var(--kl-7);
	border-radius: var(--kl-radius);
	overflow: hidden;
}

.kl-article__cover img { width: 100%; height: auto; display: block; }

.kl-article__cover:empty { display: none; margin: 0; }

/* Текст статьи — узкая колонка, читается без беганья глазами по ширине.
   WordPress печатает у блоков margin: auto !important, поэтому центрируем
   контейнер, а не перебиваем каждый элемент. */
.kl-post {
	max-width: 760px;
	margin-left: auto !important;
	margin-right: auto !important;
}

.kl-post > * { margin-left: auto; margin-right: auto; }

.kl-post p,
.kl-post ul,
.kl-post ol,
.kl-post h2,
.kl-post h3 { max-width: 760px; }

.kl-article .kl-callout,
.kl-article .kl-keypoints,
.kl-article .kl-quote { max-width: 760px; }

/* Блог наследовал центрирование от родительской темы: заголовок карточки
   и текст уезжали в середину, а читаются они слева, как на остальных страницах. */
.kl-blog-title,
.kl-blog-lead,
ul.kl-posts,
ul.kl-posts > li,
ul.kl-posts > li .kl-posts__body,
ul.kl-posts > li .wp-block-post-title,
ul.kl-posts > li .wp-block-post-excerpt,
.kl-posts__date { text-align: left; }

.kl-blog-title { margin-bottom: var(--kl-4); }

/* Группа внутри карточки не должна добавлять свои поля поверх наших */
ul.kl-posts > li .wp-block-group.kl-posts__body { padding-top: var(--kl-5); padding-bottom: var(--kl-5); }

/* --- Блог и статья в общем контейнере ---
   Контейнер на сайте собирается не на секции, а на прямых детях main:
   у них max-width и поля. Блоки блога в этот список не входили, поэтому
   заголовок и карточки прилипали к краю экрана. */
main > .kl-blog-title,
main > .kl-blog-lead,
main > .wp-block-query,
main > .wp-block-search,
main > .wp-block-term-description,
main > .kl-article__head,
main > .kl-article__cover,
main > .kl-post {
	box-sizing: border-box;
	max-width: var(--kl-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--kl-gutter);
	padding-right: var(--kl-gutter);
	width: 100%;
}

/* Текст статьи и её шапка — узкая колонка внутри общего контейнера */
main > .kl-post,
main > .kl-article__head {
	max-width: calc(760px + var(--kl-gutter) * 2);
}

main > .kl-article__cover {
	max-width: calc(960px + var(--kl-gutter) * 2);
}

/* Сама колонка текста уже ограничена контейнером, внутренние ограничения
   только мешают — иначе получаются двойные поля. */
.kl-post > *,
.kl-post p,
.kl-post ul,
.kl-post ol,
.kl-post h2,
.kl-post h3 { max-width: none; }

/* Внутри карточки статьи WordPress вешает на группу has-global-padding
   и ограниченную раскладку — получались огромные поля и текст по центру
   карточки. Поля задаём сами, ограничения детей снимаем. */
ul.kl-posts > li .kl-posts__body.has-global-padding,
ul.kl-posts > li .kl-posts__body {
	padding-left: var(--kl-5);
	padding-right: var(--kl-5);
}

ul.kl-posts > li .kl-posts__body > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Одна статья растягивается на всю ширину — пусть это выглядит как
   осознанная главная карточка, а не как растянутая мелочь. */
ul.kl-posts > li .wp-block-post-excerpt__excerpt { margin: 0; }

/* Статья: колонка шире и строго по центру. До этого текст держался за
   общее правило max-width: 90ch и прижимался влево — справа оставалась
   полоса пустоты, которой на сайте быть не должно. */
main > .kl-post,
main > .kl-article__head {
	max-width: calc(900px + var(--kl-gutter) * 2) !important;
}

.kl-article .kl-post > *,
.kl-article .kl-post p,
.kl-article .kl-post ul,
.kl-article .kl-post ol,
.kl-article .kl-post h2,
.kl-article .kl-post h3 {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Врезки внутри статьи занимают всю ширину колонки */
.kl-article .kl-callout,
.kl-article .kl-keypoints,
.kl-article .kl-quote,
.kl-article .kl-figure,
.kl-article .kl-facts { max-width: none !important; }

/* ===========================================================================
   СЕТКИ БЕЗ ДЫР
   auto-fit набивал в ряд столько плиток, сколько влезет: шесть штук вставали
   как 5 + 1, и рядом с последней зияла пустота. Фиксируем три колонки,
   а «хвост» растягиваем на оставшиеся — ряд всегда заполнен до края.
   =========================================================================== */

.kl-links,
.kl-hub,
.kl-team,
.kl-posts,
.kl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Одна плитка в хвосте — занимает весь ряд, две — делят его пополам */
.kl-links > a:last-child:nth-child(3n + 1),
.kl-hub > *:last-child:nth-child(3n + 1),
.kl-team > *:last-child:nth-child(3n + 1),
ul.kl-posts > li:last-child:nth-child(3n + 1),
.kl-grid--3 > *:last-child:nth-child(3n + 1) { grid-column: span 3; }

.kl-links > a:nth-last-child(2):nth-child(3n + 1),
.kl-hub > *:nth-last-child(2):nth-child(3n + 1),
.kl-team > *:nth-last-child(2):nth-child(3n + 1),
ul.kl-posts > li:nth-last-child(2):nth-child(3n + 1),
.kl-grid--3 > *:nth-last-child(2):nth-child(3n + 1) { grid-column: span 2; }

@media (max-width: 1000px) {
	.kl-links,
	.kl-hub,
	.kl-team,
	.kl-posts,
	.kl-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.kl-links > a:last-child:nth-child(3n + 1),
	.kl-hub > *:last-child:nth-child(3n + 1),
	.kl-team > *:last-child:nth-child(3n + 1),
	ul.kl-posts > li:last-child:nth-child(3n + 1),
	.kl-grid--3 > *:last-child:nth-child(3n + 1),
	.kl-links > a:nth-last-child(2):nth-child(3n + 1),
	.kl-hub > *:nth-last-child(2):nth-child(3n + 1),
	.kl-team > *:nth-last-child(2):nth-child(3n + 1),
	ul.kl-posts > li:nth-last-child(2):nth-child(3n + 1),
	.kl-grid--3 > *:nth-last-child(2):nth-child(3n + 1) { grid-column: auto; }

	.kl-links > a:last-child:nth-child(odd),
	.kl-hub > *:last-child:nth-child(odd),
	.kl-team > *:last-child:nth-child(odd),
	ul.kl-posts > li:last-child:nth-child(odd),
	.kl-grid--3 > *:last-child:nth-child(odd) { grid-column: span 2; }
}

@media (max-width: 620px) {
	.kl-links,
	.kl-hub,
	.kl-team,
	.kl-posts,
	.kl-grid--3 { grid-template-columns: minmax(0, 1fr); }

	.kl-links > a,
	.kl-hub > *,
	.kl-team > *,
	ul.kl-posts > li,
	.kl-grid--3 > * { grid-column: auto !important; }
}

/* --- Статья: колонка по центру, без полосы пустоты справа ---
   Общее правило main > .wp-block-post-content стоит с !important,
   поэтому перебиваем его с тем же весом и большей длиной селектора. */
main.kl-article > .wp-block-post-content.kl-post {
	max-width: calc(900px + var(--kl-gutter) * 2) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

main.kl-article > .kl-article__head {
	max-width: calc(900px + var(--kl-gutter) * 2) !important;
}

main.kl-article > .wp-block-post-content.kl-post > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Команда — пять человек, и растягивать четвёртую карточку на две колонки
   нельзя: портретное фото в широкой рамке выглядит нелепо. Ставим пять
   колонок в один ряд, карточка остаётся вертикальной. */
@media (min-width: 1001px) {
	.kl-team { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.kl-team > *:last-child:nth-child(3n + 1),
	.kl-team > *:nth-last-child(2):nth-child(3n + 1) { grid-column: auto; }
	.kl-team__body { padding: var(--kl-3) var(--kl-4) var(--kl-4); }
	.kl-team__body h3 { font-size: .96rem; }
	.kl-team__body p { font-size: .85rem; }
	.kl-team__role { font-size: .72rem; }
}

@media (min-width: 621px) and (max-width: 1000px) {
	.kl-team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.kl-team > *:last-child:nth-child(3n + 1) { grid-column: span 3; }
	.kl-team > *:nth-last-child(2):nth-child(3n + 1) { grid-column: span 2; }
}

/* Двухколоночная сетка вела себя как auto-fit и на широком экране
   разворачивалась в четыре колонки — при семи карточках последний ряд
   оставался с одной штукой и дырой рядом. Делаем ровно две колонки,
   нечётный хвост растягиваем на обе. */
@media (min-width: 621px) {
	.kl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kl-grid--2 > *:last-child:nth-child(odd) { grid-column: span 2; }
}

@media (max-width: 620px) {
	.kl-grid--2 { grid-template-columns: minmax(0, 1fr); }
	.kl-grid--2 > * { grid-column: auto; }
}

/* Подпись плашки и блока «коротко» — абзацем, а не голым strong и не заголовком.
   wpautop вставлял закрывающий </p> перед вложенным абзацем, и валидатор ловил
   лишний тег; заголовок h3 внутри блока ломал порядок h1 → h2 → h3. */
.kl-callout__label,
.kl-keypoints__title {
	margin: 0 0 var(--kl-2);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.kl-callout__label { color: var(--wp--preset--color--accent); }

.kl-keypoints__title {
	color: var(--wp--preset--color--contrast-2);
	margin-bottom: var(--kl-3);
}

/* Список статей рисуется с is-layout-flow: WordPress даёт каждому элементу,
   кроме первого, отступ сверху. В сетке это опускало вторую и третью
   карточку ниже первой — ряд переставал быть ровным. */
ul.kl-posts > li,
ul.kl-posts > li + li { margin: 0 !important; }

/* ===========================================================================
   МЕССЕНДЖЕРЫ НА ТЕЛЕФОНЕ — ОДНА КНОПКА
   Три круга друг над другом занимали около 160 px по правому краю узкого
   экрана и закрывали концы строк. Теперь в углу одна кнопка «Написать»,
   по нажатию над ней раскрываются Telegram и MAX. «Наверх» стоит над ней
   и появляется только после двух экранов прокрутки.
   Раскрытие — только прозрачностью, без сдвигов: ничего не дёргается.
   =========================================================================== */

.kl-messengers__toggle { display: none; }

.kl-messengers__list {
	display: flex;
	flex-direction: column;
	gap: var(--kl-fab-gap);
}

@media (max-width: 781px) {
	.kl-messengers {
		right: var(--kl-4);
		bottom: var(--kl-4);
		gap: var(--kl-3);
		align-items: center;
		/* Сам контейнер выше свёрнутой кнопки не должен ловить тапы по тексту */
		pointer-events: none;
	}

	.kl-messengers__toggle {
		order: 2;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--on-accent);
		box-shadow: var(--kl-shadow-sm);
		cursor: pointer;
		pointer-events: auto;
		transition: background-color .18s ease;
	}

	.kl-messengers__toggle:hover { background: var(--wp--preset--color--accent-2); }

	.kl-messengers__toggle:focus-visible { outline: none; box-shadow: var(--kl-ring); }

	.kl-messengers__ico-close,
	.kl-messengers.is-open .kl-messengers__ico-open { display: none; }

	.kl-messengers.is-open .kl-messengers__ico-close { display: block; }

	.kl-messengers__list {
		order: 1;
		gap: var(--kl-3);
		opacity: 0;
		visibility: hidden;
		transition: opacity .18s ease, visibility 0s linear .18s;
	}

	.kl-messengers.is-open .kl-messengers__list {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: opacity .18s ease;
	}

	.kl-messengers__list a { width: 44px; height: 44px; }

	/* «Наверх» — над кнопкой мессенджеров, на том же краю */
	.kl-top {
		right: var(--kl-4);
		bottom: calc(var(--kl-4) + 44px + var(--kl-3));
		width: 44px;
		height: 44px;
	}

	/* Пока список открыт, «наверх» прячем: он встал бы на место ссылок */
	html.kl-msg-open .kl-top { opacity: 0; visibility: hidden; }
}

/* ===========================================================================
   КОЛОНКИ ВМЕСТО ПУСТОТЫ СПРАВА
   Текст ограничен ~90 символами, контейнер — 1240 px, и справа от каждого
   абзаца оставалась полоса пустоты. Растягивать абзацы нельзя: строка в
   150 символов не читается. Поэтому раздел раскладывается колонками:
   текст слева, соседняя плашка, картинка или «коротко» справа (kl-duo);
   несколько абзацев без соседа — в две колонки (kl-prose).
   Всё, что осталось одиночным, растягивается на ширину контейнера
   и оформляется: шаги карточками, галочки в две колонки.
   Статьи блога не трогаем — у них своя узкая колонка по центру.
   =========================================================================== */

.kl-duo {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: var(--kl-6);
	align-items: start;
	margin: var(--kl-space) 0;
}

.kl-duo__main > :first-child,
.kl-duo__aside > :first-child { margin-top: 0 !important; }

.kl-duo__main > :last-child,
.kl-duo__aside > :last-child { margin-bottom: 0 !important; }

.kl-duo__main > p,
.kl-duo__main > ul,
.kl-duo__main > ol { max-width: none; }

.kl-duo__aside > .kl-callout,
.kl-duo__aside > .kl-keypoints,
.kl-duo__aside > .kl-figure { margin: 0; max-width: none; }

.kl-duo__aside > .kl-figure img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--kl-radius);
}

/* Лид рядом с «коротко» — центр по вертикали, лид короче плашки */
.kl-duo:has(> .kl-duo__main > .kl-lead:only-child) { align-items: center; }

.kl-prose {
	columns: 2;
	column-gap: var(--kl-6);
	margin: var(--kl-space) 0;
}

.kl-prose > * { break-inside: avoid; }

.kl-prose > :first-child { margin-top: 0; }

.kl-prose > p { margin: 0 0 var(--kl-4); }

.kl-prose > h3 { break-after: avoid; }

/* --- Одиночные блоки: на всю ширину и оформлены --- */
main:not(.kl-article) > .wp-block-post-content > p,
main:not(.kl-article) > .wp-block-post-content > .kl-lead,
main:not(.kl-article) > .wp-block-post-content > .kl-note,
main:not(.kl-article) > .wp-block-post-content > ul,
main:not(.kl-article) > .wp-block-post-content > ol { max-width: none !important; }

/* Шаги — карточками в ряд */
main:not(.kl-article) > .wp-block-post-content > ol.kl-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--kl-4);
}

main:not(.kl-article) > .wp-block-post-content > ol.kl-steps:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
main:not(.kl-article) > .wp-block-post-content > ol.kl-steps:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
main:not(.kl-article) > .wp-block-post-content > ol.kl-steps:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }

main:not(.kl-article) > .wp-block-post-content > ol.kl-steps > li {
	margin: 0;
	padding: calc(var(--kl-5) + 32px + var(--kl-3)) var(--kl-5) var(--kl-5);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--kl-radius);
	background: var(--wp--preset--color--surface);
}

main:not(.kl-article) > .wp-block-post-content > ol.kl-steps > li::before {
	left: var(--kl-5);
	top: var(--kl-5);
}

/* Галочки — в две колонки */
main:not(.kl-article) > .wp-block-post-content > ul.kl-checks {
	columns: 2;
	column-gap: var(--kl-6);
}

main:not(.kl-article) > .wp-block-post-content > ul.kl-checks > li { break-inside: avoid; }

/* Одиночная картинка — полосой во всю ширину, без огромной высоты */
main:not(.kl-article) > .wp-block-post-content > .kl-figure { max-width: none !important; }

main:not(.kl-article) > .wp-block-post-content > .kl-figure img {
	width: 100%;
	height: clamp(220px, 30vw, 400px);
	object-fit: contain;
	background: var(--wp--preset--color--surface);
	border-radius: var(--kl-radius);
}

@media (max-width: 1100px) {
	main:not(.kl-article) > .wp-block-post-content > ol.kl-steps:has(> li:nth-child(4):last-child),
	main:not(.kl-article) > .wp-block-post-content > ol.kl-steps:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.kl-duo { grid-template-columns: minmax(0, 1fr); gap: var(--kl-5); }
	.kl-prose { columns: 1; }
	main:not(.kl-article) > .wp-block-post-content > ol.kl-steps,
	main:not(.kl-article) > .wp-block-post-content > ol.kl-steps:has(> li:nth-child(2):last-child),
	main:not(.kl-article) > .wp-block-post-content > ol.kl-steps:has(> li:nth-child(4):last-child),
	main:not(.kl-article) > .wp-block-post-content > ol.kl-steps:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	main:not(.kl-article) > .wp-block-post-content > ol.kl-steps,
	main:not(.kl-article) > .wp-block-post-content > ol.kl-steps:has(> li:nth-child(2):last-child),
	main:not(.kl-article) > .wp-block-post-content > ol.kl-steps:has(> li:nth-child(4):last-child),
	main:not(.kl-article) > .wp-block-post-content > ol.kl-steps:has(> li:nth-child(5):last-child) { grid-template-columns: minmax(0, 1fr); }
	main:not(.kl-article) > .wp-block-post-content > ul.kl-checks { columns: 1; }
}

/* --- Галочка согласия: центр квадрата на центре первой строки подписи ---
   Размер шрифта и межстрочный интервал берём у подписи, тогда 1lh — ровно
   высота её строки, и отступ сверху считается точно при любом кегле. */
.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
	font: inherit;
	line-height: inherit;
	top: 0;
	margin-top: 2px;
	margin-top: calc((1lh - 20px) / 2);
}

/* Фокус — отдельным контуром с зазором, а не толстой рамкой вплотную */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	box-shadow: none;
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Замер показал, что квадрат на 1,6 px ниже центра букв первой строки:
   высота строки включает межстрочный запас снизу, а глаз ориентируется
   на сами буквы. Подтягиваем на эту разницу. */
.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] { margin-top: calc((1lh - 20px) / 2 - 1.5px); }

/* Галочка согласия: предыдущая поправка не срабатывала. Старое правило
   .wpcf7 .kl-consent input задавало отступ 0.15rem и было специфичнее.
   Перебиваем тем же весом, но позже. Размер шрифта и межстрочный интервал
   у галочки те же, что у подписи, поэтому 1lh — высота её строки,
   и центр квадрата совпадает с центром букв без ручных поправок. */
.wpcf7 .kl-consent input[type="checkbox"],
.wpcf7 .wpcf7-acceptance input[type="checkbox"],
.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] { margin-top: calc((1lh - 20px) / 2); }

/* Сноска под списком в блоке «Почему выбирают нас» */
.kl-keypoints__note {
	margin: var(--kl-4) 0 0;
	font-size: .82rem;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-2);
}

.kl-keypoints sup { font-size: .7em; color: var(--wp--preset--color--accent); }

/* ===========================================================================
   СТРАНИЦА ПРОВЕРКИ ДЛЯ ЗАКАЗЧИКА
   Карточка на каждое обещание, ответ — кнопками-пилюлями «да / нет / не так».
   Поле «как правильно» появляется только после выбора «не так».
   =========================================================================== */
.kl-check { max-width: 860px; }

.kl-check-group { margin: var(--kl-7) 0 var(--kl-4); }

.kl-check-item {
	display: flex;
	gap: var(--kl-4);
	padding: var(--kl-5);
	margin: 0 0 var(--kl-3);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--kl-radius);
	background: var(--wp--preset--color--surface);
	transition: border-color .18s ease;
}

.kl-check-item:has(input:checked) { border-color: rgba(223, 154, 50, .45); }

.kl-check-num {
	flex: 0 0 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kl-check-body { flex: 1; min-width: 0; }

.kl-check-stmt { margin: 0 0 var(--kl-1); font-weight: 650; line-height: 1.45; }

.kl-check-meta { margin: 0 0 var(--kl-3); font-size: .86rem; color: var(--wp--preset--color--contrast-2); line-height: 1.45; }

.kl-check .wpcf7-radio { display: flex; flex-wrap: wrap; gap: var(--kl-2); }

.kl-check .wpcf7-radio .wpcf7-list-item { margin: 0; display: inline-block; }

.kl-check .wpcf7-radio label {
	display: inline-flex;
	align-items: center;
	gap: var(--kl-2);
	padding: var(--kl-2) var(--kl-4);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 99px;
	cursor: pointer;
	line-height: 1.2;
	transition: border-color .18s ease, background-color .18s ease;
}

.kl-check .wpcf7-radio label:hover { border-color: var(--wp--preset--color--accent); }

.kl-check .wpcf7-radio label:has(input:checked) {
	background: rgba(223, 154, 50, .14);
	border-color: var(--wp--preset--color--accent);
}

.kl-check .wpcf7-radio input[type="radio"] { margin: 0 !important; }

.kl-check [data-name$="_fix"] { display: none; margin-top: var(--kl-3); }

.kl-check-body:has(input[value="не так"]:checked) [data-name$="_fix"] { display: block; }

.kl-check-final { margin: var(--kl-7) 0 var(--kl-4); }

.kl-check-label { display: block; font-weight: 650; margin-bottom: var(--kl-2); }

.kl-check-submit { margin-top: var(--kl-5); }

@media (max-width: 620px) {
	.kl-check-item { padding: var(--kl-4); gap: var(--kl-3); }
	.kl-check-num { flex-basis: 28px; height: 28px; font-size: .9rem; }
}

/* Форма проверки: переключатели заменены на галочки с одним выбором.
   Переключатели в Contact Form 7 всегда обязательны — заказчик не смог бы
   отправить ответы, не отметив все 17 пунктов. Оформление то же. */
.kl-check .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: var(--kl-2); }

.kl-check .wpcf7-checkbox .wpcf7-list-item { margin: 0; display: inline-block; }

.kl-check .wpcf7-checkbox label {
	display: inline-flex;
	align-items: center;
	gap: var(--kl-2);
	padding: var(--kl-2) var(--kl-4);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 99px;
	cursor: pointer;
	line-height: 1.2;
	transition: border-color .18s ease, background-color .18s ease;
}

.kl-check .wpcf7-checkbox label:hover { border-color: var(--wp--preset--color--accent); }

.kl-check .wpcf7-checkbox label:has(input:checked) {
	background: rgba(223, 154, 50, .14);
	border-color: var(--wp--preset--color--accent);
}

.kl-check .wpcf7-checkbox input[type="checkbox"] { margin: 0 !important; }

/* ===========================================================================
   ФОТО В КОЛОНКАХ И ЦЕНТРОВКА ПАР
   Одиночное фото во всю ширину вписывалось с серыми полосами по бокам.
   Теперь фото стоит внутри пары колонок, а обе колонки выровнены
   по центру друг друга — под коротким текстом не остаётся дыры.
   =========================================================================== */
.kl-duo { align-items: center; }

.kl-duo__main > .kl-figure,
.kl-duo__aside > .kl-figure { margin: var(--kl-5) 0 0; max-width: none; }

.kl-duo__main > .kl-figure img,
.kl-duo__aside > .kl-figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--kl-radius);
	background: var(--wp--preset--color--surface);
}

/* Если одиночное фото где-то осталось — полосой без пустых полей: кадрируем */
main:not(.kl-article) > .wp-block-post-content > .kl-figure img.kl-photo {
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}

/* Иконка контакта — по центру всего блока (подпись, значение, пояснение),
   а не по строке подписи. Подпись снова обычной высоты. */
.kl-contact__row { align-items: center; }

.kl-contact__row h3,
.kl-contact__row dt {
	min-height: 0;
	display: block;
	margin: 0 0 var(--kl-1);
}

/* ===========================================================================
   ЖЁЛТАЯ ПОЛОСА С ФОРМОЙ И БЫСТРЫЕ КОНТАКТЫ
   Полоса фирменного цвета во всю ширину экрана: слева заголовок, текст,
   три плюса с иконками и телефон, справа тёмная карточка с формой.
   Разметка — в kl-blocks.php (шорткоды [kl_perks] и [kl_quick]).
   =========================================================================== */

.kl-band--accent::before { background: var(--wp--preset--color--accent); }

.kl-order {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--kl-7);
	align-items: center;
	color: var(--wp--preset--color--on-accent);
}

.kl-order__text > *:first-child { margin-top: 0; }
.kl-order__text > *:last-child { margin-bottom: 0; }

.kl-order .kl-order__text h2 {
	margin: 0 0 var(--kl-4);
	color: var(--wp--preset--color--on-accent);
}

.kl-order__text p { color: var(--wp--preset--color--on-accent); }

.kl-order__text a {
	color: var(--wp--preset--color--on-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.kl-order__text a:hover { text-decoration-thickness: 2px; }

.kl-order__perks {
	list-style: none;
	margin: var(--kl-5) 0 0;
	padding: 0;
	display: grid;
	gap: var(--kl-3);
}

.kl-order__perks li {
	display: flex;
	align-items: center;
	gap: var(--kl-3);
	margin: 0;
	padding: 0;
	font-weight: 600;
	line-height: 1.4;
}

.kl-order__perks li::before { content: none; }

.kl-order .kl-ico {
	background: var(--wp--preset--color--on-accent);
	border-color: var(--wp--preset--color--on-accent);
}

.kl-order__call {
	margin: var(--kl-5) 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--kl-2) var(--kl-3);
}

.kl-order__call span { opacity: .8; }

.kl-order .kl-order__call a {
	font-size: 1.5rem;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
}

.kl-order__form {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-radius: var(--kl-radius);
	padding: var(--kl-6);
	box-shadow: 0 18px 40px rgba(36, 23, 4, .28);
}

.kl-order__form .wpcf7 { margin: 0; }

@media (max-width: 900px) {
	.kl-order { grid-template-columns: 1fr; gap: var(--kl-6); }
	.kl-order__form { padding: var(--kl-5); }
}

/* --- Быстрые контакты: четыре плитки в ряд --- */
.kl-quick {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--kl-4);
	margin: var(--kl-6) 0 var(--kl-section);
}

.kl-quick__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--kl-5);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--kl-radius);
	background: var(--wp--preset--color--surface);
	transition: border-color .2s ease;
}

.kl-quick__item:hover { border-color: rgba(223, 154, 50, .45); }

.kl-quick__item .kl-ico { margin-bottom: var(--kl-4); }

.kl-quick__item p { margin: 0; }

.kl-quick__label {
	font-size: .78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--contrast-2);
}

.kl-quick .kl-quick__value {
	margin-top: var(--kl-2);
	font-size: 1.08rem;
	font-weight: 700;
	line-height: 1.35;
}

.kl-quick__value a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.kl-quick__value a:hover { color: var(--wp--preset--color--accent); }

.kl-quick .kl-quick__note {
	margin-top: var(--kl-2);
	font-size: .88rem;
	line-height: 1.45;
	color: var(--wp--preset--color--contrast-2);
}

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

@media (max-width: 480px) {
	.kl-quick { grid-template-columns: 1fr; }
}

/* Полоса с формой: карточкой служит сама форма, без второй рамки;
   текст слева крупнее, чтобы колонка не выглядела пустой рядом с формой */
@media (min-width: 901px) {
	.kl-order { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}

.kl-order__form {
	background: none;
	padding: 0;
	box-shadow: none;
	border-radius: 0;
}

.kl-order__form .wpcf7 {
	border: 0;
	box-shadow: 0 18px 40px rgba(36, 23, 4, .3);
}

.kl-order textarea { height: 140px; min-height: 120px; }

.kl-order .kl-order__text h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.12; }

.kl-order__text p { font-size: 1.1rem; line-height: 1.55; }

.kl-order__perks { gap: var(--kl-4); }

.kl-order__perks li { font-size: 1.08rem; gap: var(--kl-4); }

.kl-order .kl-order__perks .kl-ico { width: 48px; height: 48px; }

.kl-order .kl-order__call { font-size: 1.05rem; }

.kl-order .kl-order__call a { font-size: 1.75rem; }

@media (max-width: 900px) {
	.kl-order__form { padding: 0; }
}

@media (max-width: 480px) {
	.kl-order .kl-order__text h2 { font-size: 1.7rem; }
	.kl-order .kl-order__call a { font-size: 1.5rem; }
}

/* --- Контраст ---
   Неактивная кнопка отправки: не бледная заливка с тёмным текстом (контраст
   ниже 3:1), а контурная кнопка фирменного цвета на тёмной форме. */
.wpcf7 input[type="submit"]:disabled {
	opacity: 1;
	background: transparent;
	color: var(--wp--preset--color--accent);
	border: 1px solid var(--wp--preset--color--accent);
	box-shadow: none;
}

/* Подписи на жёлтой полосе — полным цветом, без прозрачности */
.kl-order__call span { opacity: 1; }

/* Приглушённый текст: #7d766c давал 4,41:1 на тёмном фоне, нужно не меньше 4,5:1 */
.kl-muted { color: #8b8479; }

/* ===========================================================================
   ДВИЖЕНИЕ: появление при прокрутке, таймлайн шагов, графики, переходы
   Двигаются только opacity и transform, поэтому вёрстка не прыгает.
   Класс kl-motion ставит скрипт из kl-motion.php, без него всё видно сразу.
   =========================================================================== */

.kl-motion [data-kl-reveal] {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition:
		opacity .6s cubic-bezier(.2, .7, .2, 1),
		transform .6s cubic-bezier(.2, .7, .2, 1),
		border-color .2s ease,
		box-shadow .2s ease;
	transition-delay: calc(var(--kl-i, 0) * 70ms), calc(var(--kl-i, 0) * 70ms), 0s, 0s;
}

.kl-motion [data-kl-reveal].is-in { opacity: 1; transform: none; }

.kl-motion [data-kl-reveal].is-instant { transition-delay: 0s; transition-duration: 0s, 0s, .2s, .2s; }

/* Фото проявляется мягким приближением */
.kl-motion .kl-figure[data-kl-reveal] img { transform: scale(1.04); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.kl-motion .kl-figure[data-kl-reveal].is-in img { transform: none; }

/* --- Наведение: карточки чуть приподнимаются --- */
.kl-card,
.kl-hub__item,
.kl-links a,
.kl-quick__item,
.kl-team__card,
.kl-posts > * {
	transition: transform .25s cubic-bezier(.2, .7, .2, 1), border-color .2s ease, box-shadow .25s ease;
}

@media (hover: hover) {
	.kl-card:hover,
	.kl-hub__item:hover,
	.kl-links a:hover,
	.kl-quick__item:hover,
	.kl-team__card:hover,
	.kl-posts > *:hover {
		transform: translate3d(0, -4px, 0);
		box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
	}
	.kl-motion [data-kl-reveal].is-in:hover { transition-delay: 0s; }
}

/* --- Шаги как таймлайн ---
   Номер шага в кружке, сверху каждой карточки — шкала этапа. Когда шаги
   появляются, шкалы заполняются по очереди слева направо. */
main:not(.kl-article) > .wp-block-post-content > ol.kl-steps > li { position: relative; overflow: hidden; }

main:not(.kl-article) > .wp-block-post-content > ol.kl-steps > li::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 3px;
	background: var(--wp--preset--color--accent);
	transform-origin: left center;
	transform: scaleX(1);
}

.kl-motion main:not(.kl-article) > .wp-block-post-content > ol.kl-steps > li::after {
	transform: scaleX(0);
	transition: transform .7s cubic-bezier(.65, 0, .35, 1);
	transition-delay: calc(var(--kl-i, 0) * 180ms + 250ms);
}

.kl-motion main:not(.kl-article) > .wp-block-post-content > ol.kl-steps > li.is-in::after { transform: scaleX(1); }

.kl-motion main:not(.kl-article) > .wp-block-post-content > ol.kl-steps > li[data-kl-reveal] {
	transition-delay: calc(var(--kl-i, 0) * 180ms), calc(var(--kl-i, 0) * 180ms), 0s, 0s;
}

/* Кружок с номером «вспыхивает», когда до него дошла шкала */
.kl-motion main:not(.kl-article) > .wp-block-post-content > ol.kl-steps > li::before {
	transition: background-color .3s ease, color .3s ease, box-shadow .4s ease;
	transition-delay: calc(var(--kl-i, 0) * 180ms + 500ms);
}

.kl-motion main:not(.kl-article) > .wp-block-post-content > ol.kl-steps > li.is-in::before {
	box-shadow: 0 0 0 6px rgba(223, 154, 50, .16);
}

/* --- График цен --- */
.kl-chart {
	margin: var(--kl-space) 0;
	padding: var(--kl-6);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--kl-radius);
	background: var(--wp--preset--color--surface);
}

.kl-chart__title {
	margin: 0 0 var(--kl-5);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

.kl-chart__groups { display: grid; gap: var(--kl-6); }

.kl-chart--groups .kl-chart__groups { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.kl-chart__group-title {
	margin: 0 0 var(--kl-3);
	font-size: .78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--contrast-2);
}

.kl-chart__bars {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--kl-3);
}

.kl-chart__bars li {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 7.5rem;
	align-items: center;
	gap: var(--kl-4);
	margin: 0;
	padding: 0;
}

.kl-chart__bars li::before { content: none; }

.kl-chart--groups .kl-chart__bars li { grid-template-columns: 5.5rem minmax(0, 1fr) 6.5rem; gap: var(--kl-3); }

.kl-chart__label { font-size: .95rem; line-height: 1.35; color: var(--wp--preset--color--contrast); }

.kl-chart__track {
	position: relative;
	height: 12px;
	border-radius: 99px;
	background: var(--wp--preset--color--surface-2);
	overflow: hidden;
}

.kl-chart__fill {
	position: absolute;
	inset: 0;
	width: calc(var(--kl-bar, 1) * 100%);
	border-radius: inherit;
	background: linear-gradient(90deg, var(--wp--preset--color--accent), var(--wp--preset--color--accent-2));
	transform-origin: left center;
}

.kl-motion .kl-chart .kl-chart__fill {
	transform: scaleX(0);
	transition: transform 1s cubic-bezier(.2, .7, .2, 1);
	transition-delay: calc(var(--kl-i, 0) * 90ms + 200ms);
}

.kl-motion .kl-chart.is-in .kl-chart__fill { transform: scaleX(1); }

.kl-chart__value {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
	color: var(--wp--preset--color--accent);
}

.kl-chart__note {
	margin: var(--kl-5) 0 0;
	font-size: .88rem;
	color: var(--wp--preset--color--contrast-2);
}

@media (max-width: 700px) {
	.kl-chart { padding: var(--kl-5); }
	.kl-chart__bars li,
	.kl-chart--groups .kl-chart__bars li {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--kl-2) var(--kl-3);
	}
	.kl-chart__track { grid-column: 1 / -1; grid-row: 2; }
}

/* Цены и цифры не прыгают по ширине, пока считаются */
.kl-price,
.kl-facts__value { font-variant-numeric: tabular-nums; }

/* --- Полоса прочитанного в статье --- */
.kl-progress {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	width: 100%;
	height: 3px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
}

/* --- Шапка при прокрутке: тень вместо смены высоты --- */
.kl-header { transition: box-shadow .3s ease, background-color .3s ease; }
.kl-scrolled .kl-header { box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }

/* --- Мягкий переход между страницами (Chrome, Edge, Safari 18+) --- */
@media (prefers-reduced-motion: reduce) {
	.kl-card:hover, .kl-hub__item:hover, .kl-links a:hover, .kl-quick__item:hover,
	.kl-team__card:hover, .kl-posts > *:hover { transform: none; }
}

/* Подъём при наведении сильнее правила появления */
@media (hover: hover) {
	.kl-motion .kl-card.is-in:hover,
	.kl-motion .kl-hub__item.is-in:hover,
	.kl-motion .kl-links a.is-in:hover,
	.kl-motion .kl-quick__item.is-in:hover,
	.kl-motion .kl-team__card.is-in:hover,
	.kl-motion .kl-posts > .is-in:hover { transform: translate3d(0, -4px, 0); }
}

/* Фирменный оранжевый приглушён: #f5a524 → #df9a32, второй тон #fad028 → #e8b545.
   Меньше насыщенности, чтобы крупные плашки и полосы не резали глаз. */

/* ===========================================================================
   ГЛАВНАЯ И ОБЩИЕ АКЦЕНТЫ
   Заголовки с фирменной чертой, строка над H1, бегущая строка, машина
   в разрезе, ползунок скорости, плашки техники, вопросы с круглыми «плюсами».
   Ориентиры: rulevaja-rejka.ru и pnevmopodveska.ru (RSR).
   =========================================================================== */

body { overflow-x: clip; }

/* --- Заголовки разделов: черта фирменного цвета слева от текста --- */
.wp-block-post-content > h2,
.kl-faq-home__intro h2,
.kl-order .kl-order__text h2 {
	position: relative;
	padding-left: .7em;
	font-weight: 800;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.wp-block-post-content > h2::before,
.kl-faq-home__intro h2::before,
.kl-order .kl-order__text h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: .16em;
	bottom: .16em;
	width: .22em;
	border-radius: 99px;
	background: var(--wp--preset--color--accent);
}

.kl-order .kl-order__text h2::before { background: var(--wp--preset--color--on-accent); }

/* Разделы отбиты тонкой линией на всю ширину контента */
.wp-block-post-content > h2:not(:first-child) {
	margin-top: var(--kl-section);
}

.wp-block-post-content > h2:not(:first-child)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--kl-section) / -2);
	height: 1px;
	background: linear-gradient(90deg, rgba(223, 154, 50, .55) 0, rgba(223, 154, 50, .55) 72px, var(--kl-line-soft) 72px, var(--kl-line-soft) 100%);
}

/* Перед полосой, бегущей строкой и схемой линия не нужна — у них свой край */
.kl-order + h2::after,
.kl-marquee + h2::after { display: none; }

/* --- H1 главной: строка-ориентир сверху и выделенный срок --- */
.kl-kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kl-2) var(--kl-4);
	margin: 0 0 var(--kl-4);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.kl-kicker::before {
	content: "";
	width: 40px;
	height: 2px;
	background: currentColor;
}

.kl-kicker span + span::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-right: var(--kl-4);
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
	opacity: .7;
}

.kl-hl { color: var(--wp--preset--color--accent); white-space: nowrap; }

/* --- Бегущая строка: две ленты крест-накрест --- */
.kl-marquee {
	position: relative;
	width: 100vw;
	margin: var(--kl-section) calc(50% - 50vw);
	padding: 38px 0;
	overflow: hidden;
}

.kl-marquee__row {
	position: relative;
	width: 110%;
	margin-left: -5%;
	overflow: hidden;
	white-space: nowrap;
}

.kl-marquee__row--front {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	transform: rotate(-2deg);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
	z-index: 1;
}

.kl-marquee__row--back {
	position: absolute;
	left: 0;
	top: 50%;
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--contrast-2);
	transform: translateY(-50%) rotate(2.2deg);
	border-top: 1px solid var(--kl-line-soft);
	border-bottom: 1px solid var(--kl-line-soft);
}

.kl-marquee__track {
	display: flex;
	width: max-content;
	animation: kl-marquee 38s linear infinite;
}

.kl-marquee__row--back .kl-marquee__track { animation-direction: reverse; animation-duration: 46s; }

.kl-marquee:hover .kl-marquee__track { animation-play-state: paused; }

.kl-marquee__group { display: flex; align-items: center; flex-shrink: 0; }

.kl-marquee__item {
	padding: 18px 0;
	font-size: clamp(1.15rem, 2.2vw, 1.7rem);
	font-weight: 800;
	letter-spacing: -.01em;
	text-transform: uppercase;
}

.kl-marquee__row--back .kl-marquee__item { font-weight: 700; font-size: clamp(1rem, 1.8vw, 1.35rem); padding: 14px 0; }

.kl-marquee__sep {
	width: 14px;
	height: 14px;
	margin: 0 clamp(18px, 2.4vw, 34px);
	flex-shrink: 0;
	background: currentColor;
	/* сечение вала: кольцо с крестом */
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='4.75' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3Cpath d='M7 0v14M0 7h14' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='4.75' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3Cpath d='M7 0v14M0 7h14' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

@keyframes kl-marquee { to { transform: translate3d(-50%, 0, 0); } }

@media (prefers-reduced-motion: reduce) {
	.kl-marquee__track { animation: none; }
}

/* --- Машина в разрезе --- */
.kl-shaft {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	gap: var(--kl-5);
	align-items: stretch;
	margin: var(--kl-6) 0 var(--kl-section);
}

.kl-shaft__stage {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--kl-radius);
	background:
		radial-gradient(120% 90% at 50% 60%, rgba(223, 154, 50, .08), transparent 60%),
		var(--wp--preset--color--surface);
	overflow: hidden;
}

.kl-shaft__canvas { position: relative; padding: var(--kl-4) var(--kl-4) 0; }

.kl-shaft__svg { display: block; width: 100%; height: auto; color: var(--kl-line-soft); }

.kl-shaft__grid { opacity: .5; }

.kl-shaft__ground { stroke: var(--kl-line-ui); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }

.kl-shaft__body path { fill: none; stroke: #6f675b; stroke-width: 2.5; stroke-linejoin: round; }
.kl-shaft__body > path:first-child { fill: rgba(255, 255, 255, .025); }
.kl-shaft__body .kl-shaft__glass { fill: rgba(255, 255, 255, .04); stroke: #4f493f; stroke-width: 2; }
.kl-shaft__body .kl-shaft__line { stroke: #4f493f; stroke-width: 2; }

.kl-shaft__wheel circle { fill: #0b0a08; stroke: #6f675b; stroke-width: 10; }
.kl-shaft__wheel .kl-shaft__rim { fill: none; stroke: #3a3428; stroke-width: 3; stroke-dasharray: 10 6; }
.kl-shaft__wheel .kl-shaft__hub { fill: #6f675b; stroke: none; }

.kl-shaft__unit rect,
.kl-shaft__unit path,
.kl-shaft__unit circle { fill: #1f1b15; stroke: #6f675b; stroke-width: 2.5; }

.kl-shaft__tube { stroke: url(#kl-shaft-metal); stroke: #b9b0a2; stroke-width: 16; stroke-linecap: round; }
.kl-shaft__tube--thin { stroke-width: 12; }
.kl-shaft__splines { stroke: #0b0a08; stroke-width: 2.5; stroke-linecap: round; }
.kl-shaft__bearing { fill: #2a251d; stroke: #b9b0a2; stroke-width: 3; }
.kl-shaft__bracket { stroke: #6f675b; stroke-width: 3; stroke-linecap: round; fill: none; }
.kl-shaft__joint { fill: #0b0a08; stroke: #b9b0a2; stroke-width: 4; }

.kl-shaft__leader { stroke: #4f493f; stroke-width: 1.5; stroke-dasharray: 4 5; fill: none; transition: stroke .3s ease; }
.kl-shaft__leader-end { fill: #4f493f; transition: fill .3s ease; }
.kl-shaft__label { fill: var(--wp--preset--color--contrast-2); font-size: 19px; font-weight: 700; transition: fill .3s ease; }

.kl-shaft[data-active="cross"] .kl-shaft__callout[data-part="cross"] :is(.kl-shaft__leader),
.kl-shaft[data-active="splines"] .kl-shaft__callout[data-part="splines"] .kl-shaft__leader,
.kl-shaft[data-active="hanger"] .kl-shaft__callout[data-part="hanger"] .kl-shaft__leader,
.kl-shaft[data-active="tube"] .kl-shaft__callout[data-part="tube"] .kl-shaft__leader,
.kl-shaft[data-active="cv"] .kl-shaft__callout[data-part="cv"] .kl-shaft__leader { stroke: var(--wp--preset--color--accent); stroke-dasharray: none; }

.kl-shaft__callout.is-active .kl-shaft__label,
.kl-shaft:not([data-active]) .kl-shaft__callout[data-part="tube"] .kl-shaft__label { fill: var(--wp--preset--color--accent); }

.kl-shaft__callout.is-active .kl-shaft__leader-end { fill: var(--wp--preset--color--accent); }
.kl-shaft__callout.is-active .kl-shaft__leader { stroke: var(--wp--preset--color--accent); stroke-dasharray: none; }

.kl-shaft__core { fill: #0b0a08; stroke: var(--wp--preset--color--accent); stroke-width: 4; transition: fill .25s ease; }
.kl-shaft__pulse { fill: rgba(223, 154, 50, .25); transform-box: fill-box; transform-origin: center; animation: kl-pulse 2.2s cubic-bezier(.2, .7, .2, 1) infinite; }
.kl-shaft__dot.is-active .kl-shaft__core { fill: var(--wp--preset--color--accent); }
.kl-shaft__dot.is-active .kl-shaft__pulse { fill: rgba(223, 154, 50, .45); }

@keyframes kl-pulse {
	0% { transform: scale(.7); opacity: 1; }
	100% { transform: scale(2.4); opacity: 0; }
}

/* Невидимые кнопки поверх точек: большая зона нажатия */
.kl-shaft__hot {
	position: absolute;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.kl-shaft__art { position: relative; }

.kl-shaft__hot:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }

/* Ползунок скорости */
.kl-speed {
	margin-top: auto;
	padding: var(--kl-5);
	border-top: 1px solid var(--wp--preset--color--line);
	background: rgba(0, 0, 0, .18);
}

.kl-speed__label {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--kl-2) var(--kl-4);
	font-weight: 700;
}

.kl-speed__out {
	font-size: 1.6rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--accent);
}

.kl-speed__range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 10px;
	margin: var(--kl-4) 0 var(--kl-2);
	border-radius: 99px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent) 0 var(--kl-fill, 50%), var(--wp--preset--color--surface-2) var(--kl-fill, 50%) 100%);
	cursor: pointer;
}

.kl-speed__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--wp--preset--color--contrast);
	border: 6px solid var(--wp--preset--color--accent);
	box-shadow: 0 0 0 6px rgba(223, 154, 50, .2), 0 6px 14px rgba(0, 0, 0, .5);
	transition: box-shadow .2s ease;
}

.kl-speed__range::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--wp--preset--color--contrast);
	border: 6px solid var(--wp--preset--color--accent);
	box-shadow: 0 0 0 6px rgba(223, 154, 50, .2);
}

.kl-speed__range:focus-visible { outline: none; }
.kl-speed__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 10px rgba(223, 154, 50, .35); }

.kl-speed__scale {
	display: flex;
	justify-content: space-between;
	font-size: .78rem;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--contrast-2);
}

.kl-speed__hint {
	margin: var(--kl-3) 0 0;
	min-height: 3em;
	color: var(--wp--preset--color--contrast);
}

/* Панель с описанием */
.kl-shaft__panel {
	display: flex;
	flex-direction: column;
	gap: var(--kl-4);
}

.kl-shaft__chips { display: flex; flex-wrap: wrap; gap: var(--kl-2); }

.kl-shaft__chip {
	padding: 9px 14px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 99px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.kl-shaft__chip:hover { border-color: var(--wp--preset--color--accent); }

.kl-shaft__chip.is-active {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

.kl-shaft__card {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: var(--kl-5);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--kl-radius);
	background: var(--wp--preset--color--surface);
	animation: kl-card-in .45s cubic-bezier(.2, .7, .2, 1);
}

@keyframes kl-card-in { from { opacity: 0; transform: translate3d(12px, 0, 0); } }

.kl-shaft__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--kl-3);
	margin-bottom: var(--kl-4);
}

.kl-shaft__head h3 { margin: 0; font-size: 1.4rem; }

.kl-shaft__price {
	padding: 6px 12px;
	border-radius: 99px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-weight: 800;
	white-space: nowrap;
}

.kl-shaft__flow {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
	counter-reset: none;
}

.kl-shaft__step {
	position: relative;
	margin: 0;
	padding: 0 0 var(--kl-4) 44px;
}

.kl-shaft__step::before {
	content: "";
	position: absolute;
	left: 9px;
	top: 6px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 3px solid var(--kl-line-ui);
	background: var(--wp--preset--color--surface);
	z-index: 1;
}

.kl-shaft__step:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 15px;
	top: 20px;
	bottom: -4px;
	width: 2px;
	background: linear-gradient(var(--kl-line-ui), var(--wp--preset--color--accent));
}

.kl-shaft__step--how::before { border-color: var(--wp--preset--color--accent); }
.kl-shaft__step--after::before { border-color: var(--wp--preset--color--accent); background: var(--wp--preset--color--accent); }

.kl-shaft__tag {
	display: block;
	margin-bottom: 2px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
}

.kl-shaft__step--after .kl-shaft__tag { color: var(--wp--preset--color--accent); }

.kl-shaft__step p { margin: 0; line-height: 1.5; }

.kl-shaft__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--kl-2) var(--kl-4);
	margin: auto 0 0;
	padding-top: var(--kl-4);
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: .92rem;
	color: var(--wp--preset--color--contrast-2);
}

.kl-shaft__meta a { font-weight: 700; color: var(--wp--preset--color--accent); text-decoration: none; }
.kl-shaft__meta a::after { content: " →"; }

@media (max-width: 1000px) {
	.kl-shaft { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
	.kl-shaft__label, .kl-shaft__leader, .kl-shaft__leader-end { display: none; }
	.kl-shaft__canvas { padding: var(--kl-2) var(--kl-2) 0; }
	.kl-shaft__hot { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
}

@media (prefers-reduced-motion: reduce) {
	.kl-shaft__pulse, .kl-shaft__card { animation: none; }
}

/* --- Высокие плашки техники --- */
.kl-vehicles {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--kl-4);
	margin: var(--kl-6) 0 var(--kl-section);
}

.kl-vehicle {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--kl-2);
	min-height: 260px;
	padding: var(--kl-6) var(--kl-4);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	background: linear-gradient(180deg, var(--wp--preset--color--surface-2), var(--wp--preset--color--surface));
	color: var(--wp--preset--color--contrast);
	text-align: center;
	text-decoration: none;
	overflow: hidden;
	transition: transform .3s cubic-bezier(.2, .7, .2, 1), border-color .25s ease, box-shadow .3s ease;
}

.kl-vehicle::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 38%;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(223, 154, 50, .18), transparent 70%);
	transform: translate(-50%, -50%) scale(.6);
	opacity: 0;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .4s ease;
}

.kl-vehicle__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 92px;
	height: 92px;
	margin-bottom: var(--kl-3);
	border-radius: 50%;
	border: 1px solid rgba(223, 154, 50, .35);
	background: rgba(223, 154, 50, .08);
	color: var(--wp--preset--color--accent);
	transition: background-color .3s ease, color .3s ease;
}

.kl-vehicle__icon .kl-svg-icon { width: 56px; height: 42px; }

.kl-vehicle__name { position: relative; font-size: 1.08rem; font-weight: 800; }

.kl-vehicle__note { position: relative; font-size: .85rem; line-height: 1.35; color: var(--wp--preset--color--contrast-2); }

.kl-vehicle__go {
	position: absolute;
	right: 14px;
	bottom: 14px;
	width: 28px;
	height: 21px;
	color: var(--wp--preset--color--accent);
	opacity: 0;
	transform: translate3d(-8px, 0, 0);
	transition: opacity .25s ease, transform .3s cubic-bezier(.2, .7, .2, 1);
}

.kl-vehicle__go .kl-svg-icon { width: 100%; height: 100%; }

@media (hover: hover) {
	.kl-vehicle:hover {
		transform: translate3d(0, -6px, 0);
		border-color: rgba(223, 154, 50, .6);
		box-shadow: 0 20px 40px rgba(0, 0, 0, .45);
	}
	.kl-vehicle:hover::before { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
	.kl-vehicle:hover .kl-vehicle__icon { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); }
	.kl-vehicle:hover .kl-vehicle__go { opacity: 1; transform: none; }
	.kl-motion .kl-vehicle.is-in:hover { transform: translate3d(0, -6px, 0); }
}

.kl-vehicle:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }

@media (max-width: 1100px) { .kl-vehicles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
	.kl-vehicles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kl-3); }
	.kl-vehicle { min-height: 200px; padding: var(--kl-5) var(--kl-3); }
	.kl-vehicle__icon { width: 72px; height: 72px; }
}

/* --- Вопросы и ответы: круглые жёлтые «плюсы», открытый вопрос подсвечен --- */
.kl-faq details {
	border-radius: 14px;
	transition: border-color .2s ease, background-color .2s ease;
}

.kl-faq summary {
	position: relative;
	padding: 18px 76px 18px 22px;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.4;
}

.kl-faq summary::after {
	content: "";
	right: 18px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background:
		linear-gradient(var(--wp--preset--color--on-accent) 0 0) center / 14px 2.5px no-repeat,
		linear-gradient(var(--wp--preset--color--on-accent) 0 0) center / 2.5px 14px no-repeat,
		var(--wp--preset--color--accent);
	transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease;
}

.kl-faq details[open] summary::after { transform: translateY(-50%) rotate(135deg); box-shadow: 0 0 0 6px rgba(223, 154, 50, .18); }

.kl-faq details[open] {
	border-color: rgba(223, 154, 50, .5);
	background: linear-gradient(180deg, rgba(223, 154, 50, .06), transparent 120px), var(--wp--preset--color--surface);
}

.kl-faq details > *:not(summary) { padding-left: 22px; padding-right: 76px; color: var(--wp--preset--color--contrast-2); }

@media (max-width: 560px) {
	.kl-faq summary { padding-right: 64px; font-size: 1rem; }
	.kl-faq details > *:not(summary) { padding-right: 22px; }
}

/* Вопросы на главной: слева заголовок и ссылка, справа список */
.kl-faq-home {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr);
	gap: var(--kl-7);
	align-items: start;
	margin: var(--kl-6) 0 var(--kl-section);
}

.kl-faq-home__intro { position: sticky; top: calc(var(--kl-header-h) + var(--kl-5)); }

.kl-faq-home__intro p { color: var(--wp--preset--color--contrast-2); }

.kl-faq-home .kl-faq { margin: 0; }

.kl-faq-home .kl-faq-wrap > .kl-pills { display: none; }

@media (max-width: 900px) {
	.kl-faq-home { grid-template-columns: minmax(0, 1fr); gap: var(--kl-5); }
	.kl-faq-home__intro { position: static; }
}

.kl-faq-home .kl-faq__group { display: none; }
.kl-faq-home__intro h2 { margin-top: 0; }

/* Бегущая строка на всю ширину экрана: у блоков контента стоят поля auto !important */
main > .wp-block-post-content > .kl-marquee {
	width: 100vw;
	max-width: none !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* ===========================================================================
   БЛОГ: плитки с обложкой, жёлтой рубрикой, шкалой снизу и пагинацией
   =========================================================================== */

ul.kl-posts > li { border-radius: 16px; }

ul.kl-posts > li .kl-posts__cover {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

ul.kl-posts > li .kl-posts__cover img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }

/* Затемнение снизу, чтобы обложка перетекала в карточку */
ul.kl-posts > li .kl-posts__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(11, 10, 8, .55));
	pointer-events: none;
}

@media (hover: hover) {
	ul.kl-posts > li:hover .kl-posts__cover img { transform: scale(1.06); }
}

/* Рубрика — жёлтая плашка поверх обложки */
ul.kl-posts > li .kl-posts__tag {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	margin: 0;
	padding: 6px 12px;
	border-radius: 99px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}

ul.kl-posts > li .kl-posts__tag a { color: inherit; text-decoration: none; position: relative; z-index: 3; }
ul.kl-posts > li .kl-posts__tag .wp-block-post-terms__separator { opacity: .6; }

/* Дата с жёлтой точкой */
ul.kl-posts > li .kl-posts__date {
	display: flex;
	align-items: center;
	gap: var(--kl-2);
	color: var(--wp--preset--color--contrast-2);
}

ul.kl-posts > li .kl-posts__date::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 4px rgba(223, 154, 50, .18);
}

/* «Читать статью» внизу карточки */
ul.kl-posts > li .kl-posts__more {
	display: inline-flex;
	align-items: center;
	gap: var(--kl-2);
	margin-top: auto;
	padding-top: var(--kl-3);
	font-weight: 700;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

ul.kl-posts > li .kl-posts__more::after {
	content: "→";
	transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}

@media (hover: hover) {
	ul.kl-posts > li:hover .kl-posts__more::after { transform: translate3d(6px, 0, 0); }
}

/* Жёлтая шкала по нижнему краю при наведении */
ul.kl-posts > li::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

@media (hover: hover) {
	ul.kl-posts > li:hover::after { transform: scaleX(1); }
}

/* Пагинация: круглые кнопки, текущая страница — жёлтая */
.wp-block-query-pagination {
	align-items: center;
	gap: var(--kl-2);
	margin: var(--kl-6) 0 0;
}

.wp-block-query-pagination-numbers { display: flex; gap: var(--kl-2); }

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 46px;
	height: 46px;
	padding: 0 var(--kl-3);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 99px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	text-decoration: none;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.wp-block-query-pagination a:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }

.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

.wp-block-query-pagination .page-numbers.dots { border: 0; background: none; min-width: 24px; }

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next { padding: 0 var(--kl-5) !important; }

/* Рубрика и ссылка-на-всю-карточку отсчитываются от самой карточки, а не от тела */
ul.kl-posts > li .kl-posts__body { position: static; }

/* Растянутая плитка статьи — горизонтальная: обложка слева, текст справа,
   иначе обложка 16:10 на всю ширину вырастает до высоты экрана */
@media (min-width: 1001px) {
	ul.kl-posts > li:last-child:nth-child(3n + 1),
	ul.kl-posts > li:nth-last-child(2):nth-child(3n + 1) {
		display: grid;
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	}
}

@media (min-width: 621px) and (max-width: 1000px) {
	ul.kl-posts > li:last-child:nth-child(odd) {
		display: grid;
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	}
}

@media (min-width: 621px) {
	ul.kl-posts > li:is(:last-child:nth-child(3n + 1), :nth-last-child(2):nth-child(3n + 1)) .kl-posts__cover,
	ul.kl-posts > li:last-child:nth-child(odd) .kl-posts__cover { aspect-ratio: auto; min-height: 300px; height: 100%; }
	ul.kl-posts > li:is(:last-child:nth-child(3n + 1), :nth-last-child(2):nth-child(3n + 1)) .kl-posts__body { justify-content: center; padding: var(--kl-6); }
	ul.kl-posts > li:is(:last-child:nth-child(3n + 1), :nth-last-child(2):nth-child(3n + 1)) .wp-block-post-title { font-size: 1.5rem; }
}

@media (min-width: 1001px) {
	ul.kl-posts > li:last-child:nth-child(odd):not(:nth-child(3n + 1)) { display: flex; }
	ul.kl-posts > li:last-child:nth-child(odd):not(:nth-child(3n + 1)) .kl-posts__cover { aspect-ratio: 16 / 10; min-height: 0; height: auto; }
}

/* ===========================================================================
   КОНТАКТЫ: время работы по дням, карта и панорама рядом
   =========================================================================== */

.kl-mapgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--kl-4);
	align-items: stretch;
	margin: var(--kl-6) 0 var(--kl-4);
}

.kl-mapgrid--hours { grid-template-columns: minmax(0, .85fr) minmax(0, 1.2fr) minmax(0, 1.2fr); }

.kl-mapgrid figure { margin: 0; display: flex; flex-direction: column; gap: var(--kl-3); }

.kl-mapgrid .kl-map { margin: 0; flex: 1; border-radius: 16px; overflow: hidden; border: 1px solid var(--wp--preset--color--line); }

.kl-mapgrid .kl-map iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; }

.kl-mapgrid figcaption {
	display: flex;
	align-items: center;
	gap: var(--kl-3);
	font-size: .9rem;
	color: var(--wp--preset--color--contrast-2);
}

.kl-mapgrid__badge {
	flex-shrink: 0;
	padding: 4px 10px;
	border-radius: 99px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.kl-hours {
	display: flex;
	flex-direction: column;
	padding: var(--kl-5);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
}

.kl-hours__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--kl-2) var(--kl-3);
	margin-bottom: var(--kl-4);
}

.kl-hours__head h3 { margin: 0; font-size: 1.3rem; }

.kl-hours__status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	border-radius: 99px;
	font-size: .8rem;
	font-weight: 700;
	border: 1px solid var(--wp--preset--color--line);
}

.kl-hours__status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.kl-hours__status.is-open { color: #7fd18b; border-color: rgba(127, 209, 139, .4); }
.kl-hours__status.is-open::before { box-shadow: 0 0 0 4px rgba(127, 209, 139, .2); animation: kl-blink 2s ease-in-out infinite; }
.kl-hours__status.is-closed { color: var(--wp--preset--color--contrast-2); }

@keyframes kl-blink { 50% { box-shadow: 0 0 0 7px rgba(127, 209, 139, 0); } }

.kl-hours__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.kl-hours__list li {
	display: flex;
	align-items: baseline;
	gap: var(--kl-2);
	margin: 0;
	padding: 9px 10px;
	border-radius: 8px;
	font-variant-numeric: tabular-nums;
}

.kl-hours__list li::before { content: none; }

.kl-hours__day { color: var(--wp--preset--color--contrast-2); }

.kl-hours__dots { flex: 1; min-width: 12px; border-bottom: 1px dashed var(--kl-line-soft); transform: translateY(-4px); }

.kl-hours__time { font-weight: 700; text-align: right; }

.kl-hours__list li.is-off .kl-hours__time { font-weight: 600; font-size: .88rem; color: var(--wp--preset--color--contrast-2); }

.kl-hours__list li.is-today { background: rgba(223, 154, 50, .12); }
.kl-hours__list li.is-today .kl-hours__day,
.kl-hours__list li.is-today .kl-hours__time { color: var(--wp--preset--color--accent); font-weight: 800; }
.kl-hours__list li.is-today .kl-hours__dots { border-color: rgba(223, 154, 50, .5); }

.kl-hours__note { margin: auto 0 0; padding-top: var(--kl-4); font-size: .88rem; color: var(--wp--preset--color--contrast-2); }
.kl-hours__note a { color: var(--wp--preset--color--accent); font-weight: 700; white-space: nowrap; }

@media (max-width: 1100px) {
	.kl-mapgrid--hours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kl-mapgrid--hours .kl-hours { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
	.kl-mapgrid, .kl-mapgrid--hours { grid-template-columns: minmax(0, 1fr); }
	.kl-mapgrid .kl-map iframe { min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
	.kl-hours__status.is-open::before { animation: none; }
}

/* Плашки техники: содержимое от верха по одной линии, под подпись всегда две строки —
   иначе у плашек с подписью в две строки иконка и название поднимаются выше соседних */
.kl-vehicle { justify-content: flex-start; }
.kl-vehicle__icon { flex: 0 0 auto; }
.kl-vehicle__name { min-height: 1.35em; line-height: 1.35; }
.kl-vehicle__note { min-height: calc(1.35em * 2); display: flex; align-items: flex-start; justify-content: center; }

/* Без подъёма при наведении: карточка уезжает из-под курсора у нижнего края,
   наведение слетает и она дрожит (грабли №1 скилла). Подсветка — рамкой, тенью, цветом. */
@media (hover: hover) {
	.kl-card:hover,
	.kl-hub__item:hover,
	.kl-links a:hover,
	.kl-quick__item:hover,
	.kl-team__card:hover,
	.kl-posts > *:hover,
	.kl-vehicle:hover,
	.kl-motion .kl-card.is-in:hover,
	.kl-motion .kl-hub__item.is-in:hover,
	.kl-motion .kl-links a.is-in:hover,
	.kl-motion .kl-quick__item.is-in:hover,
	.kl-motion .kl-team__card.is-in:hover,
	.kl-motion .kl-posts > .is-in:hover,
	.kl-motion .kl-vehicle.is-in:hover { transform: none; }
}

/* ===========================================================================
   ПЕРВЫЙ ЭКРАН: текст слева, 3D-вал на стенде справа (kl-3d.php)
   =========================================================================== */

.kl-hero3d {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: var(--kl-6);
	align-items: center;
	margin: 0 0 var(--kl-6);
}

.kl-hero3d__text > *:first-child { margin-top: 0; }
.kl-hero3d__text > *:last-child { margin-bottom: 0; }

.kl-hero3d__stage {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 22px;
	overflow: hidden;
	background:
		radial-gradient(60% 55% at 50% 48%, rgba(223, 154, 50, .16), transparent 70%),
		linear-gradient(180deg, var(--wp--preset--color--surface-2), var(--wp--preset--color--base));
	border: 1px solid var(--wp--preset--color--line);
	touch-action: pan-y;
}

/* Чертёжная сетка под валом */
.kl-hero3d__stage::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
	background-size: 28px 28px;
	-webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
	mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
	pointer-events: none;
}

.kl-hero3d__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .6s ease;
}

.kl-hero3d__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	cursor: grab;
	opacity: 0;
	transition: opacity .6s ease;
}

.kl-hero3d__canvas:active { cursor: grabbing; }

.kl-hero3d__stage.is-3d .kl-hero3d__canvas { opacity: 1; }
.kl-hero3d__stage.is-3d .kl-hero3d__poster { opacity: 0; }

/* Подписи узлов */
.kl-hero3d__labels { position: absolute; inset: 0; pointer-events: none; }

.kl-hero3d__label {
	position: absolute;
	transform: translate(-50%, -100%);
	padding: 5px 10px;
	border: 1px solid rgba(223, 154, 50, .55);
	border-radius: 99px;
	background: rgba(11, 10, 8, .82);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: .78rem;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	pointer-events: auto;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.kl-hero3d__label::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	width: 1px;
	height: 12px;
	background: rgba(223, 154, 50, .7);
}

.kl-hero3d__label:hover,
.kl-hero3d__label:focus-visible {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	outline: none;
}

/* Панель: шаги и шкала биения */
.kl-hero3d__hud {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 14px;
	display: grid;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	background: rgba(11, 10, 8, .8);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.kl-hero3d__steps {
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.kl-hero3d__steps li {
	flex: 1;
	margin: 0;
	padding: 5px 6px;
	border-radius: 8px;
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--contrast-2);
	font-size: .74rem;
	font-weight: 700;
	text-align: center;
	transition: background-color .3s ease, color .3s ease;
}

.kl-hero3d__steps li::before { content: none; }

.kl-hero3d__steps li.is-done { color: var(--wp--preset--color--accent); }

.kl-hero3d__steps li.is-active {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

.kl-hero3d__meter { display: flex; align-items: center; gap: 10px; }

.kl-hero3d__meter-label { font-size: .78rem; font-weight: 700; color: var(--wp--preset--color--contrast-2); }

.kl-hero3d__bar {
	position: relative;
	flex: 1;
	height: 8px;
	border-radius: 99px;
	background: var(--wp--preset--color--surface-2);
	overflow: hidden;
}

.kl-hero3d__bar i {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--wp--preset--color--accent), #e0603a);
	transform-origin: left center;
}

.kl-hero3d__stage.is-balanced .kl-hero3d__bar i { background: var(--wp--preset--color--accent); }

.kl-hero3d__replay {
	padding: 4px 10px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 99px;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: .76rem;
	font-weight: 700;
	cursor: pointer;
}

.kl-hero3d__replay:hover,
.kl-hero3d__replay:focus-visible { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); outline: none; }

.kl-hero3d__hint {
	position: absolute;
	left: 50%;
	top: 14px;
	margin: 0;
	padding: 5px 12px;
	transform: translateX(-50%);
	border-radius: 99px;
	background: rgba(11, 10, 8, .75);
	color: var(--wp--preset--color--contrast-2);
	font-size: .78rem;
	white-space: nowrap;
	pointer-events: none;
}

@media (max-width: 900px) {
	.kl-hero3d { grid-template-columns: minmax(0, 1fr); gap: var(--kl-5); }
	.kl-hero3d__stage { aspect-ratio: 4 / 3.4; }
}

@media (max-width: 560px) {
	.kl-hero3d__label { font-size: .7rem; padding: 4px 8px; }
	.kl-hero3d__steps li { font-size: .68rem; padding: 4px; }
}

/* ===========================================================================
   ОТЗЫВЫ: рейтинг с Яндекс Карт и карточки отзывов
   =========================================================================== */

.kl-rating {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--kl-2);
	padding: var(--kl-6);
	border: 1px solid rgba(223, 154, 50, .4);
	border-radius: 18px;
	background: radial-gradient(120% 90% at 0 0, rgba(223, 154, 50, .14), transparent 60%), var(--wp--preset--color--surface);
}

.kl-rating p { margin: 0; }

.kl-rating__source {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
}

.kl-rating__value {
	font-size: clamp(3rem, 6vw, 4.2rem);
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--contrast);
}

.kl-rating__value span { margin-left: .35em; font-size: 1rem; font-weight: 600; color: var(--wp--preset--color--contrast-2); }

.kl-rating__stars { display: flex; gap: 4px; }

.kl-rating__star {
	width: 26px;
	height: 26px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent) var(--kl-star), var(--kl-line-ui) var(--kl-star));
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.5 2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4 6.1 20.5l1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.5 2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4 6.1 20.5l1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.kl-rating__count { font-weight: 700; }

.kl-rating__name { font-size: .88rem; color: var(--wp--preset--color--contrast-2); }

.kl-rating .kl-btn { margin-top: var(--kl-3); }

/* Карточки отзывов: три колонки, текст одинаковой высоты не требуется */
.kl-reviews {
	columns: 3 300px;
	column-gap: var(--kl-4);
	margin: var(--kl-6) 0 var(--kl-section);
}

.kl-review {
	break-inside: avoid;
	margin: 0 0 var(--kl-4);
	padding: var(--kl-5);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
	transition: border-color .2s ease;
}

.kl-review:hover { border-color: rgba(223, 154, 50, .45); }

.kl-review__head {
	display: flex;
	align-items: center;
	gap: var(--kl-3);
	margin-bottom: var(--kl-3);
}

.kl-review__avatar {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-weight: 800;
}

.kl-review__who { display: flex; flex-direction: column; min-width: 0; }

.kl-review__author { font-weight: 800; color: var(--wp--preset--color--contrast); }

.kl-review__meta { font-size: .82rem; color: var(--wp--preset--color--contrast-2); }

.kl-review__source {
	margin-left: auto;
	padding: 3px 9px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 99px;
	font-size: .72rem;
	font-weight: 700;
	white-space: nowrap;
	color: var(--wp--preset--color--contrast-2);
}

.kl-review blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	color: var(--wp--preset--color--contrast);
}

.kl-review blockquote p { margin: 0 0 var(--kl-2); line-height: 1.6; }
.kl-review blockquote p:last-child { margin-bottom: 0; }

.kl-review blockquote::before {
	content: "“";
	display: block;
	height: .5em;
	margin-bottom: var(--kl-2);
	font-size: 3rem;
	line-height: 1;
	color: var(--wp--preset--color--accent);
}

/* Отзывы: три ровные колонки, карточки одного ряда одной высоты, без полосы слева */
.kl-reviews,
main > .wp-block-post-content > .kl-reviews {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--kl-4);
	columns: auto;
	align-items: stretch;
	max-width: none !important;
}

.kl-reviews .kl-review,
.kl-review {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
}

@media (max-width: 1000px) {
	.kl-reviews,
	main > .wp-block-post-content > .kl-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	.kl-reviews,
	main > .wp-block-post-content > .kl-reviews { grid-template-columns: minmax(0, 1fr); }
}

.kl-review__head .kl-review__author { margin: 0; font-size: 1rem; line-height: 1.3; color: var(--wp--preset--color--contrast); }

/* 3D-вал без рамки: лежит прямо на фоне страницы, высота — как у текста слева */
.kl-hero3d { align-items: stretch; }

.kl-hero3d__text { align-self: center; }

.kl-hero3d__stage {
	aspect-ratio: auto;
	min-height: 320px;
	height: 100%;
	border: 0;
	border-radius: 0;
	background: radial-gradient(55% 60% at 50% 50%, rgba(223, 154, 50, .13), transparent 72%);
	overflow: visible;
}

/* Сетка растворяется к краям, прямоугольника не видно */
.kl-hero3d__stage::before {
	-webkit-mask-image: radial-gradient(50% 55% at 50% 50%, #000 20%, transparent 75%);
	mask-image: radial-gradient(50% 55% at 50% 50%, #000 20%, transparent 75%);
}

.kl-hero3d__poster { border-radius: 18px; }

/* Панель — компактной строкой снизу, без собственной подложки-коробки */
.kl-hero3d__hud {
	left: 8%;
	right: 8%;
	bottom: 0;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	padding: 0;
	border: 0;
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.kl-hero3d__steps li { padding: 4px 6px; font-size: .72rem; }

.kl-hero3d__hint { top: 0; }

@media (max-width: 900px) {
	.kl-hero3d__stage { height: auto; aspect-ratio: 4 / 3; min-height: 0; }
	.kl-hero3d__hud { left: 4%; right: 4%; grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

.kl-hero3d__stage { min-height: 280px; }
@media (max-width: 900px) { .kl-hero3d__stage { min-height: 0; } }

/* Строка фактов без дыр: 4 в ряд, на планшете и телефоне 2 × 2;
   нечётная последняя плашка — на весь ряд */
.kl-facts,
main > .wp-block-post-content > .kl-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.kl-facts > :last-child:nth-child(4n + 1) { grid-column: 1 / -1; }
.kl-facts > :nth-last-child(2):nth-child(4n + 1) { grid-column: span 2; }

@media (max-width: 900px) {
	.kl-facts,
	main > .wp-block-post-content > .kl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kl-facts > * { grid-column: auto !important; }
	.kl-facts > :last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
}

@media (max-width: 420px) {
	.kl-facts div { padding: var(--kl-4); }
	.kl-facts dd,
	.kl-facts .kl-facts__value { font-size: 1.25rem; }
}

/* ===========================================================================
   ХВОСТЫ СЕТОК БЕЗ ДЫР на всех ширинах
   Последний неполный ряд заполняется: одна карточка — на весь ряд,
   две в трёхколоночной сетке — поровну через сетку из 6 колонок.
   =========================================================================== */

/* Шаги: > 1100 px — 3 колонки, если шагов не 2, 4 или 5 */
@media (min-width: 1101px) {
	main:not(.kl-article) > .wp-block-post-content > ol.kl-steps:not(:has(> li:nth-child(2):last-child)):not(:has(> li:nth-child(4):last-child)):not(:has(> li:nth-child(5):last-child)) > li:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
	main:not(.kl-article) > .wp-block-post-content > ol.kl-steps:not(:has(> li:nth-child(2):last-child)):not(:has(> li:nth-child(4):last-child)):not(:has(> li:nth-child(5):last-child)) > li:nth-last-child(2):nth-child(3n + 1) { grid-column: span 2; }
}

/* 901–1100 px: всё, кроме двух шагов, в 3 колонки */
@media (min-width: 901px) and (max-width: 1100px) {
	main:not(.kl-article) > .wp-block-post-content > ol.kl-steps:not(:has(> li:nth-child(2):last-child)) > li:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
	main:not(.kl-article) > .wp-block-post-content > ol.kl-steps:not(:has(> li:nth-child(2):last-child)) > li:nth-last-child(2):nth-child(3n + 1) { grid-column: span 2; }
}

/* 621–900 px: две колонки, нечётный последний шаг на весь ряд */
@media (min-width: 621px) and (max-width: 900px) {
	main:not(.kl-article) > .wp-block-post-content > ol.kl-steps > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Отзывы: две колонки на планшете — нечётный последний на весь ряд */
@media (min-width: 621px) and (max-width: 1000px) {
	.kl-reviews > .kl-review:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1001px) {
	.kl-reviews > .kl-review:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}

/* Группы графика: три в ряд или одна под другой, без 2 + 1 */
.kl-chart--groups .kl-chart__groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {
	.kl-chart--groups .kl-chart__groups { grid-template-columns: minmax(0, 1fr); }
}

/* Команда на планшете: сетка из 6 колонок, карточка — 2, хвост из двух — по 3 */
@media (min-width: 621px) and (max-width: 1000px) {
	.kl-team,
	main > .wp-block-post-content > .kl-team { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.kl-team > * { grid-column: span 2 !important; }
	.kl-team > :last-child:nth-child(3n + 1) { grid-column: 1 / -1 !important; }
	.kl-team > :nth-last-child(2):nth-child(3n + 1),
	.kl-team > :last-child:nth-child(3n + 2) { grid-column: span 3 !important; }
}

/* Карточки узлов в одной ячейке: высота = самая высокая карточка, смена растворением */
.kl-shaft__cards { display: grid; flex: 1; }

.kl-shaft__cards > .kl-shaft__card {
	grid-area: 1 / 1;
	animation: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s ease, visibility 0s linear .45s;
}

.kl-shaft__cards > .kl-shaft__card.is-shown {
	opacity: 1;
	visibility: visible;
	transition: opacity .45s ease, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
	.kl-shaft__cards > .kl-shaft__card { transition: none; }
}

/* ===========================================================================
   СЛАЙДЕР ФОТО (kl-slider.php): слайды одного размера, плавная прокрутка
   =========================================================================== */

.kl-slider { margin: var(--kl-6) 0 var(--kl-section); }

.kl-slider__bar {
	display: flex;
	align-items: center;
	gap: var(--kl-3);
	margin-bottom: var(--kl-4);
}

.kl-slider__progress {
	position: relative;
	flex: 1;
	height: 3px;
	border-radius: 99px;
	background: var(--wp--preset--color--line);
	overflow: hidden;
}

.kl-slider__progress i {
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--accent);
	transform-origin: left center;
	transform: scaleX(.06);
	transition: transform .25s ease-out;
}

.kl-slider__count {
	min-width: 5.2em;
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-size: .9rem;
	color: var(--wp--preset--color--contrast-2);
}

.kl-slider__count b { color: var(--wp--preset--color--contrast); }

.kl-slider__btn {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}

.kl-slider__btn span {
	width: 10px;
	height: 10px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateX(-2px) rotate(45deg);
}

.kl-slider__btn--prev span { transform: translateX(2px) rotate(-135deg); }

.kl-slider__btn:hover:not(:disabled),
.kl-slider__btn:focus-visible {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	outline: none;
}

.kl-slider__btn:disabled { opacity: .35; cursor: default; }

.kl-slider__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * var(--kl-4)) / 3);
	column-gap: var(--kl-4);
	margin: 0;
	padding: 0 0 var(--kl-2);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	cursor: grab;
}

.kl-slider__track::-webkit-scrollbar { display: none; }

.kl-slider__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.kl-slider__track.is-dragging a { pointer-events: none; }

.kl-slider__slide {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
	overflow: hidden;
	transition: border-color .2s ease;
}

.kl-slider__slide::before { content: none; }

.kl-slider__slide:hover { border-color: rgba(223, 154, 50, .5); }

.kl-slider__link {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--surface-2);
}

.kl-slider__link img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-user-select: none;
	user-select: none;
	transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

@media (hover: hover) {
	.kl-slider__slide:hover .kl-slider__link img { transform: scale(1.05); }
}

.kl-slider__num {
	position: absolute;
	left: 12px;
	top: 12px;
	padding: 4px 10px;
	border-radius: 99px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-size: .78rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* Подпись фиксированной высоты: две строки заголовка и две строки пояснения */
.kl-slider__caption {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: var(--kl-4);
	min-height: calc(1.35em * 2 + 1.45em * 2 + var(--kl-4) * 2 + 4px);
}

.kl-slider__caption strong {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
}

.kl-slider__caption span {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .88rem;
	line-height: 1.45;
	color: var(--wp--preset--color--contrast-2);
}

@media (max-width: 1000px) {
	.kl-slider__track { grid-auto-columns: calc((100% - var(--kl-4)) / 2); }
}

@media (max-width: 620px) {
	.kl-slider__track { grid-auto-columns: 86%; }
	.kl-slider__btn { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
	.kl-slider__track { scroll-behavior: auto; }
	.kl-slider__link img { transition: none; }
}

/* Номер слайда: у ссылок галереи line-height 0 — задаём свой */
.kl-slider__num { line-height: 1.4; }

/* Подписи узлов 3D-сцены — только там, где сцена достаточно широкая:
   на средних экранах они налезали на заголовок первого экрана */
@media (max-width: 1100px) {
	.kl-hero3d__labels { display: none; }
}

/* Цели касания не меньше 24 px (WCAG 2.2, 2.5.8), 22.09.2026.
   Логотип-ссылка на телефоне была 21 px в высоту. Стрелка подменю — 12 px в ширину:
   саму кнопку не трогаем (WordPress не даёт ей отрицательные поля, меню раздвигалось),
   а область нажатия расширяем вправо невидимым псевдоэлементом — в промежуток до следующего пункта. */
.kl-logo { min-height: 24px; }
.kl-header .wp-block-navigation-submenu__toggle { position: relative; }
.kl-header .wp-block-navigation-submenu__toggle::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 24px; }

/* Логотип — вариант 09 «Вал между словами», как выбрал заказчик (правка 23.09.2026).
   До этого в шапке и подвале стояли «вилки» из варианта 17. Теперь вставлен сам
   утверждённый файл (Логотип/09, фон убран в прозрачность): на телефоне —
   строка без подписи, иначе подпись мельче 8 px. */
.kl-logo--img { display: inline-flex; align-items: center; line-height: 0; }
.kl-logo--img picture { display: block; }
.kl-logo--img img { display: block; width: auto; height: 38px; max-width: none; }
.kl-footer__brand.kl-logo--img img { height: 42px; }
@media (max-width: 781px) { .kl-header .kl-logo--img img { height: 18px; } }
@media (max-width: 400px) { .kl-header .kl-logo--img img { height: 16px; } }
/* 1176–1240 px: меню ещё в строку, но с логотипом и кнопками не помещалось
   и ломалось на три строки — уменьшаем промежуток между пунктами */
@media (min-width: 1176px) and (max-width: 1240px) {
	.kl-header .wp-block-navigation .wp-block-navigation__container { column-gap: 1rem; }
}

/* Contact layout: keep opening hours readable beside the maps. */
.kl-mapgrid > * { min-width: 0; }
.kl-mapgrid--hours { grid-template-columns: minmax(340px, 1fr) repeat(2, minmax(0, 1.1fr)); }
.kl-hours__list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.kl-hours__dots { display: none; }
.kl-hours__day, .kl-hours__time { min-width: 0; overflow-wrap: anywhere; }
.kl-mapgrid__map, .kl-mapgrid__pano { min-width: 0; }
.kl-mapgrid .kl-map { flex: none; height: 420px; }
.kl-mapgrid .kl-map iframe { height: 100%; min-height: 0; }
@media (max-width: 1250px) {
 .kl-mapgrid--hours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .kl-mapgrid--hours .kl-hours { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
 .kl-mapgrid, .kl-mapgrid--hours { grid-template-columns: minmax(0, 1fr); }
 .kl-mapgrid .kl-map { height: 320px; }
}

.kl-mapgrid .kl-pano-card { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; padding: 24px; text-align: center; line-height: 1.5; background: radial-gradient(circle at center, rgba(223,154,50,.1), transparent 75%),var(--wp--preset--color--surface); }
.kl-pano-card h3, .kl-pano-card p { margin: 0; }
.kl-pano-card__symbol { display: grid; place-items: center; width: 110px; height: 110px; border: 1px solid var(--wp--preset--color--accent); border-radius: 50%; color: var(--wp--preset--color--accent); font-size: 2.4rem; font-weight: 800; }

/* Keep the WebGL scene in normal flow on mobile Safari. */
.kl-hero3d__stage [hidden] { display: none !important; }
@media (max-width: 900px) {
 .kl-hero3d__stage { width: 100%; height: clamp(300px, 78vw, 560px); min-height: 300px; aspect-ratio: auto; overflow: hidden; isolation: isolate; }
 .kl-hero3d__hud { bottom: 8px; }
}