/* ==========================================================================
   MK:translations — 2026 redesign
   Окремий файл стилів нового макета. Підключається ПІСЛЯ all.css.
   Всі класи мають префікс mk26- щоб не перетинатися зі старими стилями.
   ========================================================================== */

:root {
	/* Точні значення з макета (див. docs/figma-tokens.md) */
	--mk26-primary:        #2540FF;
	--mk26-primary-hover:  #1B32D6;
	--mk26-ink:            #0A0B0F;
	--mk26-text:           #0A0B0F;
	--mk26-muted:          #5B6478;
	--mk26-line:           #E8EBF2;
	--mk26-surface:        #FFFFFF;
	--mk26-surface-soft:   #EEF1FF;

	--mk26-container:      1280px;
	--mk26-gutter:         32px;

	--mk26-header-h:       73px;
	--mk26-header-h-mob:   65px;

	--mk26-radius-pill:    999px;
	--mk26-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Контейнер
   -------------------------------------------------------------------------- */

.mk26-container {
	width: 100%;
	max-width: calc(var(--mk26-container) + var(--mk26-gutter) * 2);
	margin: 0 auto;
	padding-left: var(--mk26-gutter);
	padding-right: var(--mk26-gutter);
}

@media (max-width: 767.98px) {
	.mk26-container {
		--mk26-gutter: 16px;
	}
}

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */

/* Липкість шапки робить плагін Sticky Menu (or Anything!) on Scroll:
   він перемикає її на position: fixed, підставляє блок-заповнювач і сам
   компенсує висоту адмінбара. Тому тут НЕ дублюємо ні sticky, ні
   зміщення під адмінбар — інакше відступ рахується двічі й верх
   наступного блоку заїжджає під шапку. */
.mk26-header {
	position: relative;
	z-index: 100;
	/* У макеті фон напівпрозорий (85% + розмиття), але на живому сайті
	   крізь шапку просвічує карта — лишаємо суцільний білий. */
	background: var(--mk26-surface);
	border-bottom: 1px solid rgba(232, 235, 242, .7);
	font-family: var(--mk26-font);
}

/* Контейнер шапки. У макеті смуга шапки 1216 з полями 16 (контент 1184),
   а у футера контент 1216 — тобто в самому макеті вони розходяться на 16px.
   На сайті це помітно як неспівпадіння логотипів, тому вирівнюємо
   шапку по футеру: контент 1216 в обох. */
.mk26-header .mk26-container {
	max-width: 1248px;
	padding-left: 16px;
	padding-right: 16px;
}

/* клас, який навішує старий JS під час відкритого бургера */
.mk26-header.-show-btn { z-index: 10; }

/* На вузьких екранах панель адмінки WordPress стає 46px заввишки, а плагін
   липкої шапки компенсує лише десктопні 32 — через це вона накриває шапку.
   Правило діє тільки для залогінених, гостей сайту не стосується.
   !important потрібен, бо плагін пише margin-top інлайном. */
@media screen and (max-width: 782px) {
	.admin-bar .mk26-header { margin-top: 46px !important; }
}

.mk26-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 72px;
}

/* --- лого --- */

.mk26-header__logo {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

/* У макеті логотип 149x35, але в нашому файлі інші пропорції (320x100).
   Тому орієнтуємось на ширину з макета, а висоту лишаємо пропорційною,
   інакше знак виглядає дрібним. */
.mk26-header__logo img {
	display: block;
	width: 149px;
	height: auto;
}

/* --- навігація --- */

.mk26-nav {
	display: flex;
	align-items: center;
	margin: 0 auto;
}

/* Верхній рівень — тільки прямий список, інакше правило зачепить
   і випадайки Max Mega Menu та розкладе їх у рядок. */
.mk26-nav > ul,
ul.mk26-nav__list,
.mk26-nav .mega-menu-wrap > ul.mega-menu {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
}

.mk26-nav > ul > li,
.mk26-nav .mega-menu-wrap > ul.mega-menu > li { margin: 0; }

/* Max Mega Menu тримає власну висоту рядка, через що пункти з'їжджали
   вгору відносно логотипа. Вирівнюємо їх по центру шапки. */
.mk26-header .mk26-nav,
.mk26-header .mk26-nav .mega-menu-wrap,
.mk26-header .mk26-nav .mega-menu-wrap > ul.mega-menu,
.mk26-header .mk26-nav .mega-menu-wrap > ul.mega-menu > li.mega-menu-item { align-self: center; }

.mk26-header .mk26-nav #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link {
	display: flex !important;
	align-items: center !important;
	height: auto !important;
}

/* Кольори, розміри й ваги шрифту меню задані в Mega Menu →
   Default (Primary) → Menu Bar / Flyout Menus. Тут їх НЕ дублюємо.

   Правила нижче — запасний варіант для звичайного wp_nav_menu:
   спрацюють, лише якщо Max Mega Menu колись вимкнуть. Вони без
   !important, тож стилям плагіна не заважають. */
.mk26-header .mk26-nav__list a {
	font-family: var(--mk26-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--mk26-muted);
	text-decoration: none;
	transition: color .18s ease;
}

/* Верхній рівень Max Mega Menu: у плагіні стояв IBM Plex Mono, через що
   меню виглядало інакше, ніж у макеті. Тут задаємо саме макетні
   значення — Inter Medium 14/20, колір #5B6478.
   !important потрібен, бо плагін пише свої правила через ID-селектори. */
.mk26-header .mk26-nav #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link {
	font-family: var(--mk26-font) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 20px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--mk26-muted) !important;
}

.mk26-header .mk26-nav #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link:hover,
.mk26-header .mk26-nav #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link {
	color: var(--mk26-ink) !important;
}

.mk26-header .mk26-nav__list a:hover,
.mk26-header .mk26-nav__list a:focus-visible {
	color: var(--mk26-ink);
	text-decoration: none;
}

.mk26-header .mk26-nav__list .current-menu-item > a,
.mk26-header .mk26-nav__list .current_page_item > a {
	color: var(--mk26-ink);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Max Mega Menu — доповнення до налаштувань теми плагіна

   Кольори, відступи й розміри живуть у Mega Menu → Default (Primary).
   Тут лишилось тільки те, чого в полях плагіна немає.
   -------------------------------------------------------------------------- */

.mk26-header .mk26-nav .mega-menu-wrap,
.mk26-header .mk26-nav #mega-menu-wrap-menu-1 {
	background: none;
	background-color: transparent;
	padding: 0;
}

/* Радіус і рамка панелі — Mega Menu → Flyout Menus → Sub Menu Border
   / Sub Menu Border Radius. Тут не дублюємо.
   Тіні в полях плагіна немає; за рішенням лишаємо панель без тіні. */

/* Фон тримає панель, а не окремі пункти.
   Sub Menu Border Radius у плагіні скруглює ще й кожен пункт, і між
   зрізаними кутами сусідніх пунктів просвічує сторінка. Тому фон
   віддаємо панелі, а пунктам скруглення обнуляємо. */
.mk26-header .mk26-nav ul.mega-sub-menu {
	background-color: #FFFFFF !important;
}

.mk26-header .mk26-nav ul.mega-sub-menu > li.mega-menu-item {
	background: transparent !important;
	border-radius: 0 !important;
}

/* Скруглення пунктів НЕ задаємо: плагін малює білий фон на самому
   a.mega-menu-link, тож зрізані кути сусідніх пунктів лишають
   незафарбовані ромбики на стиках. */

/* внутрішній відступ панелі лишаємо плагіну (Sub Menu Padding),
   своїх значень тут не задаємо */

/* другий рівень: впритул до першої панелі, інакше в зазорі
   просвічує її тінь і край виглядає хвилястим */
.mk26-header .mk26-nav ul.mega-sub-menu ul.mega-sub-menu {
	top: 0 !important;
	margin-left: 0;
}

/* стрілка «є вкладені пункти» */
.mk26-header .mk26-nav #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item a.mega-menu-link > span.mega-indicator,
.mk26-header .mk26-nav #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item a.mega-menu-link::after {
	color: inherit;
	opacity: .6;
}

/* --- права група --- */

.mk26-header__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
}

/* телефон */

.mk26-header .mk26-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--mk26-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: color .18s ease;
}

.mk26-header .mk26-header__phone:hover { color: var(--mk26-primary); text-decoration: none; }

.mk26-header__phone-icon {
	display: block;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

/* перемикач мов — стримано, як просили */

/* Розмітку будуємо самі з pll_the_languages( raw ), а не шорткодом [polylang],
   інакше випадайку перехоплюють старі правила з all.css і вона стрибає. */

.mk26-lang {
	position: relative;
	display: flex;
	align-items: center;
}

/* З макета: пігулка з рамкою, глобус 20, код мови 14/20 semibold,
   шеврон 12, внутрішні поля 12/24, проміжок 6. */
.mk26-header .mk26-lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 24px;
	font-family: var(--mk26-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-transform: uppercase;
	color: var(--mk26-ink);
	background: none;
	border: 1px solid var(--mk26-line);
	border-radius: var(--mk26-radius-pill);
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease;
}

.mk26-header .mk26-lang__toggle:hover {
	background: var(--mk26-surface-soft);
	border-color: var(--mk26-surface-soft);
}

.mk26-lang__globe {
	display: block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

.mk26-lang__toggle svg {
	width: 12px;
	height: 12px;
	transition: transform .18s ease;
}

.mk26-lang__list {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 20;
	min-width: 88px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--mk26-surface);
	border: 1px solid var(--mk26-line);
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(4, 4, 4, .10);

	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.mk26-lang:hover .mk26-lang__list,
.mk26-lang:focus-within .mk26-lang__list {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mk26-lang:hover .mk26-lang__toggle svg,
.mk26-lang:focus-within .mk26-lang__toggle svg { transform: rotate(180deg); }

.mk26-lang__list li { margin: 0; }

.mk26-header .mk26-lang__list a {
	display: block;
	padding: 7px 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	color: var(--mk26-muted);
	text-decoration: none;
	background: none;
	border-radius: 8px;
	transition: color .16s ease, background-color .16s ease;
}

.mk26-header .mk26-lang__list a:hover,
.mk26-header .mk26-lang__list a:focus-visible {
	color: var(--mk26-ink);
	background: var(--mk26-surface-soft);
	text-decoration: none;
}

/* прапорці від Polylang нам не потрібні, але глобус із макета лишається */
.mk26-lang__list img { display: none; }

/* --- CTA --- */

.mk26-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 48px;
	padding: 0 8px 0 24px;
	font-family: var(--mk26-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	background: var(--mk26-primary);
	border: 0;
	border-radius: var(--mk26-radius-pill);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .18s ease;
}

.mk26-btn:hover,
.mk26-btn:focus-visible {
	background: var(--mk26-primary-hover);
	color: #fff;
	text-decoration: none;
}

/* Стандартна кнопка за дизайном: синя пігулка, всередині білий кружок
   із синьою стрілкою. Варіант --ghost дзеркальний: біла кнопка,
   синій кружок, біла стрілка. */
.mk26-btn__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff;
	color: var(--mk26-primary);
	transition: transform .18s ease;
}

.mk26-btn:hover .mk26-btn__arrow { transform: translateX(2px); }

.mk26-btn__arrow svg { width: 16px; height: 16px; }

/* Кнопка в шапці має власні розміри з макета: висота 52 (8 + 36 + 8),
   поля 24 зліва і справа, білий кружок 36 із синьою стрілкою.
   Базові значення вище лишаються для кнопок першого екрана. */
.mk26-header .mk26-header__cta {
	height: 52px;
	padding: 8px 24px;
	font-size: 14px;
	line-height: 20px;
}



/* --- бургер (вмикає стару .js-fixed-menu панель) --- */

/* У all.css клас .fixed-menu-btn — це плаваюча синя кнопка
   (position:fixed; bottom:20%). Нам потрібен лише JS-обробник, що на ньому
   висить, тому вигляд перебиваємо повністю. */
.mk26-header .mk26-burger {
	display: none;
	position: static;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	inset: auto;
	flex: 0 0 auto;
	cursor: pointer;
	background: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	transform: none;
}

.mk26-header .mk26-burger:hover {
	background: var(--mk26-surface-soft);
	border-radius: 10px;
	box-shadow: none;
}

.mk26-header .mk26-burger__box {
	position: relative;
	display: block;
	width: 20px;
	height: 14px;
	margin: 0;
	transform: none;
}

.mk26-header .mk26-burger__box span {
	position: absolute;
	left: 0;
	top: auto;
	right: auto;
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background-color: #040404;
	transition: transform .25s ease, opacity .2s ease, top .25s ease;
}

.mk26-header .mk26-burger__box span:nth-child(1) { top: 0; }
.mk26-header .mk26-burger__box span:nth-child(2) { top: 6px; }
.mk26-header .mk26-burger__box span:nth-child(3) { top: 12px; }

/* клас .open навішує на кожен .icon наявний скрипт у lib-all.js */
.mk26-header .mk26-burger__box.open span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.mk26-header .mk26-burger__box.open span:nth-child(2) { opacity: 0; }
.mk26-header .mk26-burger__box.open span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* наведення на .fixed-menu-btn у all.css масштабує .nav-icon-1 span — нас не чіпає */
.mk26-header .mk26-burger:hover .mk26-burger__box span { transform: none; }
.mk26-header .mk26-burger:hover .mk26-burger__box.open span:nth-child(1) { transform: rotate(45deg); }
.mk26-header .mk26-burger:hover .mk26-burger__box.open span:nth-child(3) { transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   HEADER — адаптив

   Макет намальовано на 1440, але реальні вікна часто вужчі (1280, 1366,
   плюс масштаб Windows). Тому десктопний ряд лишається до 1024px,
   а в діапазоні 1024–1439 просто підтискаємо відступи.
   -------------------------------------------------------------------------- */

/* ── Перший екран: брейкпоінти з макета ──
   1440: H1 68/71 (-2px), контент від 96, чіпи плавають
    768: H1 48/50 (-1px), контент від 79, поля 32, чіпи сітка 2x2
    390: H1 36/38 (-1px), контент від 63, поля 20, чіпи 1 колонка,
         кнопки стовпчиком, але фіксованої ширини та по центру */

/* 1024–1439: той самий ряд, тісніше. Розміри елементів з макета
   лишаємо, підтискаємо лише проміжки та внутрішні поля. */
@media (min-width: 1024px) and (max-width: 1439.98px) {
	.mk26-nav > ul,
	ul.mk26-nav__list,
	.mk26-nav .mega-menu-wrap > ul.mega-menu { gap: 22px; }

	.mk26-header__actions { gap: 12px; }
	.mk26-header .mk26-lang__toggle { padding: 12px 16px; }
	.mk26-header .mk26-header__cta { padding: 8px 16px; }
}

/* до 1024: меню ховається в бургер, решта ряду лишається */
@media (max-width: 1023.98px) {
	.mk26-header .mk26-nav { display: none !important; }
	.mk26-header .mk26-burger { display: inline-flex !important; }

	.mk26-header .mk26-lang__toggle { padding: 10px 14px; }
	.mk26-header .mk26-header__cta { padding: 8px 16px; }
}

/* 768 з макета: у шапці лише лого і бургер, поля контейнера 32 */
@media (max-width: 768px) {
	.mk26-header .mk26-container {
		padding-left: 32px;
		padding-right: 32px;
	}

	.mk26-header .mk26-header__phone,
	.mk26-header .mk26-lang,
	.mk26-header .mk26-header__cta { display: none !important; }

	.mk26-header__actions { gap: 8px; }
}

/* 390 з макета: висота 64 замість 72, поля 20 */
@media (max-width: 575.98px) {
	.mk26-header__inner { height: 64px; }

	.mk26-header .mk26-container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ==========================================================================
   МОБІЛЬНЕ МЕНЮ — власна панель

   Max Mega Menu на вузьких екранах малює свій off-canvas, але він не вміє
   показувати шапку з логотипом і хрестиком. Тому його мобільний режим
   ховаємо, а панель збираємо самі на меню Second Menu.
   ========================================================================== */

/* тогл і випадайка плагіна на мобільному не потрібні */
.mega-menu-toggle { display: none !important; }

.mk26-mobile {
	position: fixed;
	inset: 0;
	/* вище за адмінбар WordPress (99999), інакше він накриває шапку панелі.
	   Зсув під адмінбар не підходить: на вузьких екранах той прокручується
	   разом зі сторінкою, і панель з'їжджала. */
	z-index: 100000;
	font-family: var(--mk26-font);
}

.mk26-mobile[hidden] { display: none; }


.mk26-mobile__overlay {
	position: absolute;
	inset: 0;
	background: rgba(10, 11, 15, .45);
	opacity: 0;
	transition: opacity .22s ease;
}

.mk26-mobile__panel {
	position: absolute;
	inset: 0 0 0 auto;
	display: flex;
	flex-direction: column;
	width: min(420px, 100%);
	background: var(--mk26-surface);
	transform: translateX(100%);
	transition: transform .26s ease;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mk26-mobile.is-open .mk26-mobile__overlay { opacity: 1; }
.mk26-mobile.is-open .mk26-mobile__panel { transform: translateX(0); }

/* --- шапка панелі: лого і хрестик --- */

.mk26-mobile__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 64px;
	padding: 0 20px;
	border-bottom: 1px solid var(--mk26-line);
}

.mk26-mobile__logo { display: block; line-height: 0; }

.mk26-mobile__logo img {
	display: block;
	width: 112px;
	height: auto;
}

.mk26-mobile__close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--mk26-surface-soft);
	color: var(--mk26-ink);
	cursor: pointer;
	transition: background-color .18s ease;
}

.mk26-mobile__close:hover { background: var(--mk26-line); }
.mk26-mobile__close svg { width: 20px; height: 20px; }

/* --- пункти --- */

/* Низ панелі йде одразу під пунктами, а не притискається до краю екрана */
.mk26-mobile__nav { flex: 0 0 auto; padding: 8px 20px 16px; }

.mk26-mobile__menu,
.mk26-mobile__menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk26-mobile__menu > li { border-bottom: 1px solid var(--mk26-line); }
.mk26-mobile__menu > li:last-child { border-bottom: 0; }

.mk26-mobile__menu a {
	display: block;
	padding: 14px 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;
	color: var(--mk26-ink);
	text-decoration: none;
}

.mk26-mobile__menu a:hover { color: var(--mk26-primary); }

/* --- аккордеон для пунктів із підменю --- */

.mk26-mobile__menu li.mk26-has-sub > .mk26-mobile__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.mk26-mobile__menu li.mk26-has-sub > .mk26-mobile__row > a { flex: 1 1 auto; }

.mk26-mobile__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--mk26-muted);
	cursor: pointer;
	transition: background-color .18s ease, transform .2s ease;
}

.mk26-mobile__toggle svg { width: 14px; height: 14px; }
.mk26-mobile__toggle:hover { background: var(--mk26-surface-soft); }

li.mk26-is-open > .mk26-mobile__row > .mk26-mobile__toggle {
	transform: rotate(180deg);
	color: var(--mk26-primary);
}

/* другий рівень — простим списком з відступом, за замовчуванням згорнутий */
.mk26-mobile__menu ul {
	padding: 0 0 10px 16px;
	display: none;
}

.mk26-mobile__menu li.mk26-is-open > ul { display: block; }

.mk26-mobile__menu ul a {
	padding: 9px 0;
	font-size: 14px;
	font-weight: 400;
	color: var(--mk26-muted);
}

/* Якщо Max Mega Menu увімкнений і для Second Menu, він малює всередині
   панелі власне чорне меню своєю темою. Приводимо його до нашого вигляду.
   Надійніше — вимкнути плагін для цього розташування в
   Mega Menu → Menu Locations, тоді ці правила просто не знадобляться. */
.mk26-mobile .mega-menu-wrap,
.mk26-mobile ul.mega-menu,
.mk26-mobile ul.mega-menu > li.mega-menu-item,
.mk26-mobile ul.mega-sub-menu {
	background: none !important;
	background-color: transparent !important;
	padding: 0 !important;
	box-shadow: none !important;
}

.mk26-mobile ul.mega-menu > li.mega-menu-item > a.mega-menu-link {
	font-family: var(--mk26-font) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 22px !important;
	height: auto !important;
	padding: 14px 0 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: var(--mk26-ink) !important;
	background: none !important;
	border-bottom: 1px solid var(--mk26-line) !important;
}

.mk26-mobile ul.mega-menu > li.mega-menu-item:last-child > a.mega-menu-link {
	border-bottom: 0 !important;
}

.mk26-mobile ul.mega-sub-menu a.mega-menu-link {
	font-family: var(--mk26-font) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: var(--mk26-muted) !important;
	background: none !important;
}

/* --- низ панелі --- */

.mk26-mobile__bottom {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px;
	border-top: 1px solid var(--mk26-line);
}

.mk26-mobile__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	color: var(--mk26-ink);
	text-decoration: none;
}

.mk26-mobile__langs {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk26-mobile__langs a {
	display: block;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	color: var(--mk26-muted);
	text-decoration: none;
	border: 1px solid var(--mk26-line);
	border-radius: var(--mk26-radius-pill);
}

.mk26-mobile__langs a.is-current {
	color: #fff;
	background: var(--mk26-primary);
	border-color: var(--mk26-primary);
}

.mk26-mobile__cta { justify-content: space-between; }

/* поки панель відкрита — сторінка під нею не скролиться */
body.mk26-menu-open { overflow: hidden; }

/* ==========================================================================
   ГОЛОВНА 2026 — верхній блок: перший екран + бренди

   У макеті градієнт і карта світу — спільний фон на дві секції: він іде
   з-під шапки через перший екран і закінчується вже в блоці логотипів.
   Тому обидві секції загорнуті в .mk26-top, а фон живе на обгортці.
   ========================================================================== */

.mk26-top {
	position: relative;
	overflow: hidden;
	font-family: var(--mk26-font);
	background: #fff;
}

/* градієнт — у макеті прямокутник 1440×504 від верху */
.mk26-top::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 504px;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(37, 64, 255, .15) 0%, rgba(238, 241, 255, .6) 50%, rgba(238, 241, 255, 0) 100%);
}

/* Карта має накривати обидві секції — перший екран і логотипи.
   При натуральних 1518px її висота лише 650, а дві секції разом це
   близько 800, тому масштабуємо ширше. Низ гасимо маскою, інакше
   край картинки різко обривався б посеред блоку з логотипами. */
/* Карта — значення з панелі Figma.
   1440: X -119, Y 340 (від контейнера) → 355.5 від верху секції, 1518x650
   1920: X -136, Y 183 (від контейнера) → 248 від верху секції, 1552x665
   У макеті фрейм має прозорість 50%, але вона вже врахована в
   експортованому PNG — тому тут opacity не задаємо, інакше
   блідість накладеться двічі. */
.mk26-top__map {
	position: absolute;
	top: 355.5px;
	left: 50%;
	z-index: 0;
	width: 1518px;
	transform: translateX(-50%);
	pointer-events: none;
}

.mk26-top__map img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 1600px) {
	.mk26-top__map { top: 248px; width: 1552px; }
}

/* Висота градієнта в макеті: 504 тільки на 1440.
   На 1920, 768 і 390 прямокутник вищий — 720. */
@media (min-width: 1600px) {
	.mk26-top::before { height: 720px; }
}

@media (max-width: 991.98px) {
	.mk26-top::before { height: 720px; }
}

/* На вузьких екранах карта в макеті вже НЕ спільний фон на дві секції:
   на 768 вона має координати x -91, y 17 і розмір 910x390 — тобто
   цілком вміщається в перший екран і до логотипів не доходить.

   Відступ 17px узятий із макета 768, але там секція інших пропорцій
   (768x559). На проміжних ширинах при тому ж відступі карта впирається
   в шапку, тому тут даємо їй більше повітря зверху. */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.mk26-top__map { top: 96px; width: 104%; }
}

/* 768 з макета: карта 910x390 на top 17, зсунута на 20px вліво */
@media (max-width: 991.98px) {
	.mk26-top__map {
		top: 17px;
		width: 910px;
		margin-left: -20px;
	}
}

/* 390: карти в макеті немає — лишається тільки градієнт */
@media (max-width: 575.98px) {
	.mk26-top__map { display: none; }
}

/* 390: точної геометрії карти в макеті не знайшов, підібрано так,
   щоб вона лишалась у межах першого екрана. */
@media (max-width: 575.98px) {
	.mk26-top__map { top: 90px; width: 200%; }
}

/* --------------------------------------------------------------------------
   Перший екран
   -------------------------------------------------------------------------- */

.mk26-hero {
	position: relative;
	z-index: 1;
	min-height: 500px;
	display: flex;
	align-items: flex-start;
}

.mk26-hero__container {
	position: relative;
	z-index: 1;
	width: 100%;
	/* з макета: контент стартує на 96px від верху секції,
	   низ контенту — за 31px до її кінця */
	padding-top: 96px;
	padding-bottom: 31px;
}

/* --- центральний блок --- */

.mk26-hero__content {
	max-width: 768px;
	margin: 0 auto;
	text-align: center;
}

.mk26-hero__title {
	margin: 0;
	font-size: 68px;
	font-weight: 700;
	line-height: 71px;
	letter-spacing: -2px;
	color: var(--mk26-ink);
	text-transform: none;
}

/* У макеті обидва рядки однакового кегля; синім виділено НИЖНІЙ.
   У полі підзаголовок іде першим, тому em — верхній рядок,
   а колір отримує основний заголовок. */
.mk26-hero__title em {
	display: block;
	font-style: normal;
	font-weight: 700;
	font-size: 1em;
	letter-spacing: inherit;
	color: var(--mk26-ink);
}

.mk26-hero__title { color: var(--mk26-primary); }

/* Поля ACF — візуальний редактор, тому всередині заголовка може бути
   <p>, <span>, <br> тощо. Для них у all.css свої розміри й колір —
   через це другий рядок виходив дрібним і темним. Прирівнюємо все,
   що потрапило в H1, до самого заголовка. */
.mk26-hero__title * {
	margin: 0 !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	font-style: normal !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	text-transform: none !important;
	color: inherit !important;
}

/* Заголовок — один H1 із двох рядків-спанів.
   Верхній («Міжнародне») чорний, нижній («Бюро перекладів») синій. */
.mk26-hero__title-line {
	display: block;
	color: var(--mk26-ink) !important;
}

.mk26-hero__title-line--accent { color: var(--mk26-primary) !important; }

/* сумісність зі старим варіантом розмітки */
.mk26-hero__title em { display: block; color: var(--mk26-ink) !important; }

/* опис у полі зберігся зі старої верстки — приглушуємо посилання,
   щоб абзац не рябів синім */
.mk26-hero__text a {
	color: var(--mk26-muted);
	text-decoration: none;
	border-bottom: 1px solid rgba(90, 95, 107, .35);
}

.mk26-hero__text a:hover { color: var(--mk26-ink); border-bottom-color: var(--mk26-ink); }

.mk26-hero__text {
	max-width: 576px;
	margin: 24px auto 0;
	font-size: 18px;
	line-height: 29px;
	color: var(--mk26-muted);
}

.mk26-hero__text p { margin: 0; }

.mk26-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 32px;
}

/* --- кнопки першого екрана: з макета 52px, стрілка 36 --- */

.mk26-hero .mk26-btn {
	height: 52px;
	gap: 12px;
	padding: 0 8px 0 24px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
}

.mk26-hero .mk26-btn--ghost { height: 54px; border: 1px solid var(--mk26-line); box-shadow: none; }

.mk26-hero .mk26-btn__arrow { width: 36px; height: 36px; }
.mk26-hero .mk26-btn__arrow svg { width: 16px; height: 16px; }

/* --- варіанти кнопки --- */

.mk26-btn--primary {
	color: #fff;
	background: var(--mk26-primary);
}

.mk26-btn--primary:hover { background: var(--mk26-primary-hover); color: #fff; }



.mk26-btn--ghost {
	color: var(--mk26-ink);
	background: var(--mk26-surface);
	box-shadow: 0 2px 10px rgba(4, 4, 4, .06);
}

.mk26-btn--ghost:hover { color: var(--mk26-ink); background: var(--mk26-surface-soft); }

.mk26-btn--ghost .mk26-btn__arrow {
	color: #fff;
	background: var(--mk26-primary);
}

/* --- плаваючі чіпи --- */

.mk26-hero__chips {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* З макета: картка 240x74, фон rgba(255,255,255,.9), рамка 1px,
   радіус 21.6, blur 6, внутрішній відступ 16, проміжок до тексту 12. */
.mk26-chip {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 240px;
	min-height: 74px;
	padding: 16px;
	background: rgba(255, 255, 255, .9);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid var(--mk26-line);
	border-radius: 21.6px;
	box-shadow: 0 8px 24px rgba(10, 11, 15, .06);
}

/* З макета: плашка 40x40, фон #EEF1FF, радіус 16.8, іконка всередині 20px.
   Наші PNG уже містять плашку, тож малюємо їх цілком без власного фону. */
.mk26-chip__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 16.8px;
	line-height: 0;
}

.mk26-chip__icon img { display: block; width: 40px; height: 40px; }

.mk26-chip__text {
	font-size: 14px;
	font-weight: 500;
	line-height: 19px;
	color: var(--mk26-ink);
}

/* Позиції з макета, перераховані відносно контейнера (1344 з полями).
   Значення нижче — для 1440; для 1920 вони інші, див. медіа-запит. */
.mk26-chip--tl { top: 178.4px; left:  101px;  transform: rotate(-6deg); }
.mk26-chip--bl { top: 330.5px; left:   32px;  transform: rotate(3deg); }
.mk26-chip--tr { top: 143.5px; right:  81.4px; transform: rotate(6deg); }
.mk26-chip--br { top: 311.9px; right:  44.5px; transform: rotate(-3deg); width: 240px; }
.mk26-chip--tr { width: 263px; }

/* 1920: секція вища (600), контент нижче, чіпи виходять за контейнер */
@media (min-width: 1600px) {
	.mk26-hero { min-height: 600px; }
	/* 1920: Container стартує на 65.5 від верху секції, контент — ще
	   на 95 нижче → 160.5 */
	.mk26-hero__container { padding-top: 160.5px; padding-bottom: 40px; }
	.mk26-hero__text { max-width: 640px; }

	/* Значення з панелі Figma для 1920. Координати чіпів там задані
	   відносно Container (1280, зсунутий на 65.5px від верху секції),
	   тому до Y додано ці 65.5. По горизонталі Container у макеті
	   починається на 320 — рівно як наш .mk26-container на 1920,
	   тому left/right беруться без перерахунку. */
	.mk26-chip--tl { top: 187.5px; left: -62px; }
	.mk26-chip--bl { top: 334.5px; left:  -6px; }
	.mk26-chip--tr { top: 165.5px; right: -121.28px; }
	.mk26-chip--br { top: 362.5px; right: -36.54px; }
}

/* --------------------------------------------------------------------------
   Перший екран — адаптив
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
	.mk26-hero__container { padding-top: 80px; padding-bottom: 32px; }
	.mk26-hero__title { font-size: 48px; }
	.mk26-chip { max-width: 220px; padding: 12px 14px; }
	/* чіпи тут уже в потоці — див. блок нижче */
}

/* До 1200 чіпи вже не вміщаються з боків — у макеті на вузьких екранах
   вони стають звичайним списком під кнопками (на 390 це List «Що ми
   робимо»: картка 350x74, проміжок 12). */
@media (max-width: 1199.98px) {
	.mk26-hero__chips {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		margin-top: 40px;
	}

	.mk26-chip {
		position: static;
		transform: none;
		width: auto;
		max-width: none;
		min-height: 74px;
	}
}

/* 768 */
@media (max-width: 991.98px) {
	.mk26-hero__container {
		--mk26-gutter: 32px;
		padding-top: 79px;
		padding-bottom: 48px;
	}
	.mk26-hero__title { font-size: 48px; line-height: 50px; letter-spacing: -1px; }
	.mk26-hero__text { max-width: 602px; margin-top: 24px; }
	.mk26-hero__actions { margin-top: 32px; }
	.mk26-hero__chips { margin-top: 48px; }
}

/* 390 з макета: секція 812, бокові поля 20, контент стартує на 63,
   список чіпів — один стовпець, картка 350x74 з проміжком 12. */
@media (max-width: 575.98px) {
	.mk26-hero { min-height: 0; }
	.mk26-hero__container {
		--mk26-gutter: 20px;
		padding-top: 63px;
		padding-bottom: 40px;
	}
	.mk26-hero__title { font-size: 36px; line-height: 38px; letter-spacing: -1px; }
	.mk26-hero__text { font-size: 18px; line-height: 29px; margin-top: 24px; }

	/* у макеті кнопки стовпчиком, але НЕ на всю ширину:
	   163 і 245, обидві по центру */
	.mk26-hero__actions {
		flex-direction: column;
		align-items: center;
		gap: 12px;
		margin-top: 32px;
	}

	.mk26-hero__chips { grid-template-columns: 1fr; margin-top: 48px; }
	.mk26-chip { width: 100%; padding: 16px; }
}

/* ==========================================================================
   ГОЛОВНА 2026 — логотипи брендів

   Слайдер усередині — сторонній плагін ([gslogo]). Його власні стилі не
   чіпаємо: задаємо лише рамку секції, заголовок і затухання по краях.
   ========================================================================== */

/* З макета (1440): секція 300, заголовок на 80 від верху (висота 20),
   ряд логотипів на 140 (висота 80), знизу 80. Контейнер заголовка
   тут 1216, а не 1280 як у першому екрані.
   Фон прозорий — під секцією лежить спільна карта з .mk26-top. */
.mk26-brands {
	position: relative;
	z-index: 1;
	padding: 80px 0;
	background: transparent;
	font-family: var(--mk26-font);
}

.mk26-brands .mk26-container { max-width: calc(1216px + var(--mk26-gutter) * 2); }

.mk26-brands__title {
	margin: 0 0 40px;
	min-height: 20px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: center;
	color: #9AA0AC;
}

/* Затухання по краях. Маска не перехоплює кліки й не залежить від того,
   що саме малює плагін усередині. */
/* на всю ширину вікна — у макеті контейнер цього ряду 1440, не 1216 */
.mk26-brands__track {
	position: relative;
	width: 100%;
	min-height: 96px;
	overflow: hidden;
}

/* Картки логотипів — GS Logo Slider на Swiper.
   Його розмітка: .gs_logo_single--wrapper.swiper-slide > .gs_logo_single
   > .gs_logo_single--inner > img. Swiper проставляє слайду inline-висоту
   (161px), а плагін тягне картинку на width:100% — звідси й розтягнуті
   логотипи. Перебиваємо обидва, щоб вийшла картка 192x80 як у макеті. */

.mk26-brands__track .gs_logo_single--wrapper.swiper-slide {
	height: 96px !important;
	padding: 8px !important;
}

.mk26-brands__track .gs_logo_single {
	height: 100%;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid var(--mk26-line);
	border-radius: 12px;
	box-shadow: none;
}

.mk26-brands__track .gs_logo_single--inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 0;
	height: 100%;
}

.mk26-brands__track .gs_logo_single img {
	width: auto !important;
	max-width: 100%;
	max-height: 100%;
	height: auto;
	margin: 0 auto;
	object-fit: contain;
}

.mk26-brands__track::before,
.mk26-brands__track::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: 96px;
	pointer-events: none;
}

.mk26-brands__track::before {
	left: 0;
	background: linear-gradient(90deg, #F7F8FD 0%, rgba(247, 248, 253, 0) 100%);
}

.mk26-brands__track::after {
	right: 0;
	background: linear-gradient(270deg, #F7F8FD 0%, rgba(247, 248, 253, 0) 100%);
}

@media (max-width: 767.98px) {
	.mk26-brands { padding: 48px 0; }
	.mk26-brands__title { margin-bottom: 24px; font-size: 11px; }
	.mk26-brands__track::before,
	.mk26-brands__track::after { width: 40px; }
}

/* ==========================================================================
   ФУТЕР 2026 — глобальний
   Геометрія з макета 1440: контейнер 1216 всередині 1280,
   чотири колонки 373 / 163 / 163 / 373 з проміжками 48.
   ========================================================================== */

.mk26-footer {
	position: relative;
	z-index: 1;
	padding: 80px 0 32px;
	font-family: var(--mk26-font);
	font-size: 14px;
	line-height: 20px;
	color: var(--mk26-muted);
	background: var(--mk26-surface);
}

.mk26-footer a { text-decoration: none; }

/* Смуга контенту футера з макета — 1216 (1280 мінус поля 32). */
.mk26-footer .mk26-container { max-width: 1280px; }

.mk26-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 373px) minmax(0, 163px) minmax(0, 163px) minmax(0, 373px);
	justify-content: space-between;
	gap: 48px;
}

/* --- ліва колонка: лого, опис, соцмережі --- */

.mk26-footer__logo { display: inline-block; line-height: 0; }

/* Висота з макета, ширина — за пропорціями файлу.
   Сам PNG має 320x100, тож фіксована ширина 149px його розтягувала. */
.mk26-footer__logo img {
	display: block;
	width: auto;
	height: 35px;
}

.mk26-footer__about {
	margin: 19px 0 0;
	max-width: 373px;
	font-size: 14px;
	line-height: 23px;
	color: var(--mk26-muted);
}

.mk26-footer__socials {
	display: flex;
	gap: 12px;
	margin-top: 19px;
}

/* Іконки приходять готовими плашками 40x40 разом із фоном,
   тому тут тільки розмір і реакція на наведення. */
.mk26-footer__social {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transition: transform .18s ease, opacity .18s ease;
}

.mk26-footer__social img {
	display: block;
	width: 40px;
	height: 40px;
}

.mk26-footer__social:hover { opacity: .8; transform: translateY(-2px); }

/* --- колонки меню --- */

.mk26-footer__col-title {
	margin: 0 0 20px;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--mk26-ink);
}

.mk26-footer__menu,
.mk26-footer__bottom-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk26-footer__menu li { margin-bottom: 17px; }
.mk26-footer__menu li:last-child { margin-bottom: 0; }

.mk26-footer__menu a {
	font-size: 14px;
	line-height: 20px;
	color: var(--mk26-muted);
	transition: color .18s ease;
}

.mk26-footer__menu a:hover { color: var(--mk26-primary); }

/* --- розсилка --- */

.mk26-footer__subscribe-text {
	margin: 0 0 19px;
	font-size: 14px;
	line-height: 23px;
	color: var(--mk26-muted);
}

/* Форму малює Contact Form 7, розмітка живе в адмінці, тому стилі
   написані так, щоб працювати і з обгорткою <p>, і без неї.
   У макеті поле та кнопка — всередині однієї «пігулки». */
.mk26-footer__form { position: relative; }

.mk26-footer__form form {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 55px;
	padding: 7px 7px 7px 20px;
	border: 1px solid var(--mk26-line);
	border-radius: var(--mk26-radius-pill);
	background: rgba(244, 246, 251, .5);
}

/* CF7 може загорнути рядок у <p> — робимо його прозорим для flex */
.mk26-footer__form form > p {
	display: contents;
	margin: 0;
}

/* Підпис у макеті всередині поля, тому текст label ховаємо,
   а сам label лишається розтяжним контейнером для інпута. */
.mk26-footer__form label {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	align-items: center;
	font-size: 0;
	line-height: 0;
}

.mk26-footer__form .wpcf7-form-control-wrap {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.mk26-footer__form br { display: none; }

.mk26-footer__form input[type="email"],
.mk26-footer__form input[type="text"] {
	width: 100%;
	height: 26px;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: var(--mk26-font);
	font-size: 14px;
	line-height: 26px;
	color: var(--mk26-ink);
	box-shadow: none;
}

.mk26-footer__form input::placeholder { color: var(--mk26-muted); }
.mk26-footer__form input:focus { outline: none; }

.mk26-footer__form input[type="submit"],
.mk26-footer__form button {
	flex: 0 0 auto;
	width: 129px;
	height: 40px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--mk26-radius-pill);
	background: var(--mk26-primary);
	font-family: var(--mk26-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 40px;
	color: #fff;
	cursor: pointer;
	transition: background .18s ease;
}

.mk26-footer__form input[type="submit"]:hover,
.mk26-footer__form button:hover { background: var(--mk26-primary-hover); }

/* Повідомлення CF7 — під пігулкою, щоб не розпирало її зсередини.
   У all.css для нього чорний фон і моноширинний шрифт, тому
   переоформлюємо як звичайну підказку. */
.mk26-footer__form .wpcf7-response-output,
.mk26-footer__form .wpcf7-not-valid-tip {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 3;
	margin: 8px 0 0 !important;
	padding: 10px 16px !important;
	border: 1px solid rgba(229, 72, 77, .28) !important;
	border-radius: 14px !important;
	background: #FFF2F2 !important;
	box-shadow: 0 10px 28px rgba(10, 11, 15, .10);
	font-family: var(--mk26-font) !important;
	font-size: 13px !important;
	font-weight: 500;
	line-height: 18px !important;
	letter-spacing: 0;
	text-transform: none;
	color: #E5484D !important;
}

/* Успішна відправка — те саме віконце, тільки зелене */
.mk26-footer__form form.sent .wpcf7-response-output {
	border-color: rgba(23, 143, 92, .28) !important;
	background: #F0FBF5 !important;
	color: #178F5C !important;
}

/* CF7 ставить після кнопки свій спінер із власними відступами 0 24px —
   саме він відсував кнопку від правого краю пігулки.
   Стан завантаження показує наш .load-wrapp із mk26-forms.js. */
.mk26-footer__form .wpcf7-spinner { display: none !important; }

/* CF7 кладе на початок форми службовий fieldset із прихованими полями —
   самого вмісту не видно, але у flex-рядку він з'їдає проміжок. */
.mk26-footer__form .hidden-fields-container,
.mk26-footer__form .screen-reader-response { display: none !important; }

/* Стан помилки: CF7 малює червону рамку на самому полі, усередині
   пігулки це виглядає чужорідно — переносимо підсвітку на пігулку. */
.mk26-footer__form input.wpcf7-not-valid {
	border: 0 !important;
	box-shadow: none !important;
}

.mk26-footer__form form.invalid,
.mk26-footer__form form.failed { border-color: #E5484D; }

.mk26-footer__contacts { margin-top: 19px; }

.mk26-footer__phone {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--mk26-ink);
}

.mk26-footer__email {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	line-height: 20px;
	color: var(--mk26-muted);
}

.mk26-footer__phone:hover,
.mk26-footer__email:hover { color: var(--mk26-primary); }

/* --- нижній рядок --- */

.mk26-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid var(--mk26-line);
	font-size: 12px;
	line-height: 16px;
}

.mk26-footer__bottom-menu {
	display: flex;
	gap: 24px;
}

.mk26-footer__bottom-menu a {
	font-size: 12px;
	line-height: 16px;
	color: var(--mk26-muted);
	transition: color .18s ease;
}

.mk26-footer__bottom-menu a:hover { color: var(--mk26-primary); }

/* --- адаптив --- */

/* 768 з макета: бренд на всю ширину, під ним дві колонки меню
   по 328 з проміжком 48, далі розсилка знову на всю ширину.
   Відступи між рядами теж 48, поля контейнера лишаються 32. */
@media (max-width: 1199.98px) {
	.mk26-footer { padding: 80px 0 32px; }

	.mk26-footer__top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 48px;
	}

	.mk26-footer__brand,
	.mk26-footer__subscribe { grid-column: span 2; }

	.mk26-footer__about { max-width: 384px; }

	.mk26-footer__bottom { margin-top: 56px; padding-top: 25px; }
}

/* 390 з макета: один стовпчик із проміжком 48, поля 20,
   нижній рядок теж у стовпчик із проміжком 16. */
@media (max-width: 767.98px) {
	.mk26-footer { padding: 64px 0 32px; }

	.mk26-footer .mk26-container { --mk26-gutter: 20px; }

	.mk26-footer__top {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}

	.mk26-footer__brand,
	.mk26-footer__subscribe { grid-column: auto; }

	.mk26-footer__about { max-width: none; }

	/* У макеті на 390 форма лишається тією самою пігулкою в один рядок:
	   поле 185 і кнопка 129 всередині смуги 350x55. Тому нічого не
	   перебудовуємо, тільки трохи підтискаємо ліве поле. */
	.mk26-footer__form form { padding-left: 16px; }
	.mk26-footer__form input[type="submit"],
	.mk26-footer__form button { width: 129px; }

	.mk26-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		margin-top: 56px;
		padding-top: 25px;
	}

	.mk26-footer__bottom-menu { flex-wrap: wrap; gap: 12px 24px; }
}

/* Кнопка дзвінка Binotel — колір з попередньої верстки.
   Перенесено з інлайн-стилів футера. */
#bingc-phone-button svg.bingc-phone-button-circle circle.bingc-phone-button-circle-inside,
#bingc-phone-button:hover svg.bingc-phone-button-circle circle.bingc-phone-button-circle-inside {
	fill: #44D813 !important;
}

#bingc-phone-button div.bingc-phone-button-tooltip { background: #44D813 !important; }

#bingc-phone-button div.bingc-phone-button-tooltip svg.bingc-phone-button-arrow polyline {
	fill: #44D813 !important;
}

/* ==========================================================================
   КАЛЬКУЛЯТОР ВАРТОСТІ — вибір послуги

   З макета 1440: картка 1216x587, фон #F4F6FB, рамка #E8EBF2, радіус 32,
   внутрішні поля 56. Ліва колонка 436, права 626, проміжок 40.
   ========================================================================== */

.mk26-calc-section {
	/* знизу лише 32 — рівно стільки в макеті до банера зі знижкою */
	padding: 80px 0 32px;
	font-family: var(--mk26-font);
	background: var(--mk26-surface);
}

/* Смуга контенту — 1216, як у шапки та футера. Базовий контейнер ширший
   (1280, він потрібен першому екрану), тому тут звужуємо, інакше картка
   випирає за межі решти сторінки на 32px з кожного боку. */
.mk26-calc-section .mk26-container { max-width: 1280px; }

.mk26-calc {
	padding: 56px;
	border: 1px solid var(--mk26-line);
	border-radius: 32px;
	background: #F4F6FB;
}

.mk26-calc__top {
	display: grid;
	grid-template-columns: 436px minmax(0, 1fr);
	gap: 40px;
}

/* --- ліва колонка --- */

.mk26-calc__title {
	margin: 0;
	font-size: 44px;
	font-weight: 700;
	line-height: 48px;
	letter-spacing: -1px;
	color: var(--mk26-ink);
	text-transform: none;
}

.mk26-calc__text {
	margin-top: 16px;
	font-size: 18px;
	line-height: 29px;
	color: var(--mk26-muted);
}

.mk26-calc__text p { margin: 0; }

/* --- права колонка --- */

.mk26-calc__label {
	margin-bottom: 16px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--mk26-muted);
}

/* У макеті кнопки стоять у дві колонки по 307, але ширина кожної —
   за її текстом, тому клітинку не розтягуємо. */
.mk26-calc__options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 307px));
	justify-items: start;
	gap: 12px;
}

.mk26-calc__option {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	max-width: 100%;
	min-height: 66px;
	padding: 12px 20px;
	border: 1px solid var(--mk26-line);
	border-radius: 21.6px;
	background: var(--mk26-surface);
	font-family: var(--mk26-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: var(--mk26-ink);
	text-align: left;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.mk26-calc__option:hover { border-color: var(--mk26-primary); }

.mk26-calc__option.is-active {
	background: var(--mk26-primary);
	border-color: var(--mk26-primary);
	color: #fff;
}

/* кружечок вибору: порожній у звичайному стані, з галочкою в активного */
.mk26-calc__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-left: auto;
	border: 1px solid var(--mk26-line);
	border-radius: 50%;
	background: transparent;
	color: transparent;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.mk26-calc__mark svg { width: 14px; height: 14px; }

.mk26-calc__option.is-active .mk26-calc__mark {
	background: #fff;
	border-color: #fff;
	color: var(--mk26-primary);
}

/* --- нижня панель --- */

.mk26-calc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 32px;
	padding: 20px;
	border-radius: 21.6px;
	background: var(--mk26-surface);
}

.mk26-calc__chosen-block[hidden] { display: none; }

.mk26-calc__chosen-label {
	font-size: 14px;
	line-height: 20px;
	color: var(--mk26-muted);
}

.mk26-calc__chosen {
	margin-top: 4px;
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;
	color: var(--mk26-ink);
}

.mk26-calc__note {
	margin-top: 4px;
	/* коли вибору ще немає, лишається тільки цей рядок */
	font-size: 14px;
	line-height: 20px;
	color: var(--mk26-muted);
}

.mk26-calc__btn { flex: 0 0 auto; }

/* --- адаптив --- */

@media (max-width: 1199.98px) {
	.mk26-calc { padding: 40px; }

	.mk26-calc__top {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.mk26-calc__title { font-size: 36px; line-height: 42px; }
	.mk26-calc__text { font-size: 16px; line-height: 26px; }
}

@media (max-width: 767.98px) {
	.mk26-calc-section { padding: 48px 0; }

	.mk26-calc {
		padding: 24px 20px;
		border-radius: 24px;
	}

	.mk26-calc__title { font-size: 28px; line-height: 34px; }

	.mk26-calc__options {
		grid-template-columns: minmax(0, 1fr);
		justify-items: stretch;
	}

	.mk26-calc__option { width: 100%; }

	.mk26-calc__summary {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.mk26-calc__btn { justify-content: space-between; }
}

/* ==========================================================================
   СТОРІНКА ЗАМОВЛЕННЯ — поле з обраними послугами

   Значення приходить із калькулятора параметром ?service=...
   Рядок у формі має клас inputs-list__item--service, інакше стара
   верстка малює рамку і навколо підпису, і навколо самого поля.
   ========================================================================== */

/* У старій верстці рядок форми має фіксовані width: 340px і height: 60px,
   тому підпис і поле в нього не вміщались і налазили одне на одне.
   Нашому рядку віддаємо всю ширину і вільну висоту. */
.wpcf7-form .inputs-list__item--service {
	width: 100% !important;
	height: auto !important;
	min-height: 0;
	border: 0;
	padding: 0;
	background: none;
}

/* підпис над полем, а не всередині рамки */
.wpcf7-form .inputs-list__item--service > label {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--mk26-font);
	font-size: 13px;
	line-height: 18px;
	color: var(--mk26-muted);
}

.wpcf7-form .inputs-list__item--service .wpcf7-form-control-wrap {
	display: block;
	position: static;
}

/* Перелік обраних послуг — плашками, а не однорядковим полем:
   довгий список переноситься й читається на будь-якій ширині.
   Саме поле JS переводить у hidden, воно й далі йде з формою. */
.mk26-order__services {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 16px;
	border: 1px solid var(--mk26-line);
	border-radius: 12px;
	background: #F4F6FB;
}

.mk26-order__service {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: var(--mk26-radius-pill);
	background: var(--mk26-surface);
	font-family: var(--mk26-font);
	font-size: 14px;
	line-height: 20px;
	color: var(--mk26-ink);
}

@media (max-width: 575.98px) {
	.mk26-order__services { padding: 10px 12px; gap: 6px; }
	.mk26-order__service { font-size: 13px; padding: 5px 10px; }
}

/* ==========================================================================
   БАНЕР ЗНИЖКИ — синя картка з купоном

   З макета 1440: картка 1216x320, радіус 32, внутрішні поля 48.
   Ліва колонка 576, купон 320x192 праворуч.
   ========================================================================== */

/* Відступ до наступної секції поки тимчасовий — поправимо,
   коли під банером з'явиться наступний блок. */
.mk26-promo-section {
	/* знизу 50 — стільки в макеті до секції відгуків */
	padding: 0 0 50px;
	font-family: var(--mk26-font);
	background: var(--mk26-surface);
}

.mk26-promo-section .mk26-container { max-width: 1280px; }

.mk26-promo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	min-height: 320px;
	padding: 48px;
	border-radius: 32px;
	background: var(--mk26-primary);
	overflow: hidden;
}

/* світла пляма з макета */
.mk26-promo__glow {
	position: absolute;
	top: -80px;
	left: -64px;
	width: 256px;
	height: 256px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	filter: blur(20px);
	pointer-events: none;
}

.mk26-promo__content {
	position: relative;
	z-index: 1;
	max-width: 576px;
}

.mk26-promo__title {
	margin: 0;
	font-size: 30px;
	font-weight: 700;
	line-height: 38px;
	color: #fff;
	text-transform: none;
}

.mk26-promo__list {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.mk26-promo__list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 12px;
	font-size: 14px;
	line-height: 20px;
	color: rgba(255, 255, 255, .85);
}

.mk26-promo__list li:last-child { margin-bottom: 0; }

.mk26-promo__check {
	display: flex;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	color: #fff;
}

.mk26-promo__check svg { width: 16px; height: 16px; }

/* кнопка на банері — чорна, кружок білий зі стрілкою */
.mk26-promo .mk26-promo__btn {
	margin-top: 16px;
	height: 52px;
	padding: 8px 8px 8px 24px;
	font-size: 14px;
	line-height: 20px;
	background: var(--mk26-ink);
}

.mk26-promo .mk26-promo__btn:hover { background: #000; }

/* --- купон --- */

.mk26-coupon {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 0 0 auto;
	width: 320px;
	min-height: 192px;
	border-radius: 26.4px;
	background: var(--mk26-surface);
	overflow: hidden;
}

/* ліва смужка з вертикальним написом і пунктиром */
.mk26-coupon__stub {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 56px;
	background: var(--mk26-surface-soft);
	border-right: 2px dashed var(--mk26-line);
}

.mk26-coupon__stub-text {
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--mk26-primary);
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

/* круглі вирізи зверху і знизу пунктиру */
.mk26-coupon__stub::before,
.mk26-coupon__stub::after {
	content: '';
	position: absolute;
	right: -8px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--mk26-primary);
}

.mk26-coupon__stub::before { top: -12px; }
.mk26-coupon__stub::after { bottom: -12px; }

.mk26-coupon__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 20px 16px;
	text-align: center;
}

.mk26-coupon__value {
	font-size: 60px;
	font-weight: 700;
	line-height: 60px;
	color: var(--mk26-primary);
}

.mk26-coupon__note {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--mk26-muted);
}

.mk26-coupon__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 12px;
	border-radius: var(--mk26-radius-pill);
	background: var(--mk26-surface-soft);
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
	color: var(--mk26-primary);
}

.mk26-coupon__badge svg { width: 14px; height: 14px; }

/* --- адаптив --- */

@media (max-width: 991.98px) {
	.mk26-promo {
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
		padding: 40px;
	}

	.mk26-promo__title { font-size: 26px; line-height: 34px; }
	.mk26-coupon { width: 100%; max-width: 320px; }
}

@media (max-width: 575.98px) {
	.mk26-promo-section { padding-bottom: 48px; }

	.mk26-promo {
		padding: 24px 20px;
		border-radius: 24px;
	}

	.mk26-promo__title { font-size: 22px; line-height: 28px; }
	.mk26-coupon { max-width: none; min-height: 168px; }
	.mk26-coupon__value { font-size: 48px; line-height: 52px; }
}

/* ==========================================================================
   ВІДГУКИ — слайдер карток

   З макета 1440: секція на всю ширину з лініями зверху й знизу,
   внутрішній контейнер 1216, картка 389, проміжок 24.
   ========================================================================== */

.mk26-reviews-section {
	padding: 96px 0;
	font-family: var(--mk26-font);
	background: var(--mk26-surface);
	border-top: 1px solid var(--mk26-line);
	border-bottom: 1px solid var(--mk26-line);
}

.mk26-reviews-section .mk26-container { max-width: 1280px; }

/* --- шапка секції --- */

.mk26-reviews__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 32px;
}

.mk26-reviews__sub {
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--mk26-muted);
}

.mk26-reviews__title {
	margin: 0;
	font-size: 36px;
	font-weight: 700;
	line-height: 40px;
	letter-spacing: -1px;
	color: var(--mk26-ink);
	text-transform: none;
}

/* плашка з оцінкою */

.mk26-rating {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
	padding: 16px 20px;
	border: 1px solid var(--mk26-line);
	border-radius: 21.6px;
	background: rgba(244, 246, 251, .6);
	text-decoration: none;
}

.mk26-rating__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border: 1px solid var(--mk26-line);
	border-radius: 50%;
	background: var(--mk26-surface);
}

.mk26-rating__mark img { display: block; width: 24px; height: 24px; }

/* знак джерела на картці відгука */
.mk26-review__source {
	display: block;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
}

.mk26-rating__body { display: block; }

.mk26-rating__row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mk26-rating__value {
	font-size: 24px;
	font-weight: 700;
	line-height: 24px;
	color: var(--mk26-ink);
}

.mk26-rating__count {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	line-height: 16px;
	color: var(--mk26-muted);
}

/* зірки */

.mk26-stars {
	display: inline-flex;
	gap: 2px;
	color: #FBBC04;
	line-height: 0;
}

/* --- слайдер --- */

.mk26-reviews__viewport {
	overflow: hidden;
	cursor: grab;
	/* Вертикальний свайп лишаємо сторінці, горизонтальний забирає слайдер. */
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}

/* Курсор має бути «рука» і над текстом картки теж — інакше над абзацами
   браузер показує палку для виділення, і слайдер не читається як тягучий.
   Виняток — стрілки й посилання, у них свій курсор. */
.mk26-reviews__viewport * { cursor: inherit; }

.mk26-reviews__viewport a,
.mk26-reviews__viewport button { cursor: pointer; }

.mk26-reviews__viewport.is-dragging { cursor: grabbing; }

/* Поки тягнемо — не виділяємо текст і не ловимо кліки по вмісту. */
.mk26-reviews__viewport.is-dragging,
.mk26-reviews__viewport.is-dragging * {
	user-select: none;
	-webkit-user-select: none;
}

.mk26-reviews__viewport.is-dragging a,
.mk26-reviews__viewport.is-dragging img { pointer-events: none; }

.mk26-reviews__track {
	display: flex;
	gap: 24px;
	transition: transform .35s ease;
	will-change: transform;
}

.mk26-review {
	display: flex;
	flex-direction: column;
	flex: 0 0 389px;
	max-width: 389px;
	padding: 24px;
	border: 1px solid var(--mk26-line);
	border-radius: 21.6px;
	background: var(--mk26-surface);
}

.mk26-review__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;
}

.mk26-review__text {
	flex: 1 1 auto;
	font-size: 15px;
	line-height: 24px;
	color: rgba(10, 11, 15, .9);
}

.mk26-review__text p { margin: 0 0 8px; }
.mk26-review__text p:last-child { margin-bottom: 0; }

.mk26-review__client {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
}

/* фото клієнта, якщо воно заповнене в ACF */
.mk26-review__photo {
	display: block;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
}

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

/* якщо фото немає — кружок із першою літерою імені, як у макеті */
.mk26-review__letter {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--mk26-primary);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	color: #fff;
	text-transform: uppercase;
}

.mk26-review__who { display: block; }

.mk26-review__name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--mk26-ink);
}

.mk26-review__position {
	display: block;
	font-size: 12px;
	line-height: 16px;
	color: var(--mk26-muted);
}

/* --- керування --- */

.mk26-reviews__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin-top: 32px;
}

.mk26-reviews__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--mk26-primary);
	color: #fff;
	cursor: pointer;
	transition: background-color .18s ease, opacity .18s ease;
}

.mk26-reviews__arrow:hover { background: var(--mk26-primary-hover); }

.mk26-reviews__arrow[disabled] {
	opacity: .35;
	cursor: default;
}

.mk26-reviews__arrow svg { width: 16px; height: 16px; }

.mk26-reviews__dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mk26-reviews__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: var(--mk26-radius-pill);
	background: var(--mk26-line);
	cursor: pointer;
	transition: width .2s ease, background-color .2s ease;
}

.mk26-reviews__dot.is-active {
	width: 24px;
	background: var(--mk26-primary);
}

/* --- адаптив --- */

@media (max-width: 1199.98px) {
	.mk26-reviews-section { padding: 64px 0; }

	.mk26-reviews__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.mk26-reviews__title { font-size: 30px; line-height: 36px; }
}

@media (max-width: 767.98px) {
	.mk26-reviews-section { padding: 48px 0; }

	.mk26-reviews__title { font-size: 24px; line-height: 30px; }

	.mk26-review {
		flex-basis: 85%;
		max-width: 85%;
		padding: 20px;
	}

	.mk26-reviews__track { gap: 16px; }
}

/* ==========================================================================
   ЧОМУ НАМ ДОВІРЯЮТЬ — сітка переваг + темне застереження

   З макета 1440: контейнер 1216, сітка 3 колонки, проміжок 12,
   картка 397.33, радіус 21.6. Темний блок радіус 32, поля 40.
   ========================================================================== */

.mk26-trust-section {
	padding: 96px 0;
	font-family: var(--mk26-font);
	background: var(--mk26-surface);
}

.mk26-trust-section .mk26-container { max-width: 1280px; }

.mk26-trust__title {
	margin: 0 0 32px;
	max-width: 800px;
	font-size: 44px;
	font-weight: 700;
	line-height: 48px;
	letter-spacing: -1px;
	color: var(--mk26-ink);
	text-transform: none;
}

/* --- сітка переваг --- */

.mk26-trust__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk26-trust__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 0;
	padding: 20px;
	border: 1px solid var(--mk26-line);
	border-radius: 21.6px;
	background: rgba(244, 246, 251, .5);
	list-style: none;
}

/* Останній пункт у макеті йде на всю ширину рядка. */
.mk26-trust__item--wide { grid-column: 1 / -1; }

.mk26-trust__check {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--mk26-primary);
	color: #FFFFFF;
}

.mk26-trust__check svg { width: 16px; height: 16px; display: block; }

.mk26-trust__text {
	padding-top: 7px;
	font-size: 15px;
	font-weight: 500;
	line-height: 21px;
	color: var(--mk26-ink);
}

/* --- кнопка --- */

.mk26-trust__action {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

/* --- темний блок із застереженнями --- */

.mk26-trust__note {
	margin-top: 32px;
	padding: 40px;
	border: 1px solid var(--mk26-line);
	border-radius: 32px;
	background: var(--mk26-ink);
}

.mk26-trust__note-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
	color: #FFFFFF;
}

.mk26-trust__note-sign {
	display: block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

.mk26-trust__note-sign svg { width: 20px; height: 20px; display: block; }

.mk26-trust__note-title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
	color: #FFFFFF;
	text-transform: none;
}

.mk26-trust__note-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 40px;
	row-gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk26-trust__note-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk26-trust__note-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(37, 64, 255, .2);
	color: #FFFFFF;
}

.mk26-trust__note-icon svg,
.mk26-trust__note-icon img { width: 16px; height: 16px; display: block; }

.mk26-trust__note-text {
	padding-top: 6px;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: rgba(255, 255, 255, .8);
}

/* --- адаптив --- */

@media (max-width: 1199.98px) {
	.mk26-trust-section { padding: 64px 0; }

	.mk26-trust__title { font-size: 34px; line-height: 40px; margin-bottom: 24px; }

	/* 768: сітка переходить у дві колонки, широкий пункт лишається на всю ширину */
	.mk26-trust__list { grid-template-columns: repeat(2, 1fr); }

	.mk26-trust__note { padding: 32px; }
}

@media (max-width: 767.98px) {
	.mk26-trust-section { padding: 48px 0; }

	.mk26-trust__title { font-size: 26px; line-height: 32px; letter-spacing: -.5px; }

	.mk26-trust__list { grid-template-columns: 1fr; }

	.mk26-trust__item { padding: 16px; gap: 12px; }

	.mk26-trust__check { width: 32px; height: 32px; }

	.mk26-trust__text { padding-top: 5px; font-size: 14px; line-height: 20px; }

	.mk26-trust__action .mk26-btn { width: 100%; justify-content: space-between; }

	.mk26-trust__note { padding: 24px; border-radius: 24px; }

	.mk26-trust__note-title { font-size: 17px; line-height: 24px; }

	.mk26-trust__note-list { grid-template-columns: 1fr; }

	.mk26-trust__note-text { font-size: 13px; line-height: 18px; }
}

/* ==========================================================================
   СПЕЦІАЛІЗАЦІЇ — сітка посилань на послуги

   З макета 1440: контейнер 1216, 3 колонки, проміжок 12, картка 397.33×94,
   радіус 21.6, плитка знака 44 з радіусом 16.8.
   ========================================================================== */

.mk26-spec-section {
	padding: 96px 0;
	font-family: var(--mk26-font);
	background: var(--mk26-surface);
}

.mk26-spec-section .mk26-container { max-width: 1280px; }

.mk26-spec__title {
	margin: 0 0 40px;
	font-size: 44px;
	font-weight: 700;
	line-height: 48px;
	letter-spacing: -1px;
	color: var(--mk26-ink);
	text-transform: none;
}

.mk26-spec__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk26-spec__item { margin: 0; padding: 0; list-style: none; }

/* Якщо останній рядок лишається самотнім — розтягуємо його на всю ширину.
   Так у макеті: 9 карток по три діляться без залишку, а на двох колонках
   дев'ята йде на всю ширину. Рахує браузер, тож при зміні кількості
   спеціалізацій нічого правити не треба. */
.mk26-spec__item:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }

.mk26-spec__card {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 94px;
	padding: 24px 26px 24px 24px;
	border: 1px solid var(--mk26-line);
	border-radius: 21.6px;
	background: rgba(244, 246, 251, .4);
	color: var(--mk26-ink);
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease;
}

a.mk26-spec__card:hover,
a.mk26-spec__card:focus-visible {
	background: var(--mk26-surface-soft);
	border-color: #D7DDF5;
	color: var(--mk26-ink);
	text-decoration: none;
}

.mk26-spec__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 16.8px;
	background: var(--mk26-surface);
}

.mk26-spec__icon img { display: block; width: 20px; height: 20px; }

.mk26-spec__name {
	flex: 1 1 auto;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: var(--mk26-ink);
}

.mk26-spec__arrow {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--mk26-primary);
}

.mk26-spec__arrow svg { display: block; width: 20px; height: 20px; }

/* --- нижній ряд --- */

.mk26-spec__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 40px;
}

.mk26-spec__all {
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--mk26-primary);
	text-decoration: none;
}

.mk26-spec__all:hover,
.mk26-spec__all:focus-visible {
	color: var(--mk26-primary-hover);
	text-decoration: underline;
}

/* --- адаптив --- */

@media (max-width: 1199.98px) {
	.mk26-spec-section { padding: 64px 0; }

	.mk26-spec__title { font-size: 34px; line-height: 40px; margin-bottom: 32px; }

	.mk26-spec__list { grid-template-columns: repeat(2, 1fr); }

	/* На двох колонках самотнім лишається непарний останній. */
	.mk26-spec__item:last-child:nth-child(3n + 1) { grid-column: auto; }
	.mk26-spec__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
	.mk26-spec-section { padding: 48px 0; }

	.mk26-spec__title { font-size: 26px; line-height: 32px; letter-spacing: -.5px; margin-bottom: 24px; }

	/* У макеті на мобілці картка стає вертикальною: знак зверху,
	   назва під ним, стрілка прибирається. */
	.mk26-spec__card {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		min-height: 0;
		padding: 16px;
		border-radius: 18px;
	}

	.mk26-spec__name { font-size: 14px; line-height: 20px; }

	.mk26-spec__arrow { display: none; }

	.mk26-spec__actions {
		flex-direction: column-reverse;
		gap: 16px;
		margin-top: 32px;
	}

	.mk26-spec__actions .mk26-btn { width: 100%; justify-content: space-between; }
}

/* ==========================================================================
   ПЕРСОНАЛЬНИЙ ПІДХІД — текст, цитата й цифри

   З макета 1440: контейнер 1216, ліва колонка 683, права 469.33,
   проміжок 64. Картки з цифрами 397×162, радіус 26.4, проміжок 12.
   ========================================================================== */

.mk26-approach-section {
	padding: 96px 0;
	font-family: var(--mk26-font);
	background: var(--mk26-surface);
}

.mk26-approach-section .mk26-container { max-width: 1280px; }

.mk26-approach__top {
	display: grid;
	grid-template-columns: 683fr 469fr;
	gap: 64px;
	align-items: start;
}

.mk26-approach__title {
	margin: 0 0 24px;
	font-size: 44px;
	font-weight: 700;
	line-height: 48px;
	letter-spacing: -1px;
	color: var(--mk26-ink);
	text-transform: none;
}

.mk26-approach__text {
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	color: var(--mk26-muted);
}

.mk26-approach__text p { margin: 0 0 16px; }
.mk26-approach__text p:last-child { margin-bottom: 0; }

/* --- синя цитата --- */

.mk26-quote {
	display: block;
	margin: 0;
	padding: 32px;
	border-radius: 26.4px;
	background: var(--mk26-primary);
	color: #FFFFFF;
}

.mk26-quote__mark {
	display: block;
	width: 40px;
	height: 40px;
	margin-bottom: 24px;
	color: rgba(255, 255, 255, .35);
}

.mk26-quote__mark svg { display: block; width: 40px; height: 40px; }

.mk26-quote__text {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 20px;
	font-weight: 500;
	line-height: 33px;
	color: #FFFFFF;
	quotes: none;
}

.mk26-quote__text p { margin: 0 0 16px; }
.mk26-quote__text p:last-child { margin-bottom: 0; }

/* --- картки з цифрами --- */

.mk26-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 56px 0 0;
	padding: 0;
	list-style: none;
}

.mk26-stats__item {
	margin: 0;
	padding: 32px;
	min-height: 162px;
	border: 1px solid var(--mk26-line);
	border-radius: 26.4px;
	background: rgba(244, 246, 251, .5);
	list-style: none;
}

.mk26-stats__num {
	font-size: 60px;
	font-weight: 700;
	line-height: 60px;
	letter-spacing: -1px;
	color: var(--mk26-primary);
}

.mk26-stats__label {
	margin-top: 12px;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: var(--mk26-muted);
}

/* --- адаптив --- */

@media (max-width: 1199.98px) {
	.mk26-approach-section { padding: 64px 0; }

	/* З 768 текст і цитата йдуть одне під одним на всю ширину,
	   а картки з цифрами лишаються в три колонки. */
	.mk26-approach__top {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.mk26-approach__title { font-size: 34px; line-height: 40px; }

	.mk26-stats { margin-top: 40px; }

	.mk26-stats__item { padding: 24px; min-height: 0; }

	.mk26-stats__num { font-size: 44px; line-height: 48px; }
}

@media (max-width: 767.98px) {
	.mk26-approach-section { padding: 48px 0; }

	.mk26-approach__title { font-size: 26px; line-height: 32px; letter-spacing: -.5px; }

	.mk26-approach__text { font-size: 14px; line-height: 22px; }

	.mk26-quote { padding: 24px; border-radius: 20px; }

	.mk26-quote__mark { width: 32px; height: 32px; margin-bottom: 16px; }
	.mk26-quote__mark svg { width: 32px; height: 32px; }

	.mk26-quote__text { font-size: 16px; line-height: 26px; }

	.mk26-stats { grid-template-columns: 1fr; margin-top: 32px; }

	.mk26-stats__item { padding: 20px; border-radius: 20px; }

	.mk26-stats__num { font-size: 40px; line-height: 44px; }

	.mk26-stats__label { margin-top: 8px; font-size: 14px; line-height: 20px; }
}

/* ==========================================================================
   ЧОМУ MK:TRANSLATIONS — текст у дві колонки + картки цін

   З макета 1440: контейнер 1216, дві колонки по 576, проміжок 64.
   Заголовок і перший абзац — верхній ряд, решта тексту й ціни — нижній.
   ========================================================================== */

.mk26-why-section {
	padding: 96px 0;
	font-family: var(--mk26-font);
	background: var(--mk26-surface);
}

.mk26-why-section .mk26-container { max-width: 1280px; }

/* Порядок у розмітці — заголовок, перший абзац, решта тексту, ціни —
   збігається з порядком читання. Сітка лише розставляє ці чотири блоки
   по двох колонках, тому при згортанні в одну колонку текст лишається
   суцільним і нічого не переставляється. */
.mk26-why {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 64px;
	row-gap: 48px;
	align-items: start;
}

.mk26-why__title {
	margin: 0;
	font-size: 36px;
	font-weight: 700;
	line-height: 45px;
	letter-spacing: -1px;
	color: var(--mk26-ink);
	text-transform: none;
}

.mk26-why__intro,
.mk26-why__text {
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	color: var(--mk26-muted);
}

.mk26-why__intro p,
.mk26-why__text p { margin: 0 0 24px; }

.mk26-why__intro p:last-child,
.mk26-why__text p:last-child { margin-bottom: 0; }

/* --- картки цін --- */

.mk26-prices {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk26-prices__item {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 25px 24px;
	min-height: 94px;
	border: 1px solid var(--mk26-line);
	border-radius: 21.6px;
	background: rgba(244, 246, 251, .5);
	list-style: none;
}

.mk26-prices__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 16.8px;
	background: var(--mk26-surface-soft);
	color: var(--mk26-primary);
}

.mk26-prices__icon svg,
.mk26-prices__icon img { display: block; width: 20px; height: 20px; }

.mk26-prices__name {
	flex: 1 1 auto;
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;
	color: var(--mk26-ink);
}

.mk26-prices__value {
	flex: 0 0 auto;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: var(--mk26-primary);
	text-align: right;
}

/* --- адаптив --- */

@media (max-width: 1199.98px) {
	.mk26-why-section { padding: 64px 0; }

	.mk26-why {
		grid-template-columns: 1fr;
		row-gap: 24px;
	}

	.mk26-why__title { font-size: 30px; line-height: 38px; }

	/* Між текстом і цінами в макеті відступ більший, ніж між абзацами. */
	.mk26-prices { margin-top: 16px; }
}

@media (max-width: 767.98px) {
	.mk26-why-section { padding: 48px 0; }

	.mk26-why__title { font-size: 24px; line-height: 30px; letter-spacing: -.5px; }

	.mk26-why__intro,
	.mk26-why__text { font-size: 14px; line-height: 22px; }

	.mk26-why__intro p,
	.mk26-why__text p { margin-bottom: 16px; }

	.mk26-prices__item {
		flex-wrap: wrap;
		gap: 12px;
		padding: 16px;
		min-height: 0;
		border-radius: 18px;
	}

	.mk26-prices__name { font-size: 15px; line-height: 22px; }

	/* Цінник переходить під назву, інакше на 390 він тисне текст. */
	.mk26-prices__value {
		flex: 1 0 100%;
		padding-left: 60px;
		text-align: left;
		font-size: 15px;
	}
}

/* ==========================================================================
   ТЕРМІНОВИЙ ЗАПИТ — цитата CEO + форма

   З макета 1440: картка 1216×693, дві рівні половини, радіус 32,
   поля 48. Фото в зріст притиснуте до правого нижнього кута синьої
   половини. Поля форми малює Contact Form 7, тому стилізуємо
   його класи, а не власну розмітку.
   ========================================================================== */

.mk26-connect-section {
	padding: 96px 0;
	font-family: var(--mk26-font);
	background: var(--mk26-surface);
}

.mk26-connect-section .mk26-container { max-width: 1280px; }

.mk26-connect {
	display: grid;
	grid-template-columns: 1fr 1fr;
	overflow: hidden;
	border: 1px solid var(--mk26-line);
	border-radius: 32px;
	background: var(--mk26-surface);
}

/* --- синя половина --- */

.mk26-connect__aside {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 693px;
	padding: 48px;
	background: var(--mk26-primary);
	color: #FFFFFF;
	overflow: hidden;
}

.mk26-connect__quote {
	position: relative;
	z-index: 2;
	margin: 0;
	padding: 0;
	border: 0;
	/* Праворуч лишаємо місце під фото. */
	max-width: 450px;
	font-size: 30px;
	font-weight: 600;
	line-height: 41px;
	color: #FFFFFF;
	quotes: none;
}

.mk26-connect__quote p { margin: 0 0 16px; }
.mk26-connect__quote p:last-child { margin-bottom: 0; }

.mk26-connect__person {
	position: relative;
	z-index: 2;
	margin-top: auto;
}

.mk26-connect__name {
	font-size: 18px;
	font-weight: 700;
	line-height: 28px;
	color: #FFFFFF;
}

.mk26-connect__position {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: rgba(255, 255, 255, .7);
}

/* Фото в зріст: притиснуте до правого нижнього кута, під текстом. */
.mk26-connect__photo {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: block;
	width: auto;
	max-width: 55%;
	height: 463px;
	object-fit: contain;
	object-position: right bottom;
	pointer-events: none;
}

/* --- біла половина --- */

.mk26-connect__main { padding: 48px; }

.mk26-connect__title {
	margin: 0 0 12px;
	font-size: 30px;
	font-weight: 700;
	line-height: 36px;
	letter-spacing: -1px;
	color: var(--mk26-ink);
	text-transform: none;
}

.mk26-connect__text {
	margin-bottom: 32px;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--mk26-muted);
}

.mk26-connect__text p { margin: 0 0 8px; }
.mk26-connect__text p:last-child { margin-bottom: 0; }

/* --- поля Contact Form 7 --- */

.mk26-connect__form .wpcf7-form p { margin: 0; }

.mk26-connect__form .wpcf7-form-control-wrap { display: block; margin-bottom: 16px; }

.mk26-connect__form input[type="text"],
.mk26-connect__form input[type="email"],
.mk26-connect__form input[type="tel"],
.mk26-connect__form textarea {
	display: block;
	width: 100%;
	height: 53px;
	padding: 16px;
	border: 1px solid var(--mk26-line);
	border-radius: 16.8px;
	background: rgba(244, 246, 251, .4);
	font-family: var(--mk26-font);
	font-size: 16px;
	line-height: 21px;
	color: var(--mk26-ink);
	box-shadow: none;
	appearance: none;
}

.mk26-connect__form textarea {
	height: 126px;
	resize: vertical;
}

.mk26-connect__form input::placeholder,
.mk26-connect__form textarea::placeholder {
	color: var(--mk26-muted);
	opacity: 1;
}

.mk26-connect__form input:focus,
.mk26-connect__form textarea:focus {
	outline: none;
	border-color: var(--mk26-primary);
	background: var(--mk26-surface);
}

.mk26-connect__form input[type="submit"],
.mk26-connect__form button[type="submit"] {
	display: block;
	width: 100%;
	height: 56px;
	margin-top: 8px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--mk26-radius-pill);
	background: var(--mk26-primary);
	font-family: var(--mk26-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: #FFFFFF;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: background .18s ease;
}

.mk26-connect__form input[type="submit"]:hover,
.mk26-connect__form button[type="submit"]:hover {
	background: var(--mk26-primary-hover);
}

/* Рядок про згоду — його віддає сама форма. */
.mk26-connect__form .wpcf7-form > p:last-child,
.mk26-connect__form .form-agreement,
.mk26-connect__form .agreement {
	margin-top: 16px;
	font-size: 12px;
	line-height: 20px;
	color: var(--mk26-muted);
}

.mk26-connect__form a { color: var(--mk26-muted); text-decoration: underline; }
.mk26-connect__form a:hover { color: var(--mk26-primary); }

/* Спінер CF7 ламає сітку кнопки — прибираємо, як у підписці футера. */
.mk26-connect__form .wpcf7-spinner { display: none !important; }

/* --- адаптив --- */

@media (max-width: 1199.98px) {
	.mk26-connect-section { padding: 64px 0; }

	.mk26-connect { grid-template-columns: 1fr; }

	.mk26-connect__aside {
		min-height: 0;
		padding: 32px;
		/* Щоб фото не перекривало текст, лишаємо під нього висоту. */
		padding-bottom: 240px;
	}

	.mk26-connect__quote { max-width: 100%; font-size: 24px; line-height: 34px; }

	.mk26-connect__person { margin-top: 24px; }

	.mk26-connect__photo { height: 300px; max-width: 48%; }

	.mk26-connect__main { padding: 32px; }
}

@media (max-width: 767.98px) {
	.mk26-connect-section { padding: 48px 0; }

	.mk26-connect { border-radius: 24px; }

	.mk26-connect__aside { padding: 24px; padding-bottom: 180px; }

	.mk26-connect__quote { font-size: 19px; line-height: 27px; max-width: 62%; }

	.mk26-connect__photo { height: 230px; max-width: 46%; }

	.mk26-connect__main { padding: 24px; }

	.mk26-connect__title { font-size: 24px; line-height: 30px; letter-spacing: -.5px; }

	.mk26-connect__text { margin-bottom: 24px; font-size: 14px; line-height: 22px; }
}

/* --------------------------------------------------------------------------
   Форма терміновго запиту: правки під реальну розмітку Contact Form 7

   Форма зібрана в адмінці CF7 і тягне за собою класи старої теми
   (.inputs-list__item, .input-corner, .btn). Вони специфічніші за
   прості селектори вище, тому тут перебиваємо адресно — у межах блоку.
   -------------------------------------------------------------------------- */

/* Стара тема задає пунктам фіксовані 340×60 — у нову сітку це не лізе. */
.mk26-connect__form .inputs-list,
.mk26-connect__form .inputs-list__item {
	width: 100%;
	height: auto;
	max-width: none;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.mk26-connect__form .inputs-list__item:last-child { margin-bottom: 0; }

.mk26-connect__form .inputs-list__item input {
	width: 100%;
	height: 53px;
	padding: 16px;
	border: 1px solid var(--mk26-line);
	color: var(--mk26-ink);
	font-family: var(--mk26-font);
	font-size: 16px;
	line-height: 21px;
}

/* --- кнопка ---
   У формі вона може бути <input type="submit">, <button> або з класом
   .btn зі старої теми — перебиваємо всі три випадки. */

.mk26-connect__form .wpcf7-form input[type="submit"],
.mk26-connect__form .wpcf7-form button[type="submit"],
.mk26-connect__form .wpcf7-form .btn,
.mk26-connect__form .wpcf7-form .wpcf7-submit {
	display: block;
	width: 100%;
	max-width: none;
	min-width: 0;
	height: 56px;
	margin: 8px 0 0;
	padding: 0 24px;
	border: 0;
	border-radius: var(--mk26-radius-pill);
	background: var(--mk26-primary);
	font-family: var(--mk26-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0;
	color: #FFFFFF;
	text-align: center;
	text-transform: none;
	cursor: pointer;
}

.mk26-connect__form .wpcf7-form input[type="submit"]:hover,
.mk26-connect__form .wpcf7-form button[type="submit"]:hover,
.mk26-connect__form .wpcf7-form .btn:hover,
.mk26-connect__form .wpcf7-form .wpcf7-submit:hover {
	background: var(--mk26-primary-hover);
}

/* Стрілка-картинка всередині старої кнопки тут зайва. */
.mk26-connect__form .wpcf7-form .btn img { display: none; }

/* Список полів у старій темі — flex із space-between, а пункти мають
   фіксовані 340×60. У колонку це не складається, тому вимикаємо. */
.mk26-connect__form .inputs-list { display: block; }

/* Пункт телефону стара тема розкладала у flex, щоб ліворуч стала
   коробка з кодом країни. Коробки в цій формі немає, тож поле просто
   не доростало до краю — повертаємо звичайний блок. */
.mk26-connect__form .inputs-list__item--phone { display: block !important; }

.mk26-connect__form .inputs-list__item { overflow: visible; }

.mk26-connect__form .wpcf7-form-control-wrap { position: relative; }

/* Декор зі старого макета: кутик 10×10 і значки «валідне / невалідне»
   праворуч у полі. У новому дизайні сигнал один — червона рамка. */
.mk26-connect__form .input-corner,
.mk26-connect__form .input-valid,
.mk26-connect__form .input-invalid { display: none; }

/* --- повідомлення про помилки --- */

/* Підказка під конкретним полем. */
.mk26-connect__form .wpcf7-not-valid-tip {
	position: static !important;
	transform: none !important;
	animation: none !important;
	display: block;
	margin-top: 6px;
	padding: 0 4px;
	background: none !important;
	font-family: var(--mk26-font) !important;
	font-size: 13px !important;
	line-height: 18px;
	text-align: left !important;
	color: #E52222 !important;
}

/* Загальне повідомлення форми — віконце поверх форми, як у футері.

   В all.css для нього задано position:absolute;top:50%;left:15px;right:15px
   плюс fadeOutModal із затримкою 2s. Абсолютне позиціонування рахується
   від найближчого предка з position, а в новому блоці такого не було —
   тому віконце їхало в середину сторінки й лишалося непоміченим.
   Якорем робимо саму форму, решту лишаємо як було.

   Фон і рамку в all.css задано через !important, тож перебиваємо так само. */
.mk26-connect__form { position: relative; }

.mk26-connect__form .wpcf7-response-output {
	position: absolute;
	top: 50%;
	left: 16px;
	right: 16px;
	z-index: 5;
	transform: translateY(-50%);
	margin: 0 !important;
	padding: 16px 20px !important;
	border: 1px solid rgba(229, 72, 77, .28) !important;
	border-radius: 16.8px !important;
	background-color: #FFF2F2 !important;
	box-shadow: 0 14px 36px rgba(10, 11, 15, .14);
	font-family: var(--mk26-font) !important;
	font-size: 14px !important;
	line-height: 20px !important;
	text-align: center !important;
	color: #E5484D !important;
}

.mk26-connect__form form.sent .wpcf7-response-output {
	border-color: rgba(23, 143, 92, .28) !important;
	background-color: #F0FBF5 !important;
	color: #178F5C !important;
}

/* Поки форма не надіслана, CF7 сам ховає це поле — не заважаємо. */
.mk26-connect__form form.init .wpcf7-response-output,
.mk26-connect__form form.resetting .wpcf7-response-output,
.mk26-connect__form form.submitting .wpcf7-response-output { display: none; }

/* Поле з помилкою — рамка в тон підказці, радіус як у решти полів. */
.mk26-connect__form .inputs-list__item input.wpcf7-not-valid,
.mk26-connect__form textarea.wpcf7-not-valid {
	border: 1px solid #E52222 !important;
	border-radius: 16.8px;
}

/* --- поле файлу ---

   Розмітка пункту:
     li.inputs-list__item--file
       div.input-file__text   — підпис «Додати файл» (absolute, left 20)
       div.input-file__img    — скріпка (absolute, right 20)
       div.input-inline
         label                — видима коробка
           span.wpcf7-form-control-wrap
             input[type=file] — нативне поле
       span.input-corner      — декор, прибраний вище

   Коробку малює label. Нативне поле розтягуємо на всю коробку й робимо
   прозорим: клік по будь-якому місцю відкриває вибір файлу, а видно
   при цьому підпис зі скріпкою, як у макеті. */

.mk26-connect__form .inputs-list__item--file,
.mk26-connect__form .inputs-list__item--mfile { height: auto; }

.mk26-connect__form .inputs-list__item--file label,
.mk26-connect__form .inputs-list__item--mfile label {
	position: relative;
	display: block;
	width: 100%;
	height: 50px;
	padding: 0;
	border: 1px dashed var(--mk26-line);
	border-radius: 16.8px;
	background: transparent;
	font-family: var(--mk26-font);
	font-size: 14px;
	line-height: 20px;
	cursor: pointer;
}

/* Обгортка CF7 всередині коробки не має власних відступів. */
.mk26-connect__form .inputs-list__item--file .wpcf7-form-control-wrap,
.mk26-connect__form .inputs-list__item--mfile .wpcf7-form-control-wrap {
	position: absolute;
	inset: 0;
	display: block;
	margin: 0;
}

.mk26-connect__form .inputs-list__item--file input[type="file"],
.mk26-connect__form .inputs-list__item--mfile input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	opacity: 0;
	cursor: pointer;
}

.mk26-connect__form .input-file__text {
	font-family: var(--mk26-font) !important;
	font-size: 14px !important;
	line-height: 20px !important;
	letter-spacing: 0 !important;
	color: var(--mk26-muted) !important;
}

.mk26-connect__form .input-file__img { opacity: 1; }

/* ==========================================================================
   ЩО ВИ ОТРИМАЄТЕ — текст ліворуч, картки праворуч

   З макета 1440: контейнер 1216, ліва колонка 469, права 682.67,
   проміжок 64. Картки 335.33×211 у дві колонки, проміжок 12,
   радіус 21.6, плитка значка 48 з радіусом 16.8.
   ========================================================================== */

.mk26-gain-section {
	padding: 96px 0;
	font-family: var(--mk26-font);
	background: var(--mk26-surface);
}

.mk26-gain-section .mk26-container { max-width: 1280px; }

.mk26-gain {
	display: grid;
	grid-template-columns: 469fr 683fr;
	gap: 64px;
	align-items: start;
}

.mk26-gain__title {
	margin: 0 0 24px;
	font-size: 44px;
	font-weight: 700;
	line-height: 48px;
	letter-spacing: -1px;
	color: var(--mk26-ink);
	text-transform: none;
}

.mk26-gain__text {
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	color: var(--mk26-muted);
}

.mk26-gain__text p { margin: 0 0 16px; }
.mk26-gain__text p:last-child { margin-bottom: 0; }

/* --- картки --- */

.mk26-gain__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk26-gain__item {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 24px;
	border: 1px solid var(--mk26-line);
	border-radius: 21.6px;
	background: rgba(244, 246, 251, .5);
	list-style: none;
}

.mk26-gain__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 16.8px;
	background: rgba(37, 64, 255, .1);
	color: var(--mk26-primary);
}

.mk26-gain__icon svg,
.mk26-gain__icon img { display: block; width: 24px; height: 24px; }

.mk26-gain__text-item {
	font-size: 15px;
	font-weight: 400;
	line-height: 24px;
	color: rgba(10, 11, 15, .9);
}

/* --- адаптив --- */

@media (max-width: 1199.98px) {
	.mk26-gain-section { padding: 64px 0; }

	/* З 768 текст іде на всю ширину над картками, картки лишаються 2×2. */
	.mk26-gain {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.mk26-gain__title { font-size: 34px; line-height: 40px; }
}

@media (max-width: 767.98px) {
	.mk26-gain-section { padding: 48px 0; }

	.mk26-gain__title { font-size: 26px; line-height: 32px; letter-spacing: -.5px; }

	.mk26-gain__text { font-size: 14px; line-height: 22px; }

	.mk26-gain__list { grid-template-columns: 1fr; }

	.mk26-gain__item { padding: 20px; border-radius: 18px; gap: 12px; }

	.mk26-gain__icon { width: 40px; height: 40px; border-radius: 14px; }
	.mk26-gain__icon svg,
	.mk26-gain__icon img { width: 20px; height: 20px; }

	.mk26-gain__text-item { font-size: 14px; line-height: 22px; }
}

/* ==========================================================================
   ПОСЛУГИ ВЕРСТКИ — темна картка з логотипами програм

   З макета 1440: картка 1216×472, радіус 32, поля 64.
   Ліва колонка 524, права 524 — сітка плиток 3×2 по 164 з проміжком 16.
   ========================================================================== */

.mk26-layout-section {
	padding: 96px 0;
	font-family: var(--mk26-font);
	background: var(--mk26-surface);
}

.mk26-layout-section .mk26-container { max-width: 1280px; }

.mk26-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px 64px;
	align-items: center;
	padding: 64px;
	border-radius: 32px;
	background: var(--mk26-ink);
	color: #FFFFFF;
}

/* Поки логотипів немає, текст займає всю ширину. */
.mk26-layout--solo { grid-template-columns: 1fr; }

.mk26-layout__title {
	margin: 0 0 20px;
	font-size: 36px;
	font-weight: 700;
	line-height: 45px;
	letter-spacing: -1px;
	color: #FFFFFF;
	text-transform: none;
}

.mk26-layout__text {
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	color: rgba(255, 255, 255, .7);
}

.mk26-layout__text p { margin: 0 0 16px; }
.mk26-layout__text p:last-child { margin-bottom: 0; }

.mk26-layout__btn { display: inline-flex; }

/* --- плитки --- */

.mk26-layout__apps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk26-layout__app {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	/* Квадрат тримаємо пропорцією, а не фіксованим розміром —
	   так плитки лишаються квадратними на будь-якій ширині. */
	aspect-ratio: 1 / 1;
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 21.6px;
	background: rgba(255, 255, 255, .05);
	list-style: none;
}

.mk26-layout__app img {
	display: block;
	width: 48px;
	height: 48px;
	object-fit: contain;
}

/* --- адаптив --- */

@media (max-width: 1199.98px) {
	.mk26-layout-section { padding: 64px 0; }

	/* З 768 текст іде над плитками, плитки лишаються 3×2. */
	.mk26-layout {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 40px;
	}

	.mk26-layout__title { font-size: 30px; line-height: 38px; }
}

@media (max-width: 767.98px) {
	.mk26-layout-section { padding: 48px 0; }

	.mk26-layout { padding: 24px; border-radius: 24px; gap: 24px; }

	.mk26-layout__title { font-size: 24px; line-height: 30px; letter-spacing: -.5px; }

	.mk26-layout__text { font-size: 14px; line-height: 22px; }

	.mk26-layout__btn { width: 100%; justify-content: space-between; }

	.mk26-layout__apps { gap: 12px; }

	.mk26-layout__app { border-radius: 18px; }

	.mk26-layout__app img { width: 36px; height: 36px; }
}

/* ==========================================================================
   FAQ — акордеон у дві колонки

   З макета 1440: заголовок по центру, сітка 1024 всередині контейнера
   1216, картка 506, проміжок 12. Закрита картка 80 заввишки,
   відкрита росте під відповідь.
   ========================================================================== */

.mk26-faq-section {
	padding: 96px 0;
	font-family: var(--mk26-font);
	background: var(--mk26-surface);
}

.mk26-faq-section .mk26-container { max-width: 1280px; }

.mk26-faq__title {
	margin: 0 0 40px;
	font-size: 32px;
	font-weight: 700;
	line-height: 40px;
	letter-spacing: -1px;
	color: var(--mk26-ink);
	text-align: center;
	text-transform: none;
}

.mk26-faq {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	/* Сітка вужча за контейнер — так у макеті. */
	max-width: 1024px;
	margin: 0 auto;
	padding: 0;
	/* Кожна картка своєї висоти: відкрита росте, сусідня лишається
	   короткою. Без цього grid розтягнув би весь рядок. */
	align-items: start;
	list-style: none;
}

.mk26-faq__item {
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--mk26-line);
	border-radius: 21.6px;
	background: rgba(244, 246, 251, .4);
	list-style: none;
	transition: background .18s ease, border-color .18s ease;
}

.mk26-faq__item.is-open {
	border-color: rgba(37, 64, 255, .4);
	background: rgba(238, 241, 255, .4);
}

/* Заголовок — це h3 заради розмітки, але вся кнопка всередині. */
.mk26-faq__q {
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-transform: none;
}

.mk26-faq__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	min-height: 80px;
	padding: 24px;
	border: 0;
	background: none;
	font-family: var(--mk26-font);
	text-align: left;
	cursor: pointer;
}

.mk26-faq__text {
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;
	color: var(--mk26-ink);
}

.mk26-faq__sign {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--mk26-surface-soft);
	color: var(--mk26-primary);
	transition: background .18s ease, color .18s ease, transform .18s ease;
}

.mk26-faq__sign svg { display: block; width: 16px; height: 16px; }

/* Відкрита картка: плюс стає хрестиком простим поворотом. */
.mk26-faq__item.is-open .mk26-faq__sign {
	background: var(--mk26-primary);
	color: #FFFFFF;
	transform: rotate(45deg);
}

/* Панель відповіді. Висоту рахує скрипт — тому тут лише нуль
   і перехід; без max-height анімація не працює на auto. */
.mk26-faq__panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height .28s ease;
}

.mk26-faq__answer {
	padding: 0 24px 24px;
	font-size: 14px;
	font-weight: 400;
	line-height: 23px;
	color: var(--mk26-muted);
}

.mk26-faq__answer p { margin: 0 0 12px; }
.mk26-faq__answer p:last-child { margin-bottom: 0; }

.mk26-faq__answer a { color: var(--mk26-primary); }

/* Без JS відповіді мають лишатися читабельними. */
.no-js .mk26-faq__panel { max-height: none; }

/* --- адаптив --- */

@media (max-width: 1199.98px) {
	.mk26-faq-section { padding: 64px 0; }

	.mk26-faq__title { font-size: 28px; line-height: 36px; margin-bottom: 32px; }
}

@media (max-width: 767.98px) {
	.mk26-faq-section { padding: 48px 0; }

	.mk26-faq__title { font-size: 24px; line-height: 30px; letter-spacing: -.5px; margin-bottom: 24px; }

	.mk26-faq { grid-template-columns: 1fr; }

	.mk26-faq__item { border-radius: 18px; }

	.mk26-faq__btn { min-height: 0; padding: 16px; gap: 12px; }

	.mk26-faq__text { font-size: 15px; line-height: 22px; }

	.mk26-faq__answer { padding: 0 16px 16px; font-size: 13px; line-height: 21px; }
}

/* ==========================================================================
   ЯК ОРГАНІЗУВАТИ СПІВПРАЦЮ — кроки в рядок

   З макета 1440: контейнер 1216, чотири колонки по 286, проміжок 24.
   Крізь плитки значків іде тонка лінія на рівні їхнього центру.
   ========================================================================== */

.mk26-steps-section {
	padding: 96px 0;
	font-family: var(--mk26-font);
	background: var(--mk26-surface);
}

.mk26-steps-section .mk26-container { max-width: 1280px; }

.mk26-steps__title {
	margin: 0 0 48px;
	max-width: 768px;
	font-size: 44px;
	font-weight: 700;
	line-height: 48px;
	letter-spacing: -1px;
	color: var(--mk26-ink);
	text-transform: none;
}

.mk26-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mk26-step;
}

/* Лінія на рівні центру плиток. Малюємо псевдоелементом списку,
   щоб вона йшла суцільно під усіма кроками, а плитки лягали поверх. */
.mk26-steps::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 28px;
	height: 1px;
	background: var(--mk26-line);
}

.mk26-steps__item {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk26-steps__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 11px;
	border-radius: 21.6px;
	background: var(--mk26-surface-soft);
	color: var(--mk26-primary);
	/* Обводка кольору фону ховає лінію під плиткою. */
	box-shadow: 0 0 0 6px var(--mk26-surface);
}

/* Перший крок у макеті виділений — рахує порядок, а не поле в ACF. */
.mk26-steps__item:first-child .mk26-steps__icon {
	background: var(--mk26-primary);
	color: #FFFFFF;
}

.mk26-steps__icon svg,
.mk26-steps__icon img { display: block; width: 24px; height: 24px; }

.mk26-steps__name {
	margin: 0 0 11px;
	font-size: 18px;
	font-weight: 600;
	line-height: 25px;
	color: var(--mk26-ink);
	text-transform: none;
}

.mk26-steps__text {
	font-size: 14px;
	font-weight: 400;
	line-height: 23px;
	color: var(--mk26-muted);
}

/* --- адаптив --- */

@media (max-width: 1199.98px) {
	.mk26-steps-section { padding: 64px 0; }

	.mk26-steps__title { font-size: 34px; line-height: 40px; margin-bottom: 32px; }

	/* З 768 кроки стають 2×2, і лінія вже не має сенсу — у макеті її немає. */
	.mk26-steps { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }

	.mk26-steps::before { display: none; }

	.mk26-steps__icon { box-shadow: none; }
}

@media (max-width: 767.98px) {
	.mk26-steps-section { padding: 48px 0; }

	.mk26-steps__title { font-size: 26px; line-height: 32px; letter-spacing: -.5px; margin-bottom: 24px; }

	.mk26-steps { grid-template-columns: 1fr; gap: 24px; }

	.mk26-steps__icon { width: 48px; height: 48px; border-radius: 18px; margin-bottom: 12px; }
	.mk26-steps__icon svg,
	.mk26-steps__icon img { width: 20px; height: 20px; }

	.mk26-steps__name { font-size: 16px; line-height: 22px; margin-bottom: 8px; }

	.mk26-steps__text { font-size: 13px; line-height: 21px; }
}

/* ==========================================================================
   СВІЖІ КЕЙСИ — одна картка на всю ширину

   З макета 1440: картка 1216×407, дві рівні половини по 607,
   поля правої частини 48.
   ========================================================================== */

.mk26-cases-section {
	padding: 96px 0;
	font-family: var(--mk26-font);
	background: var(--mk26-surface);
}

.mk26-cases-section .mk26-container { max-width: 1280px; }

.mk26-cases__title {
	margin: 0 0 40px;
	font-size: 44px;
	font-weight: 700;
	line-height: 48px;
	letter-spacing: -1px;
	color: var(--mk26-ink);
	text-transform: none;
}

.mk26-case {
	display: grid;
	grid-template-columns: 1fr 1fr;
	overflow: hidden;
	border: 1px solid var(--mk26-line);
	border-radius: 32px;
	background: var(--mk26-surface);
}

/* Без зображення текст займає всю картку. */
.mk26-case--noimg { grid-template-columns: 1fr; }

.mk26-case__media {
	position: relative;
	min-height: 405px;
	background: var(--mk26-surface-soft);
}

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

.mk26-case__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 48px;
	background: rgba(244, 246, 251, .4);
}

/* --- плашки --- */

.mk26-case__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.mk26-case__tag {
	margin: 0;
	padding: 4px 12px;
	border-radius: var(--mk26-radius-pill);
	background: var(--mk26-surface-soft);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	color: var(--mk26-primary);
	list-style: none;
}

.mk26-case__name {
	margin: 0 0 20px;
	font-size: 30px;
	font-weight: 700;
	line-height: 38px;
	letter-spacing: -1px;
	color: var(--mk26-ink);
	text-transform: none;
}

.mk26-case__text {
	margin-bottom: 27px;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	color: var(--mk26-muted);
}

.mk26-case__text p { margin: 0 0 12px; }
.mk26-case__text p:last-child { margin-bottom: 0; }

.mk26-case__btn { display: inline-flex; }

/* --- адаптив --- */

@media (max-width: 1199.98px) {
	.mk26-cases-section { padding: 64px 0; }

	.mk26-cases__title { font-size: 34px; line-height: 40px; margin-bottom: 32px; }

	/* З 768 зображення зверху, текст під ним. */
	.mk26-case { grid-template-columns: 1fr; }

	.mk26-case__media { min-height: 0; aspect-ratio: 16 / 9; }

	.mk26-case__body { padding: 32px; }

	.mk26-case__name { font-size: 26px; line-height: 34px; }
}

@media (max-width: 767.98px) {
	.mk26-cases-section { padding: 48px 0; }

	.mk26-cases__title { font-size: 26px; line-height: 32px; letter-spacing: -.5px; margin-bottom: 24px; }

	.mk26-case { border-radius: 24px; }

	.mk26-case__media { aspect-ratio: 4 / 3; }

	.mk26-case__body { padding: 24px; }

	.mk26-case__name { font-size: 22px; line-height: 28px; letter-spacing: -.5px; margin-bottom: 16px; }

	.mk26-case__text { margin-bottom: 20px; font-size: 14px; line-height: 22px; }

	.mk26-case__btn { width: 100%; justify-content: space-between; }
}

/* ==========================================================================
   ІНШІ ПОСЛУГИ — три картки-посилання

   З макета 1440: контейнер 1216, три колонки по 397, проміжок 12,
   радіус 21.6, поля 32. Плитка значка 48 біла з радіусом 16.8.
   ========================================================================== */

.mk26-other-section {
	padding: 96px 0;
	font-family: var(--mk26-font);
	background: var(--mk26-surface);
}

.mk26-other-section .mk26-container { max-width: 1280px; }

.mk26-other__title {
	margin: 0 0 40px;
	font-size: 44px;
	font-weight: 700;
	line-height: 48px;
	letter-spacing: -1px;
	color: var(--mk26-ink);
	text-transform: none;
}

.mk26-other__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk26-other__item { margin: 0; padding: 0; list-style: none; height: 100%; }

.mk26-other__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 32px;
	border: 1px solid var(--mk26-line);
	border-radius: 21.6px;
	background: rgba(244, 246, 251, .4);
	color: var(--mk26-ink);
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease;
}

a.mk26-other__card:hover,
a.mk26-other__card:focus-visible {
	background: var(--mk26-surface-soft);
	border-color: #D7DDF5;
	color: var(--mk26-ink);
	text-decoration: none;
}

.mk26-other__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 19px;
}

.mk26-other__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 16.8px;
	background: var(--mk26-surface);
	color: var(--mk26-primary);
}

.mk26-other__icon svg,
.mk26-other__icon img { display: block; width: 24px; height: 24px; }

.mk26-other__arrow {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--mk26-primary);
}

.mk26-other__arrow svg { display: block; width: 20px; height: 20px; }

.mk26-other__name {
	display: block;
	margin-bottom: 19px;
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
	color: var(--mk26-ink);
}

.mk26-other__text {
	display: block;
	font-size: 14px;
	font-weight: 400;
	line-height: 23px;
	color: var(--mk26-muted);
}

/* --- адаптив --- */

@media (max-width: 1199.98px) {
	.mk26-other-section { padding: 64px 0; }

	.mk26-other__title { font-size: 34px; line-height: 40px; margin-bottom: 32px; }

	.mk26-other__list { grid-template-columns: repeat(2, 1fr); }

	/* Непарна остання картка не має висіти половиною рядка. */
	.mk26-other__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
	.mk26-other-section { padding: 48px 0; }

	.mk26-other__title { font-size: 26px; line-height: 32px; letter-spacing: -.5px; margin-bottom: 24px; }

	.mk26-other__list { grid-template-columns: 1fr; }

	.mk26-other__item:last-child:nth-child(odd) { grid-column: auto; }

	.mk26-other__card { padding: 20px; border-radius: 18px; }

	.mk26-other__top { margin-bottom: 14px; }

	.mk26-other__icon { width: 40px; height: 40px; border-radius: 14px; }
	.mk26-other__icon svg,
	.mk26-other__icon img { width: 20px; height: 20px; }

	.mk26-other__name { font-size: 17px; line-height: 24px; margin-bottom: 10px; }

	.mk26-other__text { font-size: 13px; line-height: 21px; }
}

/* ==========================================================================
   БІЛЬШЕ СТАТЕЙ У БЛОЗІ — три останні записи

   З макета 1440: контейнер 1216, три колонки по 389, проміжок 24.
   Зображення 389×292 з радіусом 21.6, під ним плашка й назва.
   ========================================================================== */

.mk26-blog-section {
	padding: 96px 0;
	font-family: var(--mk26-font);
	background: var(--mk26-surface);
}

.mk26-blog-section .mk26-container { max-width: 1280px; }

.mk26-blog__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
}

.mk26-blog__title {
	margin: 0;
	font-size: 44px;
	font-weight: 700;
	line-height: 48px;
	letter-spacing: -1px;
	color: var(--mk26-ink);
	text-transform: none;
}

.mk26-blog__all { flex: 0 0 auto; }

.mk26-blog__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk26-blog__item { margin: 0; padding: 0; list-style: none; }

.mk26-blog__card {
	display: block;
	color: var(--mk26-ink);
	text-decoration: none;
}

.mk26-blog__media {
	display: block;
	overflow: hidden;
	margin-bottom: 20px;
	/* Пропорція з макета — так картки лишаються рівними за будь-якої
	   ширини, незалежно від розміру завантаженої картинки. */
	aspect-ratio: 389 / 292;
	border-radius: 21.6px;
	background: var(--mk26-surface-soft);
}

.mk26-blog__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.mk26-blog__card:hover .mk26-blog__media img { transform: scale(1.03); }

.mk26-blog__tag {
	display: inline-block;
	margin-bottom: 20px;
	padding: 4px 12px;
	border-radius: var(--mk26-radius-pill);
	background: var(--mk26-surface-soft);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	color: var(--mk26-primary);
}

.mk26-blog__name {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.mk26-blog__text {
	font-size: 18px;
	font-weight: 600;
	line-height: 25px;
	color: var(--mk26-ink);
}

.mk26-blog__arrow {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 3px;
	color: var(--mk26-primary);
}

.mk26-blog__arrow svg { display: block; width: 20px; height: 20px; }

.mk26-blog__card:hover .mk26-blog__text { color: var(--mk26-primary); }

/* --- адаптив --- */

@media (max-width: 1199.98px) {
	.mk26-blog-section { padding: 64px 0; }

	.mk26-blog__title { font-size: 34px; line-height: 40px; }

	.mk26-blog__head { margin-bottom: 32px; }

	.mk26-blog__list { grid-template-columns: repeat(2, 1fr); }

	/* Третя картка не має висіти половиною рядка. */
	.mk26-blog__item:last-child:nth-child(odd) { grid-column: 1 / -1; }

	.mk26-blog__item:last-child:nth-child(odd) .mk26-blog__media { aspect-ratio: 21 / 9; }
}

@media (max-width: 767.98px) {
	.mk26-blog-section { padding: 48px 0; }

	/* Кнопка під заголовком — поруч вона б не вмістилася. */
	.mk26-blog__head {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		margin-bottom: 24px;
	}

	.mk26-blog__title { font-size: 26px; line-height: 32px; letter-spacing: -.5px; }

	.mk26-blog__all { justify-content: space-between; }

	.mk26-blog__list { grid-template-columns: 1fr; gap: 28px; }

	.mk26-blog__item:last-child:nth-child(odd) { grid-column: auto; }

	.mk26-blog__item:last-child:nth-child(odd) .mk26-blog__media { aspect-ratio: 389 / 292; }

	.mk26-blog__media { margin-bottom: 16px; border-radius: 18px; }

	.mk26-blog__tag { margin-bottom: 12px; }

	.mk26-blog__text { font-size: 16px; line-height: 22px; }
}

/* ==========================================================================
   ФІНАЛЬНИЙ ЗАКЛИК — синя картка з контактами

   З макета 1440: картка 1216×421, радіус 32, усе по центру.
   Дві світлі плями по кутах — декор, малюються CSS.
   ========================================================================== */

.mk26-cta-section {
	padding: 96px 0;
	font-family: var(--mk26-font);
	background: var(--mk26-surface);
}

.mk26-cta-section .mk26-container { max-width: 1280px; }

.mk26-cta {
	position: relative;
	overflow: hidden;
	padding: 80px 48px;
	border-radius: 32px;
	background: var(--mk26-primary);
	color: #FFFFFF;
	text-align: center;
}

/* Плями світла з макета: розмиті кола по діагоналі. */
.mk26-cta__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(32px);
	pointer-events: none;
}

.mk26-cta__glow--tl {
	top: -96px;
	left: -96px;
	width: 320px;
	height: 320px;
	background: rgba(255, 255, 255, .15);
}

.mk26-cta__glow--br {
	right: -64px;
	bottom: -89px;
	width: 384px;
	height: 384px;
	background: rgba(255, 255, 255, .1);
}

.mk26-cta__inner { position: relative; z-index: 1; }

.mk26-cta__title {
	margin: 0 0 16px;
	font-size: 36px;
	font-weight: 700;
	line-height: 45px;
	letter-spacing: -1px;
	color: #FFFFFF;
	text-transform: none;
}

.mk26-cta__text {
	max-width: 720px;
	margin: 0 auto 32px;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: rgba(255, 255, 255, .8);
}

/* Темний варіант кнопки — лише тут, на синьому тлі. */
.mk26-btn--dark {
	background: var(--mk26-ink);
	color: #FFFFFF;
}

.mk26-btn--dark:hover,
.mk26-btn--dark:focus-visible {
	background: #16181F;
	color: #FFFFFF;
}

.mk26-cta__btn { display: inline-flex; }

.mk26-cta__contacts {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px 32px;
	margin-top: 32px;
}

.mk26-cta__contact {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: #FFFFFF;
	text-decoration: none;
}

.mk26-cta__contact:hover,
.mk26-cta__contact:focus-visible {
	color: #FFFFFF;
	text-decoration: underline;
}

.mk26-cta__ico {
	display: block;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: rgba(255, 255, 255, .8);
}

.mk26-cta__ico svg { display: block; width: 16px; height: 16px; }

.mk26-cta__note {
	margin: 16px 0 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	color: rgba(255, 255, 255, .7);
}

/* --- адаптив --- */

@media (max-width: 1199.98px) {
	.mk26-cta-section { padding: 64px 0; }

	.mk26-cta { padding: 56px 32px; }

	.mk26-cta__title { font-size: 30px; line-height: 38px; }
}

@media (max-width: 767.98px) {
	.mk26-cta-section { padding: 48px 0; }

	.mk26-cta { padding: 40px 24px; border-radius: 24px; }

	.mk26-cta__title { font-size: 24px; line-height: 30px; letter-spacing: -.5px; }

	.mk26-cta__text { margin-bottom: 24px; font-size: 14px; line-height: 22px; }

	.mk26-cta__btn { display: flex; width: 100%; justify-content: space-between; }

	/* Контакти в стовпчик — поруч вони не вміщаються. */
	.mk26-cta__contacts {
		flex-direction: column;
		gap: 12px;
		margin-top: 24px;
	}
}