/* form-hero — split hero: full-bleed image + overlapping inquiry form card.
   Measured from reference dist__components__form-hero__style.css. */

.form-hero {
	--form-hero-width: 420px;
	align-items: center;
	display: flex;
	min-height: 450px;
	position: relative;
}
@media screen and (min-width: 768px) {
	.form-hero {
		min-height: 600px;
		padding-bottom: var(--grid-section-gutter);
		padding-top: var(--grid-section-gutter);
	}
}

.form-hero__wrap {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}
@media screen and (min-width: 768px) {
	.form-hero__wrap { flex-direction: row; }
}

.form-hero__content {
	color: var(--color-soft-white);
	display: flex;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	min-height: 450px;
	padding-bottom: calc(var(--grid-section-gutter) + var(--typography-spacing));
	padding-left: var(--grid-col-gutter);
	padding-right: var(--grid-col-gutter);
	position: relative;
}
@media screen and (min-width: 768px) {
	.form-hero__content {
		margin-left: 0;
		margin-right: inherit;
		padding: 0 50px 0 0;
		position: static;
	}
}

/* Legibility gradient pinned to the full-bleed image */
.form-hero__content::after {
	background: linear-gradient(180deg, #0000 35.13%, #000000e6 90.39%);
	bottom: 0;
	content: "";
	display: block;
	height: 100%;
	left: 0;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	position: absolute;
	right: 0;
	z-index: 1;
}

.form-hero__content-inner {
	align-self: flex-end;
	margin-bottom: 20px;
	position: relative;
	text-align: center;
	width: 100%;
	z-index: 2;
}
@media screen and (min-width: 768px) {
	.form-hero__content-inner {
		margin-bottom: 0;
		text-align: left;
	}
}

.form-hero__image,
.form-hero__content img {
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%;
}

/* Inquiry form card overlaps the image on mobile, sits beside it on desktop */
.form-hero .inquiry-form {
	background-color: var(--color-burgundy-2);
	margin: -50px auto auto;
	max-width: var(--form-hero-width);
	position: relative;
	width: 100%;
	z-index: 2;
}
@media screen and (min-width: 768px) {
	.form-hero__content { flex: 1 1 0%; min-width: 0; }
	.form-hero .inquiry-form {
		flex: 0 0 var(--form-hero-width);
		margin-right: 0;
		margin-top: auto;
	}
}
.form-hero .inquiry-form__title { font-size: 20px; }

/* Section header helpers (measured from reference section component;
   declarations are idempotent if another component also defines them). */
.section__title,
.section__description { text-align: center; }
.section__description {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--wrap-width-large);
}
.section__cta-button { margin-top: var(--typography-spacing); text-align: center; }