/* =============================================================
   PIARNYA — Contacts Page Hero
   Зависит от: variables.css, base.css
   ============================================================= */

/* ── HERO ────────────────────────────────────────────────────── */
.contacts-hero {
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	padding: var(--sp-12) 0 var(--sp-16);
}

.contacts-hero__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sp-8);
}

.contacts-hero__content {
	max-width: 640px;
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

.contacts-hero__title {
	font-size: clamp(var(--text-4xl), 6vw, var(--text-5xl));
	color: var(--color-text);
	line-height: var(--leading-tight);
	margin: 0;
}

.contacts-hero__accent {
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
}

.contacts-hero__desc {
	font-size: var(--text-lg);
	color: var(--color-text-muted);
	line-height: var(--leading-normal);
	max-width: 56ch;
}

/* ── АДАПТИВ ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.contacts-hero {
		padding: var(--sp-10) 0 var(--sp-12);
	}

	.contacts-hero__title {
		font-size: var(--text-3xl);
	}

	.contacts-hero__desc {
		font-size: var(--text-base);
	}
}