.contact {
	padding-top: var(--section-spacing);
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1.1fr;
	align-items: stretch;
}

/*
=========================================
LEFT PANEL — CONTACT INFO (red)
=========================================
*/

.contact-info {
	padding: 60px 50px;
	background: var(--secondary);
	color: var(--white);
}

.contact-info .section-tag {
	color: var(--white);
}

.contact-info .section-tag + h2::after {
	background: var(--white);
}

.contact-info h2 {
	color: var(--white);
	margin: 15px 0 20px;
}

.contact-info > p {
	margin-bottom: 30px;
	color: color-mix(in srgb, var(--white) 90%, transparent);
}

.contact-details {
	display: grid;
	gap: 22px;
}

.contact-item {
	display: flex;
	align-items: center;
	gap: 15px;
}

.contact-item a,
.contact-item > div {
	color: var(--white);
	text-decoration: none;
	font-weight: 600;
}

.contact-item a:hover {
	color: var(--dark);
}

.contact-icon {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--white) 15%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white);
}

.contact-icon svg {
	width: 20px;
	height: 20px;
}

/*
=========================================
MIDDLE PANEL — REQUEST SERVICE FORM (dark)
=========================================
*/

.contact-form-panel {
	padding: 50px;
	background: var(--dark);
	color: var(--white);
}

.contact-form-title {
	margin: 0 0 25px;
	color: var(--white);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.contact-form .wpcf7-form,
.contact-form form {
	display: grid;
	gap: 16px;
}

/* Contact Form 7 often wraps each field in its own <p> tag with the
   browser's default paragraph margin — that stacks on top of the grid
   gap above and is what was causing the oversized spacing between
   fields. The grid gap is the only spacing needed once this is reset. */
.contact-form p {
	margin: 0;
}

/* Pairs two fields side by side. To use this, wrap two form-tags in
   your Contact Form 7 form content like:
   <div class="form-row"><div class="form-group">[text* your-name placeholder "Name"]</div>
   <div class="form-group">[tel your-phone placeholder "Phone"]</div></div> */
.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.contact-form label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: .9rem;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
	box-sizing: border-box;
	width: 100%;
	padding: 13px 15px;
	border: 1px solid color-mix(in srgb, var(--white) 15%, transparent);
	border-radius: var(--corner-radius-btn, var(--button-radius));
	background: color-mix(in srgb, var(--white) 6%, transparent);
	color: var(--white);
	font-family: var(--font-body);
	font-size: 1rem;
}

.contact-form select option {
	color: var(--text);
}

.contact-form ::placeholder {
	color: color-mix(in srgb, var(--white) 55%, transparent);
	opacity: 1;
}

.contact-form textarea {
	height: 120px;
	resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
	border-color: var(--secondary);
	outline: 3px solid color-mix(in srgb, var(--secondary) 25%, transparent);
}

.contact-form input[type="submit"],
.contact-form button[type="submit"] {
	display: block;
	width: fit-content;
	margin: 0 auto;
	border: 0;
	border-radius: var(--corner-radius-btn, var(--button-radius));
	background: var(--secondary);
	color: var(--white);
	padding: 12px 36px;
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	cursor: pointer;
	transition: opacity .2s ease, transform .2s ease;
}

.contact-form input[type="submit"]:hover,
.contact-form button[type="submit"]:hover {
	opacity: .9;
	transform: translateY(-1px);
}

.contact-form .wpcf7-not-valid-tip {
	margin-top: 5px;
	font-size: .85rem;
	color: #ff9d9d;
}

/* Contact Form 7 always renders this response box in the markup, even
   with nothing to say — left unstyled that's invisible, but the
   padding/border below applied unconditionally were adding a chunk of
   empty space under the button before any message ever appears. Only
   show the padding/border once CF7 actually puts a message in it. */
.contact-form .wpcf7-response-output {
	display: none;
	margin: 20px 0 0;
	padding: 12px 15px;
	border-radius: var(--corner-radius-btn, var(--button-radius));
	border-color: color-mix(in srgb, var(--white) 20%, transparent) !important;
	color: var(--white);
}

.contact-form .wpcf7-response-output:not(:empty) {
	display: block;
}

/*
=========================================
RIGHT PANEL — MAP
=========================================
*/

.contact-map {
	position: relative;
	min-height: 320px;
}

.contact-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.contact-map-card {
	position: absolute;
	right: 20px;
	bottom: 20px;
	max-width: 240px;
	padding: 20px;
	background: var(--dark);
	color: var(--white);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.contact-map-card strong {
	color: var(--secondary);
	margin-bottom: 4px;
}

.contact-map-tagline {
	margin-top: 8px;
	position: relative;
	padding-left: 14px;
}

.contact-map-tagline::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 8px;
	height: 2px;
	background: var(--secondary);
}

@media (max-width: 991px) {

	.contact-grid {
		grid-template-columns: 1fr;
	}

	.contact-map {
		min-height: 280px;
	}

}

@media (max-width: 575px) {

	.contact-info,
	.contact-form-panel {
		padding: 40px 25px;
	}

	.form-row {
		grid-template-columns: 1fr;
	}

}