.frm_select_field.no-drop-replace .styled-dropdown {
	pointer-events: none !important;
}

.frm_select_field.no-drop-replace select {
	width: 100% !important;
	pointer-events: auto !important;
	appearance: none;
	-webkit-appearance: none !important;
	outline: none;
	height: calc(100% - 2px);
}

form .frm_opt_container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 10px 0;
	padding-left: 0 !important;
	width: 100%;
}

form .frm_four_col {
	width: 100%;
}

form .frm_four_col .frm_opt_container .frm_checkbox {
	width: 25%;
}

@media (max-width: 767px) {
	form .frm_four_col .frm_opt_container .frm_checkbox {
		width: 50%;
	}
}

@media (max-width: 500px) {
	form .frm_four_col .frm_opt_container .frm_checkbox {
		width: 100%;
	}
}

form .frm_three_col {
	width: 100%;
}

form .frm_three_col .frm_opt_container .frm_checkbox {
	width: 33.333333333333%;
}

@media (max-width: 767px) {
	form .frm_three_col .frm_opt_container .frm_checkbox {
		width: 50%;
	}
}

@media (max-width: 500px) {
	form .frm_three_col .frm_opt_container .frm_checkbox {
		width: 100%;
	}
}

form .frm_two_col {
	width: 100%;
}

form .frm_two_col .frm_opt_container .frm_checkbox {
	width: 50%;
}

@media (max-width: 767px) {
	form .frm_two_col .frm_opt_container .frm_checkbox {
		width: 50%;
	}
}

@media (max-width: 500px) {
	form .frm_two_col .frm_opt_container .frm_checkbox {
		width: 100%;
	}
}

.frm_forms form .frm_form_field.vertical_radio {
	width: 100%;
}

.frm_forms form .frm_checkbox {
	padding-right: 25px;
}

.frm_form_field:has(input[type=number]):has(.frm_inline_box) {
	& .frm_input_group {
		position: relative;
	}

	& .frm_inline_box {
		position: absolute;
		left: 13px;
		top: 11px;
		z-index: 100;
		pointer-events: none;
		color: var(--input-color) !important;
		font-size: var(--input-font-size) !important;
	}

	& input[type=number] {
		padding-left: 26px !important;
	}
}

form.single-field {
	position: relative;
	display: block;
	margin: 0 auto !important;
	padding: 10px 0;
	max-width: 450px;

	@media (max-width: 1200px) {
		& {
			max-width: 100%;
		}
	}

	@media (max-width: 1024px) {
		& {
			text-align: center;
			width: auto;
		}
	}

	& .required:before {
		display: none;
		left: 20px;
	}

	& input[type=text],
	& input[type=password],
	& input[type=email],
	& input[type=number],
	& input[type=search],
	& input[type=tel],
	& input[type=url],
	& select,
	& textarea,
	& .input {
		display: block;
		border: 0;
		color: var(--single-input-color) !important;
		-webkit-text-fill-color: var(--single-input-color) !important;
		font-weight: var(--single-input-font-weight) !important;
		padding: var(--single-input-padding) !important;
		line-height: var(--input-line-height) !important;
		margin: 0 !important;
		background: var(--single-input-background-color) !important;
		border: var(--single-input-border-width) solid var(--single-input-border-color) !important;
		letter-spacing: var(--single-input-letter-spacing) !important;
		font-size: var(--button-font-size) !important;
		-webkit-border-radius: var(--single-input-border-radius) !important;
		border-radius: var(--single-input-border-radius) !important;
		-webkit-background-clip: padding-box;
		background-clip: padding-box;
		box-shadow: var(--single-input-box-shadow) !important;

		&::-webkit-input-placeholder,
		&:-moz-placeholder,
		&::-moz-placeholder,
		&:-ms-input-placeholder {
			color: var(--single-focus-input-color) !important;
			-webkit-text-fill-color: var(--single-focus-input-color) !important;
			border-color: var(--single-focus-input-border-color) !important;
			background: var(--single-focus-input-background-color) !important;
			box-shadow: var(--single-focus-input-box-shadow) !important;
		}

		&:focus,
		&:active {
			color: var(--single-focus-input-color) !important;
			-webkit-text-fill-color: var(--single-focus-input-color) !important;
			border-color: var(--single-focus-input-border-color) !important;
			background: var(--single-focus-input-background-color) !important;
			box-shadow: var(--single-focus-input-box-shadow) !important;

			&::-webkit-input-placeholder,
			&:-moz-placeholder,
			&::-moz-placeholder,
			&:-ms-input-placeholder {
				color: var(--single-focus-input-color) !important;
				-webkit-text-fill-color: var(--single-focus-input-color) !important;
				opacity: 0.0;
			}
		}
	}

	& :is(
		input.form-submit,
		input[type=submit],
		input[type=button],
		button[type=submit],
		button.submit,
		.btn-submit,
		#wp-submit
	) {
		color: var(--single-submit-color) !important;
		background: var(--single-submit-background-color) !important;
		border-color: var(--single-submit-border-color) !important;
		margin: 0px !important;
		padding: var(--single-submit-padding) !important;
		-webkit-border-radius: var(--button-border-radius) !important;
		border-radius: var(--button-border-radius) !important;
		-webkit-background-clip: padding-box;
		background-clip: padding-box;
		width: 100%;
		min-width: 0px;
		height: 100%;
		font-weight: var(--button-font-weight) !important;
		font-family: var(--button-font);
		font-size: var(--single-submit-font-size)!important;
		line-height: var(--button-line-height) !important;
		letter-spacing: var(--button-letter-spacing) !important;
		border-radius: var(--button-border-radius) !important;

		&:hover,
		&:focus:hover,
		&.disabled:hover,
		&.disable:hover,
		&:disabled:hover,
		&:active,
		&:focus:active,
		&.disabled:active,
		&.disable:active,
		&:disabled:active {
			color: var(--single-submit-hover-color) !important;
			background: var(--single-submit-hover-background-color) !important;
			border-color: var(--single-submit-hover-border-color) !important;
		}

		&:hover:before,
		&:focus:hover:before,
		&.disabled:hover:before,
		&.disable:hover:before,
		&:disabled:hover:before,
		&:active:before,
		&:focus:active:before,
		&.disabled:active:before,
		&.disable:active:before,
		&:disabled:active:before {
			color: inherit !important;
		}
	}
}

form,
.frm_forms {
	& select {
		&, &, &, &, &, & {
			--second-pos: 1.4em;

			-webkit-appearance: none !important;
			-moz-appearance: none !important;
			-ms-appearance: none !important;
			-o-appearance: none !important;
			appearance: none !important;
			/*background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc) !important;
			background-position: calc(100% - 20px) var(--second-pos), calc(100% - 15px) var(--second-pos), calc(100% - 2.5em) 0.5em !important;
			background-size: 5px 5px, 5px 5px, 1px 2.0em !important;*/
			background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E") !important;
			background-position: calc(100% - 14px) 50% !important;
			background-size: 11px auto !important;
			background-repeat: no-repeat !important;
			padding-right: 40px !important;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: clip !important;

			&:focus {
				background-repeat: no-repeat !important;
				border-color: var(--dark-grey);
				outline: 0;
			}
		}
	}

	& select:-moz-focusring {
	  color: transparent;
	  text-shadow: 0 0 0 #000;
	}
}

select:not(#hr_dropdown) {
	&, &, &, &, &, & {
		--second-pos: 1.4em;

		-webkit-appearance: none !important;
		-moz-appearance: none !important;
		-ms-appearance: none !important;
		-o-appearance: none !important;
		appearance: none !important;
		/*background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc) !important;
		background-position: calc(100% - 20px) var(--second-pos), calc(100% - 15px) var(--second-pos), calc(100% - 2.5em) 0.5em !important;
		background-size: 5px 5px, 5px 5px, 1px 2.0em !important;*/
		background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E") !important;
		background-position: calc(100% - 14px) 50% !important;
		background-size: 11px auto !important;
		background-repeat: no-repeat !important;
		padding-right: 40px !important;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: clip !important;

		&:focus {
			background-repeat: no-repeat !important;
			border-color: var(--dark-grey);
			outline: 0;
		}
	}
}

.required-fields {
	display: block;
	text-align: right;
	color: var(--primary-color);
	padding: 0 2px 22px;
	font-weight: normal;
	letter-spacing: 0;
}

.display-none,
.remove {
	display: none !important;
}

.frm_form_field {
	position: relative;
}

.frm_form_field .styled-dropdown {
	bottom: 24px;
	top: auto;
}

@media (min-width: 768px) {
	.frm_form_field .styled-dropdown {
		left: 10px;
		right: 10px;
	}
}

.frm_select_field {
	position: relative;
}

.frm_select_holder.frm_select_field {
	height: auto !important;
}

.frm_submit {
	display: block;
	text-align: right;
	float: left;
	padding: 15px 0 !important;
}

@media (max-width: 1024px) {
	.frm_submit {
		padding: 0 !important;
	}
}

.frm_submit input[type=submit] {
	display: inline-block !important;
}

label .frm_required {
	float: right;
	color: var(--error-color);
	padding-left: 5px;
}

.required:before,
.req:before,
.frm_required_field:before {
	position: absolute;
	left: 23px;
	font-family: var(--body-font);
	font-size: var(--label-font-size);
	font-weight: var(--label-font-weight);
	content: '*';
	text-align: left;
	color: var(--label-color);
	z-index: 10;
	padding-top: 12px;
	pointer-events: none;
	opacity: 1.0;
	display: none;
}

.frm_primary_label {
	position: relative;
	font-family: var(--body-font);
	text-transform: var(--label-text-transform);
	line-height: 1.4;
	font-size: var(--label-font-size);
	display: inline-block;
	margin: 0 !important;
	padding: 0 0 9px;
	font-weight: var(--label-font-weight);
	color: var(--label-color);
}

.frm_none_container .frm_primary_label {
	display: none !important;
}

.frm_forms input,
.frm_forms textarea,
.frm_forms select {
	outline: none;
	vertical-align: middle;
}

.frm_forms select:-moz-focusring {
	outline: 0;
	color: transparent;
	text-shadow: 0 0 0 #000;
}

.frm_forms select::-ms-expand {
	display: none;
}

.frm_forms form {
	position: relative;
}

.frm_forms form,
.frm_forms fieldset {
	margin: 0;
	padding: 0;
	border-style: none;
}

.frm_forms button::-moz-focus-inner,
.frm_forms input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

.frm_forms button,
.frm_forms input[type="button"],
.frm_forms input[type="reset"],
.frm_forms input[type="file"],
.frm_forms input[type="submit"] {
	-webkit-appearance: none;
	appearance: none;
	-webkit-border-radius: 0;
	border-radius: 0;
	cursor: pointer;
}

.frm_forms .down-arrow {
	position: absolute;
	display: block !important;
	font: normal normal normal 14px/1 var(--font-awesome) !important;
	font-style: normal !important;
	font-weight: 900 !important;
	font-size: 12px !important;
	line-height: 1.0;
	right: 30px;
	top: 49px;
	margin-top: 0;
	z-index: 10;
	-webkit-transition: color 100ms linear;
	transition: color 100ms linear;
	color: var(--focus-input-color);
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	opacity: 1.0;
	pointer-events: none;
}

@media (max-width: 767px) {
	.frm_forms .down-arrow {
		right: 18px;
	}
}

.frm_forms textarea {
	overflow: auto;
	resize: vertical;
	vertical-align: top;
}

.frm_forms input[type="checkbox"],
.frm_forms input[type="radio"] {
	padding: 0;
}

.frm_forms input[type="search"]::-webkit-search-cancel-button,
.frm_forms input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

.frm_forms form>.frm_form_fields,
.frm_forms form>.frm_message {
	pointer-events: auto;
	opacity: 1;
	-webkit-transition: opacity 400ms var(--ease-out-cubic);
	transition: opacity 400ms var(--ease-out-cubic);
}

.frm_forms form:after {
	position: absolute;
	content: '';
	z-index: 200;
	pointer-events: none;
	/* width: 24px;
	height: 24px;
	background: rgba(255, 255, 255, 0.9) url(../images/ajax-loader-2.gif) no-repeat center center;
	background-size: 17px; */
	width: 1em;
	height: 1em;
	background: rgba(255, 255, 255, 0.98) var(--loading-icon) no-repeat center center;
	border-radius: 50%;
	background-size: 1em auto;
	overflow: clip;
	left: 50%;
	top: 30%;
	transform: translate(0, -50%);
	transform-origin: center;
	opacity: 0;
	box-shadow: 2px 3px 10px 0 rgba(0, 0, 0, .15);
	transition: opacity 400ms var(--ease-out-cubic);

	@supports (backdrop-filter: blur(12px)) {
		background-color: rgba(255, 255, 255, 0.85);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
	}
}

.frm_forms form.frm_loading_form>.frm_form_fields,
.frm_forms form.frm_loading_form>.frm_message {
	pointer-events: none;
	opacity: 0.2;
}

.frm_forms form.frm_loading_form:after {
	opacity: 1;
}

.frm_forms form fieldset {
	position: relative;
}

.frm_forms form .frm_fields_container:before,
.frm_forms form .frm_fields_container:after {
	content: "";
	display: table;
}

.frm_forms form .frm_fields_container:after {
	clear: both;
}

.frm_forms form .center-content {
	display: block !important;
	text-align: center !important;
}

.frm_forms form .frm_form_field {
	float: left;
	padding: var(--input-container-padding);

	&.frm_top_container {
		padding-top: 8px;
	}
}

.frm_forms form .frm_form_field.for-field {
	margin-top: -10px !important;
	padding-bottom: 10px !important;
}

.frm_forms form .frm_form_field.no-padding {
	padding: 0 !important;
}

@media (max-width: 767px) {
	.frm_forms form .frm_form_field {
		padding: var(--mobile-input-container-padding) !important;
	}

	.frm_forms form .frm_form_field.frm_html_container {
		padding-bottom: 14px !important;
	}

	.frm_forms form .frm_form_field.recaptcha-holder {
		padding: 0 !important;
	}
}

.frm_forms form .frm_form_field.frm_section_heading {
	padding: 0;
}

.frm_forms form .frm_form_field.no-show {
	padding: 0 !important;
	opacity: 0.0 !important;
}

.frm_forms form .frm_form_field.frm_first {
	clear: left;
}

.frm_forms form .frm_form_field.frm_full,
.frm_forms form .frm_form_field.frm12 {
	width: 100%;
}

.frm_forms form .frm_form_field.frm_half,
.frm_forms form .frm_form_field.frm6 {
	width: 50%;
}

.frm_forms form .frm_form_field.frm_third,
.frm_forms form .frm_form_field.frm4 {
	width: 33%;
}

.frm_forms form .frm_form_field.frm_two_thirds,
.frm_forms form .frm_form_field.frm8 {
	width: 66%;
}

.frm_forms form .frm_form_field.frm_fourth,
.frm_forms form .frm_form_field.frm3 {
	width: 25%;
}

.frm_forms form .frm_form_field.frm_three_fourths,
.frm_forms form .frm_form_field.frm9 {
	width: 75%;
}

.frm_forms form .frm_form_field.frm_fifth {
	width: 20%;
}

.frm_forms form .frm_form_field.frm_two_fifths {
	width: 40%;
}

.frm_forms form .frm_form_field.frm_three_fifths {
	width: 60%;
}

.frm_forms form .frm_form_field.frm_four_fifths {
	width: 80%;
}

.frm_forms form .frm_form_field.frm_sixth {
	width: 16.666666666667%;
}

.frm_forms form .frm_form_field.frm_seventh {
	width: 14.285714285714%;
}

.frm_forms form .frm_form_field.frm_eighth {
	width: 12.5%;
}

.frm_forms form .frm_form_field.frm_left_container,
.frm_forms form .frm_form_field.frm_left_container.frm_full {
	padding-bottom: 25px !important;
}

.frm_forms form .frm_form_field.frm_left_container .frm_error,
.frm_forms form .frm_form_field.frm_left_container.frm_full .frm_error {
	padding-top: 3px;
}

@media (min-width: 768px) {

	.frm_forms form .frm_form_field.frm_left_container .frm_error,
	.frm_forms form .frm_form_field.frm_left_container.frm_full .frm_error {
		float: left;
		padding-left: 16%;
	}
}

.frm_forms form .frm_form_field.frm_left_container label,
.frm_forms form .frm_form_field.frm_left_container.frm_full label {
	float: left;
	width: 16% !important;
	padding: 10px 15px 8px 0 !important;
}

@media (max-width: 767px) {

	.frm_forms form .frm_form_field.frm_left_container label,
	.frm_forms form .frm_form_field.frm_left_container.frm_full label {
		float: none;
		display: block;
		width: 100% !important;
		padding: 0 0 8px !important;
	}
}

.frm_forms form .frm_form_field.frm_left_container>input,
.frm_forms form .frm_form_field.frm_left_container>select,
.frm_forms form .frm_form_field.frm_left_container>textarea,
.frm_forms form .frm_form_field.frm_left_container>input:not([type='checkbox']):not([type='radio']):not([type='button']),
.frm_forms form .frm_form_field.frm_left_container.frm_full>input,
.frm_forms form .frm_form_field.frm_left_container.frm_full>select,
.frm_forms form .frm_form_field.frm_left_container.frm_full>textarea,
.frm_forms form .frm_form_field.frm_left_container.frm_full>input:not([type='checkbox']):not([type='radio']):not([type='button']) {
	float: left;
	width: 84% !important;
}

@media (max-width: 767px) {

	.frm_forms form .frm_form_field.frm_left_container>input,
	.frm_forms form .frm_form_field.frm_left_container>select,
	.frm_forms form .frm_form_field.frm_left_container>textarea,
	.frm_forms form .frm_form_field.frm_left_container>input:not([type='checkbox']):not([type='radio']):not([type='button']),
	.frm_forms form .frm_form_field.frm_left_container.frm_full>input,
	.frm_forms form .frm_form_field.frm_left_container.frm_full>select,
	.frm_forms form .frm_form_field.frm_left_container.frm_full>textarea,
	.frm_forms form .frm_form_field.frm_left_container.frm_full>input:not([type='checkbox']):not([type='radio']):not([type='button']) {
		float: none;
		display: block;
		width: 100% !important;
	}
}

@media (max-width: 767px) {
	.frm_forms form .frm_form_field {
		width: 100% !important;
		display: block;
	}
}

.frm_forms form .horizontal_radio .frm_radio {
	display: inline-block;
	padding: 0 20px 0 0;
}

.frm_forms form .horizontal_radio .frm_radio.first-child {
	padding-left: 0;
}

.frm_forms form .horizontal_radio .frm_primary_label {
	display: inline-block;
}

@media (max-width: 767px) {
	.frm_forms form .horizontal_radio .frm_primary_label {
		display: block;
	}
}

.frm_forms form .horizontal_radio .frm_opt_container {
	display: inline-block;
}

@media (max-width: 767px) {
	.frm_forms form .horizontal_radio .frm_opt_container {
		display: block;
	}
}

.frm_forms form input.form-submit:disabled,
.frm_forms form input.form-submit.disabled,
.frm_forms form input.form-submit:focus:disabled,
.frm_forms form input.form-submit:focus.disabled,
.frm_forms form input.form-submit.disabled:disabled,
.frm_forms form input.form-submit.disabled.disabled,
.frm_forms form input.form-submit.disable:disabled,
.frm_forms form input.form-submit.disable.disabled,
.frm_forms form input.form-submit:disabled:disabled,
.frm_forms form input.form-submit:disabled.disabled,
.frm_forms form input[type=submit]:disabled,
.frm_forms form input[type=submit].disabled,
.frm_forms form input[type=submit]:focus:disabled,
.frm_forms form input[type=submit]:focus.disabled,
.frm_forms form input[type=submit].disabled:disabled,
.frm_forms form input[type=submit].disabled.disabled,
.frm_forms form input[type=submit].disable:disabled,
.frm_forms form input[type=submit].disable.disabled,
.frm_forms form input[type=submit]:disabled:disabled,
.frm_forms form input[type=submit]:disabled.disabled,
.frm_forms form input[type=button]:disabled,
.frm_forms form input[type=button].disabled,
.frm_forms form input[type=button]:focus:disabled,
.frm_forms form input[type=button]:focus.disabled,
.frm_forms form input[type=button].disabled:disabled,
.frm_forms form input[type=button].disabled.disabled,
.frm_forms form input[type=button].disable:disabled,
.frm_forms form input[type=button].disable.disabled,
.frm_forms form input[type=button]:disabled:disabled,
.frm_forms form input[type=button]:disabled.disabled,
.frm_forms form button.submit:disabled,
.frm_forms form button.submit.disabled,
.frm_forms form button.submit:focus:disabled,
.frm_forms form button.submit:focus.disabled,
.frm_forms form button.submit.disabled:disabled,
.frm_forms form button.submit.disabled.disabled,
.frm_forms form button.submit.disable:disabled,
.frm_forms form button.submit.disable.disabled,
.frm_forms form button.submit:disabled:disabled,
.frm_forms form button.submit:disabled.disabled,
.frm_forms form button.frm_button_submit:disabled,
.frm_forms form button.frm_button_submit.disabled,
.frm_forms form button.frm_button_submit:focus:disabled,
.frm_forms form button.frm_button_submit:focus.disabled,
.frm_forms form button.frm_button_submit.disabled:disabled,
.frm_forms form button.frm_button_submit.disabled.disabled,
.frm_forms form button.frm_button_submit.disable:disabled,
.frm_forms form button.frm_button_submit.disable.disabled,
.frm_forms form button.frm_button_submit:disabled:disabled,
.frm_forms form button.frm_button_submit:disabled.disabled,
.frm_forms form .btn-submit:disabled,
.frm_forms form .btn-submit.disabled,
.frm_forms form .btn-submit:focus:disabled,
.frm_forms form .btn-submit:focus.disabled,
.frm_forms form .btn-submit.disabled:disabled,
.frm_forms form .btn-submit.disabled.disabled,
.frm_forms form .btn-submit.disable:disabled,
.frm_forms form .btn-submit.disable.disabled,
.frm_forms form .btn-submit:disabled:disabled,
.frm_forms form .btn-submit:disabled.disabled,
.frm_forms form #wp-submit:disabled,
.frm_forms form #wp-submit.disabled,
.frm_forms form #wp-submit:focus:disabled,
.frm_forms form #wp-submit:focus.disabled,
.frm_forms form #wp-submit.disabled:disabled,
.frm_forms form #wp-submit.disabled.disabled,
.frm_forms form #wp-submit.disable:disabled,
.frm_forms form #wp-submit.disable.disabled,
.frm_forms form #wp-submit:disabled:disabled,
.frm_forms form #wp-submit:disabled.disabled {
	opacity: 0.4 !important;
	pointer-events: none !important;
}

.frm_forms form.single-column .frm_form_field,
.frm_forms form.single-column .frm_submit,
.frm_forms form.single-column .frm_error_style {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.frm_forms form.single-field .frm_required {
	display: none;
}

@media (max-width: 1024px) {
	.frm_forms form.single-field {
		margin: 0 auto !important;
	}
}

.frm_forms form.single-field .frm_form_fields {
	margin-bottom: 0;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.frm_forms form.single-field .horizontal_radio {
	margin-bottom: 8px;
}

.frm_forms form.single-field .required:before,
.frm_forms form.single-field .req:before,
.frm_forms form.single-field .frm_required_field:before {
	display: none;
}

.frm_forms form.single-field .frm_html_container {
	margin-bottom: 0 !important;
}

.frm_forms form.single-field .frm_error {
	display: none !important;
}

.frm_forms form.single-field .frm_error_style {
	border: 0;
	padding: 0 0 10px;
	text-align: inherit;
}

@media (max-width: 1024px) {
	.frm_forms form.single-field .frm_error_style {
		text-align: center;
	}
}

.frm_forms form.single-field .frm_message {
	padding: 0 10px 20px !important;
	font-weight: 400;
	text-align: center;
}

@media (min-width: 1025px) {
	.frm_forms form.single-field .frm_message {
		text-align: left;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

@media (max-width: 1024px) {
	.frm_forms form.single-field {
		text-align: center;
		width: auto;
		margin: 0 auto !important;
	}
}

.frm_forms form.single-field .frm_form_fields {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}

.frm_forms form.single-field .required:before,
.frm_forms form.single-field .req:before,
.frm_forms form.single-field .frm_required_field:before {
	left: 20px;
}

.frm_forms form.single-field .frm_form_field {
	position: relative;
	width: 100% !important;
	padding: 0 !important;
	float: none;
	margin: 0 !important;
}

.frm_forms form.single-field .frm_form_field:has(.frm_submit) {
	position: absolute;
	width: auto !important;
	height: auto;
	right: 10px;
	bottom: 10px;
	margin-top: 0;
	padding: 0 !important;
	z-index: 100;
}

.frm_forms form .frm_error_style {
	display: block;
	text-align: left;
}

.frm_forms form .frm_submit {
	position: relative;
	margin: 0;
	padding: 0 8px 0 !important;
	width: auto;
	text-align: left;
}

.frm_forms form .frm_form_field .frm_submit {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

@media (max-width: 767px) {
	.frm_forms form .frm_submit {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

.frm_message {
	position: relative;
	margin: 0;
	padding: 0 0 40px !important;
	color: var(--success-color);
	font-size: 1.05rem;
	font-weight: var(--strong-font-weight);
	line-height: 1.4;
	text-align: left;
	-webkit-font-smoothing: auto;

	& p {
		color: inherit !important;
	}
}

.frm_message:last-child {
	padding-bottom: 0 !important;
}

@media (max-width: 767px) {
	.frm_message {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

.custom-success-message {
	color: var(--body-color);
}

.required-fields {
	display: block;
	text-align: right;
	color: var(--primary-color);
	padding: 0 2px 22px;
	font-weight: normal;
	letter-spacing: 0;
}

.display-none,
.remove {
	display: none !important;
}

.frm_error_style,
.frm_error {
	position: relative;
	display: block;
	z-index: 100;
	font-weight: 400;
	top: auto;
	letter-spacing: 0;
	font-style: normal;
	padding: 0;
	margin: 0px 2px 16px;
	line-height: var(--body-line-height);
	text-align: left;
	font-size: 0.9rem;
	letter-spacing: 0.015em;
	-webkit-font-smoothing: auto;
}

.frm_error_style,
.frm_error_style p,
.frm_error,
.frm_error p {
	color: var(--error-color) !important;
}

.frm_error_style {
	margin: 0;
	padding: 0 0 10px;
	background: transparent !important;
	text-align: left;
	border: 1px dashed rgba(232, 96, 96, 0);
	font-size: 1.05em;
	font-weight: 400;
}

.frm_error_style,
.frm_error_style p {
	color: var(--error-color) !important;
}

@media (max-width: 1024px) {
	.frm_error_style {
		text-align: center;
	}
}

@media (max-width: 767px) {
	.frm_error_style {
		padding-left: 0;
		padding-right: 0;
	}
}

.frm_form_fields {
	display: block;
	padding-top: 0;
	margin-top: 0;
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.frm_form_fields {
		margin-left: -10px;
		margin-right: -10px;
	}
}

form .frm_form_field.captcha-fld {
	display: block;
	text-align: left;
}

form .frm_form_field.captcha-fld .frm_error {
	text-align: left !important;
	padding: 0 18px !important;
	margin-top: 8px;
	margin-bottom: 10px;
}

form .frm_form_field .g-recaptcha {
	text-align: left;
	display: inline-block;
	padding: 0 !important;
	margin-bottom: 20px !important;
	text-align: center;
}

form .frm_form_field .g-recaptcha>div>div {
	display: inline-block;
}

@media (min-width: 768px) {
	.frm-g-recaptcha>div {
		padding-left: 16%;
	}
}

.frm_dropzone {
	display: block;
	background: transparent;
	text-align: center;
	padding: 50px 20px;
	margin: 0 auto;
	border: 1px dashed var(--input-border-color);
	width: 100%;
	-webkit-border-radius: var(--input-border-radius);
	border-radius: var(--input-border-radius);
}

@media (max-width: 767px) {
	.frm_dropzone {
		padding: 40px 20px;
	}
}

.frm_dropzone.frm_single_upload {
	max-width: 100% !important;
}

.frm_style_formidable-style .frm_icon_font {
	color: #3f4b5b !important;
}
.frm_dropzone .frm_upload_icon:before {
	font-size: 40px;
}
.frm_dropzone svg {
	font-size: 40px;
	width: 40px;
	margin: 0 auto;
}
.frm_dropzone.dz-clickable.frm_single_upload .dz-message {
	margin: 0 0 0.5em 0;
}
.frm_dropzone.dz-clickable .dz-message, .frm_dropzone.dz-clickable .dz-message * {
	cursor: pointer;
}
.frm_dropzone.dz-clickable .dz-message, .frm_dropzone .frm_upload_icon {
	display: block;
}

.frm_dropzone button {
	display: block;
	text-align: center;
	border: 0;
	width: auto;
	margin: 0 auto;
	padding: 0 10px 5px;
	color: #666;
}

.frm_dropzone .frm_compact_text {
	display: none;
}

.frm_dropzone .frm_small_text {
	font-style: italic;
	font-size: 15px;
	color: #999;
}

.grecaptcha-badge {
	opacity: 0.0 !important;
	pointer-events: none !important;
}

.recaptcha-holder {
	padding: 0 !important;
}

.frm_section_spacing {
	font-family: var(--section-header-font-family);
	color: var(--section-header-color);
	font-weight: var(--section-header-font-weight);
	font-size: var(--section-header-font-size) !important;
	-webkit-font-smoothing: auto;
	padding: var(--input-container-padding);
	padding-block: 0;
	margin: 16px 0 10px;
	letter-spacing: 0.015em;
}

@media (max-width: 767px) {
	.frm_section_spacing {
		padding-inline: 0;
	}
}

div[id^="__lpform"] {
	display: none;
}

.frm_verify {
	display: none !important;
}

.frm_select_field:not(.woocommerce-ordering) select.select-replace {
	opacity: 0;
	margin-right: 0 !important;
/*	height: 54px !important;*/
	pointer-events: none;
	pointer-events: auto;
	opacity: 0;
	border: 0 !important;
	width: 100%;
}

.frm_select_field:not(.woocommerce-ordering) .down-arrow {
	display: none !important;
}

body:not(.fl-builder-edit) .frm_select_holder {
	display: block;
	height: 52px;
}

body:not(.fl-builder-edit) .frm_select_holder .select2 {
	display: none;
}

.styled-dropdown {
	position: absolute;
	left: 0;
	right: 0;
	top: auto;
	bottom: 0;
	height: 58px;
	font-size: 15px;
}

@media (max-width: 767px) {
	.styled-dropdown {
		pointer-events: none;
	}
}

.styled-dropdown div.standin-drop-holder {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	opacity: 1;
	z-index: 100;
	margin: 0;
	border: var(--input-border-width) solid var(--input-border-color);
	background: var(--input-background-color);
	padding: var(--input-padding);
	color: var(--input-color);
	font-weight: var(--input-font-weight);
	height: 100% !important;
	max-height: 58px;
	line-height: var(--input-line-height);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	font-size: var(--input-font-size);
	letter-spacing: 0;
	-webkit-border-radius: var(--input-border-radius);
	border-radius: var(--input-border-radius);
	-webkit-transition: all 100ms linear;
	transition: all 100ms linear;
}

.styled-dropdown div.standin-drop-holder:after {
	position: absolute;
	display: block;
	z-index: 10;
	opacity: 1;
	z-index: 1;
	width: 7px;
	height: 15px;
	margin: -17px 0 0;
	top: 50%;
	right: 16px;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 3.0;
	font-family: var(--font-awesome);
	content: "\f078";
	font-size: 12px;
	font-weight: 900 !important;
	color: var(--input-color);
	transition: var(--input-easing) !important;
}
.styled-dropdown.open div.standin-drop-holder:after {
	color: var(--focus-input-color);
}

.styled-dropdown.open div.standin-drop-holder {
	background: var(--focus-input-background-color) !important;
	border-color: var(--input-border-color) !important;
	color: var(--focus-input-color) !important;
	-webkit-border-radius: var(--input-border-radius) var(--input-border-radius) 0 0;
	-moz-border-radius: var(--input-border-radius) var(--input-border-radius) 0 0;
	border-radius: var(--input-border-radius) var(--input-border-radius) 0 0;
}

.styled-dropdown.single-option {
	pointer-events: none;
}

.styled-dropdown.single-option div.standin-drop-holder:after {
	display: none;
}

.styled-dropdown ul.styled-dropdown-list {
	position: absolute;
	display: block;
	left: 0;
	top: calc(100% - 1px);
	right: 0;
	background: var(--focus-input-background-color);
	color: var(--focus-input-color);
	cursor: pointer;
	line-height: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
	z-index: 200;
	pointer-events: none;
	opacity: 0.0;
	overflow: hidden;
	border: 0;
	-webkit-border-radius: 0 0 var(--input-border-radius) var(--input-border-radius);
	border-radius: 0 0 var(--input-border-radius) var(--input-border-radius);
	-webkit-box-shadow: var(--focus-input-box-shadow) !important;
	box-shadow: var(--focus-input-box-shadow) !important;
	transition: var(--input-easing) !important;
	overflow-y: scroll;
	max-height: 50vh;
	text-align: left !important;
	border: var(--input-border-width) solid var(--input-border-color);
}

@media (max-width: 767px) {
	.styled-dropdown ul.styled-dropdown-list {
		display: none;
	}
}

.styled-dropdown ul.styled-dropdown-list.open {
	opacity: 1.0;
	pointer-events: auto;
}

.styled-dropdown ul.styled-dropdown-list li {
	display: block;
	background: transparent;
	padding: 0;
	margin: 0;
	color: var(--input-color);
	font-weight: var(--input-font-weight);
	padding: var(--input-padding);
	padding-block: 16px 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left !important;
	transition: var(--input-easing) !important;
	border-top: 1px solid #eee;
	font-size: var(--input-font-size) !important;
	font-family: var(--body-font) !important;
	line-height: 1.0 !important;
}

.styled-dropdown ul.styled-dropdown-list li:first-child {
	border-top: 0;
}

.styled-dropdown ul.styled-dropdown-list li:hover {
	color: var(--focus-input-color);
	background: #f3f3f3;
	border-color: #eee;
}

.keep-select .styled-dropdown {
	pointer-events: none !important;
	border-color: var(--input-border-color) !important;
}

.keep-select .styled-dropdown .styled-dropdown-list {
	display: none !important;
}

.keep-select select {
	pointer-events: auto !important;
	opacity: 1;
	border: 0 !important;
}

.frm_form_field .styled-dropdown {
	bottom: auto;
	top: auto;
}

@media (min-width: 768px) {
	.frm_form_field .styled-dropdown {
		left: 8px;
		right: 8px;
	}
}

.frm_forms form .frm_image_options {
	& .frm_opt_container {
		position: relative;
		display: flex;
		flex-flow: row wrap;
		justify-content: stretch;
		align-items: stretch;
		align-content: stretch;
		gap: 14px;
		width: 100% !important;
		margin: 0 !important;

		& .frm_image_option {
			margin: 0 !important;
			width: calc(50% - 7px) !important;
			padding: 10px 12px 12px !important;
			background: #fff;
			border-radius: 12px;
			overflow: clip;
			box-shadow: var(--input-box-shadow) !important;
			transition: var(--input-easing) !important;
			border: var(--input-border-width) solid var(--input-border-color) !important;

			@media (min-width: 768px) and (max-width: 1024px) {
				& {
					width: 100% !important;
				}
			}

			&:hover, &:focus, &:has(input:focus) {
				box-shadow: var(--focus-input-box-shadow) !important;
				border-color: var(--focus-input-border-color) !important;
			}

			&:has(input:checked) {
				background: var(--trinova-blue-1, #fff) !important;
				border-color: var(--trinova-blue-6, #000) !important;
			}

			&:not(:has(.frm_image_option_container > img)) {
				width: 100% !important;

				& .frm_empty_url {
					display: none !important;
				}
			}

			& label {
				display: block;
				height: 100%;

				& input {
					right: auto !important;
					top: 15px !important;
					left: 12px !important;
					-webkit-appearance: none;
					appearance: none;

					&:after {
						position: absolute;
						content: "\f00c";
						display: inline-block;
						font: normal normal normal 14px/1 var(--font-awesome);
						font-size: 11px;
						text-rendering: auto;
						-webkit-font-smoothing: antialiased;
						-moz-osx-font-smoothing: grayscale;
						vertical-align: middle;
						display: inline-flex;
						flex-flow: row nowrap;
						justify-content: center;
						align-items: center;
						align-content: center;
						left: 0;
						top: -2px;
						width: 16px;
						height: 16px;
						border-radius: 3px;
						border: 1px solid var(--trinova-blue-6, #C6C5D3);
						background: transparent;
						color: rgba(255, 255, 255, 0);
						transition: all 600ms var(--ease-out-expo);
						overflow: clip;
						font-weight: 600;
					}

					&:checked:after {
						background: var(--trinova-blue-7, #8BC943);
						border-color: var(--trinova-blue-7, #8BC943);
						color: #fff;
					}
				}

				& .frm_image_option_container {
					position: relative;
					display: flex;
					flex-flow: column-reverse nowrap;
					justify-content: space-between;
					align-items: stretch;
					align-content: stretch;
					border: 0 !important;
					gap: 12px;

					& > img {
						object-fit: cover;
						object-position: center center;
						border-radius: 6px;
						overflow: clip;
						width: 100%;
						height: auto;
						aspect-ratio: 1.6;
						pointer-events: none;
					}

					& .frm_text_label_for_image {
						position: relative;
						display: block;
						text-align: left !important;
						padding: 3px 2px 0 23px !important;
						line-height: 1.15;
					}

				}
			}
		}
	}
}

.frm_forms form .frm_form_field:has(.frm_image_options) .frm_error {
	padding-top: 7px;
}

.with_frm_style .frm_form_fields>fieldset {
	padding-bottom: 0;
}

.with_frm_style .frm_message,
.frm_success_style {
	border: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	color: var(--success-color) !important;
	background: transparent !important;

	&, & p {
		font-weight: 600;
		-webkit-font-smoothing: antialiased;
		font-size: 1.15rem;
	}
}

/* =====================================================================
   Contact form (Phase 4)
   ---------------------------------------------------------------------
   Every rule below is scoped to the Contact form's pinned Field Keys
   (contact_name / contact_email / contact_company / contact_website /
   contact_services / contact_project / contact_deadline / contact_budget
   — see 04-CONTACT-FORM-SPEC.md) or to the submit button's pinned class
   combination (.frm_button_submit.btn.btn-primary.btn-lg, also from that
   spec). NONE of these rules touch bare .frm_forms / form selectors, so
   the existing footer newsletter Formidable form — which uses different
   field keys and a plain `.frm_button_submit` (styled at :818-827) — is
   unaffected (RESEARCH.md Pitfall 2).

   CAVEAT on the submit rule: `btn btn-primary btn-lg` are opt-in classes
   that Ben adds to the CONTACT form's submit button only (FORM-SPEC §
   "Submit button"). They are NOT inherent to Formidable, and nothing
   structurally prevents another form from acquiring them. Do NOT read the
   `frm_submit_button_html` filter in functions.php:620-639 as protection —
   that filter rewrites the footer button's INNER HTML (wraps the label,
   injects the SVG arrow) and leaves the class attribute untouched. The
   isolation here rests solely on those three classes staying exclusive to
   the Contact form. If a future form needs them, scope this rule to the
   Contact form's wrapper ID instead.

   Open Q1 (RESEARCH.md): the exact per-form outer wrapper ID Formidable
   renders (#frm_form_{ID}_container) is confirmed against the rendered
   DOM once Ben builds the form and it's live on the Contact page — that
   check happens in 04-04 QA. Nothing below depends on that wrapper ID;
   every selector here scopes off Field Keys / aria-labelledby / the
   submit button's own pinned classes instead, so these rules are already
   correct the moment the form exists, no ID lookup required.

   Formidable markup verified directly from plugin source (not guessed):
   plugins/formidable/classes/views/frm-fields/front-end/{checkbox,radio}-field.php
   ===================================================================== */

/* =====================================================================
   CASCADE LAYERS — READ BEFORE EDITING ANY CONTACT FIELD RULE
   (04-04 QA rounds 1-4, 2026-07-27)
   ---------------------------------------------------------------------
   THE FIELD RULES BELOW MUST STAY INSIDE `@layer layout`. Moving them out
   silently breaks them, in a way that looks like a specificity problem
   and is not. This cost three rounds of misdiagnosis — read this first.

   `library/css/style.css:7` declares:  @layer base, reset, layout, print;
   and imports `assets/forms.css` into  layer(layout).

   `forms.css:107-149` styles a bare `input[type=text], …, select,
   textarea` selector and marks padding, background-color, color,
   -webkit-text-fill-color, font-size, line-height, border, width,
   max-width and border-radius `!important`.

   Cascade layers REVERSE precedence for `!important`:
     • normal declarations   → UNLAYERED is the STRONGEST tier
     • !important decls      → UNLAYERED is the WEAKEST tier, and among
                               layers the EARLIEST layer wins
   So an unlayered `!important` — at ANY specificity, including an ID or
   an inline <style> injected last — LOSES to forms.css's layered
   `!important`. The observable signature is bizarre and worth recognising:
   a rule's NON-important declarations apply (unlayered normal is
   strongest) while its `!important` ones are ignored. That is this trap,
   not a parser bug and not a stale stylesheet.

   Fix: declare these rules in the SAME layer as forms.css and win on
   specificity within it. This mirrors the existing house workaround at
   `assets/cookie-consent.css:193-198`, which does the same against
   reset.css's layered `[hidden]{display:none !important}`.

   Everything inside the layer block is marked `!important` deliberately:
   layered NORMAL declarations are weaker than unlayered normal ones, so
   relying on a bare declaration inside a layer is the mirror-image trap.

   Rules are also written FLAT (no `&` nesting) and target the inputs by
   their own pinned IDs. `:has()` is retained only for the labels, where
   the target is a sibling of the keyed field and there is no other hook.
   Label/rhythm/error rules stay OUTSIDE the layer — they compete with
   nothing in forms.css, and unlayered normal is the strongest tier.
   ===================================================================== */

@layer base, reset, layout, print; /* mirrors style.css:7 — order must match */

@layer layout {
	/* ---- Underline text inputs: Name / Email / Company Name / Company Website ---- */
	#field_contact_name,
	#field_contact_email,
	#field_contact_company,
	#field_contact_website {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 60px !important;
		padding: 17.5px 0 !important;
		background-color: transparent !important;
		border: 0 !important;
		border-bottom: 1px solid var(--nav-cta-border-color) !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		color: var(--header-dark-color) !important;
		-webkit-text-fill-color: var(--header-dark-color) !important;
		font-size: var(--body-font-size-larger) !important;
		line-height: 1.3 !important;
	}

	/* Placeholder must render at the same size as the text the visitor types — these four
	   fields are placeholder-only (no visible label), so a smaller placeholder reads as a
	   different type scale for the same row. Formidable's own stylesheet sets
	   `.with_frm_style input::placeholder { font-size: var(--field-font-size) }` = 14px
	   against the input's 20px; that rule is unlayered and NORMAL, so this layered
	   !important beats it.
	   `inherit` rather than var(--body-font-size-larger): that token is 1.25em, which would
	   resolve against the input's own 20px and give 25px. Inheriting takes the input's
	   computed 20px, which is the actual requirement. */
	#field_contact_name::placeholder,
	#field_contact_email::placeholder,
	#field_contact_company::placeholder,
	#field_contact_website::placeholder {
		color: var(--Neutral-40) !important;
		-webkit-text-fill-color: var(--Neutral-40) !important;
		font-size: inherit !important;
		line-height: inherit !important;
	}

	/* Hover previews the active treatment — the underline darkens to the same
	   --header-dark-color the field takes on focus. Inside the layer because
	   `border` is one of forms.css's !important-marked properties (see the
	   cascade note at the top of this block); an unlayered hover rule would be
	   the WEAKEST !important tier and never land.
	   No transition declared: these controls already inherit `all 150ms`
	   sitewide, which is the house hover timing (matches .frm_button_submit). */
	#field_contact_name:hover,
	#field_contact_email:hover,
	#field_contact_company:hover,
	#field_contact_website:hover {
		border-bottom-color: var(--header-dark-color) !important;
	}

	#field_contact_name:focus,
	#field_contact_email:focus,
	#field_contact_company:focus,
	#field_contact_website:focus {
		outline: none !important;
		border-bottom-color: var(--header-dark-color) !important;
	}
}

/* Figma 10539:4810 renders the four personal-detail fields as
   PLACEHOLDER-ONLY inputs under one "First, a little about yourself."
   section heading — no per-field visible label. Hide the labels visually
   only; they stay in the DOM (and in the a11y tree) so each input is still
   announced. Placeholder text is supplied by tb_contact_field_placeholders()
   in functions.php, keyed off the pinned Field Keys. */
.frm_form_field:has(#field_contact_name) .frm_primary_label,
.frm_form_field:has(#field_contact_email) .frm_primary_label,
.frm_form_field:has(#field_contact_company) .frm_primary_label,
.frm_form_field:has(#field_contact_website) .frm_primary_label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0 !important;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* "First, a little about yourself." (Figma 10539:4812) is section 1's heading and must
   read identically to the other four section headings — 20px / #0f0f0f / 30px line box.
   It is authored as a Formidable HTML field, so it has no .frm_primary_label for the rule
   below to catch and was inheriting Formidable's description styling instead: measured
   14px / rgb(152,162,179) / 21px on staging (04-04 QA round 6 sweep). Colour and size are
   set on the container and on any wrapper the editor emits, since an HTML field's markup
   depends on what was typed into it. */
#contact-form .frm_html_container,
#contact-form .frm_html_container > *:only-child {
	font-family: var(--body-font);
	font-size: var(--body-font-size-larger);
	line-height: 30px;
	color: var(--header-dark-color);
	margin: 0;
}

/* Section question labels — Figma gives every section heading the same
   20px/#0f0f0f treatment (nodes 10539:4844 / 4836 / 4924 / 4940). Services
   and $50k render their label as a <div>, not a <label>, and were picking up
   Formidable's 15px/#344054 default. */
.frm_form_field:has(#field_contact_services_label) .frm_primary_label,
.frm_form_field:has(.frm_opt_container[aria-labelledby="field_contact_budget_label"]) .frm_primary_label {
	display: block;
	font-size: var(--body-font-size-larger);
	line-height: 30px;
	color: var(--header-dark-color);
	font-weight: normal;
}

/* Figma shows no required asterisks anywhere on this form (every field bar
   Company Website is required, so marking them adds noise). Fields keep
   aria-required, so the requirement is still exposed to assistive tech. */
.frm_form_field:has(#field_contact_name) .frm_required,
.frm_form_field:has(#field_contact_email) .frm_required,
.frm_form_field:has(#field_contact_company) .frm_required,
.frm_form_field:has(#field_contact_website) .frm_required,
.frm_form_field:has(#field_contact_project) .frm_required,
.frm_form_field:has(#field_contact_deadline) .frm_required,
.frm_form_field:has(#field_contact_services_label) .frm_required,
.frm_form_field:has(.frm_opt_container[aria-labelledby="field_contact_budget_label"]) .frm_required {
	display: none !important;
}

/* ---- Services checkboxes (8 options + "Other", SINGLE column) ----
   This block only adds the drawn-checkbox visual (D-05: checkboxes styled
   to match the originally-drawn radio look), scoped to this field only via
   aria-labelledby (never bare .frm_opt_container/.frm_checkbox). It sets no
   column layout of its own and is column-agnostic.
   Ben confirmed 2026-07-27 (04-04 QA round 2) that the design stacks these
   in ONE column — the earlier `frm_two_col` / "Two Columns" instruction in
   BUILD-SPEC §7 was an extraction error and has been struck there. The
   theme's frm_two_col grid at :14-82 stays in place for other forms but is
   deliberately not applied here. */
/* Figma 10539:4842: option rows sit on a 50px pitch — each row is 30px tall
   with a 20px gap. Checkbox is 18x18 at x=0, the text container starts at
   x=28, so the box-to-label gap is 10px. */
.frm_opt_container[aria-labelledby="field_contact_services_label"] {
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
}

.frm_opt_container[aria-labelledby="field_contact_services_label"] .frm_checkbox {
	padding-right: 0;
	width: 100%;
	margin: 0 !important;
	min-height: 30px;
}

.frm_opt_container[aria-labelledby="field_contact_services_label"] .frm_checkbox label {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 30px;
	margin: 0;
	font-size: var(--body-font-size-larger);
	line-height: 30px;
	color: var(--header-dark-color);
	cursor: pointer;
}

/* width/height carry !important because the box measured 18x16 in QA round 3 —
   the height was being overridden while the width held. */
.frm_opt_container[aria-labelledby="field_contact_services_label"] .frm_checkbox input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 18px;
	width: 18px !important;
	height: 18px !important;
	margin: 0;
	border-radius: 4px !important;
	background: color-mix(in srgb, var(--Neutral-40) 20%, transparent);
	border: 1px solid color-mix(in srgb, var(--Neutral-60) 20%, transparent) !important;
}

/* Hover darkens the box border, matching what the text fields do — deliberately NOT the
   purple checked fill, which would read as "already ticked" on a box that isn't.
   `:not(:checked)` rather than source order, so the checked rule below can never be
   clobbered by a hover landing on top of it. The `#contact-form` ID prefix is the same
   isolation the checked rule needs (see its note): Formidable's own checkbox selector
   carries six class-level components and outranks a class-only rule here.
   Hovering the LABEL also fires this — the box is inside the label, so pointer events
   over the text keep the box highlighted, which is the behaviour the 30px row implies. */
#contact-form .frm_opt_container[aria-labelledby="field_contact_services_label"] .frm_checkbox:hover input[type="checkbox"]:not(:checked) {
	border-color: var(--header-dark-color) !important;
}

/* Checked = brand purple with a white tick (04-04 QA round 6, Ben item 9). It was
   var(--header-dark-color) (#0f0f0f), which read as plain black, and the box carried no
   tick glyph at all — a filled square is a weak "checked" signal.
   --Primary-50-Base (#7f4ac1) is chosen over --Primary-90 (#200147, the site's primary
   button fill) deliberately: at 18px, #200147 is visually indistinguishable from the
   #0f0f0f it replaces, so it would not read as "purple" at all. Figma does not show a
   checked state for this control (only the inactive variant was drawn), so the exact
   purple is open — say the word and it is a one-line swap. */
/* The Formidable plugin forces the checked fill itself:
     formidableforms.css
     .frm_forms.with_frm_style .frm_fields_container .frm_checkbox input[type="checkbox"]…
       { background-color: var(--border-color-active) !important }   -> a blue, #4199fd
   Both that rule and this one are UNLAYERED !important, so neither tier trick applies and
   plain specificity decides — and the plugin's selector carries SIX class-level components
   to this one's five, so it won: with only `!important` added, the checked box measured
   rgb(65,153,253). The #contact-form prefix adds an ID, and an ID outranks any number of
   classes, which is what actually settles it. Keep the ID on this rule. */
#contact-form .frm_opt_container[aria-labelledby="field_contact_services_label"] .frm_checkbox input[type="checkbox"]:checked {
	background-color: var(--Primary-50-Base) !important;
	border-color: var(--Primary-50-Base) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
}

.frm_opt_container[aria-labelledby="field_contact_services_label"] .frm_checkbox input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--header-dark-color);
	outline-offset: 2px;
}

/* ---- "Other" free-text reveal ----
   Formidable renders this input inside the Other option's .frm_checkbox and ships it
   with its own stock look — 44px tall, 16px/#555e61 text, white fill, a 1px WHITE
   border on all four sides and a 6px radius. Dropped into a form of 60px transparent
   underline fields it read as a rounded white box, so it gets the same treatment as
   the four text inputs at the top of the form (and the same hover/focus).

   NEVER declare `display` here. Formidable shows/hides this input by toggling the
   `frm_pos_none` class (which carries display:none) — NOT an inline style. Any
   `display: block !important` in this block would pin the field permanently visible
   with the Other box unchecked. Verified live: class is `frm_other_input frm_pos_none`
   when hidden, `frm_other_input` when shown; el.style is empty in both states.

   Targeted by CLASS, not by `#field_contact_services-other_7-otext`. That `_7` is the
   option's index in the field — adding or reordering a service in Formidable renumbers
   it and would silently detach this styling.

   Inside `@layer layout` because this is an input[type=text] and forms.css marks
   padding / background-color / color / font-size / line-height / border / width /
   max-width / border-radius `!important` — see the cascade note at the top of the
   text-input block. */
@layer layout {
	#contact-form .frm_opt_container[aria-labelledby="field_contact_services_label"] .frm_other_input {
		width: 100% !important;
		max-width: 100% !important;
		height: 60px !important;
		margin-top: 12px !important;
		padding: 17.5px 0 !important;
		background-color: transparent !important;
		border: 0 !important;
		border-bottom: 1px solid var(--nav-cta-border-color) !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		color: var(--header-dark-color) !important;
		-webkit-text-fill-color: var(--header-dark-color) !important;
		font-size: var(--body-font-size-larger) !important;
		line-height: 1.3 !important;
	}

	#contact-form .frm_opt_container[aria-labelledby="field_contact_services_label"] .frm_other_input::placeholder {
		color: var(--Neutral-40) !important;
		-webkit-text-fill-color: var(--Neutral-40) !important;
		font-size: inherit !important;
		line-height: inherit !important;
	}

	#contact-form .frm_opt_container[aria-labelledby="field_contact_services_label"] .frm_other_input:hover {
		border-bottom-color: var(--header-dark-color) !important;
	}

	#contact-form .frm_opt_container[aria-labelledby="field_contact_services_label"] .frm_other_input:focus {
		outline: none !important;
		border-bottom-color: var(--header-dark-color) !important;
	}
}

/* ---- "Tell us about your project" textarea ----
   Inside `@layer layout` — see the cascade-layer note above. `textarea` is
   in forms.css's `!important` selector list, so this cannot be unlayered. */
@layer layout {
	#field_contact_project {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 130px !important;
		padding: 20px !important;
		background-color: transparent !important;
		border: 1px solid var(--nav-cta-border-color) !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		color: var(--header-dark-color) !important;
		-webkit-text-fill-color: var(--header-dark-color) !important;
		font-size: var(--body-font-size-larger) !important;
		line-height: 1.5 !important;
		resize: vertical !important;
	}

	/* Same placeholder-size fix as the four text inputs above (see the note at
	   #field_contact_name::placeholder): Formidable's unlayered NORMAL rule
	   `.with_frm_style textarea::placeholder { font-size: var(--field-font-size) }`
	   was rendering "Start typing here..." at 14px/21px against the textarea's own
	   20px/30px. `inherit` (not var(--body-font-size-larger), which is 1.25em and
	   would resolve to 25px against the textarea's 20px) takes the computed 20px. */
	#field_contact_project::placeholder {
		color: var(--Neutral-40) !important;
		-webkit-text-fill-color: var(--Neutral-40) !important;
		font-size: inherit !important;
		line-height: inherit !important;
	}

	/* Hover previews the active treatment (see the note on the text inputs).
	   Full `border-color` here, not just the bottom edge — the textarea is
	   boxed on all four sides where the inputs are underline-only. */
	#field_contact_project:hover {
		border-color: var(--header-dark-color) !important;
	}

	#field_contact_project:focus {
		outline: none !important;
		border-color: var(--header-dark-color) !important;
	}
}

.frm_form_field:has(#field_contact_project) .frm_primary_label {
	font-size: var(--body-font-size-larger);
	color: var(--header-dark-color);
}

/* ---- Deadline dropdown (native <select>, house pattern — the
   .styled-dropdown/select-replace legacy CSS elsewhere in this file is
   inert/unwired per RESEARCH.md and is deliberately not extended). The
   sitewide `select:not(#hr_dropdown)` rule above already appearance:none's
   + arrow-icons every select on the site; this block only adjusts this
   field's row height/underline/icon-zone to match the Figma spec. ---- */
@layer layout {
	#field_contact_deadline {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 60px !important;
		padding: 17.5px 0 !important;
		padding-right: 26px !important;
		background-color: transparent !important;
		border: 0 !important;
		border-bottom: 1px solid var(--nav-cta-border-color) !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		color: var(--header-dark-color) !important;
		-webkit-text-fill-color: var(--header-dark-color) !important;
		font-size: var(--body-font-size-larger) !important;
		line-height: 1.3 !important;
	}

	/* Only the untouched placeholder stays gray; any real choice reads as answered text
	   at the same --header-dark-color as every other field's value.
	   Matched by POSITION (`option:first-child`), not by the placeholder's text — its
	   value is currently the literal string "Deadline in...", so a [value=""] test would
	   miss, and a [value="Deadline in..."] test would silently break the moment that copy
	   is edited in Formidable. first-child survives both a copy change and the value
	   being corrected to empty.
	   Defaulting to dark and carving out the placeholder (rather than the reverse) means a
	   browser without :has() degrades to "always legible" instead of "always gray". :has()
	   is already load-bearing on this form — the label-hiding rules above depend on it. */
	#field_contact_deadline:has(option:first-child:checked) {
		color: var(--Neutral-50) !important;
		-webkit-text-fill-color: var(--Neutral-50) !important;
	}

	/* Hover previews the active treatment (see the note on the text inputs).
	   `cursor: pointer` because a native select is a click-to-open control —
	   the four text inputs correctly keep the I-beam. */
	#field_contact_deadline:hover {
		border-bottom-color: var(--header-dark-color) !important;
		cursor: pointer !important;
	}

	#field_contact_deadline:focus {
		outline: none !important;
		border-bottom-color: var(--header-dark-color) !important;
	}
}

.frm_form_field:has(#field_contact_deadline) .frm_primary_label {
	font-size: var(--body-font-size-larger);
	color: var(--header-dark-color);
}

/* ---- $50k Yes/No "pill pair" (Radio, Align=Inline -> horizontal_radio,
   already themed generically at :749-776 above; this block restyles just
   the contact_budget field's two options into the Figma pill visual). ----
   Selected/active pill state is not shown in Figma (only the "Inactive"
   variant was captured) — SPEC §7 flags this as Claude's discretion;
   inverted to a filled dark pill (matches the submit button treatment). */
.frm_form_field.horizontal_radio .frm_opt_container[aria-labelledby="field_contact_budget_label"] {
	display: flex !important;
	gap: 10px;
	width: 100%;

	& .frm_radio {
		display: block !important;
		flex: 1 0 0;
		padding: 0 !important;
		position: relative;

		/* SQUARE corners. Figma 10539:4948 draws the border with no corner radius at
		   all — same as the textarea and the input underlines on this form. The build
		   had var(--button-border-radius) (999px), i.e. a full lozenge, which is the
		   mismatch Ben flagged in 04-04 QA round 6 (item 10). */
		& label {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 54px;
			margin: 0;
			background: var(--White);
			border: 1px solid var(--Neutral-30);
			border-radius: 0;
			color: var(--header-dark-color);
			font-size: var(--body-font-size-larger);
			cursor: pointer;
			transition: background-color 200ms var(--ease-out-quad), color 200ms var(--ease-out-quad), border-color 200ms var(--ease-out-quad);
		}

		& input[type="radio"] {
			position: absolute;
			opacity: 0;
			pointer-events: none;
		}

		/* Light purple on hover, dark purple when selected (Ben item 10). Figma only
		   captured the inactive variant, so both states are house choices:
		   --Primary-10 (#e8ddf7) is the lightest purple in the scale, and
		   --Primary-90 (#200147) is the site's primary-button fill, so a selected pill
		   matches every other committed control on the site.
		   Hover is suppressed once a pill is selected — otherwise moving the pointer
		   over the active choice would wash it back out to the light tint. */
		&:hover:not(:has(input:checked)) label {
			background: var(--Primary-10);
			border-color: var(--Primary-30);
		}

		& input[type="radio"]:focus-visible + label,
		& label:focus-within {
			outline: 2px solid var(--header-dark-color);
			outline-offset: 2px;
		}

		&:has(input:checked) label {
			background: var(--Primary-90);
			border-color: var(--Primary-90);
			color: var(--White);
		}
	}
}

@media (max-width: 500px) {
	.frm_form_field.horizontal_radio .frm_opt_container[aria-labelledby="field_contact_budget_label"] {
		flex-direction: column;
	}
}

/* ====================================================================
   FORM VERTICAL RHYTHM (04-04 QA round 6, Ben item 13)
   --------------------------------------------------------------------
   Measured off Figma 10539:4809 (the 800x1364 Form frame). The design is
   built on exactly three numbers:

     20px  section heading (30px line box) -> its first control
     20px  control -> control INSIDE a section
     50px  section -> section

   Derivation, section starts at frame y: 0 / 390 / 870 / 1100 / 1260,
   with section heights 340 / 430 / 180 / 110 / 104 — every gap is 50.
   Within section 1: Name y=50, Email y=130, Company Name y=210 (each 60
   tall) — a 20px gap each time.

   The theme default was 8px top + 8px bottom container padding, i.e. 16px
   between rows — 4px short — and the section fields then added margin-top
   on top of that padding, so section gaps ran over as well.

   Approach: zero the theme's container padding for this form only and drive
   everything from margin-top, so each declaration below is literally the
   Figma number. Scope is #contact-form (the BB HTML module wrapping the
   shortcode, confirmed in the live DOM) rather than the Formidable form ID
   or the field-key list — it is stable across a form rebuild and cannot
   reach the footer newsletter.

   KNOWN DESIGN ANOMALY, deliberately not reproduced: in Figma the gap
   between Company Name and Company Website is 10px, not 20px, because those
   two sit inside one grouped "Label" frame (10539:4823) while every other
   pair sits in its own. Every other adjacent control in the file is 20px, so
   this is treated as a grouping artefact and normalised to 20px. Flagged for
   Ben — if Chris wants the tighter pair it is one extra rule.
   ==================================================================== */
#contact-form .frm_form_field {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 20px;
	margin-bottom: 0;
}

/* First row in the form carries no leading gap — the BB row owns that space.
   The parent is .frm_fields_container, NOT .frm_form_fields: Formidable nests them
   .frm_form_fields > fieldset > .frm_fields_container > .frm_form_field, so a
   `.frm_form_fields >` child combinator matches nothing (verified in the live DOM). */
#contact-form .frm_fields_container > .frm_form_field:first-child {
	margin-top: 0;
}

/* Section starts: Services / Project / Deadline / $50k. */
#contact-form .frm_form_field:has(#field_contact_services_label),
#contact-form .frm_form_field:has(#field_contact_project),
#contact-form .frm_form_field:has(#field_contact_deadline),
#contact-form .frm_form_field.horizontal_radio:has(.frm_opt_container[aria-labelledby="field_contact_budget_label"]) {
	margin-top: 50px;
}

/* Section heading -> its own first control. */
#contact-form .frm_form_field:has(#field_contact_services_label) .frm_primary_label,
#contact-form .frm_form_field:has(#field_contact_project) .frm_primary_label,
#contact-form .frm_form_field:has(#field_contact_deadline) .frm_primary_label,
#contact-form .frm_form_field.horizontal_radio:has(.frm_opt_container[aria-labelledby="field_contact_budget_label"]) .frm_primary_label {
	margin-bottom: 0;
	padding-bottom: 20px;
}

#contact-form .frm_submit {
	margin-top: 12px;
}

/* ---- Submit button: "Book my call" full-width pill.
   Scoped to the exact class combo 04-CONTACT-FORM-SPEC.md §7 instructs
   Ben to add to THIS form's Customize HTML submit template — the footer
   newsletter submit never carries .btn.btn-primary.btn-lg, so this cannot
   collide with it regardless of numeric form ID. ---- */
/* The submit BUTTON is width:100%, but `.frm_forms form .frm_submit` at :963
   sets the wrapper to `width: auto`, so 100% resolved against a shrink-wrapped
   parent (measured 131px in QA round 3). Widen the wrapper, scoped by the same
   pinned class combo so the footer newsletter's submit wrapper is untouched. */
.frm_submit:has(.frm_button_submit.btn.btn-primary.btn-lg) {
	width: 100% !important;
	padding: 0 !important;
}

.frm_button_submit.btn.btn-primary.btn-lg {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	max-width: 800px;
	height: 94px !important;
	background: var(--header-dark-color) !important;
	border-color: var(--header-dark-color) !important;
	color: var(--White) !important;
	border-radius: var(--button-border-radius) !important;
	font-size: var(--btn-lg-font-size) !important;
	text-align: center;
}

/* "Book my call" gets the SAME hover as every other button on the site — it is just a
   bigger one (04-04 QA round 6, Ben item 11). The block below used to re-assert the
   resting colours on :hover/:focus/:active, which pinned the button flat and killed the
   interaction entirely.
   Its resting fill is #0f0f0f, which is the theme's `.btn-secondary` treatment
   (theme.css:23629-23641), so the matching states are that token set's: hover ->
   --Primary-90 (#200147), pressed -> --Primary-70 (#3a0f70), label white throughout.
   NOTE: the element carries `btn btn-primary btn-lg` while being styled as a secondary
   button. The class combo is load-bearing — it is the isolation hook that keeps these
   rules off the footer newsletter submit — so it stays; only the states are corrected. */
.frm_button_submit.btn.btn-primary.btn-lg {
	/* House convention: buttons and text links take var(--button-easing) and never a
	   hand-rolled property list, unless Ben specifies a different transition for that
	   control. The token is a full shorthand (all 450ms + transform 200ms), and its
	   `all` picks up whatever the hover actually changes — here background, border and
	   colour — so nothing needs enumerating. Form FIELDS use --input-easing instead. */
	transition: var(--button-easing);
}

.frm_button_submit.btn.btn-primary.btn-lg:hover,
.frm_button_submit.btn.btn-primary.btn-lg:focus-visible {
	background: var(--Primary-90) !important;
	border-color: var(--Primary-90) !important;
	color: var(--White) !important;
}

.frm_button_submit.btn.btn-primary.btn-lg:active {
	background: var(--Primary-70) !important;
	border-color: var(--Primary-70) !important;
	color: var(--White) !important;
}

/* ---- Error states (Contact fields only) ----
   The sitewide `.frm_error`/`.frm_error_style` rules above already cover
   color/type (var(--error-color)); this only tightens the Contact-only
   spacing to sit under the underline-style inputs cleanly. The existing
   `.frm_message`/`.with_frm_style .frm_message` success style (D-09
   inline confirmation) already reads on-brand as-is — verified by read,
   no override needed here. */
.frm_form_field:has(#field_contact_name) .frm_error,
.frm_form_field:has(#field_contact_email) .frm_error,
.frm_form_field:has(#field_contact_company) .frm_error,
.frm_form_field:has(#field_contact_website) .frm_error,
.frm_form_field:has(#field_contact_project) .frm_error,
.frm_form_field:has(#field_contact_deadline) .frm_error {
	margin-top: 8px;
}

@media (max-width: 840px) {
	.frm_button_submit.btn.btn-primary.btn-lg {
		max-width: 100%;
	}
}