.contact {
	background: var(--color-cream);
	padding-block: 70px;
}

@media (min-width: 1024px) {
	.contact {
		padding-block: var(--section-py);
	}
}

.contact__inner {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 16px;
	row-gap: 42px;
	grid-template-areas:
		"title  title"
		"divider form"
		"divider meta";
}

@media (min-width: 1024px) {
	.contact__inner {
		grid-template-columns: 1fr auto 1fr;
		column-gap: 40px;
		row-gap: 32px;
		grid-template-areas:
			"intro divider form"
			"meta  divider form";
	}
}

.contact__intro-top {
	grid-area: title;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

.contact__intro-top .h2 {
	color: #1e1e1e;
}

@media (min-width: 1024px) {
	.contact__intro-top {
		grid-area: intro;
		align-items: flex-start;
		text-align: left;
		gap: 16px;
		padding-bottom: 24px;
		border-bottom: 0.8px solid #9f9da0;
		/* Extend the line across the grid's column-gap so it visually
		   meets the vertical divider instead of stopping short of it. */
		margin-right: -40px;
	}

	.contact__intro-top .h2 {
		color: var(--color-navy);
	}
}

.contact__text {
	color: var(--color-text);
	font-size: 16px;
}

@media (min-width: 768px) {
	.contact__text {
		font-size: 18px;
	}
}

@media (min-width: 1024px) {
	.contact__text {
		color: #0c0b11;
		max-width: 480px;
		font-size: 20px;
	}
}

.contact__divider {
	grid-area: divider;
	width: 1px;
	background: var(--color-stroke);
}

@media (min-width: 1024px) {
	.contact__divider {
		/* Bleed into the section's own top/bottom padding so the line runs
		   the full height of .contact, edge-to-edge with Reviews above and
		   the footer below, instead of stopping at the content's height. */
		margin-block: calc(-1 * var(--section-py));
	}
}

.contact__meta {
	grid-area: meta;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.contact__meta-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.contact__meta-block a {
	font-size: 15px;
	color: var(--color-dark);
	transition: color 0.2s ease;
}

.contact__meta-block a:hover {
	color: var(--color-blue-link);
}

.contact__areas {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	font-size: 14px;
}

.contact__areas span::after {
	content: '/';
	margin-left: 10px;
	color: var(--color-dark);
}

.contact__note-link {
	color: var(--color-blue-link);
	font-weight: 600;
	font-size: 14px;
}

.contact__note-link:hover {
	text-decoration: underline;
}

.contact-form {
	grid-area: form;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
}

@media (min-width: 1024px) {
	.contact-form {
		align-items: flex-start;
		gap: 24px;
		/* Sit flush against the divider instead of leaving the grid's
		   column-gap as empty space before the form starts. */
		margin-left: -40px;
	}
}

.contact-form__grid {
	display: grid;
	grid-template-columns: 1fr;
	width: 100%;
}

@media (min-width: 640px) {
	.contact-form__grid {
		grid-template-columns: 1fr 1fr;
	}

	.contact-form__field--wide {
		grid-column: 1 / -1;
	}
}

.contact-form__field {
	display: flex;
	align-items: center;
	height: 46px;
	border-bottom: 1px solid var(--color-stroke);
}

@media (min-width: 640px) {
	/* No grid gap — borders sit flush so each row/column boundary reads as
	   one continuous line instead of separate floating field boxes. */
	.contact-form__field:nth-child(odd):not(.contact-form__field--wide) {
		border-right: 1px solid var(--color-stroke);
	}
}

.contact-form__field--textarea {
	height: 95px;
	align-items: flex-start;
	padding-top: 12px;
}

@media (min-width: 640px) {
	.contact-form__field--textarea {
		height: 139px;
	}
}

.contact-form__field input,
.contact-form__field textarea {
	width: 100%;
	height: 100%;
	border: none;
	background: transparent;
	padding: 0 0 0 8px;
	font-family: var(--font-body);
	font-size: 14px;
	letter-spacing: -0.35px;
	color: var(--color-dark);
	resize: none;
}

@media (min-width: 640px) {
	.contact-form__field input,
	.contact-form__field textarea {
		padding-left: 12px;
		font-size: 16px;
	}
}

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
	color: var(--color-text);
	opacity: 1;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
	outline: none;
}

.contact-form .btn {
	align-self: center;
}

@media (min-width: 1024px) {
	.contact-form .btn {
		align-self: flex-start;
	}
}

.contact-form__status {
	font-size: 14px;
	margin: 0;
}

.contact-form__status.is-success {
	color: #1a7f37;
}

.contact-form__status.is-error {
	color: #c1272d;
}