/* ==========================================================================
   Chysto Lab — сторінки послуг і кейси.
   Порт макету Design canvas (Prybyrannia / Main). Усе заскоуплено під .chl,
   щоб не конфліктувати з глобальними стилями WoodMart.
   Бренд: рівно два кольори з лого — #203E78 (navy) і #36A3DC (accent).
   ========================================================================== */

.chl {
	--chl-navy: #203E78;
	--chl-accent: #36A3DC;
	--chl-ivory: #F5F8FA;
	--chl-tint: #EEF3F6;
	--chl-card-tint: #F1F5F7;
	--chl-ink: #12222E;
	--chl-muted: #5B6E7C;
	--chl-line: #E3EAEE;
	--chl-grad: linear-gradient(150deg, #203E78, #36A3DC);
	--chl-font: 'Montserrat', system-ui, -apple-system, sans-serif;
	--chl-font-head: 'Unbounded', system-ui, sans-serif;
	--chl-gutter: 40px;

	width: 100%;
	overflow-x: clip;
	background: var(--chl-ivory);
	color: var(--chl-ink);
	font-family: var(--chl-font);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

body.chl-view .wd-content-layout { padding-block: 0; }
body.chl-view .wd-page-content { background: var(--chl-ivory, #F5F8FA); }

.chl *, .chl *::before, .chl *::after { box-sizing: border-box; }
.chl p { margin: 0; }
.chl ul, .chl ol { margin: 0; padding: 0; list-style: none; }
/* WoodMart (base.css: :is(ul,ol) li { margin-bottom: var(--li-mb) }) додає відступ усім пунктам, крім останнього —
   через це з'їжджали хлібні крихти й чипи. У блоках теми відступи між пунктами задаються gap-ом. */
.chl :is(ul, ol) li { margin-bottom: 0; }
.chl img { max-width: 100%; height: auto; display: block; }
.chl a { color: var(--chl-navy); text-decoration: none; transition: color .15s, background-color .15s, border-color .15s; }
.chl a:hover { color: var(--chl-accent); }

.chl h1, .chl h2, .chl h3, .chl h4 {
	margin: 0;
	font-family: var(--chl-font-head);
	font-weight: 600;
	color: var(--chl-navy);
	letter-spacing: normal;
	text-transform: none;
}
.chl-h1 { font-size: 44px; line-height: 1.15; }
.chl-h2 { font-size: 32px; line-height: 1.2; }
.chl-h3 { font-size: 17px; line-height: 1.3; }

/* Ширина сайту — 1510 px (разом із внутрішніми полями). Та сама ширина має стояти в WoodMart (Theme Settings → Site width) і Elementor (Site Settings → Layout). */
.chl { --chl-site-width: 1510px; }
.chl-container { max-width: var(--chl-site-width); margin: 0 auto; padding: 0 var(--chl-gutter); }

.chl-section { padding: 96px 0; }
.chl-section--tint { background: var(--chl-tint); padding: 88px 0; }
.chl-section--white { background: #fff; }

.chl-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--chl-accent);
}
.chl-eyebrow--navy { color: var(--chl-navy); }

.chl-head { display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin-bottom: 44px; }
.chl-head--center { align-items: center; text-align: center; max-width: none; margin-bottom: 48px; }
.chl-head--center .chl-head__note { max-width: 520px; }
.chl-head__note { font-size: 15px; color: var(--chl-muted); }
.chl-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; }
.chl-head-row .chl-head { margin-bottom: 0; }
.chl-head-row__aside { font-size: 14px; color: var(--chl-muted); max-width: 360px; }

/* --- Кнопки ------------------------------------------------------------ */
.chl .chl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	border-radius: 999px; padding: 17px 32px; min-height: 0;
	font-family: var(--chl-font); font-weight: 700; font-size: 15px; line-height: 1.2;
	text-transform: none; letter-spacing: normal; cursor: pointer;
	border: 1.5px solid transparent; box-shadow: none;
}
.chl .chl-btn--primary { background: var(--chl-navy); color: #fff; }
.chl .chl-btn--primary:hover { background: var(--chl-accent); color: #fff; }
.chl .chl-btn--outline { background: transparent; color: var(--chl-navy); border-color: var(--chl-navy); padding: 15.5px 30px; }
.chl .chl-btn--outline:hover { background: var(--chl-navy); color: #fff; }
.chl .chl-btn--light { background: #fff; color: var(--chl-navy); }
.chl .chl-btn--light:hover { background: var(--chl-accent); color: #fff; }
.chl .chl-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); padding: 15.5px 30px; }
.chl .chl-btn--outline-light:hover { background: #fff; color: var(--chl-navy); border-color: #fff; }
.chl .chl-btn--sm { padding: 12px 24px; font-size: 13.5px; }
.chl .chl-btn:focus-visible, .chl a:focus-visible, .chl summary:focus-visible { outline: 2px solid var(--chl-accent); outline-offset: 2px; }

/* Кнопки «Замовити», що відкривають шторку SDT One Click ([sdt_consultation_button class="chl-btn chl-btn--… chl-sdt-btn"]).
   Плагін інлайнить свій колір, радіус і uppercase з !important — повертаємо вигляд .chl-btn. */
.chl .sdt-one-click-btn.chl-sdt-btn {
	min-height: 0; height: auto; margin: 0; padding: 17px 32px;
	font-family: var(--chl-font); font-size: 15px; font-weight: 700; line-height: 1.2;
	text-transform: none; letter-spacing: normal; white-space: normal;
	border-width: 1.5px; border-style: solid; border-radius: 999px !important;
	box-shadow: none; transform: none; opacity: 1;
}
.chl .sdt-one-click-btn.chl-sdt-btn span { color: inherit; }
.chl .sdt-one-click-btn.chl-btn--light { background-color: #fff !important; border-color: #fff !important; color: var(--chl-navy) !important; }
.chl .sdt-one-click-btn.chl-btn--light:hover { background-color: var(--chl-accent) !important; border-color: var(--chl-accent) !important; color: #fff !important; }
.chl .sdt-one-click-btn.chl-btn--outline { padding: 15.5px 30px; background-color: transparent !important; border-color: var(--chl-navy) !important; color: var(--chl-navy) !important; }
.chl .sdt-one-click-btn.chl-btn--outline:hover { background-color: var(--chl-navy) !important; color: #fff !important; }
.chl .sdt-one-click-btn.chl-btn--primary { background-color: var(--chl-navy) !important; border-color: var(--chl-navy) !important; color: #fff !important; }
.chl .sdt-one-click-btn.chl-btn--primary:hover { background-color: var(--chl-accent) !important; border-color: var(--chl-accent) !important; }
.chl .sdt-one-click-btn.chl-sdt-btn.sdt-one-click-is-loading { opacity: .7; cursor: progress; }

.chl-card { background: #fff; border: 1px solid var(--chl-line); border-radius: 20px; }
.chl-chip {
	display: inline-flex; align-items: center;
	background: #fff; border: 1px solid var(--chl-line); border-radius: 999px;
	padding: 10px 18px; font-size: 14px; font-weight: 600; color: var(--chl-navy); white-space: nowrap;
}
.chl-chip--dark { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.chl a.chl-chip:hover { border-color: var(--chl-navy); color: var(--chl-navy); }
.chl a.chl-chip.is-active, .chl .chl-chip.is-active { background: var(--chl-navy); border-color: var(--chl-navy); color: #fff; }

/* --- Службові плейсхолдери (лише для адміністраторів) ------------------- */
.chl-ph { display: inline-block; background: #FFF4CC; color: #7A5B00; border-radius: 6px; padding: 0 6px; font-family: var(--chl-font); font-size: .8em; font-weight: 700; vertical-align: middle; }
.chl-editor-note { margin: 0 auto; max-width: var(--chl-site-width, 1510px); padding: 14px 20px; border: 1.5px dashed #E0B400; border-radius: 14px; background: #FFFBEA; color: #6B5200; font-size: 13.5px; font-weight: 600; }
.chl-section .chl-editor-note { margin-top: 8px; }

/* --- Хлібні крихти ----------------------------------------------------- */
.chl-crumbs { background: #fff; border-bottom: 1px solid var(--chl-line); }
.chl-crumbs ol { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 56px; padding: 12px 0; font-size: 13.5px; }
.chl-crumbs li { display: inline-flex; align-items: center; gap: 8px; color: var(--chl-muted); }
.chl-crumbs li + li::before { content: '/'; color: var(--chl-muted); }
.chl-crumbs a { color: var(--chl-muted); font-weight: 600; }
.chl-crumbs [aria-current] { color: var(--chl-navy); font-weight: 700; }

/* --- Property bar: Дім / Офіс / ТРЦ + гео ------------------------------- */
.chl-propbar { background: #fff; border-bottom: 1px solid var(--chl-line); position: relative; z-index: 30; }
.chl-propbar .chl-container { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.chl-propbar__tabs { display: flex; align-items: center; gap: 6px; background: var(--chl-ivory); border-radius: 999px; padding: 5px; }
.chl .chl-propbar__tab { padding: 9px 20px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--chl-navy); }
.chl .chl-propbar__tab:hover { background: #fff; color: var(--chl-navy); }
.chl .chl-propbar__tab.is-active { background: var(--chl-navy); color: #fff; }
.chl-geo { position: relative; }
.chl-geo > summary {
	display: inline-flex; align-items: center; gap: 9px; cursor: pointer; list-style: none;
	border: 1.5px solid var(--chl-line); border-radius: 999px; padding: 10px 18px 10px 16px;
	font-size: 13.5px; font-weight: 700; color: var(--chl-navy); background: #fff;
}
.chl-geo > summary::-webkit-details-marker { display: none; }
.chl-geo[open] > summary .chl-geo__chevron { transform: rotate(180deg); }
.chl-geo__chevron { transition: transform .15s; }
.chl-geo__panel {
	position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
	background: #fff; border: 1px solid var(--chl-line); border-radius: 16px;
	box-shadow: 0 16px 40px rgba(18,34,46,.16); padding: 24px;
	display: grid; grid-template-columns: 1fr 1fr; gap: 36px; min-width: 440px;
}
.chl-geo__panel h4 { font-family: var(--chl-font); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--chl-muted); margin: 0 0 12px; }
.chl-geo__panel ul { display: flex; flex-direction: column; gap: 11px; }
.chl-geo__panel a { font-size: 14px; color: var(--chl-ink); font-weight: 600; }
.chl-geo__panel a.is-hub { color: var(--chl-navy); font-weight: 700; }
.chl-geo__panel a[aria-current] { color: var(--chl-accent); }

/* --- Абстрактна графіка замість фото ------------------------------------ */
.chl-art { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--chl-grad); border-radius: inherit; }
.chl-art__waves { position: absolute; inset: 0; width: 100%; height: 100%; }
.chl-art__icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .92; }

/* --- Hero --------------------------------------------------------------- */
.chl-hero { position: relative; background: var(--chl-navy); overflow: hidden; }
.chl-hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; padding-top: 80px; padding-bottom: 80px; }
.chl-hero__text { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.chl .chl-hero h1 { color: #fff; }
.chl-hero__lead { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.78); max-width: 560px; }
.chl-hero__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 4px; }
.chl-hero__chips { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 16px; }
.chl-hero__media { height: 320px; border-radius: 20px; overflow: hidden; }
.chl-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Перший екран на всю ширину: відео або слайдер під затемненням у фірмовому navy */
.chl-hero--full { display: flex; align-items: center; min-height: min(86vh, 780px); }
.chl-hero__bg { position: absolute; inset: 0; overflow: hidden; background: var(--chl-navy); container-type: size; }
.chl-hero__bg img, .chl-hero__video, .chl-hero__slide, .chl-hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.chl-hero__slide { opacity: 0; transition: opacity 1.2s ease; }
.chl-hero__slide.is-active { opacity: 1; }
.chl-hero__yt { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.chl-hero.is-video-ready .chl-hero__yt { opacity: 1; }
.chl-hero__yt iframe { position: absolute; top: 50%; left: 50%; width: max(100cqw, 177.78cqh); height: max(56.25cqw, 100cqh); transform: translate(-50%, -50%); border: 0; pointer-events: none; }
.chl-hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(32,62,120,.9) 0%, rgba(32,62,120,.7) 45%, rgba(32,62,120,.25) 100%); pointer-events: none; }
.chl-hero__inner { position: relative; z-index: 2; width: 100%; padding-top: 120px; padding-bottom: 120px; }
.chl-hero--full .chl-hero__text { max-width: 680px; }
.chl-hero--full .chl-hero__lead { color: rgba(255,255,255,.88); }
.chl-hero__dots { position: absolute; z-index: 3; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; gap: 10px; }
.chl .chl-hero__dot { width: 10px; height: 10px; min-height: 0; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.45); cursor: pointer; transition: width .2s, background-color .2s; }
.chl .chl-hero__dot.is-active { width: 28px; background: #fff; }
.chl .chl-hero__pause { position: absolute; z-index: 3; right: 24px; bottom: 20px; width: 40px; height: 40px; min-height: 0; padding: 0; border: 1.5px solid rgba(255,255,255,.55); border-radius: 999px; background: rgba(32,62,120,.35); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chl .chl-hero__pause:hover { background: rgba(32,62,120,.7); border-color: #fff; }
.chl-hero__pause-icon { display: block; width: 12px; height: 14px; border-left: 4px solid #fff; border-right: 4px solid #fff; }
.chl-hero.is-paused .chl-hero__pause-icon { width: 0; height: 0; margin-left: 4px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; }
.chl .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* --- Гео-опис ----------------------------------------------------------- */
.chl-geo-text { padding: 72px 0 0; }

/* --- Що входить -------------------------------------------------------- */
.chl-section--includes { padding: 96px 0 80px; }
.chl-checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.chl-check { display: flex; gap: 12px; align-items: flex-start; padding: 18px; background: #fff; border: 1px solid var(--chl-line); border-radius: 16px; font-size: 14.5px; line-height: 1.5; }
.chl-check .chl-icon { flex-shrink: 0; color: var(--chl-accent); }

/* --- Кейси: картка «до / після» ----------------------------------------- */
.chl-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.chl-case-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; border: 1px solid var(--chl-line); background: #fff; color: inherit; }
.chl a.chl-case-card:hover { border-color: var(--chl-accent); color: inherit; }
.chl a.chl-case-card:hover .chl-case-card__title { color: var(--chl-accent); }
.chl-case-card__pair { display: grid; grid-template-columns: 1fr 1fr; height: 200px; }
.chl-case-card__pair--single { grid-template-columns: 1fr; }
.chl-case-card__half { position: relative; overflow: hidden; background: #D7DEE4; }
.chl-case-card__half img { width: 100%; height: 100%; object-fit: cover; }
.chl-case-card__half--after:not(:has(img)) { background: var(--chl-grad); }
.chl-badge {
	position: absolute; top: 12px; left: 12px; z-index: 2;
	font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	padding: 5px 10px; border-radius: 999px;
	background: rgba(18,34,46,.65); color: #fff;
}
.chl-badge--after { background: rgba(255,255,255,.9); color: var(--chl-navy); }
.chl-case-card__body { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.chl-case-card__title { font-size: 14.5px; font-weight: 700; color: var(--chl-navy); line-height: 1.4; }
.chl-case-card__meta { font-size: 12.5px; color: var(--chl-muted); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.chl-cases-more { margin-top: 36px; display: flex; justify-content: center; }

/* --- Ціни -------------------------------------------------------------- */
.chl-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.chl-price { padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.chl .chl-price h3 { font-size: 19px; }
.chl-price__sub { font-size: 14px; color: var(--chl-muted); }
.chl-price__value { font-family: var(--chl-font-head); font-size: 26px; line-height: 1.2; color: var(--chl-navy); margin-top: auto !important; }
.chl-price__value--ask { font-size: 20px; }
.chl-price__unit { font-family: var(--chl-font); font-size: 14px; font-weight: 600; color: var(--chl-muted); margin-left: 4px; }
.chl-price .chl-btn { margin-top: 8px; }
.chl-price--featured { background: var(--chl-navy); border-color: var(--chl-navy); }
.chl .chl-price--featured h3, .chl-price--featured .chl-price__value { color: #fff; }
.chl-price--featured .chl-price__sub, .chl-price--featured .chl-price__unit { color: rgba(255,255,255,.7); }

/* --- Види послуг ------------------------------------------------------- */
.chl-subs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.chl .chl-sub { padding: 26px; display: flex; flex-direction: column; gap: 10px; color: inherit; }
.chl .chl-sub:hover { border-color: var(--chl-accent); color: inherit; box-shadow: 0 12px 30px rgba(18,34,46,.08); }
.chl .chl-sub h3 { font-size: 17px; }
.chl-sub__text { font-size: 13.5px; line-height: 1.55; color: var(--chl-muted); }
.chl-sub__more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--chl-accent); }
.chl-sub__draft { align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #7A5B00; background: #FFF4CC; border-radius: 999px; padding: 2px 8px; }

/* --- SEO-текст ---------------------------------------------------------- */
.chl-prose { font-size: 15.5px; line-height: 1.75; color: var(--chl-ink); }
.chl-prose > * + * { margin-top: 1em; }
.chl-prose h2 { font-size: 26px; line-height: 1.25; margin-top: 1.8em; }
.chl-prose h3 { font-size: 19px; margin-top: 1.5em; }
.chl-prose h2:first-child, .chl-prose h3:first-child { margin-top: 0; }
.chl-prose ul, .chl-prose ol { padding-left: 1.3em; }
.chl-prose ul { list-style: disc; }
.chl-prose ol { list-style: decimal; }
.chl-prose li + li { margin-top: .35em; }
.chl-prose li::marker { color: var(--chl-accent); }
.chl-prose a { color: var(--chl-accent); text-decoration: underline; text-underline-offset: 3px; }
.chl-prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.chl-prose th, .chl-prose td { border-bottom: 1px solid var(--chl-line); padding: 10px 12px; text-align: left; }

/* --- Відгуки ----------------------------------------------------------- */
.chl-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.chl-review { padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.chl-review__stars { display: flex; gap: 3px; color: var(--chl-accent); }
.chl-review__text { font-size: 14.5px; line-height: 1.65; color: var(--chl-muted); flex: 1; }
.chl-review__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--chl-line); }
.chl-review__author { font-size: 14px; font-weight: 700; color: var(--chl-navy); }
.chl-review__service { font-size: 12.5px; color: var(--chl-muted); text-align: right; }

/* --- Компанії-клієнти -------------------------------------------------- */
.chl-partners { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.chl-partner { height: 76px; border-radius: 14px; background: #fff; border: 1px solid var(--chl-line); display: flex; align-items: center; justify-content: center; padding: 12px; font-size: 13px; font-weight: 700; color: var(--chl-muted); text-align: center; }
.chl-partner img { max-height: 44px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .8; }

/* --- Процес ------------------------------------------------------------ */
.chl-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.chl-steps--3 { grid-template-columns: repeat(3, 1fr); }
.chl-steps--5 { grid-template-columns: repeat(5, 1fr); }
.chl-steps--6 { grid-template-columns: repeat(3, 1fr); }
.chl-step { display: flex; flex-direction: column; gap: 14px; }
.chl-step__num { width: 44px; height: 44px; border-radius: 999px; background: var(--chl-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--chl-font-head); font-weight: 700; font-size: 16px; flex-shrink: 0; }
.chl .chl-step h3 { font-size: 16px; }
.chl-step p { font-size: 13.5px; line-height: 1.55; color: var(--chl-muted); }

/* --- FAQ --------------------------------------------------------------- */
.chl-faq__item { padding: 6px; margin: 0; }
.chl-faq__entry + .chl-faq__entry { margin-top: 14px; }
.chl-faq__item > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; cursor: pointer; list-style: none; }
.chl-faq__item > summary::-webkit-details-marker { display: none; }
.chl .chl-faq__q { margin: 0; font-family: var(--chl-font); font-size: 15.5px; font-weight: 700; color: var(--chl-navy); line-height: 1.4; letter-spacing: normal; text-transform: none; }
.chl-faq__icon { flex-shrink: 0; position: relative; width: 20px; height: 20px; color: var(--chl-navy); }
.chl-faq__icon::before, .chl-faq__icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.4px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%); transition: transform .15s; }
.chl-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.chl-faq__item[open] .chl-faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.chl-faq__a { padding: 0 24px 22px; font-size: 14.5px; line-height: 1.65; color: var(--chl-muted); }
.chl-faq__a p + p { margin-top: .7em; }

/* --- Заявка ------------------------------------------------------------ */
.chl-contact { position: relative; overflow: hidden; background: var(--chl-navy); padding: 96px 0; scroll-margin-top: 90px; }
.chl-contact__waves { position: absolute; right: -100px; bottom: -80px; width: 560px; height: 420px; opacity: .6; pointer-events: none; }
.chl-contact__grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.chl-contact__text { display: flex; flex-direction: column; gap: 20px; }
.chl .chl-contact h2 { color: #fff; }
.chl-contact__lead { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.72); max-width: 420px; }
.chl .chl-contact__phone { display: inline-flex; align-items: center; gap: 12px; padding-top: 10px; color: #fff; font-weight: 700; font-size: 15px; }
.chl .chl-contact__phone:hover { color: var(--chl-accent); }
.chl-contact__phone .chl-icon { color: var(--chl-accent); }
.chl-form { background: #fff; border-radius: 22px; padding: 36px; }

/* Форма SDT One Click Order ([sdt_one_click_inline_form]) під дизайн макету.
   Плагін інлайнить колір кнопки з !important — перебиваємо вищою специфічністю. */
.chl .chl-form .sdt-inline-partner-form { padding: 0; border-radius: 0; background: transparent; }
.chl .chl-form .sdt-inline-partner-form__title, .chl .chl-form .sdt-inline-partner-form__intro { display: none; }
.chl .chl-form .sdt-inline-partner-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.chl .chl-form .sdt-one-click-field { display: block; margin: 0; }
.chl .chl-form .sdt-one-click-field--full { grid-column: 1 / -1; }
.chl .chl-form .sdt-one-click-field > span { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--chl-muted); }
.chl .chl-form .sdt-one-click-field b { color: var(--chl-accent); font-weight: 700; }
.chl .chl-form .sdt-one-click-input {
	width: 100%; height: auto; min-height: 0; margin: 0;
	border: 1.5px solid var(--chl-line); border-radius: 14px; padding: 14px 16px;
	font-family: var(--chl-font); font-size: 15px; line-height: 1.4; color: var(--chl-ink); background: #fff;
	box-shadow: none; appearance: none;
}
.chl .chl-form textarea.sdt-one-click-input { min-height: 96px; resize: vertical; }
.chl .chl-form .sdt-one-click-input:focus { outline: 2px solid var(--chl-accent); outline-offset: 1px; border-color: var(--chl-line); }
.chl .chl-form .sdt-one-click-field.has-error .sdt-one-click-input { border-color: #C0392B; box-shadow: 0 0 0 1px #C0392B; }
.chl .chl-form .sdt-one-click-submit {
	width: 100%; min-height: 0; height: auto; margin: 22px 0 0;
	background-color: var(--chl-navy) !important; border: 0 !important; color: #fff !important; border-radius: 999px !important;
	padding: 17px 32px; font-family: var(--chl-font); font-weight: 700 !important; font-size: 15px; line-height: 1.2;
	text-transform: none; letter-spacing: normal; cursor: pointer; transform: none; opacity: 1;
}
.chl .chl-form .sdt-one-click-submit:hover { background-color: var(--chl-accent) !important; }
.chl .chl-form .sdt-one-click-submit:disabled { opacity: .7; cursor: progress; }
.chl .chl-form .sdt-one-click-drawer__message { margin-top: 14px; font-size: 14px; line-height: 1.5; }
.chl .chl-form .sdt-one-click-drawer__message:empty { display: none; }
.chl .chl-form .sdt-one-click-drawer__message.is-success { color: #1E7B45; font-weight: 600; }
.chl .chl-form .sdt-one-click-drawer__message.is-error { color: #C0392B; }
.chl-form__fallback { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

/* ==========================================================================
   Кейси: архів і окремий кейс
   ========================================================================== */
.chl-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.chl-empty { padding: 56px 32px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.chl-empty p { color: var(--chl-muted); max-width: 520px; }

.chl .navigation.pagination { margin-top: 48px; }
.chl .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.chl .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--chl-line); background: #fff; font-weight: 700; color: var(--chl-navy); }
.chl .page-numbers.current { background: var(--chl-navy); border-color: var(--chl-navy); color: #fff; }

.chl-case-hero { background: var(--chl-navy); padding: 72px 0 80px; }
.chl-case-hero__head { display: flex; flex-direction: column; gap: 18px; max-width: 820px; margin-bottom: 36px; }
.chl .chl-case-hero h1 { color: #fff; font-size: 38px; line-height: 1.2; }
.chl-case-hero__services { display: flex; flex-wrap: wrap; gap: 10px; }
.chl .chl-case-hero__services a { color: #fff; }
.chl .chl-case-hero__services a:hover { background: #fff; color: var(--chl-navy); }

/* Повзунок порівняння до/після */
.chl-compare { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #D7DEE4; --pos: 50%; user-select: none; }
.chl-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.chl-compare__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.chl-compare__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; pointer-events: none; box-shadow: 0 0 0 1px rgba(18,34,46,.12); }
.chl-compare__knob { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 999px; background: #fff; color: var(--chl-navy); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(18,34,46,.25); }
.chl-compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; z-index: 3; }
.chl-compare__range:focus-visible ~ .chl-compare__line .chl-compare__knob { outline: 3px solid var(--chl-accent); outline-offset: 2px; }
.chl-compare .chl-badge--after { left: auto; right: 12px; }
.chl-photo-single { border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 9; }
.chl-photo-single img { width: 100%; height: 100%; object-fit: cover; }

.chl-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.chl-fact { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.chl-fact__label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.65); display: inline-flex; gap: 6px; align-items: center; }
.chl-fact__label .chl-icon { color: var(--chl-accent); }
.chl-fact__value { font-size: 15.5px; font-weight: 700; color: #fff; }

.chl-case-body { display: grid; grid-template-columns: 1.4fr .9fr; gap: 48px; align-items: start; }
.chl-case-body__main { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.chl-case-block { display: flex; flex-direction: column; gap: 16px; }
.chl .chl-case-block h2 { font-size: 24px; }
.chl-case-block__text { font-size: 15.5px; line-height: 1.75; }
.chl-case-aside { position: sticky; top: 110px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.chl .chl-case-aside h3 { font-size: 16px; }
.chl-case-aside__links { display: flex; flex-direction: column; gap: 10px; }
.chl .chl-case-aside__links a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--chl-ivory); font-weight: 700; font-size: 14px; }

.chl-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.chl-gallery a { display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; }
.chl-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.chl-gallery a:hover img { transform: scale(1.03); }

.chl-quote { padding: 28px; display: flex; flex-direction: column; gap: 14px; border-left: 4px solid var(--chl-accent); }
.chl-quote p { font-size: 15.5px; line-height: 1.7; color: var(--chl-ink); font-style: italic; }
.chl-quote cite { font-style: normal; font-weight: 700; color: var(--chl-navy); font-size: 14px; }

/* ==========================================================================
   Адаптив (у макеті лише десктоп 1440 — брейкпоінти додано під нього)
   ========================================================================== */
@media (max-width: 1100px) {
	.chl-partners { grid-template-columns: repeat(3, 1fr); }
	.chl-steps, .chl-steps--5 { grid-template-columns: repeat(2, 1fr); }
	.chl-case-body { grid-template-columns: 1fr; }
	.chl-case-aside { position: static; }
}

@media (max-width: 1024px) {
	.chl { --chl-gutter: 24px; }
	.chl-hero__grid { grid-template-columns: 1fr; gap: 36px; padding-top: 56px; padding-bottom: 56px; }
	.chl-hero__media { height: 240px; }
	.chl-checks, .chl-cases, .chl-prices, .chl-subs, .chl-reviews, .chl-gallery { grid-template-columns: repeat(2, 1fr); }
	.chl-contact__grid { grid-template-columns: 1fr; gap: 36px; }
	.chl-facts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.chl { --chl-gutter: 16px; font-size: 14.5px; }
	.chl-section, .chl-section--tint, .chl-section--includes, .chl-contact { padding: 64px 0; }
	.chl-h1, .chl .chl-case-hero h1 { font-size: 30px; }
	.chl-h2 { font-size: 24px; }
	.chl-head, .chl-head--center, .chl-head-row { margin-bottom: 32px; }
	.chl-checks, .chl-cases, .chl-prices, .chl-subs, .chl-reviews, .chl-steps, .chl-steps--3, .chl-steps--5, .chl-steps--6 { grid-template-columns: 1fr; }
	.chl-partners { grid-template-columns: repeat(2, 1fr); }
	.chl-gallery { grid-template-columns: repeat(2, 1fr); }
	.chl-hero__actions .chl-btn { width: 100%; }
	.chl-hero__chips { gap: 8px; }
	.chl-chip { padding: 8px 14px; font-size: 13px; }
	.chl-hero__media { height: 200px; }
	.chl-hero--full { min-height: 560px; }
	.chl-hero__inner { padding-top: 72px; padding-bottom: 96px; }
	.chl-hero__overlay { background: linear-gradient(180deg, rgba(32,62,120,.5) 0%, rgba(32,62,120,.62) 45%, rgba(32,62,120,.85) 100%); }
	.chl .chl-hero__pause { right: 16px; bottom: 16px; }
	.chl-case-card__pair { height: 180px; }
	.chl-form { padding: 24px 20px; }
	.chl .chl-form .sdt-inline-partner-form__grid { grid-template-columns: 1fr; gap: 14px; }
	.chl-faq__item > summary { padding: 16px 18px; }
	.chl-faq__a { padding: 0 18px 18px; }
	.chl-propbar .chl-container { gap: 12px; }
	.chl-propbar__tabs { width: 100%; }
	.chl .chl-propbar__tab { flex: 1; text-align: center; padding: 9px 10px; }
	.chl-geo { width: 100%; }
	.chl-geo > summary { width: 100%; justify-content: space-between; }
	.chl-geo__panel { position: static; margin-top: 10px; min-width: 0; grid-template-columns: 1fr; gap: 20px; box-shadow: none; }
	.chl-compare { aspect-ratio: 4 / 3; border-radius: 16px; }
	.chl-facts { grid-template-columns: 1fr 1fr; gap: 10px; }
	.chl-case-hero { padding: 48px 0 56px; }
	.chl-contact__waves { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.chl *, .chl *::before, .chl *::after { transition: none !important; }
}

/* ==========================================================================
   Картки послуг (блок «Види…» і шорткод [chl_services]):
   ліворуч — кругла іконка + назва, опис, кнопка; праворуч — фото з легким збільшенням при наведенні.
   ========================================================================== */
.chl-embed { background: transparent; }
.chl-svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.chl-svc-card {
	display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 36px;
	padding: 34px; border-radius: 20px; background: var(--chl-card-tint);
	transition: box-shadow .3s ease;
}
.chl-svc-card:hover { box-shadow: 0 18px 40px rgba(18,34,46,.08); }
.chl-svc-card__body { display: flex; flex-direction: column; min-width: 0; }
.chl-svc-card__head { display: flex; align-items: center; gap: 18px; }
.chl-svc-card__icon { width: 68px; height: 68px; flex-shrink: 0; border-radius: 999px; background: var(--chl-navy); display: flex; align-items: center; justify-content: center; }
.chl .chl-svc-card__title { font-size: 22px; line-height: 1.3; font-weight: 600; }
.chl .chl-svc-card__title a { color: var(--chl-ink); }
.chl .chl-svc-card__title a:hover { color: var(--chl-navy); }
.chl-svc-card .chl-sub__draft { margin-top: 14px; }
.chl-svc-card__text { margin: 24px 0 28px !important; font-size: 16px; line-height: 1.75; color: var(--chl-muted); }
.chl .chl-svc-card__btn { align-self: flex-start; margin-top: auto; padding: 16px 34px; }
.chl-svc-card__head + .chl-svc-card__btn { margin-top: 28px; }
.chl-svc-card__media { position: relative; display: block; width: 100%; min-width: 0; aspect-ratio: 5 / 6; border-radius: 14px; overflow: hidden; background: var(--chl-grad); }
.chl-svc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.chl-svc-card__media .chl-art { position: absolute; inset: 0; transition: transform .6s ease; }
.chl-svc-card:hover .chl-svc-card__media img,
.chl-svc-card:hover .chl-svc-card__media .chl-art { transform: scale(1.08) rotate(1.5deg); }

/* Поява при прокручуванні (лише з JS і без prefers-reduced-motion) */
.chl-js-reveal .chl-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.chl-js-reveal .chl-reveal.is-visible { opacity: 1; transform: none; }
.chl-js-reveal .chl-svc-grid > .chl-reveal:nth-child(even) { transition-delay: .12s; }

@media (max-width: 1100px) {
	.chl-svc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.chl-svc-grid { gap: 20px; }
	.chl-svc-card { grid-template-columns: 1fr; gap: 22px; padding: 22px; }
	.chl-svc-card__media { order: -1; aspect-ratio: 16 / 10; min-height: 0; }
	.chl-svc-card__icon { width: 54px; height: 54px; }
	.chl .chl-svc-card__title { font-size: 19px; }
	.chl-svc-card__text { margin: 16px 0 20px !important; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
	.chl-svc-card:hover .chl-svc-card__media img, .chl-svc-card:hover .chl-svc-card__media .chl-art { transform: none; }
}

/* ==========================================================================
   «Як проходить робота»: кроки з іконкою, номером 01…0N і пунктирною стрілкою до наступного
   ========================================================================== */
.chl-process { position: relative; overflow: hidden; }
.chl-process__bg { position: absolute; inset: 0; opacity: .12; pointer-events: none; }
.chl-process__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.chl-process .chl-container { position: relative; }
.chl-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 56px; }
.chl-flow--1 { grid-template-columns: minmax(0, 1fr); }
.chl-flow--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chl-flow--3, .chl-flow--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chl-flow--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 40px; }
.chl-flow__item { position: relative; display: flex; flex-direction: column; gap: 12px; }
.chl-flow__top { position: relative; height: 100px; margin-bottom: 14px; }
.chl-flow__icon { position: absolute; left: 0; bottom: 0; display: flex; color: var(--chl-accent); }
.chl-flow__num {
	position: absolute; left: 76px; top: 0;
	width: 40px; height: 40px; border-radius: 999px;
	display: flex; align-items: center; justify-content: center;
	background: var(--chl-navy); color: #fff;
	font-family: var(--chl-font-head); font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.chl-flow__arrow { position: absolute; right: -52px; top: 34px; width: 96px; height: 56px; color: var(--chl-accent); opacity: .6; }
.chl .chl-flow__title { font-size: 19px; line-height: 1.3; }
.chl-flow__text { font-size: 15px; line-height: 1.65; color: var(--chl-muted); }
.chl-js-reveal .chl-flow > .chl-reveal:nth-child(2) { transition-delay: .12s; }
.chl-js-reveal .chl-flow > .chl-reveal:nth-child(3) { transition-delay: .24s; }
.chl-js-reveal .chl-flow > .chl-reveal:nth-child(4) { transition-delay: .36s; }
.chl-js-reveal .chl-flow > .chl-reveal:nth-child(n+5) { transition-delay: .48s; }

/* ==========================================================================
   «Про компанію»: текст ліворуч, два фото, що перекривають одне одне, праворуч
   ========================================================================== */
.chl-about__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 72px; align-items: center; }
.chl-about__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.chl .chl-about__title { font-size: 40px; line-height: 1.18; }
.chl-about__subtitle { font-size: 20px; font-weight: 700; line-height: 1.45; color: var(--chl-accent); }
.chl-about__features { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 36px; margin: 8px 0 !important; }
.chl-about__feature { display: flex; align-items: flex-start; gap: 16px; }
.chl-about__feature-icon { flex-shrink: 0; display: flex; color: var(--chl-accent); }
.chl .chl-about__feature-title { margin-bottom: 6px; font-family: var(--chl-font); font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--chl-ink); }
.chl-about__feature-text { font-size: 15px; line-height: 1.6; color: var(--chl-muted); }
.chl-about__lead { font-size: 16px; line-height: 1.75; color: var(--chl-ink); }
.chl-about__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; margin: 6px 0 !important; }
.chl-about__logos img { max-height: 46px; width: auto; filter: grayscale(1); opacity: .6; transition: filter .2s, opacity .2s; }
.chl-about__logos li:hover img { filter: none; opacity: 1; }
.chl .chl-about__btn { margin-top: 6px; }
.chl-about__media { position: relative; width: 100%; aspect-ratio: 1 / .96; min-height: 420px; }
.chl-about__img { position: absolute; overflow: hidden; background: var(--chl-grad); }
.chl-about__img img { width: 100%; height: 100%; object-fit: cover; }
.chl-about__img .chl-art { position: absolute; inset: 0; }
.chl-about__img--main { right: 0; top: 0; width: 60%; height: 100%; border-radius: 32px 88px 88px 32px; }
.chl-about__img--front { left: 0; top: 4%; width: 62%; height: 92%; border: 14px solid #fff; border-radius: 64px; box-shadow: 0 30px 60px rgba(18,34,46,.18); }

@media (max-width: 1100px) {
	.chl-flow, .chl-flow--3, .chl-flow--5, .chl-flow--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.chl-flow__arrow { display: none; }
}
@media (max-width: 1024px) {
	.chl-about__grid { grid-template-columns: 1fr; gap: 48px; }
	.chl-about__media { max-width: 600px; margin: 0 auto; }
}
@media (max-width: 767px) {
	.chl-flow, .chl-flow--2, .chl-flow--3, .chl-flow--5, .chl-flow--6 { grid-template-columns: 1fr; gap: 32px; }
	.chl-flow__top { height: 84px; margin-bottom: 6px; }
	.chl-flow__icon svg { width: 52px; height: 52px; }
	.chl-flow__num { left: 62px; }
	.chl .chl-about__title { font-size: 28px; }
	.chl-about__subtitle { font-size: 17px; }
	.chl-about__features { grid-template-columns: 1fr; }
	.chl-about__media { min-height: 320px; }
	.chl-about__img--front { border-width: 10px; border-radius: 44px; }
	.chl-about__img--main { border-radius: 24px 60px 60px 24px; }
}

/* Прайс-таблиці («площа → ціна») і примітки до цін */
.chl-prices + .chl-ptables { margin-top: 32px; }
.chl-ptables { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; }
.chl-ptable { padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.chl .chl-ptable__title { font-size: 19px; }
.chl-ptable__note { font-size: 14px; color: var(--chl-muted); }
.chl-ptable table { width: 100%; border-collapse: collapse; margin: 4px 0 8px; }
.chl-ptable th, .chl-ptable td { padding: 11px 0; border-bottom: 1px dashed var(--chl-line); font-size: 15px; text-align: left; vertical-align: top; }
.chl-ptable th { font-weight: 500; color: var(--chl-ink); padding-right: 16px; }
.chl-ptable td { font-weight: 700; color: var(--chl-navy); text-align: right; white-space: nowrap; }
.chl-ptable .chl-btn { align-self: flex-start; margin-top: auto; }
.chl-pnotes { margin-top: 28px !important; display: flex; flex-direction: column; gap: 8px; max-width: 900px; }
.chl-pnotes li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.6; color: var(--chl-muted); }
.chl-pnotes li::before { content: ''; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 999px; background: var(--chl-accent); }
@media (max-width: 767px) { .chl-ptables { grid-template-columns: 1fr; } .chl-ptable { padding: 22px; } }

.chl-prices--1 { grid-template-columns: minmax(0, 440px); justify-content: center; }
.chl-prices--2 { grid-template-columns: repeat(2, minmax(0, 440px)); justify-content: center; }
@media (max-width: 767px) { .chl-prices--1, .chl-prices--2 { grid-template-columns: 1fr; } }

/* ==========================================================================
   Верх першого екрана: хлібні крихти, під ними перемикач Дім / Офіс / ТРЦ + гео —
   поверх фону (графіка, фото, відео чи слайдер)
   ========================================================================== */
.chl-hero__top { position: relative; z-index: 5; width: 100%; padding-top: 24px; }
.chl-crumbs--inline { background: transparent; border: 0; }
.chl-crumbs--inline ol { min-height: 0; padding: 0; }
.chl-crumbs--inline li, .chl-crumbs--inline li + li::before { color: rgba(255,255,255,.55); }
.chl .chl-crumbs--inline a { color: rgba(255,255,255,.78); }
.chl .chl-crumbs--inline a:hover { color: #fff; }
.chl-crumbs--inline [aria-current] { color: #fff; }
.chl-propbar--inline { position: relative; background: transparent; border: 0; margin-top: 18px; }
.chl-propbar__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.chl-propbar--inline .chl-propbar__tabs { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(6px); }
.chl .chl-propbar--inline .chl-propbar__tab { color: #fff; }
.chl .chl-propbar--inline .chl-propbar__tab:hover { background: rgba(255,255,255,.16); color: #fff; }
.chl .chl-propbar--inline .chl-propbar__tab.is-active { background: #fff; color: var(--chl-navy); }
.chl-propbar--inline .chl-geo > summary { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; backdrop-filter: blur(6px); }
.chl-propbar--inline .chl-geo > summary:hover { background: rgba(255,255,255,.18); }

/* Відступи першого екрана з урахуванням верхньої панелі */
.chl-hero__grid { padding-top: 48px; }
.chl-hero--full { flex-direction: column; align-items: stretch; }
.chl-hero--full .chl-hero__inner { flex: 1; display: flex; align-items: center; padding-top: 56px; padding-bottom: 110px; }

@media (max-width: 1024px) {
	.chl-hero__grid { padding-top: 36px; }
}
@media (max-width: 767px) {
	.chl-hero__top { padding-top: 16px; }
	.chl-propbar--inline { margin-top: 14px; }
	.chl-propbar--inline .chl-geo__panel { position: static; }
	.chl-hero--full .chl-hero__inner { padding-top: 36px; padding-bottom: 96px; }
}

/* Кейс: верхня панель у першому екрані */
.chl-case-hero { padding-top: 0; }
.chl-case-hero__main { padding-top: 48px; }
@media (max-width: 767px) { .chl-case-hero__main { padding-top: 32px; } }

/* ==========================================================================
   Калькулятор вартості [chl_calculator]
   ========================================================================== */
.chl-calc-section { background: var(--chl-tint); scroll-margin-top: 90px; }
.chl-calc { padding: 48px 56px; background: #fff; border-radius: 28px; box-shadow: 0 20px 50px rgba(18,34,46,.06); }
.chl-calc__data { display: none; }
.chl-calc [hidden] { display: none !important; }
.chl-calc__block { margin: 0 0 36px; padding: 0; border: 0; min-width: 0; }
.chl .chl-calc__title { display: block; width: 100%; padding: 0 0 16px; margin: 0 0 22px; border-bottom: 1px solid var(--chl-line); font-family: var(--chl-font-head); font-size: 22px; font-weight: 600; color: var(--chl-navy); }
.chl-calc__title span { font-family: var(--chl-font); font-size: 14px; font-weight: 500; color: var(--chl-muted); }
.chl-calc__grid { display: grid; gap: 18px 28px; }
.chl-calc__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chl-calc__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chl-calc__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.chl-calc__label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--chl-muted); }
.chl-calc__label output { color: var(--chl-navy); font-size: 14px; }
.chl .chl-calc__select {
	width: 100%; height: auto; min-height: 0; margin: 0; padding: 15px 44px 15px 16px;
	border: 1.5px solid var(--chl-line); border-radius: 14px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23203E78' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 16px center;
	font-family: var(--chl-font); font-size: 15px; font-weight: 600; color: var(--chl-ink); appearance: none; box-shadow: none;
}
.chl .chl-calc__select:focus { outline: 2px solid var(--chl-accent); outline-offset: 1px; }
.chl-calc__hint { font-size: 13.5px; line-height: 1.5; color: var(--chl-muted); min-height: 1.5em; }

/* Повзунок площі */
.chl .chl-calc__range { width: 100%; height: 28px; margin: 4px 0 0; padding: 0; background: transparent; border: 0; appearance: none; -webkit-appearance: none; cursor: pointer; }
.chl-calc__range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: var(--chl-line); }
.chl-calc__range::-moz-range-track { height: 8px; border-radius: 999px; background: var(--chl-line); }
.chl-calc__range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 999px; background: var(--chl-navy); border: 4px solid #fff; box-shadow: 0 2px 8px rgba(18,34,46,.3); }
.chl-calc__range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 999px; background: var(--chl-navy); border: 4px solid #fff; box-shadow: 0 2px 8px rgba(18,34,46,.3); }
.chl-calc__range:focus-visible { outline: 2px solid var(--chl-accent); outline-offset: 4px; border-radius: 999px; }
.chl-calc__range-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--chl-muted); }
.chl-calc__check { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 14.5px; font-weight: 600; color: var(--chl-ink); cursor: pointer; }
.chl-calc__check input { width: 18px; height: 18px; accent-color: var(--chl-navy); margin: 0; }

/* Групи додаткових послуг */
.chl-calc__group { border: 1px solid var(--chl-line); border-radius: 16px; margin-bottom: 12px; background: var(--chl-ivory); }
.chl-calc__group > summary { display: flex; align-items: center; gap: 8px; padding: 16px 20px; cursor: pointer; list-style: none; font-weight: 700; color: var(--chl-navy); }
.chl-calc__group > summary::-webkit-details-marker { display: none; }
.chl-calc__group > summary::after { content: ''; margin-left: auto; width: 9px; height: 9px; border-right: 2.4px solid var(--chl-navy); border-bottom: 2.4px solid var(--chl-navy); transform: rotate(45deg); transition: transform .15s; }
.chl-calc__group[open] > summary::after { transform: rotate(-135deg); }
.chl-calc__group-count { font-size: 13px; font-weight: 600; color: var(--chl-accent); }
.chl-calc__group > .chl-calc__grid { padding: 4px 20px 20px; }
.chl-calc__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--chl-line); border-radius: 14px; }
.chl-calc__opt-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: pointer; }
.chl-calc__opt-name { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--chl-ink); }
.chl-calc__opt-price { font-size: 12.5px; color: var(--chl-muted); }

/* Перемикач */
.chl-calc__switch { position: relative; flex-shrink: 0; width: 48px; height: 28px; }
.chl-calc__switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.chl-calc__switch-ui { position: absolute; inset: 0; border-radius: 999px; background: #D7DEE4; transition: background-color .15s; }
.chl-calc__switch-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(18,34,46,.3); transition: transform .15s; }
.chl-calc__switch input:checked + .chl-calc__switch-ui { background: var(--chl-accent); }
.chl-calc__switch input:checked + .chl-calc__switch-ui::after { transform: translateX(20px); }
.chl-calc__switch input:focus-visible + .chl-calc__switch-ui { outline: 2px solid var(--chl-navy); outline-offset: 2px; }

/* Лічильник */
.chl-calc__stepper { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.chl .chl-calc__step { width: 30px; height: 30px; min-height: 0; padding: 0; border: 1.5px solid var(--chl-line); border-radius: 999px; background: #fff; color: var(--chl-navy); font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: none; }
.chl .chl-calc__step:hover { border-color: var(--chl-navy); background: #fff; color: var(--chl-navy); }
.chl .chl-calc__stepper input { width: 44px; height: 30px; min-height: 0; margin: 0; padding: 0 2px; border: 0; background: transparent; text-align: center; font-family: var(--chl-font); font-size: 15px; font-weight: 700; color: var(--chl-ink); box-shadow: none; -moz-appearance: textfield; }
.chl-calc__stepper input::-webkit-outer-spin-button, .chl-calc__stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.chl-calc__unit { font-size: 12px; color: var(--chl-muted); min-width: 30px; }

/* Підсумок */
.chl-calc__summary { margin-bottom: 20px; }
.chl-calc__lines { display: flex; flex-direction: column; }
.chl-calc__lines li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--chl-line); font-size: 14.5px; }
.chl-calc__lines strong { white-space: nowrap; color: var(--chl-navy); }
.chl-calc__notes { margin-top: 12px !important; display: flex; flex-direction: column; gap: 6px; }
.chl-calc__notes li { font-size: 13.5px; color: #8A6D00; }
.chl-calc__total-row { display: flex; align-items: stretch; gap: 16px; }
.chl-calc__total { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 32px; border-radius: 999px; background: var(--chl-navy); color: #fff; }
.chl-calc__total-label { font-family: var(--chl-font-head); font-size: 20px; font-weight: 600; }
.chl-calc__total-value { font-family: var(--chl-font-head); font-size: 28px; font-weight: 700; white-space: nowrap; }
.chl-calc__cta { display: flex; }
.chl .chl-calc__cta .chl-btn { height: 100%; padding-left: 36px; padding-right: 36px; background-color: var(--chl-accent) !important; border-color: var(--chl-accent) !important; color: #fff !important; }
.chl .chl-calc__cta .chl-btn:hover { background-color: var(--chl-navy) !important; border-color: var(--chl-navy) !important; }
.chl-calc__footnotes { margin-top: 20px !important; display: flex; flex-direction: column; gap: 6px; }
.chl-calc__footnotes li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.55; color: var(--chl-muted); }
.chl-calc__footnotes li::before { content: '*'; position: absolute; left: 0; color: var(--chl-accent); font-weight: 700; }
.chl-calc__noscript { margin-top: 12px; color: var(--chl-muted); }

@media (max-width: 1024px) {
	.chl-calc { padding: 36px 28px; }
	.chl-calc__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.chl-calc { padding: 24px 16px; border-radius: 20px; }
	.chl-calc__grid--2, .chl-calc__grid--3 { grid-template-columns: 1fr; }
	.chl .chl-calc__title { font-size: 18px; }
	.chl-calc__group > .chl-calc__grid { padding: 4px 12px 14px; }
	.chl-calc__total-row { flex-direction: column; }
	.chl-calc__total { padding: 16px 22px; border-radius: 20px; }
	.chl-calc__total-label { font-size: 16px; }
	.chl-calc__total-value { font-size: 22px; }
	.chl .chl-calc__cta .chl-btn { width: 100%; }
}