/* =========================================================
   FREE CONSULTATION LANDING
========================================================= */


/* =========================================================
   HERO
========================================================= */

.ss-consultation-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--ss-charcoal);
	color: var(--ss-mist);
}

.ss-consultation-hero__media {
	position: relative;
	width: 100%;
}

.ss-consultation-hero__media picture {
	display: block;
	width: 100%;
}

.ss-consultation-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.ss-consultation-hero__overlay {
	position: absolute;
	z-index: 1;
	inset: 0;

	background:
		linear-gradient(
			to left,
			color-mix(in srgb, var(--ss-charcoal) 92%, transparent) 0%,
			color-mix(in srgb, var(--ss-charcoal) 70%, transparent) 25%,
			color-mix(in srgb, var(--ss-charcoal) 28%, transparent) 44%,
			transparent 64%
		);

	pointer-events: none;
}

.ss-consultation-hero__content {
	position: absolute;
	z-index: 2;
	inset: 0;

	display: flex;
	align-items: flex-end;

	padding-top: var(--ss-space-2xl);
	padding-bottom: var(--ss-space-2xl);
}

.ss-consultation-hero__inner {
	width: 100%;
	max-width: 470px;
}

.ss-consultation-hero .ss-section-label {
	margin: 0 0 var(--ss-space-md);
	color: var(--ss-orange);
}

.ss-consultation-hero h1 {
	margin: 0;
	font-size: var(--ss-h1);
	font-weight: 500;
	line-height: 1.45;
}

.ss-consultation-hero__lead {
	margin: var(--ss-space-lg) 0 0;
	color: color-mix(in srgb, var(--ss-mist) 82%, transparent);
	font-size: var(--ss-body);
	line-height: 2.05;
}


/* =========================================================
   TRUST STRIP
========================================================= */

.ss-consultation-trust {
	padding: var(--ss-space-lg) 0;
	background: var(--ss-cream);
}

.ss-consultation-trust p {
	max-width: 900px;
	margin: 0 auto;
	color: var(--ss-charcoal);
	font-size: var(--ss-h4);
	font-weight: 500;
	line-height: 1.9;
	text-align: center;
}


/* =========================================================
   INTRO
========================================================= */

.ss-consultation-intro {
	padding: var(--ss-space-2xl) 0;
	background: var(--ss-mist);
}

.ss-consultation-intro__inner,
.ss-consultation-final__inner {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	text-align: center;
}

.ss-consultation-intro .ss-section-label {
	color: var(--ss-orange);
}

.ss-consultation-intro h2 {
	margin: 0;
	color: var(--ss-charcoal);
	font-size: var(--ss-h2);
	font-weight: 500;
	line-height: 1.5;
}



/* =========================================================
   FORM SECTION
========================================================= */

.ss-consultation-form {
	padding: var(--ss-space-2xl) 0;
	background: var(--ss-blue);
	color: var(--ss-mist);
}

.ss-consultation-form__head {
	max-width: 820px;
	margin-inline: auto;
	text-align: center;
}

.ss-consultation-form .ss-section-label {
	color: var(--ss-orange);
}

.ss-consultation-form h2 {
	margin: 0;
	font-size: var(--ss-h2);
	font-weight: 500;
	line-height: 1.5;
}

.ss-consultation-form__head > p:last-child {
	max-width: 680px;
	margin: var(--ss-space-lg) auto 0;
	color: color-mix(in srgb, var(--ss-mist) 76%, transparent);
	font-size: var(--ss-small);
	line-height: 2;
}


/* FORM */

.ss-consultation-form__form {
	max-width: 900px;
	margin: var(--ss-space-xl) auto 0;
	padding: var(--ss-space-xl);

	border: 1px solid
		color-mix(in srgb, var(--ss-mist) 22%, transparent);

	border-radius: var(--ss-radius);

	background:
		color-mix(in srgb, var(--ss-mist) 8%, transparent);

	backdrop-filter: blur(12px);
}

.ss-consultation-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ss-space-lg);
}

.ss-consultation-form__grid label {
	display: flex;
	flex-direction: column;
	gap: var(--ss-space-sm);
}

.ss-consultation-form__grid label > span {
	color: var(--ss-mist);
	font-size: var(--ss-small);
}

.ss-consultation-form input,
.ss-consultation-form textarea {
	width: 100%;
	padding: 13px 15px;

	border: 1px solid
		color-mix(in srgb, var(--ss-mist) 28%, transparent);

	border-radius: var(--ss-radius);

	outline: none;

	background:
		color-mix(in srgb, var(--ss-mist) 9%, transparent);

	color: var(--ss-mist);

	font: inherit;

	transition:
		border-color 220ms ease,
		background 220ms ease;
}

.ss-consultation-form input:focus,
.ss-consultation-form textarea:focus {
	border-color: var(--ss-orange);

	background:
		color-mix(in srgb, var(--ss-mist) 13%, transparent);
}

.ss-consultation-form textarea {
	resize: vertical;
	min-height: 150px;
}

.ss-consultation-form input::placeholder,
.ss-consultation-form textarea::placeholder {
	color:
		color-mix(in srgb, var(--ss-mist) 48%, transparent);
}

.ss-consultation-form__business,
.ss-consultation-form__subject {
	grid-column: 1 / -1;
}

.ss-consultation-form__submit {
	display: flex;
	justify-content: center;
	margin-top: var(--ss-space-xl);
}

.ss-consultation-form__button {
	background: var(--ss-orange);
	color: var(--ss-mist);
	border: 0;
	cursor: pointer;
}

.ss-consultation-form__button:hover {
	background: var(--ss-mist);
	color: var(--ss-blue);
	transform: translateY(-2px);
}


/* HONEYPOT */

.ss-consultation-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/* STATUS */

.ss-consultation-form__message {
	max-width: 900px;
	margin: var(--ss-space-xl) auto 0;
	padding: var(--ss-space-md) var(--ss-space-lg);
	text-align: center;
	border-radius: var(--ss-radius);
}

.ss-consultation-form__message p {
	margin: var(--ss-space-xs) 0 0;
}

.ss-consultation-form__message.is-success {
	background:
		color-mix(in srgb, var(--ss-mist) 12%, transparent);

	border: 1px solid
		color-mix(in srgb, var(--ss-mist) 28%, transparent);
}

.ss-consultation-form__message.is-error {
	background:
		color-mix(in srgb, var(--ss-orange) 15%, transparent);

	border: 1px solid
		color-mix(in srgb, var(--ss-orange) 50%, transparent);
}


/* =========================================================
   FINAL
========================================================= */

.ss-consultation-final {
	padding: var(--ss-space-2xl) 0;
	background: var(--ss-mist);
}

.ss-consultation-intro__inner,
.ss-consultation-final__inner {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	text-align: center;
}

.ss-consultation-final .ss-section-label {
	color: var(--ss-orange);
}

.ss-consultation-final h2 {
	margin: 0;
	color: var(--ss-charcoal);
	font-size: var(--ss-h2);
	font-weight: 500;
	line-height: 1.5;
}

.ss-consultation-intro__inner > p:last-child,
.ss-consultation-final__inner > p:last-child {
	width: 100%;
	max-width: none;
	margin: var(--ss-space-lg) 0 0;
	color: var(--ss-blue);
	font-size: var(--ss-body);
	line-height: 2.15;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

	/* HERO */

	.ss-consultation-hero__overlay {
		background:
			linear-gradient(
				to top,
				color-mix(in srgb, var(--ss-charcoal) 92%, transparent) 0%,
				color-mix(in srgb, var(--ss-charcoal) 67%, transparent) 16%,
				color-mix(in srgb, var(--ss-charcoal) 20%, transparent) 29%,
				transparent 35%
			);
	}

	.ss-consultation-hero__content {
		padding-top: var(--ss-space-xl);
		padding-bottom: var(--ss-space-xl);
	}

	.ss-consultation-hero__inner {
		max-width: none;
	}

	.ss-consultation-hero h1 {
		font-size: var(--ss-h2);
	}

	.ss-consultation-hero__lead {
		font-size: var(--ss-small);
	}

	.ss-consultation-hero.has-mobile-image
	.ss-consultation-hero__media img {
		width: 100%;
		height: auto;
		object-fit: contain;
	}

	.ss-consultation-hero.uses-desktop-image
	.ss-consultation-hero__media img {
		width: 100%;
		height: auto;
		object-fit: contain;
	}


	/* TRUST */

	.ss-consultation-trust {
		padding: var(--ss-space-md) 0;
	}

	.ss-consultation-trust p {
		font-size: var(--ss-body);
	}


	/* INTRO / FORM / FINAL */

	.ss-consultation-intro,
	.ss-consultation-form,
	.ss-consultation-final {
		padding: var(--ss-space-xl) 0;
	}

	.ss-consultation-intro h2,
	.ss-consultation-form h2,
	.ss-consultation-final h2 {
		font-size: var(--ss-h2);
	}

	.ss-consultation-intro__inner > p:last-child,
	.ss-consultation-final__inner > p:last-child {
		font-size: var(--ss-small);
	}


	/* FORM */

	.ss-consultation-form__form {
		padding: var(--ss-space-lg);
	}

	.ss-consultation-form__grid {
		grid-template-columns: 1fr;
	}

	.ss-consultation-form__business,
	.ss-consultation-form__subject {
		grid-column: auto;
	}

}