/*
 * Contact page hero — Figma 216:2940.
 *
 * 449px of copy beside the 672px booking form. The form sits on its own white
 * card rather than the navy panel it gets in the CTA band — Figma's 672px
 * frame wraps 612px of content, and that 30x35 inset is the card's padding.
 */

.contact-hero {
	padding: 40px var(--gutter-mobile) 60px;
}

.contact-hero__form {
	padding: 30px;
	border-radius: var(--radius-lg);
	background: var(--color-white);
}

.contact-hero__container {
	display: flex;
	flex-direction: column;
	gap: 50px;
	max-width: var(--container);
	margin: 0 auto;
}

.contact-hero__left {
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.contact-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-8);
}

.contact-hero__headline {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.contact-hero__title {
	margin: 0;
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: 32px;
	font-weight: var(--h2-weight);
	line-height: var(--h2-lh);
}

.contact-hero__text {
	color: var(--color-neutral-1);
	font-size: var(--body-main-size);
	font-weight: var(--body-main-weight);
	line-height: var(--body-main-lh);
}

/*
 * Phones: the form must start by mid-screen (ads agency, 2026-09) — visitors
 * who cannot see a field leave. Drop the lede and tighten the gaps; the title
 * and the rating chip stay.
 */
@media (max-width: 767px) {
	.contact-hero { padding-top: 24px; }
	.contact-hero__container,
	.contact-hero__left { gap: 20px; }
	.contact-hero__content { gap: var(--space-4); }
	.contact-hero__content .service-hero__eyebrow,
	.contact-hero__text { display: none; }
	.contact-hero__title { font-size: 26px; }
	.contact-hero__form { padding: 24px 20px; }
}

@media (min-width: 768px) {
	.contact-hero__title { font-size: 38px; }
}

@media (min-width: 1024px) {
	.contact-hero { padding: 70px var(--gutter) 100px; }

	.contact-hero__container {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 50px;
	}

	.contact-hero__left { flex: 0 1 449px; min-width: 0; gap: 117px; }
	.contact-hero__form {
		flex: 0 1 672px;
		min-width: 0;
		padding: 35px 30px;
	}
	.contact-hero__title { font-size: var(--h2-size); }
}