/*
 * Contact page v2 (migration 0167). Loaded by contrive-contact-page.php only
 * on pages carrying the crv-contact marker. Everything is scoped under
 * .crv-contact so the theme and the CF7 quote-bot modal are untouched.
 */

.crv-contact {
	--crv-gold: #f4a840;
	--crv-bg: #18191b;
	--crv-card: #202124;
	--crv-card-2: #1c1d20;
	--crv-line: #2f3034;
	--crv-field: #2a2b2f;
	--crv-text: #e6e6e6;
	--crv-muted: #a3a5aa;
	color: var(--crv-text);
	font-family: "Open Sans", sans-serif;
}

.crv-contact > .elementor-container {
	max-width: 1140px;
	padding: 0 16px;
}

.crv-contact *,
.crv-contact *::before,
.crv-contact *::after {
	box-sizing: border-box;
}

.crv-contact p,
.crv-contact h2,
.crv-contact h3,
.crv-contact ul,
.crv-contact ol {
	margin: 0;
	text-align: left;
}

.crv-contact .crv-eyebrow {
	color: var(--crv-gold);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Intro */

.crv-contact-hero {
	padding-top: 64px !important;
	padding-bottom: 40px !important;
}

.crv-contact-intro {
	max-width: 680px;
}

.crv-contact .crv-contact-title {
	margin-top: 14px;
	color: #fff !important; /* theme: .entry-content h2/h3 { color: #F4A840 !important } */
	font-family: Dosis, sans-serif;
	font-size: 48px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.1;
	text-transform: none;
}

.crv-contact .crv-contact-title span {
	display: block;
	color: var(--crv-gold);
}

.crv-contact .crv-contact-lede {
	margin-top: 20px;
	color: var(--crv-muted);
	font-size: 17px;
	line-height: 1.65;
}

/* Two columns */

.crv-contact-main {
	padding-bottom: 72px !important;
}

.crv-contact-main > .elementor-container {
	align-items: flex-start;
}

.crv-card,
.crv-contact-form .elementor-shortcode {
	background: var(--crv-card);
	border: 1px solid var(--crv-line);
	border-radius: 14px;
}

.crv-card + .crv-card {
	margin-top: 20px;
}

.crv-contact .crv-card-title {
	margin-top: 8px;
	color: #fff !important; /* theme: .entry-content h2/h3 { color: #F4A840 !important } */
	font-family: Dosis, sans-serif;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.25;
	text-transform: none;
}

/* Form card */

.crv-contact-form .elementor-shortcode {
	overflow: hidden;
	padding: 32px 32px 0;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

/* CF7 wrapper gets 0 10px side padding on mobile, which shifts the full-width bar */
.crv-contact .crv-contact-form .wpcf7 {
	margin: 0;
	padding: 0;
}

.crv-contact-form .wpcf7-form > p {
	margin: 0 0 20px;
}

.crv-contact-form .wpcf7-form label {
	display: block;
	color: var(--crv-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.crv-contact-form .wpcf7-form label br {
	display: none;
}

.crv-contact-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 8px;
}

.crv-contact-form input[type="text"],
.crv-contact-form input[type="email"],
.crv-contact-form textarea {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 12px 14px;
	background: var(--crv-bg);
	border: 1px solid #3a3b40;
	border-radius: 8px;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	box-shadow: none;
	transition: border-color 0.15s ease;
}

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

.crv-contact-form input[type="text"]:focus,
.crv-contact-form input[type="email"]:focus,
.crv-contact-form textarea:focus {
	border-color: var(--crv-gold);
	outline: none;
}

.crv-contact-form .wpcf7-not-valid {
	border-color: #e5636b;
}

.crv-contact-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 13px;
}

.crv-contact-form .recaptcha {
	margin: 4px 0 24px;
}

/* Bottom bar: privacy note + submit, full card width */
.crv-contact-form .wpcf7-form > p:has(> .contrive-form-privacy) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 -32px;
	padding: 20px 32px;
	background: var(--crv-card-2);
	border-top: 1px solid var(--crv-line);
}

.crv-contact-form .contrive-form-privacy {
	margin: 0;
	color: var(--crv-muted);
	font-size: 13px;
}

.crv-contact-form .wpcf7-submit {
	min-width: 160px;
	margin: 0;
	padding: 13px 28px;
	background: var(--crv-gold);
	border: 0;
	border-radius: 8px;
	color: var(--crv-bg);
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: none;
	transition: background-color 0.15s ease;
}

.crv-contact-form .wpcf7-submit:hover,
.crv-contact-form .wpcf7-submit:focus-visible {
	background: #ffbd5c;
}

.crv-contact-form .wpcf7-spinner {
	margin: 0 0 0 8px;
}

.crv-contact-form .wpcf7 form .wpcf7-response-output {
	margin: 16px 0 24px;
	border-radius: 8px;
	font-size: 14px;
}

/* What happens next */

.crv-next {
	overflow: hidden;
}

.crv-next .crv-card-head {
	padding: 22px 24px;
	background: var(--crv-card-2);
	border-bottom: 1px solid var(--crv-line);
	border-top: 3px solid var(--crv-gold);
}

.crv-contact .crv-steps {
	padding: 20px;
	list-style: none;
}

.crv-step {
	display: flex;
	gap: 14px;
	padding: 18px;
	background: var(--crv-card-2);
	border: 1px solid var(--crv-line);
	border-radius: 10px;
}

.crv-step + .crv-step {
	margin-top: 12px;
}

.crv-step-icon,
.crv-direct-icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: rgba(244, 168, 64, 0.12);
	border-radius: 8px;
	color: var(--crv-gold);
}

.crv-contact .crv-step-meta {
	color: var(--crv-muted);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.crv-step-meta span {
	margin-right: 6px;
	color: var(--crv-gold);
}

.crv-contact .crv-step-title {
	margin-top: 4px;
	color: #fff !important; /* theme: .entry-content h2/h3 { color: #F4A840 !important } */
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.35;
	text-transform: none;
}

.crv-contact .crv-step-text {
	margin-top: 6px;
	color: var(--crv-muted);
	font-size: 14px;
	line-height: 1.6;
}

/* Or skip the form */

.crv-direct {
	padding: 24px;
}

.crv-contact .crv-direct-text {
	margin-top: 8px;
	color: var(--crv-muted);
	font-size: 14px;
	line-height: 1.6;
}

.crv-contact .crv-direct-email {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 18px;
	padding: 12px 16px;
	border: 1px solid var(--crv-gold);
	border-radius: 8px;
	color: var(--crv-gold);
	font-size: 15px;
	font-weight: 600;
	overflow-wrap: anywhere;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.crv-contact .crv-direct-email:hover,
.crv-contact .crv-direct-email:focus-visible {
	background: var(--crv-gold);
	color: var(--crv-bg);
}

.crv-direct-email svg {
	flex: 0 0 auto;
}

.crv-contact .crv-direct-list {
	margin-top: 20px;
	padding: 0;
	list-style: none;
}

.crv-direct-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid var(--crv-line);
	color: var(--crv-text);
	font-size: 14px;
	line-height: 1.55;
}

.crv-direct-list li::before {
	content: none;
}

.crv-direct-list .crv-direct-icon {
	width: 32px;
	height: 32px;
}

.crv-direct-list strong {
	display: block;
	color: var(--crv-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.crv-direct-list a {
	color: var(--crv-text);
	text-decoration: none;
}

.crv-direct-list a:hover,
.crv-direct-list a:focus-visible {
	color: var(--crv-gold);
}

/* Stack below laptop width: the aside is too narrow beside the form */

@media (max-width: 1024px) {
	.crv-contact-main > .elementor-container {
		flex-wrap: wrap;
	}

	.crv-contact-main > .elementor-container > .elementor-column {
		width: 100% !important;
	}

	.crv-contact-main .crv-col-aside {
		margin-top: 8px;
	}

	.crv-contact .crv-contact-title {
		font-size: 40px;
	}
}

@media (max-width: 767px) {
	.crv-contact-hero {
		padding-top: 40px !important;
		padding-bottom: 24px !important;
	}

	/* theme mobile: h2 { 24px !important } and p, li, span { 14px !important } */
	.crv-contact .crv-contact-title {
		font-size: 32px !important;
	}

	.crv-contact .crv-contact-title span,
	.crv-contact .crv-step-meta span {
		font-size: inherit !important;
	}

	/* theme mobile: h3 { 2rem !important } */
	.crv-contact .crv-step-title {
		font-size: 16px !important;
	}

	.crv-contact .crv-contact-lede {
		font-size: 16px;
	}

	.crv-contact-form .elementor-shortcode {
		padding: 22px 18px 0;
	}

	.crv-contact-form .wpcf7-form > p:has(> .contrive-form-privacy) {
		margin: 0 -18px;
		padding: 18px;
	}

	.crv-contact-form .wpcf7-submit {
		width: 100%;
	}

	.crv-contact .crv-steps {
		padding: 14px;
	}

	.crv-step {
		padding: 14px;
	}

	.crv-direct {
		padding: 20px 18px;
	}
}

/* reCAPTCHA v2 widget is a fixed 304px iframe; the email needs the icon's room */
@media (max-width: 400px) {
	.crv-contact .crv-direct-email {
		padding: 12px 10px;
	}

	.crv-contact .crv-direct-email svg {
		display: none;
	}

	.crv-contact .crv-direct-email span {
		font-size: 14px !important;
	}
}

@media (max-width: 374px) {
	.crv-contact-form .g-recaptcha {
		transform: scale(0.8);
		transform-origin: 0 0;
	}
}