/* ===============================================================
   Tile Surrounds — Contact page (page-contact.php)
   =============================================================== */

.page-contact .page-header { padding-bottom: 24px; border-bottom: 0; }

.contact-grid { padding: 48px 0 120px; background: var(--bg); }
.contact-grid .container {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 80px;
	align-items: start;
}

/* The form itself — works for both native and WPForms output. */
.contact-form-wrap,
.wpforms-container {
	background: var(--bg-warm);
	border: 1px solid var(--hairline);
	padding: 48px;
}
.contact-form,
.wpforms-form {
	display: flex; flex-direction: column; gap: 22px;
}
.contact-form label,
.wpforms-field label {
	display: flex; flex-direction: column; gap: 8px;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.contact-form input,
.contact-form select,
.contact-form textarea,
.wpforms-field input,
.wpforms-field select,
.wpforms-field textarea {
	font: inherit;
	font-family: var(--sans);
	font-size: 16px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ink);
	background: var(--bg);
	border: 1px solid var(--hairline);
	border-radius: 4px;
	padding: 14px 16px;
	transition: border-color 160ms, box-shadow 160ms;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus,
.wpforms-field input:focus,
.wpforms-field select:focus,
.wpforms-field textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(181, 101, 74, 0.15);
}
.contact-form textarea,
.wpforms-field textarea { min-height: 140px; resize: vertical; }

.form-actions {
	display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
	margin-top: 8px;
}
.form-note { font-size: 13px; color: var(--muted); }

/* Aside (right column) */
.contact-aside {
	display: flex; flex-direction: column; gap: 40px;
}
.contact-block { display: flex; flex-direction: column; gap: 10px; }
.contact-block .eyebrow { margin-bottom: 4px; }
.contact-phone {
	font-family: var(--serif);
	font-size: 36px;
	line-height: 1.1;
	color: var(--ink);
}
.contact-phone:hover { color: var(--accent); }
.contact-email {
	font-family: var(--sans);
	font-size: 16px;
	color: var(--ink-soft);
	border-bottom: 1px solid var(--hairline);
	padding-bottom: 1px;
	align-self: flex-start;
}
.contact-email:hover { color: var(--accent); border-color: var(--accent); }
.contact-block p { color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 32ch; }

@media (max-width: 820px) {
	.contact-grid .container { grid-template-columns: 1fr; gap: 40px; }
	.contact-form-wrap,
	.wpforms-container { padding: 28px; }
	.contact-phone { font-size: 28px; }
}