/*
 * Contact page. Same band as the homepage "Get in touch" section:
 * navy field with the wave, copy on the left, form card on the right.
 */

.tm-contact {
	position: relative;
	padding-block: clamp(40px, 6vw, 96px);
	background: var(--c-teal);
	overflow: hidden;
}

.tm-contact::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url('../img/wave-touch.svg') no-repeat 0 0 / 100% 100%;
	pointer-events: none;
}

.tm-contact__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
	gap: clamp(28px, 6vw, 96px);
	align-items: center;
}

.tm-label--white {
	color: #fff;
}

.tm-main .tm-contact__title {
	margin-top: 8px;
	color: #fff;
	font-size: var(--fs-h2);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -0.025em;
}

.tm-contact__title span {
	display: block;
	color: var(--c-royal);
}

.tm-contact__lead {
	margin: 16px 0 0;
	max-width: 42ch;
	color: rgba(255, 255, 255, 0.92);
	font-size: var(--fs-md);
	line-height: 1.6;
}

.tm-contact__lead p {
	margin: 0;
}

.tm-panel-card {
	padding: clamp(20px, 2.6vw, 32px);
	border-radius: var(--r-xl);
	background: #fff;
	box-shadow: var(--shadow-md);
}

.tm-contact__sent {
	padding: 24px 4px;
	text-align: center;
}

.tm-contact__sent h2 {
	margin-bottom: 8px;
	font-size: var(--fs-h3);
	font-weight: 800;
}

.tm-contact__sent p {
	color: var(--c-muted);
}

@media (max-width: 1024px) {
	.tm-contact__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.tm-contact::before {
		height: 46%;
	}

	.tm-contact__card {
		max-width: 640px;
	}
}

/* "Contact us" links jump here; keep the form clear of the sticky header */
#contact-form {
	scroll-margin-top: calc(var(--header-h) + 16px);
}

/* copy sits in the light-teal part of the wave, as in the mock-up */
.tm-contact__copy {
	align-self: start;
	padding-top: clamp(8px, 6vw, 110px);
}