/* =====================================================
   SPLIT FEATURE — media one side, copy (and optionally
   the real CRM form) on the other.
   ===================================================== */

.split-feature-block {padding:70px 0;}
.split-feature-block.bg-white {background:#fff;}
.split-feature-block.bg-light-gray {background:#f4f4f4;}
.split-feature-block.bg-dark-blue {background:var(--color-headline); color:#fff;}

.split-feature-block .split-grid {
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	align-items:center;
	gap:56px;
}

/* With a form the copy column is much taller than the media, and centring the
   media leaves it floating in the middle of a long form. Top-align instead and
   let the image run the height of the column. */
.split-feature-block.has-form .split-grid {align-items:stretch;}
.split-feature-block.has-form .media-frame {height:100%; aspect-ratio:auto; min-height:420px;}

/* Media right: swap the visual order without touching the DOM, so the copy
   still comes first for a screen reader and media still leads on a phone. */
.split-feature-block.media-right .split-media {order:2;}
.split-feature-block.media-right .split-copy {order:1;}

.split-feature-block .media-frame {
	position:relative;
	overflow:hidden;
	aspect-ratio:4/5;
	background:var(--color-headline);
}
.split-feature-block .media-frame img,
.split-feature-block .media-frame .media-video {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	object-fit:cover;
	border:0;
}
.split-feature-block .media-frame .media-video {z-index:2;}
.split-feature-block .media-frame .media-poster {z-index:1;}

.split-feature-block .eyebrow {
	margin:0 0 14px;
	font-size:13px;
	font-weight:bold;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--color-brand);
}
.split-feature-block.bg-dark-blue .eyebrow {color:var(--color-brand-light);}

.split-feature-block .headline {margin:0 0 18px;}
.split-feature-block.bg-dark-blue .headline {color:#fff;}
.split-feature-block.bg-dark-blue .headline::before {content:url('../../img/icon-white.svg');}

.split-feature-block .buttons {margin-top:26px;}
.split-feature-block .buttons .btn {margin:0 10px 10px 0;}
.split-feature-block.bg-dark-blue .buttons .btn {border-color:#fff;}

/* --- the reused contact form, unwrapped -------------------------------------
   contact_form/html.php renders its own full-width band: padding, background,
   a top-divider and a two-column .inner. Inside this column it has to behave
   like a plain form, so those are all neutralised here rather than by editing
   the shared template. */
.split-feature-block .split-form {margin-top:32px;}

.split-feature-block .split-form .contact-form-block {
	padding:0;
	background:none;
	bottom:auto;
}
.split-feature-block .split-form .contact-form-block::before,
.split-feature-block .split-form .contact-form-block::after {content:none;}
.split-feature-block .split-form .contact-form-block .inner {
	display:block;
	max-width:none;
	padding:0;
}
/* .inner is a flex row of two 50% columns in the shared band. Inside one
   column of the split that halves the fields again, which is what was leaving
   the inputs at about 260px in a 520px column. */
.split-feature-block .split-form .contact-form-block .inner > div {
	width:100%;
	padding-right:0;
}
/* The shared form hides its own empty headline column; make sure an empty one
   cannot leave a gap above the fields. */
.split-feature-block .split-form .contact-form-block .inner > div:empty {display:none;}

/* The form's own field grid is built for a full-width two-column band:
   .fields is flex with space-between, .field is 75% wide and .field-group is
   46%. In a single column that squeezes inputs to about a third of the width
   and wraps every radio label onto four lines. One column here instead. */
.split-feature-block .split-form .fields {display:block;}
.split-feature-block .split-form .fields .field,
.split-feature-block .split-form .fields .field-large,
.split-feature-block .split-form .field-group,
.split-feature-block .split-form .field-group.select .field {
	width:100%;
}

/* Radio rows read as a question followed by its options, not as two columns. */
.split-feature-block .split-form .field-group {margin-bottom:1.6em;}
.split-feature-block .split-form .field-group > label {margin-bottom:.7em !important;}
.split-feature-block .split-form .field-group fieldset {
	display:flex;
	flex-wrap:wrap;
	gap:6px 22px;
	border:0;
	padding:0;
	margin:0;
}
.split-feature-block .split-form .field-group fieldset .field {
	width:auto;
	margin-bottom:0;
	display:flex;
	align-items:center;
	gap:7px;
}

.split-feature-block.bg-dark-blue .split-form label,
.split-feature-block.bg-dark-blue .split-form .contact-form-block {color:#fff;}

@media (max-width:1080px) {
	.split-feature-block .split-grid {gap:40px;}
	.split-feature-block .media-frame {aspect-ratio:1/1;}
}

@media (max-width:900px) {

	.split-feature-block {padding:50px 0;}

	/* Media first on a phone whichever side it takes on desktop. */
	.split-feature-block .split-grid {
		grid-template-columns:minmax(0, 1fr);
		gap:28px;
	}
	.split-feature-block.media-right .split-media,
	.split-feature-block .split-media {order:1;}
	.split-feature-block.media-right .split-copy,
	.split-feature-block .split-copy {order:2;}

	.split-feature-block .media-frame {aspect-ratio:16/10;}
}

/* Desktop-only video, matching the hero: phones keep the poster image. */
@media (max-width:810px) {
	.split-feature-block .media-frame .media-video {display:none;}
}