/**
 * Foundation Right Pro - Contact Us page
 * Contact form layout, notices and the reassurance/perks aside.
 *
 * Info cards and service-area cards reuse .frp-value-card / .frp-values__grid
 * from about.css (loaded alongside this file); the perks list reuses
 * .frp-feature-row from home.css. Only genuinely new markup is styled here.
 */

/* ==========================================================================
   1. Form section layout
   ========================================================================== */

.frp-contact-form__grid {
	display: grid;
	gap: var(--frp-space-16);
	grid-template-columns: 1.1fr 0.9fr;
	align-items: start;
}

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

.frp-contact-form__intro {
	margin-top: var(--frp-space-3);
	font-size: var(--frp-fs-lead);
	line-height: var(--frp-lh-loose);
}

/* ==========================================================================
   2. Form fields
   ========================================================================== */

.frp-contact-form__form {
	display: flex;
	flex-direction: column;
	gap: var(--frp-space-5);
	margin-top: var(--frp-space-8);
}

.frp-form-row {
	display: flex;
	flex-direction: column;
	gap: var(--frp-space-2);
}

.frp-form-row--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--frp-space-5);
}

@media (max-width: 480px) {
	.frp-form-row--split {
		grid-template-columns: 1fr;
	}
}

.frp-form-row label {
	color: var(--frp-ink);
	font-size: var(--frp-fs-sm);
	font-weight: var(--frp-fw-semibold);
}

.frp-form-row label span {
	color: var(--frp-maroon);
}

.frp-form-row textarea {
	resize: vertical;
}

/* Honeypot field: present in the markup for bots, hidden from real visitors
   and screen readers without using display:none (which some bots skip). */
.frp-form-honeypot {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   3. Submission notices
   ========================================================================== */

.frp-form-notice {
	margin-top: var(--frp-space-6);
	padding: var(--frp-space-4) var(--frp-space-5);
	border-radius: var(--frp-radius-md);
	font-size: var(--frp-fs-sm);
	font-weight: var(--frp-fw-medium);
}

.frp-form-notice--success {
	background: var(--frp-maroon-10);
	color: var(--frp-maroon-dark);
}

.frp-form-notice--error {
	background: var(--frp-grey-50);
	color: var(--frp-ink);
	border: 1px solid var(--frp-grey-100);
}

/* ==========================================================================
   4. Aside - image + reassurance perks
   ========================================================================== */

.frp-contact-form__image {
	width: 100%;
	aspect-ratio: 5 / 4;
	margin-bottom: var(--frp-space-8);
	border-radius: var(--frp-radius-xl);
	object-fit: cover;
}

.frp-contact-form__perks {
	gap: var(--frp-space-6);
}