/* Contact page
   Reuses .sec-head/.eyebrow/.btn (base.css), the shared nav/footer (nav.css,
   footer.css), and the .aff-form/.aff-field/.fit-consent/.fit-hp/.fit-turnstile/
   .fit-err/.aff-success pieces the affiliate modal already defined (affiliate.css,
   fit.css) — this file only covers what neither already styles: the two-column
   layout and the message textarea (affiliate.css only has a rule for <input>).

   No hero on this page, so the header renders in its "scrolled" state (white
   bar) via a literal `nav scrolled` class on <header>. js/nav-scroll.js is
   deliberately not loaded here — it unconditionally toggles that class off on
   scrollY <= 8, which would strip the hardcoded state on every load. */

.contact {
	padding: 72px 0 96px;
}

.contact-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 32px;
	margin-top: 44px;
	align-items: start;
}

.contact-form-card,
.contact-direct {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 32px;
}

.contact-direct h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--grey-70);
}
.contact-direct p {
	margin-top: 10px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--grey-50);
}
.contact-direct p a {
	font-weight: 600;
}

/* affiliate.css only styles .aff-field input; the message field needs the same
   treatment on a textarea. */
.aff-field textarea {
	border: 1px solid var(--grey-20);
	border-radius: 9px;
	padding: 11px 13px;
	font-family: inherit;
	font-size: 14px;
	color: var(--grey-70);
	outline: none;
	resize: vertical;
	transition:
		border-color 0.14s,
		box-shadow 0.14s;
}
.aff-field textarea:focus {
	border-color: var(--green-40);
	box-shadow: 0 0 0 3px var(--green-10);
}

@media (max-width: 860px) {
	.contact-grid {
		grid-template-columns: 1fr;
	}
}