/*
 * Contact page.
 *
 * Two columns: our own copy on the left, HubSpot's embedded form on the right.
 * The form's own fields are left with HubSpot's default styling on purpose.
 * Their embed renders its markup at runtime with generated class names, so
 * restyling it from here would be a set of selectors that break the next time
 * they ship a change, with the form silently losing its layout on a page whose
 * entire job is collecting leads.
 */

.contact {
	padding-block: var(--section-y);
}

.contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: var(--space-64);
	align-items: start;
}

.contact__copy > :first-child {
	margin-top: 0;
}

.contact__form {
	padding: var(--space-42);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-2xl);
	background: var(--color-bg-default);
	/* Holds the column's height while HubSpot's script is still fetching, so
	   the rest of the page does not jump when the fields appear. */
	min-height: 420px;
}

.contact__fallback {
	margin: 0;
	line-height: var(--lh-body);
	color: var(--color-text-muted);
}

@media (max-width: 900px) {
	.contact__grid {
		grid-template-columns: 1fr;
		gap: var(--space-32);
	}

	.contact__form {
		padding: var(--space-24);
	}
}