.contact {
	position: relative;
	overflow: hidden;
	padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 112px);
	background: var(--surface);
	font-size: 17px;
	line-height: 1.6;
}
.contact h1, .contact h2, .contact p {
	margin: 0;
}

/* Loose puzzle pieces in the margins, each with its own size, angle and style */
.contact-defs {
	position: absolute;
}
.contact-pieces {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.contact-bg-piece {
	position: absolute;
	overflow: visible;
}
/* Big white piece, half off the left edge */
.contact-bg-piece-1 {
	width: 290px;
	left: -70px;
	top: 34%;
	transform: rotate(-14deg);
	fill: #fff;
	stroke: #C9DAD2;
	stroke-width: 1.5;
}
/* Dashed green outline: an empty slot, top right */
.contact-bg-piece-2 {
	width: 145px;
	right: 17%;
	top: 28px;
	transform: rotate(18deg);
	fill: none;
	stroke: var(--brand-green);
	stroke-width: 2.5;
	stroke-dasharray: 9 8;
}
/* Small soft-tinted piece, lower left */
.contact-bg-piece-3 {
	width: 100px;
	left: 9%;
	bottom: 10%;
	transform: rotate(32deg);
	fill: #DCEBE4;
}
/* Big white piece, half off the right edge */
.contact-bg-piece-4 {
	width: 250px;
	right: -60px;
	bottom: 14%;
	transform: rotate(9deg);
	fill: #fff;
	stroke: #C9DAD2;
	stroke-width: 1.5;
}
/* Outline only, peeking up from the bottom */
.contact-bg-piece-5 {
	width: 205px;
	left: 24%;
	bottom: -90px;
	transform: rotate(-24deg);
	fill: none;
	stroke: #C9DAD2;
	stroke-width: 2;
}
/* Tiny tinted piece next to the heading */
.contact-bg-piece-6 {
	width: 56px;
	left: 46%;
	top: 64px;
	transform: rotate(-38deg);
	fill: #CDE6D6;
}
@media only screen and (max-width: 767px) {
	.contact-bg-piece-3, .contact-bg-piece-5, .contact-bg-piece-6 {
		display: none;
	}
	.contact-bg-piece-1 {
		width: 180px;
		left: -80px;
	}
	.contact-bg-piece-2 {
		width: 96px;
		right: 4%;
		top: 24px;
	}
	.contact-bg-piece-4 {
		width: 170px;
		right: -70px;
	}
}

.contact-inner {
	position: relative;
	max-width: 880px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.contact h1 {
	font-size: clamp(40px, 5.6vw, 72px);
	line-height: 1.04;
	letter-spacing: -0.02em;
}
.contact h1 span {
	color: var(--brand-green);
}

.contact-card {
	position: relative;
	padding: clamp(24px, 4vw, 48px);
	border-radius: 28px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(7, 53, 67, .10);
}
/* The green "missing piece" resting on the card's corner */
.contact-piece {
	position: absolute;
	top: -44px;
	right: -28px;
	transform: rotate(14deg);
	pointer-events: none;
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.contact-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.contact-row .contact-field {
	flex: 1 1 200px;
}

.contact-field {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.contact-field label {
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: var(--brand-blue);
}
.contact-optional {
	font-weight: 400;
	color: #5A6570;
}
.contact-field input, .contact-field textarea {
	width: 100%;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text);
	font: inherit;
	transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
.contact-field input {
	min-height: 52px;
	padding: 12px 18px;
	border-radius: 14px;
}
.contact-field textarea {
	min-height: 200px;
	padding: 20px 22px 40px;
	border-radius: 20px;
	font-size: 18px;
	resize: vertical;
}
.contact-field textarea::placeholder {
	color: #8A9AA0;
}
.contact-field input:focus, .contact-field textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--brand-green);
	box-shadow: 0 0 0 4px rgba(0, 170, 38, 0.15);
}
.contact-field .is-invalid {
	border-color: #dc3545;
}
.contact-textarea {
	position: relative;
	display: flex;
}
.contact-count {
	position: absolute;
	right: 18px;
	bottom: 12px;
	font-size: 13px;
	color: #5A6570;
}

.contact-error {
	font-size: 14px;
	color: #B42335;
}

.contact-submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.contact-submit .site-btn {
	border: none;
}
.contact-captcha {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.contact-captcha.is-invalid iframe {
	outline: 1px solid #dc3545;
}

.contact-visit {
	font-size: 15px;
	color: var(--text-muted);
}
.contact-visit a {
	color: var(--brand-blue);
	text-decoration: underline;
	text-decoration-color: var(--brand-green);
	text-underline-offset: 4px;
}

/* Sent / blocked messages */
.contact-state {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}
.contact-state h2 {
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.2;
}
.contact-state p {
	color: var(--text-muted);
}
.contact-state-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--brand-green);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.contact-link {
	color: var(--brand-blue);
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--brand-green);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

@media only screen and (max-width: 575px) {
	.contact-piece {
		width: 77px;
		height: 77px;
		top: -34px;
		right: -6px;
	}
}