/* ============================================================
   Responsive — proposal (mobile was not in the handoff).
   ============================================================ */

@media (max-width: 1200px) {
	:root {
		--section-pad-x: 40px;
		--section-pad-y: 120px;
	}

	.why {
		gap: 48px;
	}

	.site-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
		gap: 36px;
	}
}

@media (max-width: 1024px) {
	.site-nav__center {
		display: none;
	}

	.site-nav__toggle {
		display: block;
	}

	.site-nav__login {
		display: none;
	}

	.why {
		grid-template-columns: 1fr;
		gap: 44px;
	}

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

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

	.page-head {
		padding-top: calc(var(--nav-h) + 60px);
	}
}

@media (max-width: 768px) {
	:root {
		--nav-h: 72px;
		--section-pad-x: 24px;
		--section-pad-y: 96px;
	}

	.hero__title {
		font-size: clamp(2.25rem, 9vw, 4rem);
	}

	.hero__lead {
		font-size: 17px;
		margin-bottom: 32px;
	}

	.hero__content {
		padding: 120px 20px 48px;
	}

	.hero__cta {
		flex-direction: column;
		width: 100%;
		max-width: 340px;
		margin-bottom: 40px;
	}

	.hero__cta .btn {
		width: 100%;
	}

	.btn {
		height: 54px;
		padding: 0 28px;
		font-size: 16px;
	}

	.section__head {
		margin-bottom: 48px;
	}

	.section__head--row {
		flex-direction: column;
		align-items: flex-start;
	}

	.grid,
	.grid--2,
	.grid--3,
	.grid--4 {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.grid--center > * {
		max-width: 100%;
	}

	.stat-card__value {
		font-size: 36px;
	}

	.service-card,
	.step-card,
	.testimonial-card {
		padding: 30px 24px;
	}

	.faq-item__q {
		font-size: 16px;
		padding: 20px 20px;
	}

	.faq-item__a-inner {
		padding: 0 20px 22px;
	}

	.site-footer {
		padding: 64px 24px 36px;
	}

	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: 36px;
		padding-bottom: 40px;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.cta-band__actions {
		flex-direction: column;
		width: 100%;
	}

	.cta-band__actions .btn {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.hero__hint {
		margin-top: 28px;
	}

	.expert-card__avatar {
		width: 80px;
		height: 80px;
	}
}