/* =============================================================
   Esfirum - освіження дизайну (поступово, step-by-step).
   Підключається ОСТАННІМ, нічого не ламає в базовому CSS.
   Hero (перший екран) НЕ чіпаємо.
   ============================================================= */

/* --- Глобально: прибрати горизонтальний виліт декоративних написів --- */
html, body { overflow-x: hidden; }

/* =============================================================
   КРОК 1 - Блок "Послуги веб-студії" (головна)
   ============================================================= */

/* менше пустоти зверху/знизу; бокові поля 100px, щоб сітки (row з margin -15px)
   не заїжджали під фіксовані бокові панелі шириною 80px */
.page-template-home .section-cool { padding: 70px 100px 70px; }

/* великий відступ під вступним текстом був 150px - прибираємо "дірку" */
.page-template-home .section-cool-text { margin-bottom: 64px; }

/* декоративні гігантські слова лишаються, але масштабуються і не наповзають */
.page-template-home .heading-back { font-size: clamp(64px, 10vw, 140px); }
.page-template-home .heading-1 { top: 70px; }

/* видимий заголовок секції - рівний відступ під ним */
.page-template-home .section-cool > .section-cool-heading.text-center { margin-bottom: 56px; }


/* =============================================================
   КРОК 3 - Сітки портфоліо: рівні картки на ВСІХ сторінках
   (головна, сторінки послуг, /portfolio/). Вихідні скріншоти
   робіт мають пропорції ~2:1 - бокс картки такий самий,
   тож обрізка мінімальна.
   ============================================================= */
.esf-page .portfolio-inner{
  position:relative; overflow:hidden; border-radius:14px;
}
/* пропорцію тримає контейнер - точна пропорція скріншотів робіт (2560x1225),
   тож cover ріже максимум 1-2% по краю */
.esf-page .portfolio-inner:has(> img.portfolio-image),
.esf-page .portfolio-inner:has(> picture > img.portfolio-image){
  aspect-ratio:2560/1225; background:#f2f2f2;
}
.esf-page img.portfolio-image{
  position:absolute; top:0; left:0;
  width:100% !important; height:100% !important;
  object-fit:cover; object-position:center;
  display:block;
}
/* "квадратні" зображення (логотипи) - цілком, без обрізки (клас ставить JS) */
.esf-page img.portfolio-image.esf-contain{
  object-fit:contain;
  background:#fff;
  padding:12px;
  box-sizing:border-box;
}
/* рівні відступи між рядами */
.esf-page .short-portfolio .col-md-4,
.esf-page .short-portfolio .col-lg-4,
.page-template-portfolio .portfolio-wrap .col-md-4{ margin-bottom:34px; }
/* опис - рівно 2 рядки, щоб картки не "стрибали" по висоті */
.esf-page .short-portfolio .portfolio-inner-description,
.page-template-portfolio .portfolio-wrap .portfolio-inner-description{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:0; margin-bottom:24px;
}

/* =============================================================
   КРОК 5 - Відеовідгуки: превʼю без вшитих чорних смуг
   (hqdefault 4:3 -> кадруємо до 16:9 бокса .youtube)
   ============================================================= */
.esf-page .youtube img{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}

/* =============================================================
   КРОК 4 - Мобільна косметика (аудит 2026-08-24)
   ============================================================= */

/* Планшет: секції мали поля 10px зліва / 0 справа - третя картка
   сіток (відгуки, портфоліо) обрізалась правим краєм екрана */
@media only screen and (max-width: 1024px) {
	body.esf-page:not(.page-template-home) .section-cool {
		padding-left: 16px;
		padding-right: 16px;
	}
}

@media only screen and (max-width: 768px) {
	/* --- Шапка: лого наїжджало на перемикач мов --- */
	.esf-page .flex-header { align-items: center; }
	.esf-page .mobile-logo-wrap { flex: 0 0 auto; line-height: 0; margin-right: 8px; }
	.esf-page .mobile-logo {
		flex-basis: auto;
		width: 88px;
		margin-left: 10px;
		padding: 0;
		display: inline-block;
		vertical-align: middle;
	}
	.esf-page .flex-header .language-switcher { padding: 0 5px; }

	/* --- Hero внутрішніх сторінок: текст вилазив за лівий/правий край --- */
	.esf-page .cool-back .row,
	.esf-page .cool-back .row-fluid { margin-left: 0; margin-right: 0; }
	.esf-page .cool-back .blogpg-text {
		width: 100% !important;
		left: 0;
		padding: 0 20px !important;
		box-sizing: border-box;
	}

	/* --- Підзаголовки з рискою: замість 182px зліва - компактний відступ --- */
	.esf-page .section-cool-sub-heading { margin-left: 0; padding-left: 38px; }
	.esf-page .section-cool-sub-heading:before { width: 28px; }
	.esf-page .block-with-cool .section-cool-sub-heading { margin-left: 0; }

	/* --- Сторінки без hero (форма, контакти, вакансії, дякуємо):
	       перший заголовок ховався під фіксовану шапку --- */
	.esf-page .okten-grid + .section-cool { padding-top: 90px; }

	/* --- Головна: єдині бокові поля 20px --- */
	.page-template-home .section-cool { padding: 50px 20px 60px !important; }

	/* --- Блок "Найкращі роботи": поля дає секція (20px) --- */
	.esf-page .short-portfolio { padding: 0; }

	/* --- Форма: картка з полями впиралась у край екрана --- */
	.esf-page .contact-block.white-form { padding: 24px 16px; }
	.esf-page .white-form input,
	.esf-page .white-form textarea { box-sizing: border-box; }

	/* --- Бургер по центру шапки (мав зсув top:17px) --- */
	html .esf-page .flex-header .menu-mobile { top: 0; }

	/* --- Контакти у формі: компактніше, без подвійних <br> --- */
	.esf-page .white-form .ct-block br { display: none; }
	.esf-page .white-form .ct-inner { padding-bottom: 12px; }
	.esf-page .white-form .ct-inner a { font-size: 19px; }
}

/* =============================================================
   КРОК 6 - Мобільна типографіка та сітка відступів (<=768px)
   Ієрархія: заголовок секції (28) > заголовок картки (17) >
   текст (15) > підпис-риска (12). Єдині бокові поля 20px.
   ============================================================= */
@media only screen and (max-width: 768px) {

	/* --- Білий фон на всю ширину: без темних смуг по краях --- */
	html .esf-page .singl { margin-left: 0 !important; margin-right: 0 !important; }

	/* --- Єдині бокові поля секцій --- */
	body.esf-page:not(.page-template-home) .section-cool {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* --- Hero головної: повна ширина, центр, нормальна ієрархія --- */
	.esf-page .impress-heading {
		width: calc(100% - 48px);
		text-align: center;
	}
	/* !important: легаси-правило html .esf-page h1 {25px left !important} */
	html body.esf-page .impress-heading h1 {
		font-size: 14px !important;
		font-weight: 600;
		letter-spacing: .28em;
		text-transform: uppercase;
		text-align: center !important;
		padding-left: 0 !important;
		opacity: .85;
		margin: 0;
	}
	html .esf-page .impress-title,
	html .home .impress .impress-title,
	html .esf-page .impress .impress-title {
		font-size: 42px !important;
		line-height: 1.1;
		margin-top: 6px !important; /* перебиває інлайновий margin-top:-30px */
		padding: 0 !important;
	}
	.esf-page .glow { margin-top: 18px; }
	.esf-page .glow-button {
		font-size: 14px;
		line-height: 1.5;
		display: inline-block;
		padding: 8px 18px;
	}
	.esf-page .impress-descr {
		font-size: 15px;
		line-height: 1.65;
		margin-top: 20px;
	}
	html body.esf-page .impress-heading .btn-order {
		width: 100%;
		max-width: 300px;
		margin-top: 26px !important;
		padding: 13px 0;
	}

	/* --- Ієрархія заголовків секцій --- */
	html body.esf-page .section-cool-heading,
	html body.esf-page .section-cool-heading h1,
	html body.esf-page .section-cool-heading h2 {
		font-size: 28px !important;
		line-height: 1.2 !important;
		text-align: inherit !important;
		padding-left: 0 !important;
	}
	html .esf-page .section-cool-heading { margin-left: 0; }
	html .esf-page .section-cool-heading h1,
	html .esf-page .section-cool-heading h2 { margin: 0; }
	html .esf-page .section-cool-sub-heading {
		font-size: 12px;
		letter-spacing: .14em;
		font-weight: 700;
	}
	/* центровані блоки (было margin-left:18px !important) */
	html .home .block-with-cool .text-center { margin-left: 0 !important; }

	/* --- Картки послуг --- */
	html .esf-page .wow-title,
	html .esf-page .wow-title h3 {
		font-size: 17px;
		line-height: 1.3;
		margin: 0;
	}
	html .esf-page .wow-text {
		font-size: 15px;
		line-height: 1.6;
	}
	html .home .services .row > div { margin-bottom: 20px; }

	/* --- Портфоліо --- */
	html .esf-page .portfolio-inner-title { font-size: 17px; }
	html .esf-page .portfolio-inner-description {
		font-size: 15px;
		line-height: 1.6;
		margin-left: 0;
		min-height: 0;
	}

	/* --- Блог, процес, переваги --- */
	html .esf-page .blog-cont h2 { font-size: 18px; line-height: 1.35; }
	html .esf-page .pod-main { font-size: 17px; }
	html .esf-page .pod-title { font-size: 15px; }
	html .esf-page .vac-name { font-size: 18px; }
}

/* =============================================================
   КРОК 7 - Сайдбар "Меню" і редизайн карток послуг
   ============================================================= */

/* лінії бургера центруються відносно слова "Меню" */
.esf-page .menu-wrap div { margin-left: auto; margin-right: auto; }
.esf-page .menu-word { display: block; }

/* --- Сітка: рівні висоти карток, лінк-обгортка розтягується
       (.wow-block .row покриває і сітку service.php без обгортки .services) --- */
.esf-page .wow-block .row,
.esf-page .services-adv .row { display: flex; flex-wrap: wrap; align-items: stretch; }
.esf-page .wow-block .row > div,
.esf-page .services-adv .row > div { display: flex; }
.esf-page .wow-block .row > div > a,
.esf-page .services-adv .row > div > a { display: flex; width: 100%; }

/* --- Картка: поверхня замість "тексту в повітрі" --- */
.esf-page .wow-inner,
.esf-page .wow-no-link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #eceef1;
	border-radius: 16px;
	padding: 26px 24px 24px;
	transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
	position: relative;
}
.esf-page a:hover > .wow-inner {
	transform: translateY(-6px);
	border-color: rgba(0, 206, 125, .5);
	box-shadow: 0 24px 44px -28px rgba(18, 18, 18, .3);
}

/* декор 2010: вертикальні лінії та слайд іконок - геть */
.esf-page .wow-inner:before,
.esf-page .wow-inner:after,
.esf-page .wow-no-link:before,
.esf-page .wow-no-link:after,
.esf-page .wow-title:before,
.esf-page .wow-title:after { display: none; }

/* --- Іконка у м'якій зеленій плашці, перша у картці --- */
.esf-page .wow-icon {
	order: -1;
	position: static;
	overflow: visible;
	width: 60px;
	height: 60px;
	margin: 0 0 18px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 206, 125, .1);
	border-radius: 14px;
	transition: background .35s ease;
}
.esf-page a:hover .wow-icon { background: rgba(0, 206, 125, .18); }
.esf-page .wow-icon img {
	position: static;
	width: 32px;
	height: 32px;
	object-fit: contain;
	transform: none !important; /* старий хак центрування translateX(-16px) */
	margin: 0;
}
.esf-page .wow-icon img + img { display: none; }

/* --- Текстова ієрархія --- */
html body.esf-page .wow-title {
	order: 0;
	margin: 0 0 10px;
	position: static;
	/* легасі min-height:100% розтягувало заголовок на всю картку (моб.) */
	min-height: 0 !important;
	height: auto !important;
	max-width: none !important;
}
.esf-page .wow-title,
.esf-page .wow-title h3 {
	font-size: 16px;
	line-height: 1.35;
	font-weight: 800;
	letter-spacing: .02em;
}
.esf-page .wow-title h3 { margin: 0; }

html body.esf-page .wow-text {
	order: 1;
	margin: 0 0 20px !important; /* легасі 80/100px на мобільних */
	max-width: none;
	color: #5d6470;
	font-size: 15px;
	line-height: 1.65;
	text-align: left;
}

/* --- "Детальніше" - статична стрілка-лінк, притиснута до низу --- */
.esf-page .wow-link {
	order: 2;
	position: static !important;
	opacity: 1 !important;
	left: auto !important;
	transform: none !important; /* старе центрування translateX(-50%) */
	border: 0 !important;
	margin: auto 0 0;
	padding: 0;
	width: auto;
	background: none;
	color: #00b56d;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .08em;
}
.esf-page .wow-link:after {
	content: '\2192';
	margin-left: 8px;
	display: inline-block;
	transition: transform .3s ease;
}
.esf-page a:hover .wow-link:after { transform: translateX(6px); }

/* відступи між рядами сітки на десктопі */
.esf-page .wow-block .row > div,
.esf-page .services-adv .row > div { margin-bottom: 30px; }

/* =============================================================
   КРОК 8 - Блок "Переваги для клієнтів" у мові нових карток
   ============================================================= */
.esf-page .advantages-list { gap: 24px; }
.esf-page .advantages-list-inner {
	flex-basis: calc(50% - 12px);
	margin: 0;
	text-align: left;
	padding: 26px 24px;
	background: #fff;
	border: 1px solid #eceef1;
	border-radius: 16px;
	box-shadow: none;
	transition: border-color .35s ease, transform .35s ease !important;
}
.esf-page .advantages-list-inner:hover {
	border-color: rgba(0, 206, 125, .45);
	box-shadow: none;
	transform: translateY(-4px);
}
.esf-page .advantages-list-icon {
	width: 60px;
	height: 60px;
	border-radius: 14px;
	background: rgba(0, 206, 125, .1);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.esf-page .advantages-list-icon img { width: 32px; height: 32px; }
.esf-page .advantages-list-title {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 800;
}
.esf-page .advantages-list-description {
	font-size: 15px;
	line-height: 1.65;
	color: #5d6470;
}

/* CTA: суцільна зелена кнопка замість підкресленого лінка з "пончиком" */
.esf-page .advantage-call {
	padding-left: 0;
	text-decoration: none;
	margin-top: 28px;
}
.esf-page .advantage-call #loader { display: none; }
.esf-page .advantage-call a {
	display: inline-block;
	background: #00CE7D;
	color: #fff !important;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 15px 36px;
	transition: background .3s ease, transform .3s ease;
}
.esf-page .advantage-call a:hover {
	background: #00b56d;
	transform: translateY(-2px);
}

/* =============================================================
   КРОК 9 - "Наші нагороди" (слайдер) + партнерська плашка Smart Planet
   ============================================================= */

/* --- Слайдер нагород: картки з рівними висотами --- */
.esf-page .awwards .slick-track { display: flex; }
.esf-page .awwards .slick-slide {
	height: auto;
	float: none;
	display: flex;
	padding: 0 12px; /* внутрішній ґеп: не ламає розрахунок ширин slick */
	box-sizing: border-box;
}
.esf-page .awwards .slick-list { margin: 0 -12px; }
/* slick огортає вміст слайда проміжним div - теж розтягуємо */
.esf-page .awwards .slick-slide > div {
	display: flex;
	width: 100%;
}
.esf-page .aw-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	align-self: stretch;
	background: #fff;
	border: 1px solid #eceef1;
	border-radius: 16px;
	padding: 20px 20px 22px;
	box-sizing: border-box;
}
/* лого-зона: світла панель, різні бейджі виглядають однорідно */
.esf-page .aw-inner > a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 150px;
	background: #f7f8f9;
	border-radius: 12px;
	margin-bottom: 18px;
	padding: 16px;
}
.esf-page .aw-inner > a img {
	max-height: 118px;
	max-width: 210px;
	width: auto !important;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply; /* сірий фон бейджа Awwwards зливається з панеллю */
}
.esf-page .aw-inner .add-logo-title {
	font-size: 14px;
	line-height: 1.6;
	color: #5d6470;
	text-align: center;
	margin: 0;
}

/* (Партнерська плашка Smart Planet переїхала в блок "Готелі" - КРОК 13) */

/* =============================================================
   КРОК 10 - Слайдер відгуків, кнопка play, CTA "Є ідеї?"
   ============================================================= */

/* --- Відгуки: рівні слайди-картки, без легасі-масштабування --- */
.esf-page .sl3 .slick-slide,
.esf-page .sl3 .slick-current { transform: none !important; }
.esf-page .white-testi .sl3 .slick-track { display: flex; }
.esf-page .white-testi .sl3 .slick-slide {
	height: auto;
	float: none;
	padding: 0 12px;
	box-sizing: border-box;
}
.esf-page .white-testi .slick-list { margin: 0 -12px; }
.esf-page .white-testi .slide-content-test,
.esf-page .white-testi .slick-current .slide-content-test {
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	min-height: 0 !important;
}
.esf-page .white-testi .slide-content-test:hover { background: none !important; }
.esf-page .white-testi .embed-container {
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid #eceef1;
}

/* --- Кнопка play: кругла, брендова --- */
.esf-page .youtube .play-button {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(18, 18, 18, .55);
	backdrop-filter: blur(4px);
	opacity: 1;
	box-shadow: none;
	transition: background .3s ease, transform .3s ease;
}
.esf-page .youtube:hover .play-button {
	background: #00CE7D;
	transform: translate3d(-50%, -50%, 0) scale(1.08);
}
.esf-page .youtube .play-button:before {
	border-width: 11px 0 11px 19px;
	margin-left: 2px; /* оптичний центр трикутника */
}

/* --- Нагороди: однакові відступи всередині картки --- */
.esf-page .aw-inner .add-logo-title { margin-top: auto; margin-bottom: auto; }

/* --- CTA "Є ідеї? Давайте обговоримо!" - фінальна темна плашка --- */
.esf-page .com-block {
	background: #17191d;
	margin: 0;
	max-width: none; /* легасі 1170px */
	/* контент у сітці 1224px, панель на всю ширину, злита з футером */
	padding: 76px max(100px, calc(50% - 612px)) 80px;
	box-sizing: border-box;
}
.esf-page .com-block .section-cool-sub-heading {
	color: rgba(255, 255, 255, .55);
	margin-left: 0;
}
.esf-page .com-block .section-cool-sub-heading:before { background: #00CE7D; }
.esf-page .com-block .section-cool-heading {
	color: #fff;
	margin-left: 0;
}
.esf-page .com-block .row {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 30px 0 0;
}
.esf-page .com-block .row > div {
	padding: 0;
	flex: 0 0 auto;   /* нейтралізуємо ширини col-md-4 */
	width: auto;
	max-width: none;
}
.esf-page .com-block .row > .ct {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 0 !important;
	text-align: left;
}
.esf-page .com-block .ct a {
	color: #fff !important;
	font-weight: 600;
	font-size: 16px;
	transition: color .3s ease;
}
.esf-page .com-block .ct a:hover { color: #00CE7D !important; }
.esf-page .com-block .about-order-bottom { margin: 0; }
.esf-page .com-block .btn-order {
	min-width: 240px;
	margin: 0 !important;
	text-align: center;
	box-sizing: border-box;
}
html body.esf-page .com-block .btn-order.style-2 {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, .35) !important;
	color: #fff !important;
	transition: border-color .3s ease, color .3s ease;
}
html body.esf-page .com-block .btn-order.style-2:hover {
	border-color: #00CE7D !important;
	color: #00CE7D !important;
	background: transparent !important;
}

@media only screen and (max-width: 768px) {
	.esf-page .com-block {
		margin: 0;
		padding: 44px 20px;
	}
	.esf-page .com-block .row {
		flex-direction: column;
		align-items: stretch;
		gap: 18px;
	}
	.esf-page .com-block .ct { align-items: flex-start; }
	html body.esf-page .com-block .btn-order { width: 100%; min-width: 0; }
}

/* ==========================================================================
   КРОК 11 - Футер: тёмная панель в стиле CTA, четыре колонки
   ========================================================================== */

.esf-page footer {
	background: #17191d;
	padding: 64px 80px 56px;
	margin-top: 90px;
	font-size: 14px;
}

/* линии фоновой сетки на тёмном делаем едва заметными */
.esf-page footer .grid-11:before,
.esf-page footer .grid-22:before,
.esf-page footer .grid-33:before {
	background: rgba(255, 255, 255, .05);
}

.esf-footer {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 40px 56px;
	max-width: 1240px;
	margin: 0 auto;
}

.esf-footer-brand { flex: 0 1 220px; }
.esf-footer-brand > a { display: inline-block; }
/* у logo-white.svg нет width/height (только viewBox) - ширина явно */
.esf-page footer .esf-footer-brand > a img {
	width: 190px;
	max-width: 190px;
	height: auto;
	margin-top: 0;
	opacity: 1;
}
.esf-page footer img.esf-footer-cert {
	max-width: 170px;
	margin-top: 26px;
	opacity: .75;
}

.esf-footer > .footer-menu { flex: 1 1 0; min-width: 160px; }
.esf-footer > .footer-contacts { flex: 0 1 280px; }

.esf-page footer a {
	color: #9aa2ab;
	font-weight: 500;
	line-height: 2.1;
	transition: color .2s ease;
}
html body.esf-page footer a:hover { color: #00CE7D !important; }

.esf-footer .footer-menu li { list-style: none; }

.esf-footer .footer-contacts a {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 14px;
	line-height: 1.6;
}
.esf-page footer .footer-contacts img {
	width: 16px;
	height: 16px;
	margin-top: 3px;
	flex: none;
}

/* Соцмережі - тільки у футері, рядком під брендом */
.esf-footer-social {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 26px;
}
.esf-footer-social a { line-height: 0; }
.esf-page footer .esf-footer-social svg {
	width: 20px;
	height: 20px;
	fill: #9aa2ab;
	transition: fill .2s ease;
}
html body.esf-page footer .esf-footer-social a:hover svg { fill: #00CE7D; }

/* Узкие окна (мобильный UA футер не рендерит вовсе) */
@media only screen and (max-width: 768px) {
	.esf-page footer {
		padding: 44px 20px 40px;
		margin-top: 60px;
	}
	.esf-footer { gap: 28px 32px; }
	.esf-footer-brand { flex: 1 1 100%; }
	/* легаси прячет footer img целиком - возвращаем логотип и иконки контактов */
	.esf-page footer .esf-footer-brand > a img { display: inline-block; }
	.esf-page footer .footer-contacts img { display: inline-block; }
	.esf-page footer img.esf-footer-cert { display: none; }
	.esf-footer > .footer-menu {
		min-width: 130px;
		margin-bottom: 0;
	}
}

/* ==========================================================================
   КРОК 12 - Головна: єдиний контейнер 1240px і продающі картки
   ========================================================================== */

/* --- Один контейнер для всіх контент-блоків (краї збігаються всюди) --- */
.page-template-home .block-with-cool,
.page-template-home .services .wow-block,
.page-template-home .main-advantages,
.page-template-home .expertise,
.page-template-home .short-portfolio,
.page-template-home .white-testi {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
}

/* легасі-ширини, що ламали єдині краї */
.esf-page .main-advantages .container {
	max-width: none;
	width: auto;
	padding: 0;
}
.esf-page .expertise-wrap {
	max-width: none;
	margin: 0;
}
html body.esf-page .white-testi .sl3 { max-width: 100% !important; }

/* --- Стрілки слайдерів: круглі кнопки зверху праворуч.
       На всю ширину контейнера стрілки по боках впиралися б у фіксовані
       сайдбари, тож переносимо їх у верхній правий кут --- */
html body.esf-page .awwards .ar,
html body.esf-page .white-testi .sl3 .ar {
	position: absolute !important;
	top: -76px !important;
	bottom: auto !important;
	width: 46px;
	height: 46px;
	padding: 14px;
	box-sizing: border-box;
	margin: 0 !important;
	background: #fff;
	border: 1px solid #e2e5e9;
	border-radius: 50%;
	transform: none !important;
	cursor: pointer;
	z-index: 5;
	transition: border-color .3s ease, background .3s ease;
}
html body.esf-page .awwards .ar:hover,
html body.esf-page .white-testi .sl3 .ar:hover { border-color: #00CE7D; }
/* нагороди: якір - .row з полями -15px, тож зсув +15, щоб край збігся з рештою */
html body.esf-page .awwards .ar-left {
	left: auto !important;
	right: 73px !important;
}
html body.esf-page .awwards .ar-right {
	left: auto !important;
	right: 15px !important;
}
/* відгуки: смуга під стрілки - це padding-top самого .sl3, тож top:0 */
html body.esf-page .white-testi .sl3 .ar { top: 0 !important; }
html body.esf-page .white-testi .sl3 .ar-left {
	left: auto !important;
	right: 58px !important;
}
html body.esf-page .white-testi .sl3 .ar-right {
	left: auto !important;
	right: 0 !important;
}
/* місце під стрілки між заголовком і слайдами */
.esf-page .expertise-wrap { padding-top: 76px; }
html body.esf-page .white-testi .sl3 { padding-top: 76px; }
/* без стрілок (мобільний рендерить один ролик) смуга не потрібна */
html body.esf-page .white-testi .sl3:not(:has(.ar)) { padding-top: 0 !important; }

/* --- Послуги: продающий ховер картки --- */
/* акцентна смужка зверху, виїжджає зліва направо */
.esf-page .wow-inner:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: auto;
	left: 24px;
	right: 24px;
	width: auto; /* легасі-декор мав фіксовану ширину */
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: #00CE7D;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s ease;
}
.esf-page a:hover > .wow-inner:before { transform: scaleX(1); }
/* іконка заливається зеленим, піктограма стає білою */
.esf-page .wow-icon img { transition: filter .35s ease; }
.esf-page a:hover .wow-icon { background: #00CE7D; }
.esf-page a:hover .wow-icon img { filter: brightness(0) invert(1); }
/* заголовок трохи більший, лінк-CTA прописом */
.esf-page .wow-title,
.esf-page .wow-title h3 { font-size: 17px; }
.esf-page .wow-link {
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: .12em;
}
.esf-page a:hover .wow-link { color: #00CE7D; }

/* --- Переваги: та сама мова ховера (картки-цифри, див. КРОК 16) --- */
.esf-page .advantages-list-inner {
	position: relative;
	transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease !important;
}
.esf-page .advantages-list-inner:hover {
	box-shadow: 0 24px 44px -28px rgba(18, 18, 18, .3);
}

/* CTA переваг: стрілка в кнопці */
.esf-page .advantage-call a:after {
	content: '\2192';
	margin-left: 10px;
	display: inline-block;
	transition: transform .3s ease;
}
.esf-page .advantage-call a:hover:after { transform: translateX(5px); }

@media only screen and (max-width: 768px) {
	.esf-page .advantages-list-inner { flex-basis: 100%; }
	html body.esf-page .awwards .ar,
	html body.esf-page .white-testi .sl3 .ar {
		width: 42px;
		height: 42px;
		padding: 12px;
	}
	html body.esf-page .awwards .ar { top: -64px !important; }
	html body.esf-page .white-testi .sl3 .ar { top: 0 !important; }
	html body.esf-page .awwards .ar-left { right: 69px !important; }
	html body.esf-page .white-testi .sl3 .ar-left { right: 54px !important; }
	.esf-page .expertise-wrap { padding-top: 64px; }
	html body.esf-page .white-testi .sl3 { padding-top: 64px; }
}

/* ==========================================================================
   КРОК 13 - "Готелі": окремий напрям студії, темна панель
   ========================================================================== */

.esf-page .esf-hotels {
	position: relative;
	overflow: hidden;
	margin: 0 -100px 120px; /* виривається з полів секції: темна смуга від краю до краю */
	background: #17191d;
	padding: 72px 0 76px;
	box-sizing: border-box;
}
.esf-page .esf-hotels-in {
	width: min(1240px, calc(100% - 200px));
	margin: 0 auto;
}

/* гігантське контурне слово-декор */
.esf-page .esf-hotels-glyph {
	position: absolute;
	top: -34px;
	right: -18px;
	font-family: 'Montserrat', sans-serif;
	font-size: 220px;
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, .07);
	pointer-events: none;
	user-select: none;
}

.esf-page .esf-hotels-top { position: relative; }
.esf-page .esf-hotels-head { max-width: 820px; }
@keyframes esf-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-14px); }
}

.esf-page .esf-hotels .section-cool-sub-heading {
	color: rgba(255, 255, 255, .55);
	margin-left: 0;
}
.esf-page .esf-hotels .section-cool-sub-heading:before { background: #00CE7D; }

/* !important: легасі h2 {font-size/weight: inherit !important; line-height: 1.5 !important} */
.esf-page .esf-hotels-title {
	margin: 18px 0 0;
	font-family: 'Montserrat', sans-serif;
	font-size: 52px !important;
	line-height: 1.08 !important;
	font-weight: 900 !important;
	color: #fff;
}
.esf-page .esf-hotels-title span { color: #00CE7D; }

.esf-page .esf-hotels-head p {
	margin: 22px 0 28px;
	max-width: 560px;
	font-size: 16px;
	line-height: 1.75;
	color: #9aa2ab;
}
.esf-page .esf-hotels-partners {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
}
.esf-page .esf-hotels-partner {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	background: #fff;
	border-radius: 12px;
	padding: 12px 20px;
	transition: transform .35s ease;
}
/* лого інтеграцій: одна висота ряду */
.esf-page .esf-hotels-partner img[alt="Exely"] { height: 26px; width: auto; }
.esf-page .esf-hotels-partner img[alt="Servio"] { height: 20px; width: auto; }
.esf-page .esf-hotels-partner:hover { transform: translateY(-3px); }
.esf-page .esf-hotels-partner img { height: 34px; width: auto; display: block; }
.esf-page .esf-hotels-partner span {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #121212;
}

/* структура: підблок з лейблом, між підблоками рівний великий відступ */
.esf-page .esf-hotels-sec {
	margin-top: 64px;
	padding-top: 40px;
	border-top: 1px solid rgba(255, 255, 255, .07);
}
.esf-page .esf-hotels-label {
	position: relative;
	margin-bottom: 22px;
	padding-left: 32px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
}
.esf-page .esf-hotels-label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 22px;
	height: 2px;
	background: #00CE7D;
}

/* послуги напряму: горизонтальні картки у стилі GEO-смуги */
.esf-page .esf-hotels-serv {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
.esf-page .esf-hotels-serv-card {
	display: flex;
	align-items: center;
	gap: 22px;
	background: linear-gradient(115deg, rgba(0, 206, 125, .10), rgba(0, 206, 125, .02) 60%);
	border: 1px solid rgba(0, 206, 125, .22);
	border-radius: 14px;
	padding: 20px 24px;
	transition: border-color .35s ease, transform .35s ease;
}
.esf-page .esf-hotels-serv-card:hover {
	border-color: rgba(0, 206, 125, .55);
	transform: translateY(-4px);
}
.esf-page .esf-hotels-serv-card .esf-serv-img {
	flex: 0 0 auto;
	display: block;
	width: 168px;
	height: 168px;
	object-fit: contain;
	margin: -8px 0;
	transition: transform .35s ease;
}
.esf-page .esf-hotels-serv-card:hover .esf-serv-img { transform: translateY(-5px); }
.esf-page .esf-hotels-serv-card b {
	display: block;
	margin-bottom: 8px;
	font-size: 16px;
	line-height: 1.35;
	font-weight: 800;
	color: #fff;
}
.esf-page .esf-hotels-serv-card .esf-serv-txt { flex: 1 1 auto; }
.esf-page .esf-hotels-serv-card .esf-serv-txt span {
	display: block;
	max-width: 680px;
	font-size: 14px;
	line-height: 1.65;
	color: #9aa2ab;
}
/* права колонка полоси (цифра + лінк, як у GEO) */
.esf-page .esf-serv-side {
	flex: 0 0 auto;
	text-align: right;
}
.esf-page .esf-serv-side em {
	display: block;
	font-style: normal;
	font-family: 'Montserrat', sans-serif;
	font-size: 34px;
	font-weight: 900;
	line-height: 1;
	color: #00CE7D;
}
.esf-page .esf-serv-side small {
	display: block;
	margin: 6px 0 12px;
	font-size: 12px;
	line-height: 1.5;
	color: #9aa2ab;
	max-width: 210px;
}
.esf-page .esf-serv-side a {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #00CE7D;
	transition: color .3s ease;
}
.esf-page .esf-serv-side a:after {
	content: '\2192';
	margin-left: 8px;
	display: inline-block;
	transition: transform .3s ease;
}
.esf-page .esf-serv-side a:hover:after { transform: translateX(5px); }

/* інтеграції з системами бронювання */
.esf-page .esf-hotels-int {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.esf-page .esf-hotels-int-chip {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: #cfd4da;
}

/* гарантії напряму (з презентації top.esfirum.com) */
.esf-page .esf-hotels-proof {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.esf-page .esf-hotels-proof-card {
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 14px;
	padding: 20px 22px;
}
.esf-page .esf-hotels-proof-card b {
	position: relative;
	display: block;
	margin-bottom: 6px;
	padding-left: 26px;
	font-size: 15px;
	font-weight: 800;
	color: #fff;
}
.esf-page .esf-hotels-proof-card b:before {
	content: '\2713';
	position: absolute;
	left: 0;
	top: 1px;
	color: #00CE7D;
	font-size: 14px;
}
.esf-page .esf-hotels-proof-card span {
	display: block;
	padding-left: 26px;
	font-size: 14px;
	line-height: 1.6;
	color: #9aa2ab;
}

/* кнопки CTA напряму: зелена + контурна на темному */
.esf-page .esf-hotels-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 64px;
}
html body.esf-page .esf-hotels .btn-order.style-2 {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, .35) !important;
	color: #fff !important;
	transition: border-color .3s ease, color .3s ease;
}
html body.esf-page .esf-hotels .btn-order.style-2:hover {
	border-color: #00CE7D !important;
	color: #00CE7D !important;
}

.esf-page .esf-hotels-cta { margin-top: 40px; }
.esf-page .esf-hotels-cta .btn-order { margin: 0; }

@media only screen and (max-width: 1024px) {

	.esf-page .esf-hotels-title { font-size: 38px !important; }
	.esf-page .esf-hotels-proof { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 768px) {
	.esf-page .esf-hotels {
		margin: 0 -20px 50px;
		padding: 36px 0;
	}
	.esf-page .esf-hotels-in { width: calc(100% - 40px); }
	.esf-page .esf-hotels-glyph { font-size: 96px; top: -12px; right: -10px; }
	.esf-page .esf-hotels-title { font-size: 28px !important; }
	.esf-page .esf-hotels-lead p { font-size: 15px; }
	.esf-page .esf-hotels-sec { margin-top: 40px; padding-top: 28px; }
	.esf-page .esf-hotels-cta { margin-top: 40px; }
	.esf-page .esf-hotels-serv { grid-template-columns: 1fr; gap: 12px; }
	.esf-page .esf-hotels-serv-card {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 20px;
	}
	.esf-page .esf-hotels-proof { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
	html body.esf-page .esf-hotels-cta .btn-order { width: 100%; }
	.esf-page .esf-hotels-cta .btn-order { width: 100%; text-align: center; box-sizing: border-box; }
}

/* ==========================================================================
   КРОК 14 - Сміливіші акценти головної
   ========================================================================== */

/* фонові слова-декор: контур замість заливки */
.esf-page .heading-back {
	color: transparent;
	-webkit-text-stroke: 1.5px #e2e6ea;
}

/* заголовки секцій головної більші */
.page-template-home .section-cool-heading { font-size: clamp(44px, 3.9vw, 58px); }

/* портфоліо: зум зображення на ховері */
.esf-page .portfolio-inner img.portfolio-image {
	transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}
.esf-page .p-inner-wrap:hover .portfolio-inner img.portfolio-image { transform: scale(1.05); }

/* стрічка-marquee зі слоганом (контурний текст + зелені крапки) */
.esf-page .esf-marquee {
	overflow: hidden;
	margin: 100px 0 0;
	padding: 6px 0;
}
.esf-page .esf-marquee-track {
	display: flex;
	width: max-content;
	animation: esf-marquee 36s linear infinite;
}
.esf-page .esf-marquee-group {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}
.esf-page .esf-marquee span {
	font-family: 'Montserrat', sans-serif;
	font-size: 58px;
	font-weight: 900;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	letter-spacing: .02em;
	color: transparent;
	-webkit-text-stroke: 1.5px #d5dade;
}
.esf-page .esf-marquee span.esf-marquee-solid {
	color: #121212;
	-webkit-text-stroke: 0;
}
.esf-page .esf-marquee i {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #00CE7D;
	margin: 0 34px;
}
@keyframes esf-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.esf-page .esf-marquee-track { animation: none; }
}
@media only screen and (max-width: 768px) {
	.esf-page .esf-marquee { margin-top: 50px; }
	.esf-page .esf-marquee span { font-size: 32px; }
	.esf-page .esf-marquee i { width: 8px; height: 8px; margin: 0 20px; }
}

/* ==========================================================================
   КРОК 15 - Єдині кнопки (радіус 12px) + патерни в CTA
   ========================================================================== */

/* Всі кнопки сайту скруглені, як картки (легасі: радіус 0 + .no-radius) */
html body.esf-page .btn-order,
html body.esf-page .btn-order.style-2,
html body.esf-page .btn-order.no-radius,
.esf-page .advantage-call a,
.esf-page .glow-button,
.esf-page .rd-more,
html body.esf-page .white-form .wpcf7-form-control.wpcf7-submit {
	border-radius: 12px !important;
}

/* CTA "Є ідеї?": фонові патерни замість порожнечі */
.esf-page .com-block {
	position: relative;
	overflow: hidden;
}
/* точкова сітка праворуч */
.esf-page .com-block:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 46%;
	background-image: radial-gradient(rgba(255, 255, 255, .13) 1.2px, transparent 1.6px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(to left, #000 55%, transparent);
	mask-image: linear-gradient(to left, #000 55%, transparent);
	pointer-events: none;
}
/* зелене сяйво у правому верхньому куті */
.esf-page .com-block:after {
	content: '';
	position: absolute;
	top: -160px;
	right: -120px;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0, 206, 125, .22), transparent 70%);
	pointer-events: none;
}
/* гігантське контурне слово, як у блоці готелів */
.esf-page .com-glyph {
	position: absolute;
	right: -14px;
	bottom: -46px;
	font-family: 'Montserrat', sans-serif;
	font-size: 150px;
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, .06);
	pointer-events: none;
	user-select: none;
}
.esf-page .com-block > * { position: relative; z-index: 1; }
.esf-page .com-glyph { z-index: 0; }

@media only screen and (max-width: 768px) {
	.esf-page .com-glyph { font-size: 72px; bottom: -20px; }
	.esf-page .com-block:after { width: 280px; height: 280px; top: -100px; right: -80px; }
}

/* ==========================================================================
   КРОК 16 - Переваги = цифри студії (200+ проєктів, 90+ готелів...)
   ========================================================================== */
.esf-page .esf-stat-num {
	font-family: 'Montserrat', sans-serif;
	font-size: 44px;
	font-weight: 900;
	line-height: 1;
	color: #00CE7D;
	margin-bottom: 14px;
}
/* блок тепер і на мобільному: колонки одна під одною */
@media only screen and (max-width: 768px) {
	.esf-page .main-advantages { padding-top: 40px; padding-bottom: 20px; }
	.esf-page .main-advantages:before { display: none; }
	.esf-page .esf-stat-num { font-size: 36px; }
	.esf-page .main-advantages .advantage-call { margin-bottom: 28px; }
}

/* ==========================================================================
   КРОК 18 - Вертикальний ритм головної: між блоками 120px,
   всередині блоку відступи менші, щоб було видно межі блоків
   ========================================================================== */
.page-template-home .services { margin-bottom: 120px; }
.esf-page .main-advantages {
	padding-top: 0;
	padding-bottom: 0;
	margin-bottom: 120px;
}
.esf-page .expertise { margin-bottom: 120px; }
.esf-page .esf-hotels { margin: 0 -100px 120px; }
.page-template-home .short-portfolio { margin-bottom: 120px; }
/* кнопка "Дивитись все" належить сітці портфоліо - впритул до неї */
.esf-page .short-portfolio > .text-center { margin-top: 6px; }
.esf-page .esf-marquee { margin: 120px 0 0; }
.esf-page footer {
	margin-top: 0;
	border-top: 1px solid rgba(255, 255, 255, .07);
}

@media only screen and (max-width: 768px) {
	.page-template-home .services,
	.esf-page .main-advantages,
	.esf-page .expertise,
	.page-template-home .short-portfolio { margin-bottom: 60px; }
	.esf-page .esf-hotels { margin: 0 -20px 60px; }
	.esf-page .esf-marquee { margin-top: 60px; }
}

/* ==========================================================================
   КРОК 19 - Відеовідгуки у попапі
   ========================================================================== */
.esf-video-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.esf-video-modal.is-open { display: flex; }
.esf-video-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 11, 13, .88);
	backdrop-filter: blur(4px);
}
.esf-video-box {
	position: relative;
	z-index: 1;
	width: min(1060px, 100%);
}
.esf-video-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.esf-video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.esf-video-close {
	position: absolute;
	top: -48px;
	right: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .3);
	background: transparent;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: border-color .3s ease, color .3s ease;
}
.esf-video-close:hover {
	border-color: #00CE7D;
	color: #00CE7D;
}
body.esf-modal-open { overflow: hidden; }

/* ==========================================================================
   КРОК 20 - Інверсія лівого сайдбара над темним блоком "Готелі"
   (клас esf-invert ставить ScrollTrigger в animations.js)
   ========================================================================== */
.esf-page .left-sidebar:before { transition: background .35s ease, width .3s ease-in; }
.esf-page .left-sidebar.esf-invert:before {
	background: #17191d;
	width: 100%;
}
.esf-page .left-sidebar.esf-invert { border-right-color: rgba(255, 255, 255, .08); }
html body .left-sidebar .menu-word,
html body .left-sidebar .portfolio-link { transition: color .3s ease; }
html body .left-sidebar.esf-invert .menu-wrap div { background: #fff; }
/* легасі .left-sidebar.dark .menu-wrap .menu-word має 4 класи - перебиваємо */
html body .left-sidebar.esf-invert .menu-wrap .menu-word { color: #fff; }
html body .left-sidebar.esf-invert .portfolio-link { color: #fff; }

/* правий сайдбар: мови, соцмережі, конверт */
.esf-page .right-sidebar:before { transition: background .35s ease, width .3s ease-in; }
.esf-page .right-sidebar.esf-invert:before {
	background: #17191d;
	width: 100%;
}
.esf-page .right-sidebar.esf-invert { border-left-color: rgba(255, 255, 255, .08); }
html body .right-sidebar.esf-invert .lang-new a { color: #fff !important; }
html body .right-sidebar.esf-invert a svg,
html body .right-sidebar.esf-invert .social-icon svg { fill: #fff; }
html body .right-sidebar.esf-invert .phone-call path { fill: #fff; }
html body .right-sidebar.esf-invert .social-icon svg:hover { fill: #00CE7D; }
html body .right-sidebar.esf-invert .lang-new,
html body .right-sidebar.esf-invert .phone-call { border-color: rgba(255, 255, 255, .12); }

/* ==========================================================================
   КРОК 21 - 3D-обʼєкти: GEO-сфера, літачок у CTA, трофей у перевагах
   ========================================================================== */

@media only screen and (max-width: 768px) {
	.esf-page .esf-hotels-serv-card .esf-serv-img { width: 144px; height: 144px; margin: -6px 0; }
	.esf-page .esf-serv-side { text-align: left; }
}

/* ==========================================================================
   КРОК 23 - Сторінка "Замовити консультацію": форма і контакти
   ========================================================================== */

/* декоративні підложки старого макета */
.esf-form-page .left_bg,
.esf-form-page .right_bg { display: none; }

.esf-form-page .contact-block.white-form {
	background: none;
	box-shadow: none;
	padding: 0;
	margin-top: 40px;
}
.esf-form-page .estimate-page .row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

/* ліва колонка: біла картка з полями */
.esf-form-page .inputs-col-1 {
	background: #fff;
	border: 1px solid #eceef1;
	border-radius: 20px;
	padding: 36px 36px 32px;
	box-shadow: 0 30px 60px -40px rgba(18, 18, 18, .18);
	height: 100%;
	box-sizing: border-box;
}
.esf-form-page .inputs .section-cool-sub-heading { margin-bottom: 0; }
.esf-form-page .inputs br { display: none; }

html body.esf-form-page .white-form input[type="text"],
html body.esf-form-page .white-form input[type="email"],
html body.esf-form-page .white-form input[type="number"],
html body.esf-form-page .white-form textarea {
	width: 100%;
	box-sizing: border-box;
	background: #f7f8f9 !important;
	border: 1px solid #e2e5e9 !important;
	border-radius: 12px !important;
	padding: 15px 18px !important;
	margin: 18px 0 0 !important;
	font-size: 15px;
	color: #121212;
	transition: border-color .3s ease, box-shadow .3s ease;
}
html body.esf-form-page .white-form textarea {
	min-height: 150px;
	resize: vertical;
}
html body.esf-form-page .white-form input:focus,
html body.esf-form-page .white-form textarea:focus {
	outline: none;
	border-color: #00CE7D !important;
	box-shadow: 0 0 0 3px rgba(0, 206, 125, .15);
}
html body.esf-form-page .white-form ::placeholder { color: #9aa2ab; }
html body.esf-form-page .white-form .wpcf7-form-control.wpcf7-submit {
	width: 100% !important; /* легасі фіксовані 200px */
	margin-top: 22px;
	padding: 16px 0;
	font-weight: 700;
	letter-spacing: .06em;
	cursor: pointer;
	transition: background .3s ease;
}
html body.esf-form-page .white-form .wpcf7-form-control.wpcf7-submit:hover { background: #00b56d !important; }

/* права колонка: темна панель контактів у стилі CTA */
.esf-form-page .ct-block {
	position: relative;
	overflow: hidden;
	background: #17191d;
	border-radius: 20px;
	padding: 36px;
	height: 100%;
	box-sizing: border-box;
}
.esf-form-page .ct-block:before {
	content: '';
	position: absolute;
	top: -120px;
	right: -100px;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0, 206, 125, .2), transparent 70%);
	pointer-events: none;
}
.esf-form-page .ct-block .section-cool-sub-heading {
	color: rgba(255, 255, 255, .55);
	margin-bottom: 0;
}
.esf-form-page .ct-block .section-cool-sub-heading:before { background: #00CE7D; }
.esf-form-page .ct-block br { display: none; }
.esf-form-page .ct-inner { padding: 0; margin-top: 22px; }
html body.esf-form-page .ct-inner a {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: #fff !important;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
	transition: color .3s ease;
}
html body.esf-form-page .ct-inner a:hover { color: #00CE7D !important; }
/* шрифт Linearicons не підключений - спани порожні, малюємо зелені svg-іконки */
.esf-form-page .ct-inner .lnr {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
.esf-form-page .ct-inner .lnr-phone-handset { background-image: url(../img/phone-handset.svg); }
.esf-form-page .ct-inner .lnr-envelope { background-image: url(../img/envelope.svg); }
.esf-form-page .ct-inner .lnr-map-marker { background-image: url(../img/map-marker.svg); }

@media only screen and (max-width: 768px) {
	.esf-form-page .contact-block.white-form { margin-top: 24px; }
	.esf-form-page .inputs-col-1 { padding: 24px 18px 22px; }
	.esf-form-page .ct-block { margin-top: 20px; padding: 26px 20px; }
	.esf-form-page .estimate-page .col-md-6 { padding-left: 0; padding-right: 0; }
}

/* ==========================================================================
   КРОК 24 - Телефонна плашка шапки: висота як у плашки лого, притиснута
   догори і до правого сайдбара
   ========================================================================== */
html body .phone-number {
	top: 0;
	right: 80px;
	height: 66px;
	display: flex;
	align-items: center;
	padding: 0 28px;
	box-sizing: border-box;
	transition: background .3s ease;
}
html body .phone-number.dark-number,
html body .phone-number.dark-logo { background: #fff; }
/* над темними зонами (готелі, CTA+футер) плашка теж темна */
html body .phone-number.esf-invert { background: #17191d; }
html body .phone-number a { transition: color .3s ease; }
html body .phone-number.esf-invert a { color: #fff; }
html body .phone-number.esf-invert a:hover { color: #00CE7D; }
/* стара "коробка" малювалась псевдоелементом зі зсувами */
html body .dark-number a:before,
html body .phone-number.dark-logo a:before { display: none; }

@media only screen and (max-width: 1024px) {
	/* правий сайдбар 80px - плашка не має на нього налазити */
	html body .phone-number { right: 80px; height: 56px; padding: 0 18px; }
}

/* ==========================================================================
   КРОК 25 - Блог: картки записів і пагінація в мові сайту
   ========================================================================== */

.esf-page .blogpg-blog .row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
.esf-page .blogpg-blog .row > .col-md-4 {
	display: flex;
	margin-bottom: 30px;
}

.esf-page .esf-post-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: #fff;
	border: 1px solid #eceef1;
	border-radius: 16px;
	overflow: hidden;
	transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.esf-page .esf-post-card:hover {
	transform: translateY(-6px);
	border-color: rgba(0, 206, 125, .5);
	box-shadow: 0 24px 44px -28px rgba(18, 18, 18, .3);
}

.esf-page .esf-post-thumb {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f2f2f2;
}
.esf-page .esf-post-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}
.esf-page .esf-post-card:hover .esf-post-thumb img { transform: scale(1.05); }

.esf-page .esf-post-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px 22px 22px;
}
.esf-page .esf-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin-bottom: 12px;
	font-size: 13px;
	color: #9aa2ab;
}
.esf-page .esf-post-meta span { position: relative; padding-left: 14px; }
.esf-page .esf-post-meta span:before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-radius: 50%;
	background: #00CE7D;
}
html body.esf-page .esf-post-title h2 {
	margin: 0 0 10px;
	font-size: 17px !important; /* легасі h2 25px !important */
	line-height: 1.4 !important;
	font-weight: 800 !important;
	color: #121212;
	text-transform: none;
	transition: color .3s ease;
}
.esf-page .esf-post-card:hover .esf-post-title h2 { color: #00b56d; }
.esf-page .esf-post-excerpt {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.65;
	color: #5d6470;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
html body.esf-page .esf-post-more {
	margin-top: auto;
	color: #00b56d;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.esf-page .esf-post-more:after {
	content: '\2192';
	margin-left: 8px;
	display: inline-block;
	transition: transform .3s ease;
}
.esf-page .esf-post-card:hover .esf-post-more:after { transform: translateX(6px); }

/* пагінація: круглі кнопки як стрілки слайдерів */
.esf-page .blog-pagination { margin: 30px 0 60px; }
html body.esf-page .blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 10px;
	margin: 0 4px;
	border: 1px solid #e2e5e9;
	border-radius: 50%;
	box-sizing: border-box;
	color: #121212;
	font-weight: 700;
	font-size: 14px;
	transition: border-color .3s ease, background .3s ease, color .3s ease;
}
html body.esf-page .blog-pagination .page-numbers:hover { border-color: #00CE7D; color: #00b56d; }
html body.esf-page .blog-pagination .page-numbers.current {
	background: #00CE7D;
	border-color: #00CE7D;
	color: #fff;
}
html body.esf-page .blog-pagination .page-numbers.dots { border: 0; }

@media only screen and (max-width: 768px) {
	.esf-page .blogpg-blog .row > .col-md-4 { margin-bottom: 18px; }
	.esf-page .esf-post-body { padding: 16px 18px 18px; }
}

/* ==========================================================================
   КРОК 26 - Сингл блога: зміст, списки, сайдбар, автор
   ========================================================================== */

/* hero запису: заголовок без капса */
.esf-page.single-post .blogpg-text h1 { text-transform: none; }

/* --- "Зміст" (Kama Contents): світла картка з лейблом --- */
html body .content .kc__wrap {
	background: #f7f8f9;
	border: 1px solid #eceef1 !important; /* легасі малює зелений border-bottom */
	border-radius: 16px;
	padding: 24px 28px 20px;
	margin: 0 0 40px;
}
html body .content .kc__title {
	position: relative;
	background: none;
	color: #121212;
	border-radius: 0;
	padding: 0 0 0 32px;
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}
html body .content .kc__title:before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	bottom: auto;
	width: 22px;
	height: 2px;
	background: #00CE7D;
}
html body .kc__wrap ul { margin-left: 0; }
html body .kc__wrap ul li {
	position: relative;
	padding: 5px 0 5px 18px !important;
}
html body .kc__wrap ul li:before {
	content: '';
	position: absolute;
	left: 0;
	top: .95em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #00CE7D;
}
html body .kc__wrap ul li a {
	color: #121212 !important;
	font-size: 15px;
	line-height: 1.5;
	font-weight: 600;
}
html body .kc__wrap ul li a:hover {
	color: #00b56d !important;
	text-decoration: none !important;
}

/* --- Списки контенту: без сірих плашок, акуратні маркери --- */
html body.esf-page .singl-post .content ul > li,
html body.esf-page .singl-post .content ol > li {
	background: none;
	padding: 0 0 0 28px;
	margin: 0 0 10px;
	line-height: 1.7 !important;
}
html body.esf-page .singl-post .content ul > li:before {
	content: '';
	top: .68em;
	left: 8px;
	transform: none;
	width: 6px;
	height: 6px;
	background: #00CE7D;
}
html body.esf-page .singl-post .content ol { counter-reset: esf-li; }
html body.esf-page .singl-post .content ol > li { counter-increment: esf-li; }
html body.esf-page .singl-post .content ol > li:before {
	content: counter(esf-li) !important;
	top: 0;
	left: 0;
	transform: none;
	font-size: 15px;
}

/* --- Картинки і таблиці контенту --- */
.esf-page .text-content-blog img {
	border-radius: 12px;
	border: 1px solid #eceef1;
	box-shadow: none;
	height: auto;
}
.esf-page .singl-post .content table {
	width: 100%;
	border-collapse: collapse;
	margin: 24px 0;
	font-size: 15px;
}
.esf-page .singl-post .content th,
.esf-page .singl-post .content td {
	border: 1px solid #eceef1;
	padding: 12px 16px;
	text-align: left;
}
.esf-page .singl-post .content th { background: #f7f8f9; font-weight: 700; }
.esf-page .singl-post .content tr:nth-child(even) td { background: #fafbfc; }

/* --- Сайдбар "Останні новини" --- */
html body .sidebar-heading {
	position: relative;
	background: none !important;
	color: #121212 !important;
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 0 0 0 32px;
	margin-bottom: 18px;
}
html body .sidebar-heading:before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 22px;
	height: 2px;
	background: #00CE7D;
}
.esf-page .singl-post .sidebar .recent .item-container {
	border-radius: 12px;
	overflow: hidden;
}
.esf-page .singl-post .sidebar .recent .item-container .back {
	transition: transform .5s ease, opacity .3s ease;
}
.esf-page .singl-post .sidebar .recent .item-container:hover .back { transform: scale(1.04); }
html body .singl-post .sidebar p.text {
	text-align: left;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.45;
	margin: 10px 0 24px;
	transition: color .3s ease;
}
html body .singl-post .sidebar a:hover p.text { color: #00b56d; }

/* --- Картка "Про автора" --- */
.esf-page .post-author {
	background: #fff;
	border: 1px solid #eceef1;
	border-radius: 16px;
	padding: 26px 28px;
	margin: 40px 0;
}
.esf-page .about-author-title { border-bottom: 0; margin-bottom: 0; }
html body .about-author-title span {
	position: relative;
	display: inline-block;
	background: none;
	border-radius: 0;
	padding: 0 0 0 32px;
	margin-bottom: 16px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #121212;
}
html body .about-author-title span:before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 22px;
	height: 2px;
	background: #00CE7D;
}
.esf-page .post-author-img img {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
}
.esf-page .post-author-name { font-weight: 800; font-size: 17px; margin-bottom: 8px; }
.esf-page .post-author-description { color: #5d6470; font-size: 15px; line-height: 1.65; }

/* Постер замість фонового відео на мобільних: відео там приховане стилями,
   але браузер його все одно качає */
.cool-back-poster {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	z-index: -2;
}