/* ==========================================================================
   FURMAN ADVOKAT — main.css
   Єдиний файл стилів теми. Усі кольори/шрифти/радіуси — через CSS-змінні.
   Секції додаються по мірі збірки шаблонів (header/footer зараз, решта — далі).
   ========================================================================== */

/* ---------- 0. Self-hosted fonts (кастомний subset, ОДИН файл на сім'ю/стиль) ----------
 * 09.07→14.07.2026 перф-інцидент: main.css тягнув 8 файлів (4 сім'ї × окремі
 * cyrillic/latin), критичний шлях 850мс, LCP мобільний 6.9с. unicode-range був
 * коректний (точна копія розбивки Google) — але латинський файл усе одно вантажився
 * завжди, бо цифри (0-9), тире/лапки («» — –) і латинські бренд-слова (WhatsApp,
 * Telegram, email-адреса) лежать саме в "latin"-блоці Google, не в "cyrillic".
 * Тобто сторінці реально потрібні ОБИДВА підмножини одночасно — розбиття на 2
 * файли на сім'ю не економило нічого, тільки додавало зайвий HTTP-запит.
 *
 * Рішення: для кожної сім'ї/стилю — ОДИН woff2 через Google Fonts text=API
 * (https://fonts.googleapis.com/css2?...&text=...), який на сервері Google
 * вирізає лише потрібні гліфи: повна укр. кирилиця + латиниця A-Z/a-z (бренд-
 * слова, email) + цифри + типографська пунктуація. Із запасом на майбутній
 * контент з адмінки (статті/відгуки/FAQ — там завжди буде тільки укр. текст,
 * цифри, звичайна пунктуація), тому діапазон свідомо ширший за поточний текст
 * сторінки, а не мінімальний під сьогоднішній контент.
 *
 * Результат: 4 файли на критичному шляху головної сторінки замість 8
 * (~155 КБ замість ~238 КБ) — italic-варіант Cormorant (лише для цитат
 * усередині статей) і так вантажився ліниво, лише коли текст курсивом
 * реально з'являвся на сторінці, тому в мерж не потрапляв.
 */
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url('../fonts/cormorant-garamond.woff2') format('woff2');
}

@font-face {
	font-family: 'Cormorant Garamond';
	font-style: italic;
	/* Точно "400" (не діапазон і не "500"): це фактична вага цитат у
	 * .article-content blockquote (font-weight не задано -> дефолт 400).
	 * З діапазоном або з "500" Chromium вважає файл-нормаль (500-700)
	 * "ближчим за вагою" і синтезує курсив замість завантаження цього
	 * файлу — навіть попри style:italic у DOM. Перевірено рендером. */
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/cormorant-garamond-italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter.woff2') format('woff2');
}

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600 700;
	font-display: swap;
	src: url('../fonts/montserrat.woff2') format('woff2');
}

@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url('../fonts/playfair-display.woff2') format('woff2');
}

/* ---------- 1. CSS variables (design tokens) ---------- */
:root {
	/* Brand colors */
	--color-primary: #18392B;       /* основний темно-зелений */
	--color-primary-rgb: 24, 57, 43;
	--color-primary-700: #102619;   /* темніший зелений: футер, sticky-bar, hover приматних кнопок */
	--color-primary-600: #122c1f;   /* картки відгуків на темному фоні */
	--color-primary-border: #1c6843;       /* межі на темному фоні */
	--color-primary-border-light: #2f7a53; /* світліші межі/обводки на темному фоні */

	--color-gold: #BD9B54;
	--color-gold-rgb: 189, 155, 84;

	--color-silver: #E5E7EB;        /* текст/акценти на темному фоні */

	--color-bg: #F8F9FA;            /* фон сторінки, світлі секції */
	--color-bg-alt: #eef1f0;        /* нейтральний фон плашок на світлому */
	--color-bg-soft: #eef0ee;       /* фон другорядного блоку напрямів */
	--color-white: #fff;

	/* Text on light backgrounds */
	--text-heading: var(--color-primary);
	--text-body: #33403a;
	--text-muted: #4d5a53;
	--text-muted-2: #5f6c65;
	--text-muted-3: #68766e;   /* WCAG AA: 4.32 -> 4.77 на білому (В8) */
	--text-faint: #68737b;     /* WCAG AA: 2.43 -> 4.60 (В8) */

	/* Text on dark (primary) backgrounds */
	--text-on-dark: #fff;
	--text-on-dark-muted: #cdddd3;
	--text-on-dark-muted-2: #b8ccc1;
	--text-on-dark-faint: #9fb6a9;
	--text-on-dark-faintest: #9fb6a9; /* WCAG AA: 4.27 -> 7.42 на футері (В8) */

	/* Borders on light backgrounds */
	--border-light: #E5E7EB;
	--border-light-2: #c2cfc8;
	--border-light-3: #cdd6d0;
	--border-light-4: #e2e5e2;

	/* Typography */
	--font-display: 'Playfair Display', Georgia, serif;
	--font-identity: 'Cormorant Garamond', Georgia, serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-caps: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

	/* Radii */
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 10px;
	--radius-xl: 12px;
	--radius-round: 50%;

	/* Motion */
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--transition-fast: 0.2s ease;
	--transition-spring: 0.25s var(--ease-spring);

	/* Layout */
	--container-max: 1200px;
	--container-pad: 40px;
	--header-height: 74px;

	/* Shadows (built from brand colors, not hardcoded rgba) */
	--shadow-primary-sm: 0 2px 8px rgba(var(--color-primary-rgb), 0.25);
	--shadow-primary-md: 0 8px 24px rgba(var(--color-primary-rgb), 0.4);
	--shadow-primary-press: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
	--shadow-primary-lg: 0 18px 50px rgba(var(--color-primary-rgb), 0.22);
	--shadow-gold-sm: 0 2px 8px rgba(var(--color-gold-rgb), 0.25);
	--shadow-gold-md: 0 8px 24px rgba(var(--color-gold-rgb), 0.45);
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--text-heading);
	background: var(--color-bg);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

img,
svg {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	cursor: pointer;
}

.page {
	overflow-x: hidden;
}

.wrap {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-pad);
	box-sizing: border-box;
}

/* ---------- 3. Accessibility ---------- */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--color-primary);
	color: var(--text-on-dark);
	padding: 14px 20px;
	border-radius: 0 0 var(--radius-md) 0;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.skip-link:focus {
	left: 0;
}

a:focus-visible,
button:focus-visible {
	outline: 3px solid #8fb3a2;
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 1px;
}

/* ---------- 4. Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(248, 249, 250, 0.92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border-light);
}

.site-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-height);
}

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

.brand__mark {
	width: 48px;
	height: 48px;
	border-radius: 9px;
	background: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.brand__mark-img {
	width: 36px;
	height: auto;
	display: block;
}

.brand__wordmark {
	overflow: visible;
	display: block;
}

.brand__wordmark-name,
.footer-wordmark__name {
	font-family: var(--font-identity);
	font-weight: 600;
	font-size: 30px;
	fill: var(--color-primary);
}

.brand__wordmark-patronymic,
.footer-wordmark__patronymic {
	font-family: var(--font-identity);
	font-weight: 600;
	font-size: 11.5px;
	fill: var(--text-muted-2);
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 32px;
}

.nav-links a {
	text-decoration: none;
	color: var(--color-primary);
	font-family: var(--font-caps);
	font-size: 13.5px;
	font-weight: 600;
}

.btn-header-call {
	display: flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	background: var(--color-primary);
	color: var(--text-on-dark);
	padding: 11px 20px;
	border-radius: var(--radius-sm);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.3px;
	box-shadow: var(--shadow-primary-sm);
	transition: all var(--transition-spring);
}

.btn-header-call svg {
	stroke: var(--color-silver);
}

.btn-header-call:hover {
	background: var(--color-primary-700);
	transform: translateY(-3px);
	box-shadow: 0 8px 22px rgba(var(--color-primary-rgb), 0.34);
}

.btn-header-call:active {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.24);
}

/* ---------- 5. Footer ---------- */
.site-footer {
	background: var(--color-primary-700);
	padding: 60px 0 30px;
	overflow-x: hidden;
	box-sizing: border-box;
	width: 100%;
	max-width: 100vw;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 44px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--color-primary-border);
	box-sizing: border-box;
}

.footer-logo-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.footer-logo-row__mark {
	height: 72px;
	width: auto;
	display: block;
}

.footer-wordmark {
	overflow: visible;
	display: block;
}

.footer-wordmark__name {
	font-size: 32px;
	fill: var(--color-silver);
}

.footer-wordmark__patronymic {
	font-size: 12px;
	fill: #cdd8d1;
}

.footer-wordmark__rule {
	stroke: #3a5a4a;
	stroke-width: 1;
}

.footer-wordmark__tagline {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 8.5px;
	fill: var(--text-on-dark-faint);
}

.footer-desc {
	font-size: 14px;
	line-height: 1.65;
	color: var(--text-on-dark-muted-2);
	margin: 0;
	max-width: 300px;
}

.footer-col__title {
	font-family: var(--font-caps);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-silver);
	margin-bottom: 18px;
}

.footer-col-list {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.footer-col-list a,
.footer-col-list span {
	text-decoration: none;
	color: var(--text-on-dark-muted-2);
	font-size: 14px;
}

.footer-bottom {
	margin-top: 32px;
	padding-top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	box-sizing: border-box;
}

.footer-bottom span {
	font-size: 13px;
	color: var(--text-on-dark-faintest);
}

.footer-bottom__privacy {
	font-size: 13px;
	color: var(--text-on-dark-faintest);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.footer-bottom__privacy:hover {
	color: var(--color-silver);
}

/* ---------- 6. Mobile sticky call bar ---------- */
.mobile-callbar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	background: var(--color-primary-700);
	border-top: 1px solid var(--color-primary-border);
	padding: 10px 14px;
	gap: 10px;
	box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.3);
}

.mobile-callbar__call {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	text-decoration: none;
	background: var(--color-silver);
	color: var(--color-primary);
	padding: 14px;
	border-radius: var(--radius-md);
	font-size: 15px;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	transition: all var(--transition-spring);
}

.mobile-callbar__call:active {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.mobile-callbar__call:active svg {
	animation: furman-pulse-icon 0.4s ease-in-out;
}

.mobile-callbar__req {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	background: transparent;
	color: var(--text-on-dark);
	padding: 14px;
	border-radius: var(--radius-md);
	font-size: 15px;
	font-weight: 600;
	border: 1.5px solid var(--color-primary-border-light);
	transition: all var(--transition-spring);
}

.mobile-callbar__req:active {
	transform: translateY(-1px);
	border-color: var(--color-silver);
	animation: furman-shimmer-bg 0.4s ease-in-out;
}

@keyframes furman-pulse-icon {
	0% { transform: scale(1); }
	50% { transform: scale(1.2); }
	100% { transform: scale(1); }
}

@keyframes furman-shimmer-bg {
	0% { background: rgba(255, 255, 255, 0); }
	50% { background: rgba(255, 255, 255, 0.14); }
	100% { background: rgba(255, 255, 255, 0); }
}

/* ---------- 7. Shared: buttons ---------- */
.btn-row {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none;
	padding: 16px 30px;
	border-radius: 7px;
	font-size: 15px;
	font-weight: 700;
	border: 1.5px solid transparent;
	transition: all var(--transition-spring);
}

.btn:active {
	transform: translateY(-1px);
}

.btn--light {
	background: var(--color-silver);
	color: var(--color-primary);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn--light:hover {
	background: var(--color-white);
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.btn--light:active {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn--outline-on-dark {
	background: transparent;
	color: var(--text-on-dark);
	font-weight: 600;
	padding: 16px 28px;
	border-color: var(--color-primary-border-light);
}

.btn--outline-on-dark:hover {
	border-color: var(--color-silver);
	transform: translateY(-3px);
}

/* ---------- 8. Shared: section scaffolding ---------- */
.section {
	padding: 96px 0;
}

.eyebrow {
	font-family: var(--font-caps);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 16px;
}

.section-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 38px;
	line-height: 1.12;
	margin: 0;
	color: var(--text-heading);
}

/* ---------- 9. Hero (темний драматичний) ---------- */
.hero {
	background: var(--color-primary);
	padding: 0;
	position: relative;
	overflow: hidden;
}

.hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 54px;
	align-items: stretch;
	min-height: 600px;
}

.hero__content {
	padding: 90px 0;
	align-self: center;
	position: relative;
	z-index: 2;
}

.hero__pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: 1px solid var(--color-primary-border-light);
	border-radius: 100px;
	padding: 8px 16px;
	margin-bottom: 26px;
}

.hero__pill-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-silver);
}

.hero__pill-text {
	font-family: var(--font-caps);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.6px;
	color: var(--color-silver);
}

.hero__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 54px;
	line-height: 1.07;
	letter-spacing: -0.5px;
	margin: 0 0 22px;
	color: var(--text-on-dark);
}

.hero__subtitle {
	font-size: 17px;
	line-height: 1.6;
	color: var(--text-on-dark-muted);
	margin: 0 0 34px;
	max-width: 500px;
}

.hero__photo {
	position: relative;
	min-height: 360px;
}

.hero__photo-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.hero__photo-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--color-primary) 0%, rgba(var(--color-primary-rgb), 0) 32%);
}

.hero__stats {
	display: flex;
	gap: 56px;
	padding: 30px 40px 36px;
	border-top: 1px solid var(--color-primary-border);
	position: relative;
	z-index: 2;
}

.hero__stat-num {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 700;
	color: var(--color-silver);
}

.hero__stat-label {
	font-family: var(--font-caps);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--text-on-dark-muted);
	margin-left: 10px;
}

/* ---------- 10. About ---------- */
.about {
	background: var(--color-white);
}

.about__grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 60px;
	align-items: center;
}

.about__photo-img {
	width: 100%;
	aspect-ratio: 4 / 5;
	height: auto;
	object-fit: cover;
	object-position: center 8%;
	border-radius: var(--radius-lg);
}

.about__title {
	font-size: 36px;
	line-height: 1.15;
	margin: 0 0 22px;
}

.about__text {
	font-size: 16px;
	line-height: 1.7;
	color: var(--text-muted);
	margin: 0 0 18px;
}

.about__text:last-of-type {
	margin-bottom: 30px;
}

.about__facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.about__fact {
	border-left: 3px solid var(--color-primary);
	padding-left: 16px;
}

.about__fact-title {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 4px;
}

.about__fact-desc {
	font-size: 13.5px;
	color: var(--text-muted-3);
	line-height: 1.5;
}

/* ---------- 11. Shared: section head / grid ---------- */
.section-head {
	text-align: center;
	max-width: 620px;
	margin: 0 auto 52px;
}

.section-head--tight {
	margin: 0 auto 40px;
}

.section-lead {
	font-size: 16px;
	line-height: 1.6;
	color: var(--text-muted);
	margin: 0;
}

.section-lead--muted {
	font-size: 15px;
	color: #5c6873; /* WCAG AA: 4.05 -> 4.98 (В8) */
}

.eyebrow--muted {
	font-size: 11px;
	letter-spacing: 2.4px;
	color: #54705f; /* WCAG AA: 3.94 -> 4.75 (В8) */
	margin-bottom: 14px;
}

.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

/* ---------- 12. Services ---------- */
.services {
	background: var(--color-bg);
}

.services__grid {
	gap: 24px;
}

.service-card {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	padding: 34px 30px;
	border: 1px solid var(--border-light);
	transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.service-card:hover {
	box-shadow: 0 14px 34px rgba(var(--color-primary-rgb), 0.1);
	border-color: #bcd0c6;
}

.service-card__num-box {
	width: 52px;
	height: 52px;
	border-radius: var(--radius-lg);
	background: var(--color-bg-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 22px;
}

.service-card__num {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--color-primary);
}

.service-card__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 21px;
	line-height: 1.25;
	margin: 0 0 12px;
	color: var(--text-heading);
}

.service-card__desc {
	font-size: 16px;
	line-height: 1.6;
	color: var(--text-muted-2);
	margin: 0;
}

/* ---------- 13. Other practice areas (secondary) ---------- */
.other-areas {
	background: var(--color-bg-soft);
	padding: 78px 0;
}

.other-areas__title {
	font-family: var(--font-identity);
	font-weight: 600;
	font-size: 32px;
	line-height: 1.15;
	margin: 0 0 14px;
	color: var(--color-primary);
}

.other-areas__grid {
	gap: 18px;
}

.other-area-card {
	background: var(--color-white);
	border-radius: 9px;
	padding: 26px 24px;
	border: 1px solid var(--border-light-4);
	display: flex;
	flex-direction: column;
}

.other-area-card__icon {
	width: 42px;
	height: 42px;
	margin-bottom: 16px;
	color: var(--color-primary);
}

.other-area-card__title {
	font-family: var(--font-identity);
	font-weight: 600;
	font-size: 19px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin: 0 0 9px;
	color: var(--color-primary);
}

.other-area-card__desc {
	font-size: 13.5px;
	line-height: 1.55;
	color: #666d6f; /* WCAG AA: 4.50 -> 5.27 (В8) */
	margin: 0 0 18px;
	flex: 1;
}

.other-area-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 600;
	color: #677571; /* WCAG AA: 2.59 -> 4.82 (В8) */
}

.other-area-card__soon {
	font-family: var(--font-caps);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: #68766e; /* WCAG AA: 2.04 -> 4.77 (В8) */
	border: 1px solid var(--border-light-4);
	border-radius: 4px;
	padding: 2px 7px;
}

/* ---------- 14. Reviews ---------- */
.reviews {
	background: var(--color-primary);
}

.eyebrow--on-dark {
	color: var(--color-silver);
}

.section-title--on-dark {
	color: var(--text-on-dark);
}

.section-lead--on-dark {
	font-size: 14.5px;
	color: var(--text-on-dark-muted-2);
}

.reviews__grid {
	gap: 24px;
}

.review-card {
	background: var(--color-primary-600);
	border: 1px solid var(--color-primary-border);
	border-radius: var(--radius-xl);
	padding: 32px 30px;
}

.review-card__stars {
	display: flex;
	gap: 3px;
	margin-bottom: 18px;
	color: var(--color-silver);
}

.review-card__text {
	font-size: 15px;
	line-height: 1.65;
	color: #dde8e1;
	margin: 0 0 24px;
}

.review-card__author {
	display: flex;
	align-items: center;
	gap: 13px;
}

.review-card__initial {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-round);
	background: var(--color-primary-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 17px;
	color: var(--color-silver);
	flex: none;
}

.review-card__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-on-dark);
}

.review-card__case {
	font-size: 12.5px;
	color: var(--text-on-dark-muted-2);
}

/* ---------- 15. Articles teaser ---------- */
.articles {
	background: var(--color-white);
}

.articles__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 44px;
	flex-wrap: wrap;
	gap: 20px;
}

.articles__all-link {
	text-decoration: none;
	color: var(--color-primary);
	font-size: 14px;
	font-weight: 600;
	border-bottom: 2px solid var(--color-primary);
	padding-bottom: 3px;
}

.articles__grid {
	gap: 28px;
}

.article-card {
	text-decoration: none;
	color: inherit;
	display: block;
	cursor: pointer;
}

.article-card:hover {
	opacity: 0.92;
}

.article-card__image {
	position: relative;
	width: 100%;
	height: 190px;
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-700));
}

.article-card__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.article-card__tag {
	position: relative;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 15px;
	color: #9fb6a9;
}

.article-card__tag--pill {
	font-family: var(--font-caps);
	position: absolute;
	top: 14px;
	left: 14px;
	background: rgba(var(--color-primary-rgb), 0.8);
	color: var(--color-silver);
	font-style: normal;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.4px;
	padding: 5px 12px;
	border-radius: 100px;
}

.article-card__date {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--color-primary);
	letter-spacing: 0.5px;
	margin-bottom: 10px;
}

.article-card__title {
	display: block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 23px;
	line-height: 1.3;
	margin: 0 0 10px;
	color: var(--text-heading);
}

.article-card__excerpt {
	display: block;
	font-size: 16px;
	line-height: 1.6;
	color: var(--text-muted-2);
	margin: 0 0 14px;
}

.article-card__cta {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-primary);
	border-bottom: 2px solid var(--color-primary);
	padding-bottom: 2px;
}

@media (min-width: 768px) {
	.article-card__image {
		height: 230px;
	}

	.article-card__tag {
		font-size: 21px;
	}
}

/* ---------- 16. Shared: article content typography (modal preview + single page) ---------- */
.article-content p {
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.7;
	color: var(--text-body);
	margin: 0 0 20px;
}

.article-content h2,
.article-content h3 {
	font-family: var(--font-identity);
	font-weight: 700;
	font-size: 22px;
	color: var(--color-primary);
	margin: 32px 0 14px;
}

.article-content blockquote {
	border: 1.5px solid var(--color-gold);
	background: #F0F0F0;
	border-radius: var(--radius-sm);
	padding: 20px 24px;
	margin: 8px 0 22px;
	font-family: var(--font-identity);
	font-style: italic;
	font-size: 20px;
	line-height: 1.5;
	color: var(--color-primary);
}

.article-content .article-callout {
	background: #F8F5EC;
	border-radius: var(--radius-sm);
	padding: 20px 24px;
	margin: 8px 0 22px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--text-body);
}

.article-content .article-callout strong {
	color: var(--color-primary);
}

.article-content ul {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.article-content ul li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 12px;
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--text-body);
}

.article-content ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-primary);
}

/* ---------- 17. Article CTA (modal footer + single-page footer) ---------- */
.btn--gold {
	background: var(--color-gold);
	color: var(--color-primary);
	padding: 13px 22px;
	font-size: 14.5px;
}

.btn--gold:hover {
	opacity: 0.9;
}

.article-cta {
	flex-shrink: 0;
	background: var(--color-primary);
	padding: 26px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.article-cta__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 18px;
	color: var(--text-on-dark);
	margin-bottom: 4px;
}

.article-cta__subtitle {
	font-size: 13.5px;
	color: var(--text-on-dark-faint);
}

.article-cta__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.article-cta__request,
.article-cta__whatsapp,
.article-cta__telegram {
	padding: 13px 22px;
	font-size: 14.5px;
	border-color: var(--color-silver);
}

.article-cta__request:hover,
.article-cta__whatsapp:hover,
.article-cta__telegram:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--color-silver);
	transform: none;
}

/* ---------- 18. Article modal ---------- */
.article-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 200;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}

.article-modal.is-open {
	display: flex;
}

body.has-modal-open {
	overflow: hidden;
}

.article-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
}

.article-modal__box {
	position: relative;
	z-index: 1;
	background: var(--color-bg);
	width: 720px;
	max-width: 100%;
	max-height: 90vh;
	border-radius: var(--radius-xl);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.article-modal__header {
	flex-shrink: 0;
	background: var(--color-primary);
	padding: 22px 28px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.article-modal__tag {
	font-family: var(--font-caps);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--color-silver);
	margin-bottom: 8px;
}

.article-modal__date {
	font-size: 13px;
	color: var(--text-on-dark-faint);
}

.article-modal__close {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-round);
	border: 1.5px solid var(--color-primary-border-light);
	background: transparent;
	color: var(--color-silver);
	display: flex;
	align-items: center;
	justify-content: center;
}

.article-modal__close:hover {
	border-color: var(--color-silver);
}

.article-modal__body {
	flex: 1;
	overflow-y: auto;
	padding: 36px 40px;
}

.article-modal__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 30px;
	line-height: 1.25;
	color: var(--text-heading);
	margin: 0 0 22px;
}

/* ---------- 19. Single article page + archive ---------- */
.single-article__header {
	background: var(--color-primary);
	padding: 48px 0 40px;
}

.single-article__tag {
	font-family: var(--font-caps);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--color-silver);
	margin-bottom: 10px;
}

.single-article__date {
	font-size: 13px;
	color: var(--text-on-dark-faint);
	margin-bottom: 18px;
}

.single-article__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 40px;
	line-height: 1.2;
	color: var(--text-on-dark);
	margin: 0;
	max-width: 780px;
}

.single-article__wrap {
	max-width: 760px;
	padding-top: 48px;
	padding-bottom: 56px;
}

.articles-archive__pagination {
	margin-top: 48px;
	display: flex;
	justify-content: center;
	gap: 10px;
}

/* ---------- 20. FAQ ---------- */
.faq {
	background: var(--color-bg);
}

.faq__wrap {
	max-width: 820px;
}

.faq__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.faq-item {
	background: var(--color-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.faq-item__question {
	width: 100%;
	text-align: left;
	padding: 22px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-family: var(--font-body);
}

.faq-item__q-text {
	font-size: 16px;
	font-weight: 600;
	color: var(--color-primary);
	line-height: 1.4;
}

.faq-item__sign {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: var(--radius-round);
	background: var(--color-bg-alt);
	color: var(--color-primary);
	font-size: 18px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.faq-item__sign::before {
	content: '+';
}

.faq-item__question[aria-expanded='true'] .faq-item__sign::before {
	content: '–';
}

.faq-item__answer-inner {
	padding: 0 24px 24px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--text-muted);
}

.faq-item__answer-inner p {
	margin: 0 0 12px;
}

.faq-item__answer-inner p:last-child {
	margin-bottom: 0;
}

/* ---------- 21. Contact ---------- */
.contact {
	background: var(--color-white);
}

.contact__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}

.contact__title {
	margin: 0 0 18px;
}

.contact__lead {
	font-size: 16px;
	line-height: 1.65;
	color: var(--text-muted);
	margin: 0 0 34px;
}

.contact__channels {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.contact-channel {
	display: flex;
	align-items: center;
	gap: 16px;
}

.contact-channel__icon {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-lg);
	background: var(--color-bg-alt);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.contact-channel__label {
	font-size: 12.5px;
	color: var(--text-muted-3);
}

.contact-channel__value {
	font-size: 16px;
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
}

.contact__messengers {
	display: flex;
	gap: 12px;
	margin-top: 24px;
}

.messenger-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	text-decoration: none;
	background: var(--color-bg-alt);
	color: var(--color-primary);
	padding: 12px 14px;
	border-radius: var(--radius-md);
	font-size: 13.5px;
	font-weight: 600;
	border: 1px solid var(--border-light);
	transition: all var(--transition-fast);
}

.messenger-btn:hover {
	background: var(--color-primary);
	color: var(--text-on-dark);
}

/* ---------- 22. Contact form ---------- */
.contact__form-box {
	background: var(--color-bg);
	border: 1px solid var(--border-light);
	border-radius: 14px;
	padding: 36px;
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* Honeypot: візуально та для скрінрідерів прибрано, для ботів — звичайне поле */
.contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-form__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary);
	margin-bottom: 8px;
}

.contact-form__label--split {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.contact-form__confidential {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 600;
	color: var(--color-primary);
}

.contact-form__input {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--border-light-3);
	border-radius: var(--radius-md);
	font-size: 15px;
	font-family: var(--font-body);
	background: var(--color-white);
	color: var(--color-primary);
}

.contact-form__input:focus {
	border-color: var(--color-primary);
	outline: none;
}

.contact-form__textarea {
	resize: vertical;
	min-height: 110px;
}

/* Резерв місця під асинхронний віджет Turnstile (стандартний розмір 300x65) —
   без нього поява віджета зсувала б кнопку відправки */
.contact-form__turnstile {
	min-height: 65px;
}

.contact-form__submit {
	width: 100%;
	background: var(--color-primary);
	color: var(--color-bg);
	border: none;
	padding: 16px;
	border-radius: var(--radius-md);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	font-family: var(--font-body);
	box-shadow: var(--shadow-primary-sm);
	transition: all var(--transition-spring);
}

.contact-form__submit:hover {
	background: var(--color-primary-700);
	transform: translateY(-3px);
	box-shadow: var(--shadow-primary-md);
}

.contact-form__submit:active {
	transform: translateY(-1px);
	box-shadow: var(--shadow-primary-press);
}

.contact-form__submit:disabled {
	opacity: 0.6;
	transform: none;
	cursor: default;
}

.contact-form__status {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	min-height: 1em;
}

.contact-form__status--success {
	color: var(--color-primary);
	font-weight: 600;
}

.contact-form__status--error {
	color: #a03333;
}

.contact-form__note {
	font-size: 12px;
	color: var(--text-faint);
	text-align: center;
	margin: 0;
	line-height: 1.5;
}

.contact-form__privacy-link {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- 22a. 404 page ---------- */
.error-404 {
	background: var(--color-bg);
	padding: 110px 0 120px;
}

.error-404__wrap {
	max-width: 620px;
	text-align: center;
}

.error-404__code {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 96px;
	line-height: 1;
	color: var(--border-light-2);
	margin: 0 0 10px;
}

.error-404__text {
	font-size: 17px;
	line-height: 1.65;
	color: var(--text-muted);
	margin: 18px 0 34px;
}

.error-404__actions {
	justify-content: center;
	align-items: center;
}

.error-404__call {
	padding: 17px 34px;
	font-size: 17px;
	box-shadow: var(--shadow-gold-sm);
	transition: all var(--transition-spring);
}

.error-404__call:hover {
	opacity: 1;
	transform: translateY(-3px);
	box-shadow: var(--shadow-gold-md);
}

.error-404__call:active {
	transform: translateY(-1px);
}

.error-404__home {
	text-decoration: none;
	color: var(--color-primary);
	font-size: 15px;
	font-weight: 600;
	border-bottom: 2px solid var(--color-primary);
	padding-bottom: 3px;
}

/* ---------- 23. Responsive: ≤880px (tablet / mobile) ---------- */
@media (max-width: 880px) {
	.wrap {
		padding: 0 20px;
	}

	.nav-links {
		display: none;
	}

	.btn-header-call__text {
		display: none;
	}

	.site-header__row {
		height: 64px;
	}

	.footer-grid {
		grid-template-columns: 1fr;
		gap: 30px;
		text-align: center;
		padding-bottom: 44px;
	}

	.footer-logo-row {
		justify-content: center;
	}

	.footer-col-list {
		align-items: center;
	}

	.footer-desc {
		margin-left: auto;
		margin-right: auto;
	}

	.footer-bottom {
		justify-content: center;
		text-align: center;
	}

	.page {
		padding-bottom: 100px;
	}

	.mobile-callbar {
		display: flex;
	}

	.btn-row {
		flex-direction: column;
		gap: 12px;
		align-items: stretch;
	}

	.btn-row > .btn {
		width: 100%;
		text-align: center;
	}

	.section {
		padding: 58px 0;
	}

	.section-title {
		font-size: 30px;
	}

	.hero__grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.hero__content {
		padding: 56px 0;
	}

	.hero__photo {
		order: -1;
	}

	.hero__title {
		font-size: 34px;
		line-height: 1.12;
	}

	.hero__stats {
		flex-wrap: wrap;
		gap: 20px;
		padding: 28px 20px 34px;
	}

	.about__grid {
		grid-template-columns: 1fr;
	}

	.about__photo-img {
		max-height: 560px;
	}

	.grid-3 {
		grid-template-columns: 1fr;
	}

	.contact__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.contact__form-box {
		padding: 24px 20px;
	}

	/* iOS зумить поля з шрифтом <16px — тримаємо 16px на мобільному */
	.contact-form__input {
		font-size: 16px;
	}
}

/* ---------- 21. Responsive: ≤767px — article modal / single-page header ---------- */
@media (max-width: 767px) {
	.article-modal {
		padding: 0;
	}

	.article-modal__box {
		border-radius: 0;
		max-height: 100vh;
		height: 100vh;
	}

	.article-modal__body {
		padding: 24px 20px;
	}

	.article-modal__close {
		width: 40px;
		height: 40px;
	}

	/* CTA у рядок кнопок, весь блок стискається, щоб не займати >160px висоти */
	.article-cta {
		padding: 14px 16px;
		flex-wrap: nowrap;
		flex-direction: column;
		gap: 10px;
	}

	.article-cta__title {
		font-size: 15px;
		margin-bottom: 2px;
	}

	.article-cta__subtitle {
		font-size: 12px;
	}

	/* 4 кнопки (call/request/WhatsApp/Telegram) не влазять в один нерозривний
	 * ряд — сітка 2x2 замість nowrap, інакше текст обрізається/вилазить. */
	.article-cta__actions {
		width: 100%;
		flex-wrap: wrap;
		gap: 8px;
	}

	.article-cta__call,
	.article-cta__request,
	.article-cta__whatsapp,
	.article-cta__telegram {
		flex: 1 1 calc(50% - 4px);
		text-align: center;
		justify-content: center;
		padding: 12px 8px;
		font-size: 13px;
	}

	.single-article__title {
		font-size: 30px;
	}

	.single-article__wrap {
		padding-top: 32px;
		padding-bottom: 40px;
	}
}