/* Contact page (contact.php + templates/sec-contact.php). Loaded when a page sets $contactPage = true. */

/* Header: the text sits over the line-art illustration (style.css .innerContact background),
   so a soft white glow behind it keeps it readable */
.contact-hero__copy {
	position: relative;
	isolation: isolate;     /* keeps the glow (z-index:-1) above the section's background image */
	display: inline-block;
	max-width: 980px;
	padding: 28px 40px 32px;
}

.contact-hero__copy::before {
	content: "";
	position: absolute;
	inset: -40px -80px;
	z-index: -1;
	background: radial-gradient(closest-side, rgb(255 255 255 / .94) 55%, rgb(255 255 255 / 0) 100%);
	pointer-events: none;
}

.contact-hero__title {
	margin: 0 0 18px;
	line-height: 1.05;
}

.contact-hero__lead {
	max-width: 36rem;
	margin: 0 auto;
	font: 500 clamp(1rem, 1.3vw, 1.2rem)/1.6 'Montserrat', system-ui, sans-serif;
	color: #3F443A;
}

/* Form: project description is a multi-line field */
.contactSec textarea.contactSec__message {
	min-height: 160px;
	padding-top: 14px;
	resize: vertical;
}

@media (max-width: 576px) {
	.contact-hero__copy {
		padding: 20px 8px 24px;
	}

	/* narrow screens: the text fills the width, so a soft-edged panel instead of a round glow */
	.contact-hero__copy::before {
		inset: -6px -10px;
		background: rgb(255 255 255 / .9);
		border-radius: 28px;
		filter: blur(10px);
	}

	/* responsive.css forces every <p> to 12px !important on phones */
	.contact-hero .contact-hero__lead {
		font-size: .95rem !important;
	}

	.contactSec textarea.contactSec__message {
		min-height: 140px;
	}
}