/*
Theme Name:   Hello MultiEquip
Theme URI:    https://project-work.digitext.pro
Description:  Дочірня тема Hello Elementor для MultiEquip Hub (EN/RO). Токени, шрифти, шапка, футер і шаблони записів.
Author:       MultiEquip Hub
Template:     hello-elementor
Version:      0.1.0
Requires PHP: 8.1
Text Domain:  mehub
*/

/* ==========================================================================
   1. Шрифти — самохостинг (assets/fonts, OFL), 4 файли
   Inter Tight: змінний шрифт 400–700, latin + latin-ext розділені unicode-range
   (EN-сторінки вантажать лише latin). IBM Plex Mono: latin + latin-ext в одному файлі.
   ========================================================================== */

@font-face {
	font-family: 'Inter Tight';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/InterTight-Variable-latin.woff2') format('woff2-variations'),
	     url('assets/fonts/InterTight-Variable-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter Tight';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/InterTight-Variable-latin-ext.woff2') format('woff2-variations'),
	     url('assets/fonts/InterTight-Variable-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/IBMPlexMono-Medium.woff2') format('woff2');
}

/* ==========================================================================
   2. Токени (V6). Ті самі імена — глобальні змінні Elementor V4 (--label),
   тож Elementor-сторінки й шаблони теми беруть одні значення.
   :where() дає нульову специфічність: якщо змінну змінять в Elementor,
   перемагає значення з Elementor, а ці — лише запасні.
   ========================================================================== */

:where(:root) {
	/* Кольори — TZ.md, «Дизайн-система» */
	--color-bg: #F3F2EE;
	--color-surface-dark: #0F2B2F;
	--color-surface-dark-2: #163A3F;
	--color-accent: #4FB3E8;
	--color-accent-text: #0A6A97;
	--color-beige: #E8E5DD;
	--color-border: #E2DFD7;
	--color-text: #13201F;
	--color-text-2: #55605E;
	--color-text-on-dark-2: #A8BAB8;

	/* Допоміжні кольори з V6 */
	--color-surface: #FFFFFF;
	--color-border-strong: #CFCBC1;    /* поля, чипи, кнопки каруселі */
	--color-accent-hover: #7CC8F0;     /* hover акцентної кнопки; акцент-текст на темному */
	--color-accent-active: #3A9FD4;
	--color-surface-dark-hover: #1D4A50;
	--color-text-on-dark: #F3F2EE;
	--color-text-on-dark-3: #D8E1E0;   /* посилання у футері */
	--color-error: #B3261E;
	--color-success: #1E7A4C;

	/* Шрифти */
	--font-sans: 'Inter Tight', system-ui, sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, monospace;

	/* Типографіка */
	--fs-body: 17px;
	--lh-body: 1.6;
	--fs-h1: clamp(46px, 6.4vw, 96px);
	--fs-h2: clamp(36px, 4.4vw, 64px);
	--fs-lab: 12px;

	/* Радіуси */
	--radius-control: 10px;
	--radius-card: 16px;
	--radius-card-lg: 18px;
	--radius-panel: 28px;
	--radius-pill: 999px;

	/* Сітка */
	--container: 1360px;
	--gutter: 48px;
	--section-y: 128px;

	/* Рух */
	--ease-out: cubic-bezier(.22, 1, .36, 1);
	--dur-card: 240ms;
	--dur-control: 160ms;

	--focus-ring: 2px solid var(--color-accent);
}

@media (max-width: 720px) {
	:where(:root) {
		--gutter: 20px;
		--section-y: 88px;
	}
}

/* ==========================================================================
   3. База
   ========================================================================== */

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	hyphens: auto;
	-webkit-hyphens: auto;
	-webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }

::selection { background: var(--color-accent); color: var(--color-surface-dark); }

a { color: inherit; }

input, textarea, select, button { font: inherit; }

:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }

h1, h2, h3 { text-wrap: balance; }

.mh-h1,
body h1 {
	margin: 0;
	font-size: var(--fs-h1);
	line-height: 0.98;
	letter-spacing: -0.045em;
	font-weight: 600;
	hyphens: manual;
}

.mh-h2 {
	margin: 0;
	font-size: var(--fs-h2);
	line-height: 1;
	letter-spacing: -0.035em;
	font-weight: 600;
}

.mh-lab {
	font-family: var(--font-mono);
	font-size: var(--fs-lab);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.mh-mono { font-family: var(--font-mono); }
.mh-tnum { font-variant-numeric: tabular-nums; }

.mh-wrap {
	max-width: var(--container);
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.mh-sec {
	padding-top: var(--section-y);
	padding-bottom: var(--section-y);
}

.screen-reader-text:focus,
.mh-skip:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 10000;
	clip: auto;
	width: auto;
	height: auto;
	padding: 12px 16px;
	border-radius: var(--radius-control);
	background: var(--color-surface-dark);
	color: var(--color-text-on-dark);
}

/* Іконки з assets/brand/icons/ui (currentColor) */
.mh-icon {
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	flex: none;
	vertical-align: middle;
}

/* ==========================================================================
   4. Компоненти для частин, які рендерить тема (шапка, футер, шаблони, форми).
   Стани: default, hover, focus-visible, active, disabled, loading, error, success.
   ========================================================================== */

/* Кнопки */
.mh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 14px 22px;
	border: 1px solid transparent;
	border-radius: var(--radius-control);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur-control) ease, border-color var(--dur-control) ease, color var(--dur-control) ease;
}

.mh-btn--sm { min-height: 44px; padding: 10px 18px; font-size: 15px; }

.mh-btn--primary { background: var(--color-accent); color: var(--color-surface-dark); }
.mh-btn--primary:hover { background: var(--color-accent-hover); }
.mh-btn--primary:active { background: var(--color-accent-active); }

.mh-btn--outline-dark { border-color: rgba(243, 242, 238, .35); color: var(--color-text-on-dark); font-weight: 500; }
.mh-btn--outline-dark:hover { border-color: var(--color-text-on-dark); background: rgba(243, 242, 238, .06); }
.mh-btn--outline-dark:active { background: rgba(243, 242, 238, .12); }

.mh-btn--dark { background: var(--color-surface-dark); color: var(--color-text-on-dark); }
.mh-btn--dark:hover { background: var(--color-surface-dark-hover); }
.mh-btn--dark:active { background: var(--color-surface-dark-2); }

.mh-btn:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }

.mh-btn:disabled,
.mh-btn[aria-disabled="true"] {
	opacity: .45;
	cursor: not-allowed;
	pointer-events: none;
}

.mh-btn.is-loading { position: relative; color: transparent; pointer-events: none; }
.mh-btn.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 18px;
	height: 18px;
	border: 2px solid var(--color-surface-dark);
	border-right-color: transparent;
	border-radius: 50%;
	animation: mh-spin 700ms linear infinite;
}
.mh-btn--outline-dark.is-loading::after,
.mh-btn--dark.is-loading::after { border-color: var(--color-text-on-dark); border-right-color: transparent; }

.mh-btn.is-error { background: var(--color-error); color: #FFFFFF; }
.mh-btn.is-success { background: var(--color-success); color: #FFFFFF; }

.mh-arr {
	display: inline-block;
	transition: transform var(--dur-card) var(--ease-out);
}
a:hover .mh-arr,
button:hover .mh-arr { transform: translateX(4px); }

/* Поля */
.mh-field { display: flex; flex-direction: column; gap: 6px; }
.mh-field label { font-size: 14px; font-weight: 500; color: var(--color-text); }

.mh-field input,
.mh-field textarea,
.mh-field select {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-control);
	background: var(--color-surface);
	color: var(--color-text);
	transition: border-color var(--dur-control) ease, box-shadow var(--dur-control) ease;
}
.mh-field input:hover,
.mh-field textarea:hover,
.mh-field select:hover { border-color: var(--color-text-2); }
.mh-field input:focus,
.mh-field textarea:focus,
.mh-field select:focus {
	border-color: var(--color-accent-text);
	outline: none;
	box-shadow: 0 0 0 3px rgba(10, 106, 151, .2);
}
.mh-field input:disabled,
.mh-field textarea:disabled { background: var(--color-beige); color: var(--color-text-2); cursor: not-allowed; }
.mh-field.is-error input,
.mh-field.is-error textarea,
.mh-field [aria-invalid="true"] { border-color: var(--color-error); }
.mh-field.is-success input { border-color: var(--color-success); }
.mh-field__hint { margin: 0; font-size: 13px; color: var(--color-text-2); }
.mh-field__error { margin: 0; font-size: 13px; color: var(--color-error); }

/* Чипи */
.mh-chip { position: relative; display: inline-flex; }
.mh-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mh-chip span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: 15px;
	cursor: pointer;
	transition: background-color var(--dur-control) ease, border-color var(--dur-control) ease, color var(--dur-control) ease;
}
.mh-chip:hover span { border-color: var(--color-text-2); }
.mh-chip input:checked + span { background: var(--color-surface-dark); color: var(--color-text-on-dark); border-color: var(--color-surface-dark); }
.mh-chip input:focus-visible + span { outline: 2px solid var(--color-accent-text); outline-offset: 2px; }
.mh-chip input:active + span { background: var(--color-beige); }
.mh-chip input:disabled + span { opacity: .45; cursor: not-allowed; }

/* Картки */
.mh-card {
	transition: transform var(--dur-card) var(--ease-out), border-color var(--dur-card) ease;
}
.mh-card:hover { transform: translateY(-3px); border-color: var(--color-accent); }

/* ==========================================================================
   5. Анімації. Поява заголовків секцій — animation-timeline: view(),
   без підтримки — без анімації. Все вимикається при prefers-reduced-motion.
   ========================================================================== */

@keyframes mh-spin { to { transform: rotate(360deg); } }
@keyframes mh-draw { to { stroke-dashoffset: 0; } }
@keyframes mh-fade { to { opacity: 1; } }
@keyframes mh-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
	.mh-reveal {
		animation: mh-rise linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 60%;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
	html { scroll-behavior: auto; }
	.mh-reveal { opacity: 1; transform: none; }
	.mh-card:hover { transform: none; }
}

/* ==========================================================================
   6. Шапка, меню, футер (package-1: header, footer)
   ========================================================================== */

/* Скидання стилів Hello Elementor (reset.css фарбує button:hover/focus і a:hover) */
a:hover, a:active { color: inherit; }
.mh-header button, .mh-footer button {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	color: inherit;
	font: inherit;
	padding: 0;
	text-align: inherit;
	white-space: normal;
	transition: none;
}
/* Hello на hover/focus фарбує лише фон і колір; колір задають компоненти нижче */
.mh-header button:hover, .mh-footer button:hover,
.mh-header button:focus, .mh-footer button:focus { background-color: transparent; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mh-content:focus { outline: none; }

/* --- Шапка --- */
.mh-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: rgba(15, 43, 47, .96);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(243, 242, 238, .1);
	color: var(--color-text-on-dark);
}
.admin-bar .mh-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .mh-header { top: 46px; } }

.mh-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	height: 72px;
}

.mh-logo { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.mh-logo__img { display: block; width: 159px; height: 24px; }

.mh-header__nav { flex: 1 1 auto; display: flex; justify-content: center; }
.mh-nav__list, .mh-dd__list, .mh-mnav__list, .mh-msub, .mh-ft__col ul { margin: 0; padding: 0; list-style: none; }
.mh-nav__list { display: flex; align-items: center; gap: 24px; }
.mh-nav__item { position: relative; }

.mh-header .mh-nav__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 2px;
	border-bottom: 2px solid transparent;
	color: var(--color-text-on-dark-3);
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--dur-control) ease, border-color var(--dur-control) ease;
}
.mh-header .mh-nav__btn:hover { color: #FFFFFF; border-bottom-color: rgba(79, 179, 232, .55); }
.mh-header .mh-nav__btn[aria-expanded="true"],
.mh-header .mh-nav__btn.is-current { color: #FFFFFF; border-bottom-color: var(--color-accent); }
.mh-header .mh-nav__btn:focus-visible { outline: var(--focus-ring); outline-offset: 4px; border-radius: 4px; }
.mh-chev { width: 16px; height: 16px; transition: transform 200ms var(--ease-out); }
.mh-nav__btn[aria-expanded="true"] .mh-chev { transform: rotate(180deg); }

/* Випадний список */
.mh-dd {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 40;
	margin-top: 1px;
	padding: 10px;
	background: var(--color-surface);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	box-shadow: 0 28px 56px -28px rgba(15, 43, 47, .45);
}
.mh-dd[hidden] { display: none; }
.mh-dd--wide { width: 660px; }
.mh-dd--mid { width: 440px; }
.mh-dd--narrow { width: 380px; }
.mh-dd__list--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }

.mh-dd__all {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	min-height: 48px;
	margin-bottom: 6px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--color-border);
	border-radius: var(--radius-control);
	color: var(--color-text);
	font-weight: 600;
	text-decoration: none;
}
.mh-dd__item {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	gap: 8px;
	align-items: baseline;
	min-height: 44px;
	padding: 10px 14px;
	border-radius: var(--radius-control);
	color: var(--color-text);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
}
.mh-dd__all:hover, .mh-dd__item:hover { background: var(--color-bg); color: var(--color-text); }
.mh-dd__all:focus-visible, .mh-dd__item:focus-visible { outline: 2px solid var(--color-accent-text); outline-offset: 0; }
.mh-dd__all[aria-current], .mh-dd__item[aria-current] { background: var(--color-bg); }
.mh-dd__n { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-2); }
.mh-dd__n .mh-icon { width: 14px; height: 14px; vertical-align: -2px; }
.mh-dd__m { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--color-text-2); }
.mh-dd__item--feat { margin-top: 6px; background: var(--color-beige); }
.mh-dd__item--feat:hover { background: #DDD9CF; }

/* Без JS — відкриття при наведенні й фокусі */
.mh-no-js .mh-nav__item--dd:hover > .mh-dd,
.mh-no-js .mh-nav__item--dd:focus-within > .mh-dd { display: block; }

/* Інструменти праворуч */
.mh-header__tools { display: flex; align-items: center; gap: 14px; flex: none; }
.mh-header__phone { font-size: 14px; color: var(--color-text-on-dark); text-decoration: none; white-space: nowrap; }
.mh-header__cta { white-space: nowrap; }

/* Перемикач мов */
.mh-lang { display: flex; gap: 2px; }
.mh-lang__a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 6px 8px;
	border-bottom: 2px solid transparent;
	color: var(--color-text-on-dark-2);
	font-family: var(--font-mono);
	font-size: 13px;
	text-decoration: none;
}
.mh-lang__a:hover { color: #FFFFFF; }
.mh-lang__a.is-on { color: var(--color-text-on-dark); border-bottom-color: var(--color-accent); }
.mh-lang__a:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
.mh-lang--lg .mh-lang__a { min-width: 44px; min-height: 44px; }

/* Мобільна шапка */
.mh-mob { display: none; }
.mh-header__mob { gap: 8px; }
.mh-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-control);
	text-decoration: none;
}
.mh-iconbtn .mh-icon { width: 20px; height: 20px; }
.mh-iconbtn--accent { background: var(--color-accent); color: var(--color-surface-dark); }
.mh-iconbtn--accent:hover { background: var(--color-accent-hover); color: var(--color-surface-dark); }
.mh-header .mh-iconbtn--outline { border: 1px solid rgba(243, 242, 238, .3); border-radius: var(--radius-control); color: var(--color-text-on-dark); cursor: pointer; }
.mh-header .mh-iconbtn--outline:hover { border-color: var(--color-text-on-dark); }
.mh-header .mh-iconbtn:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.mh-iconbtn .mh-ico-close,
.mh-iconbtn[aria-expanded="true"] .mh-ico-menu { display: none; }
.mh-iconbtn[aria-expanded="true"] .mh-ico-close { display: inline-block; }

.mh-mnav {
	position: fixed;
	top: 73px;
	left: 0;
	right: 0;
	bottom: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--color-surface-dark);
}
.admin-bar .mh-mnav { top: 105px; }
@media (max-width: 782px) { .admin-bar .mh-mnav { top: 119px; } }
.mh-mnav[hidden] { display: none; }
.mh-mnav__inner { padding: 8px var(--gutter) 24px; }
.mh-menu-open { overflow: hidden; }
/* backdrop-filter робить шапку контейнером для position: fixed — панель мала б висоту 0;
   під відкритим меню розмиття не потрібне, фон суцільний */
.mh-menu-open .mh-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--color-surface-dark); }

.mh-header .mh-acc {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	min-height: 56px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(243, 242, 238, .12);
	color: var(--color-text-on-dark);
	font-size: 19px;
	font-weight: 500;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.mh-header .mh-acc:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.mh-acc__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	border: 1px solid rgba(243, 242, 238, .25);
	border-radius: 8px;
}
.mh-acc__ico .mh-icon { width: 18px; height: 18px; }
.mh-acc .mh-acc__minus,
.mh-acc[aria-expanded="true"] .mh-acc__plus { display: none; }
.mh-acc[aria-expanded="true"] .mh-acc__minus { display: inline-block; }
.mh-acc[aria-expanded="true"] .mh-acc__ico { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-surface-dark); }

.mh-msub { padding: 6px 0 12px; }
.mh-msub[hidden] { display: none; }
.mh-msub__a {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 8px 0 8px 14px;
	border-left: 1px solid rgba(79, 179, 232, .4);
	color: var(--color-text-on-dark-3);
	font-size: 16px;
	text-decoration: none;
}
.mh-msub__a:hover { color: #FFFFFF; }
.mh-msub__a[aria-current] { color: #FFFFFF; border-left-color: var(--color-accent); }
.mh-msub__all { color: var(--color-text-on-dark); font-weight: 600; }
.mh-msub__feat { color: var(--color-accent-hover); }
.mh-msub__a .mh-icon { width: 16px; height: 16px; }

.mh-mnav__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0; }
.mh-mnav__phone { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--color-text-on-dark); text-decoration: none; }
.mh-mnav__phone .mh-icon { width: 20px; height: 20px; }
.mh-mnav__cta { display: flex; width: 100%; }

/* Без JS мобільне меню відкрите й розгорнуте */
.mh-no-js .mh-mnav[hidden], .mh-no-js .mh-msub[hidden] { display: block; }
.mh-no-js .mh-mnav { position: static; }
.mh-no-js [data-mh-menu-toggle] { display: none; }

@media (max-width: 1279px) {
	.mh-nav__list { gap: 18px; }
	.mh-header__phone { display: none; }
}

@media (max-width: 1080px) {
	.mh-desk { display: none !important; }
	.mh-mob { display: flex; }
	.mh-mnav.mh-mob { display: block; }
	.mh-mnav.mh-mob[hidden] { display: none; }
	.mh-no-js .mh-mnav.mh-mob[hidden] { display: block; }
}

/* --- Футер --- */
.mh-footer {
	overflow: hidden;
	background: var(--color-surface-dark);
	color: var(--color-text-on-dark-3);
}
.mh-footer__inner { display: flex; flex-direction: column; gap: 44px; padding-top: 72px; padding-bottom: 24px; }
.mh-ft__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.mh-ft__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.mh-ft__tagline { margin: 0; max-width: 300px; font-size: 15px; }
.mh-header, .mh-footer { hyphens: manual; -webkit-hyphens: manual; } /* без переносів у меню й футері, як у макеті */
.mh-ft__phone { color: var(--color-text-on-dark); font-weight: 600; text-decoration: none; }
.mh-ft__email { color: var(--color-text-on-dark-3); }
.mh-ft__address { font-size: 11px; color: var(--color-text-on-dark-2); }
.mh-ft__col { font-size: 15px; }
.mh-ft__col ul { display: flex; flex-direction: column; gap: 8px; }
.mh-ft__h { margin: 0 0 14px; font-size: 11px; color: var(--color-text-on-dark-2); }
.mh-footer .mh-ft__a {
	color: var(--color-text-on-dark-3);
	font-size: 15px;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
}
.mh-footer .mh-ft__a:hover { color: #FFFFFF; text-decoration: underline; }
.mh-footer .mh-ft__a:focus-visible,
.mh-footer a:focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: 2px; }
.mh-ft__a[aria-current] { color: #FFFFFF; }
.mh-ft__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding-top: 22px;
	border-top: 1px solid rgba(243, 242, 238, .12);
	font-size: 14px;
	color: var(--color-text-on-dark-2);
}
.mh-ft__wordmark {
	margin: 0;
	padding: 0 20px;
	overflow: hidden;
	color: #16393E;
	font-weight: 700;
	font-size: clamp(64px, 13.4vw, 200px);
	line-height: .78;
	letter-spacing: -.05em;
	white-space: nowrap;
	-webkit-user-select: none;
	user-select: none;
}

@media (max-width: 1080px) {
	.mh-ft__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mh-ft__brand { grid-column: 1 / -1; }
}

/* Мобільні: цілі ≥ 44 px (CLAUDE.md, WCAG) */
@media (max-width: 720px) {
	.mh-ft__col ul { gap: 0; }
	.mh-footer .mh-ft__a { display: flex; align-items: center; min-height: 44px; }
	.mh-ft__phone, .mh-ft__email { display: inline-flex; align-items: center; min-height: 44px; }
	.mh-ft__bottom .mh-lang__a { min-width: 44px; min-height: 44px; }
}