/* ─────────────────────────────────────────────────────────────
   TMS — Final-CTA Section + Location-Page Hero
   Sticky left column on desktop + Formidable form styling
   inside the :is(.tms-cta-aside, [class*="-hero-image"]) box.
   ───────────────────────────────────────────────────────────── */

/* ─── Hero-image column box treatment (location pages) ───────
   The original Elementor column had its own ::before for a stripe
   overlay (now meaningless since the image is gone). Double the
   attribute selector to win specificity over Elementor's inline
   `.elementor-element-{id}` rules. */
[class*="-hero-image"][class*="-hero-image"]:has(form) {
	position: relative;
	background: #081B12 !important;
	padding: 40px 36px !important;
}

/* Replace the old stripe ::before with the top-left corner tick */
[class*="-hero-image"][class*="-hero-image"]:has(form)::before {
	content: "" !important;
	position: absolute !important;
	inset: auto !important;
	top: 10px !important;
	left: 10px !important;
	width: 20px !important;
	height: 20px !important;
	background: none !important;
	background-image: none !important;
	border: 1px solid #6DBF47 !important;
	border-right: 0 !important;
	border-bottom: 0 !important;
	pointer-events: none;
	z-index: 1;
}

/* Bottom-right corner tick */
[class*="-hero-image"][class*="-hero-image"]:has(form)::after {
	content: "";
	position: absolute;
	bottom: 10px;
	right: 10px;
	width: 20px;
	height: 20px;
	border: 1px solid #6DBF47;
	border-left: 0;
	border-top: 0;
	pointer-events: none;
	z-index: 1;
}

/* Make sure the form widget inside renders above the corner ticks' z-index */
[class*="-hero-image"][class*="-hero-image"]:has(form) > * {
	position: relative;
	z-index: 2;
}


/* Below 1300px: stack columns vertically in both the FAQ and final-CTA
   two-column sections. The right columns' content needs more breathing room
   than their percentage widths give on cramped laptop widths, causing them
   to overflow into the left column. Also kills sticky in this range so a
   pinned left column doesn't have a scrolling right column flying past it. */
@media (max-width: 1299px) {
	.tms-section--cta .tms-cta-left,
	.tms-section--cta :is(.tms-cta-aside, [class*="-hero-image"]),
	.tms-faq-head,
	.tms-faq-list {
		width: 100% !important;
	}

	/* The FAQ left column has inline custom CSS compiled to
	   `.elementor-element-<id> { position:sticky !important }` at min-width:901.
	   Single-class selectors lose source-order to that rule. Doubling the
	   class selector (`.x.x`) raises specificity from 0,1,0 to 0,2,0 so the
	   override actually beats Elementor's inline-compiled CSS. */
	.tms-faq-head.tms-faq-head {
		position: static !important;
		top: auto !important;
		align-self: auto !important;
	}
}

/* 1300px and up: side-by-side layout with sticky left column. */
@media (min-width: 1300px) {
	/* Flex items default to min-width:auto, which prevents shrinking below
	   intrinsic content size. That forces the right column to wrap below
	   the left at certain widths — the wrapped right column then scrolls
	   up past the sticky left, creating the overlap. Letting columns
	   shrink and locking nowrap on the parent keeps them side-by-side. */
	.tms-faq-head,
	.tms-faq-list,
	.tms-cta-left,
	:is(.tms-cta-aside, [class*="-hero-image"]) {
		min-width: 0 !important;
		flex-shrink: 1 !important;
	}

	.e-con-inner:has(> .tms-faq-head),
	.e-con-inner:has(> .tms-faq-list),
	.e-con-inner:has(> .tms-cta-left),
	.e-con-inner:has(> :is(.tms-cta-aside, [class*="-hero-image"])) {
		flex-wrap: nowrap !important;
	}

	/* The CTA section's custom CSS uses overflow:hidden to clip a decorative
	   pattern. That kills sticky on children. overflow:clip keeps the clip
	   without establishing a scroll container, so sticky works again. */
	.tms-section--cta {
		overflow: clip !important;
	}

	/* The flex parent .e-con-inner stretches children by default, which means
	   the left column matches the form column's height and sticky has no room
	   to move. align-self resets it to its natural height. */
	.tms-section--cta > .e-con-inner,
	.tms-section--cta.e-con > .e-con-inner {
		align-items: flex-start !important;
	}

	.tms-section--cta .tms-cta-left {
		position: sticky !important;
		top: 100px;
		align-self: flex-start !important;
	}

}

/* ─── Location-page hero: sticky left column ────────────────────
   Same treatment as the bottom CTA. Uses CSS grid via
   .tms-{city}-hero-grid (collapses to single column at ≤1100px
   per its existing CSS), so this kicks in at 1101px+ — wider
   range than the CTA/FAQ rules above because grid doesn't have
   the flex min-width:auto wrap problem. */
@media (min-width: 1101px) {
	/* Override overflow:hidden on the outer hero section. :has
	   limits this to hero sections that actually contain a form. */
	[class*="tms-section--"]:has([class*="-hero-image"] form) {
		overflow: clip !important;
	}

	/* Reset grid align so the left column keeps its natural height
	   instead of stretching to match the form column. */
	[class*="-hero-grid"]:has([class*="-hero-image"] form) {
		align-items: start !important;
	}

	/* Sticky on the left column when its sibling hero-image has a form */
	[class*="-hero-left"]:has(~ [class*="-hero-image"] form) {
		position: sticky !important;
		top: 100px;
		align-self: start !important;
	}
}


:is(.tms-cta-aside, [class*="-hero-image"]) .frm_form_field {
	margin-bottom: 18px !important;
}

:is(.tms-cta-aside, [class*="-hero-image"]) .frm_primary_label {
	position: static !important;
	display: block !important;
	padding: 0 0 8px 0 !important;
	margin: 0 !important;
	height: auto !important;
	line-height: 1.3 !important;
	font-family: 'JetBrains Mono', ui-monospace, monospace !important;
	font-size: 11px !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: #8A9A8F !important;
	font-weight: 500 !important;
}

:is(.tms-cta-aside, [class*="-hero-image"]) .frm_required {
	color: #6DBF47 !important;
	margin-left: 4px !important;
}

:is(.tms-cta-aside, [class*="-hero-image"]) .frm_description {
	font-family: 'DM Sans', sans-serif !important;
	font-size: 12px !important;
	color: #8A9A8F !important;
	margin-top: 6px !important;
}

:is(.tms-cta-aside, [class*="-hero-image"]) input[type=text],
:is(.tms-cta-aside, [class*="-hero-image"]) input[type=email],
:is(.tms-cta-aside, [class*="-hero-image"]) input[type=tel],
:is(.tms-cta-aside, [class*="-hero-image"]) input[type=url],
:is(.tms-cta-aside, [class*="-hero-image"]) input[type=number],
:is(.tms-cta-aside, [class*="-hero-image"]) input[type=password],
:is(.tms-cta-aside, [class*="-hero-image"]) select {
	box-sizing: border-box !important;
	width: 100% !important;
	height: 48px !important;
	background: #061610 !important;
	color: #F2EBDF !important;
	border: 1px solid #1E4432 !important;
	border-radius: 0 !important;
	padding: 0 16px !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
}

:is(.tms-cta-aside, [class*="-hero-image"]) textarea {
	box-sizing: border-box !important;
	width: 100% !important;
	min-height: 130px !important;
	background: #061610 !important;
	color: #F2EBDF !important;
	border: 1px solid #1E4432 !important;
	border-radius: 0 !important;
	padding: 14px 16px !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	resize: vertical !important;
	box-shadow: none !important;
}

:is(.tms-cta-aside, [class*="-hero-image"]) select {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	padding-right: 40px !important;
	background-image:
		linear-gradient(45deg, transparent 50%, #6DBF47 50%),
		linear-gradient(135deg, #6DBF47 50%, transparent 50%) !important;
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50% !important;
	background-size: 6px 6px, 6px 6px !important;
	background-repeat: no-repeat !important;
	cursor: pointer !important;
}

:is(.tms-cta-aside, [class*="-hero-image"]) input:focus,
:is(.tms-cta-aside, [class*="-hero-image"]) textarea:focus,
:is(.tms-cta-aside, [class*="-hero-image"]) select:focus {
	border-color: #6DBF47 !important;
	outline: none !important;
}

:is(.tms-cta-aside, [class*="-hero-image"]) ::placeholder {
	color: #5A6B5F !important;
	opacity: 1 !important;
}

:is(.tms-cta-aside, [class*="-hero-image"]) input:-webkit-autofill {
	-webkit-text-fill-color: #F2EBDF !important;
	-webkit-box-shadow: 0 0 0 1000px #061610 inset !important;
}

:is(.tms-cta-aside, [class*="-hero-image"]) .frm_top_container .frm_primary_label {
	padding-bottom: 8px !important;
}

:is(.tms-cta-aside, [class*="-hero-image"]) .frm_combo_inputs_container {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
}

:is(.tms-cta-aside, [class*="-hero-image"]) .frm_combo_inputs_container > div {
	flex: 1 1 200px !important;
}

:is(.tms-cta-aside, [class*="-hero-image"]) .frm_checkbox label,
:is(.tms-cta-aside, [class*="-hero-image"]) .frm_radio label {
	font-family: 'DM Sans', sans-serif !important;
	color: #E4D9C3 !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-weight: 400 !important;
}

:is(.tms-cta-aside, [class*="-hero-image"]) .frm_checkbox input[type=checkbox],
:is(.tms-cta-aside, [class*="-hero-image"]) .frm_radio input[type=radio] {
	accent-color: #6DBF47 !important;
}

:is(.tms-cta-aside, [class*="-hero-image"]) .frm_submit {
	margin-top: 8px !important;
}

:is(.tms-cta-aside, [class*="-hero-image"]) input[type=submit],
:is(.tms-cta-aside, [class*="-hero-image"]) button[type=submit] {
	background: #6DBF47 !important;
	color: #061610 !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 16px 32px !important;
	height: auto !important;
	width: auto !important;
	font-family: 'DM Sans', sans-serif !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	transition: background .2s ease, color .2s ease !important;
}

:is(.tms-cta-aside, [class*="-hero-image"]) input[type=submit]:hover,
:is(.tms-cta-aside, [class*="-hero-image"]) button[type=submit]:hover {
	background: #F2EBDF !important;
}

:is(.tms-cta-aside, [class*="-hero-image"]) .grecaptcha-badge {
	visibility: hidden !important;
}