.wpcf7 .screen-reader-response {
	position: absolute;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	word-wrap: normal !important;
	word-break: normal !important;
}

.wpcf7 .hidden-fields-container {
	display: none;
}

.wpcf7 form .wpcf7-response-output {
	margin: 2em 0.5em 1em;
	padding: 0.2em 1em;
	border: 2px solid #00a0d2; /* Blue */
}

.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
	display: none;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #46b450; /* Green */
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: #dc3232; /* Red */
}

.wpcf7 form.spam .wpcf7-response-output {
	border-color: #f56e28; /* Orange */
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: #ffb900; /* Yellow */
}

.wpcf7-form-control-wrap {
	position: relative;
}

.wpcf7-not-valid-tip {
	color: #dc3232; /* Red */
	font-size: 1em;
	font-weight: normal;
	display: block;
}

.use-floating-validation-tip .wpcf7-not-valid-tip {
	position: relative;
	top: -2ex;
	left: 1em;
	z-index: 100;
	border: 1px solid #dc3232;
	background: #fff;
	padding: .2em .8em;
	width: 24em;
}

.wpcf7-list-item {
	display: inline-block;
	margin: 0 0 0 1em;
}

.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
	content: " ";
}

.wpcf7-spinner {
	visibility: hidden;
	display: inline-block;
	background-color: #23282d; /* Dark Gray 800 */
	opacity: 0.75;
	width: 24px;
	height: 24px;
	border: none;
	border-radius: 100%;
	padding: 0;
	margin: 0 24px;
	position: relative;
}

form.submitting .wpcf7-spinner {
	visibility: visible;
}

.wpcf7-spinner::before {
	content: '';
	position: absolute;
	background-color: #fbfbfc; /* Light Gray 100 */
	top: 4px;
	left: 4px;
	width: 6px;
	height: 6px;
	border: none;
	border-radius: 100%;
	transform-origin: 8px 8px;
	animation-name: spin;
	animation-duration: 1000ms;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@media (prefers-reduced-motion: reduce) {
	.wpcf7-spinner::before {
		animation-name: blink;
		animation-duration: 2000ms;
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes blink {
	from {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.wpcf7 [inert] {
	opacity: 0.5;
}

.wpcf7 input[type="file"] {
	cursor: pointer;
}

.wpcf7 input[type="file"]:disabled {
	cursor: default;
}

.wpcf7 .wpcf7-submit:disabled {
	cursor: not-allowed;
}

.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
	direction: ltr;
}

.wpcf7-reflection > output {
	display: list-item;
	list-style: none;
}

.wpcf7-reflection > output[hidden] {
	display: none;
}

/* ==========================================================================
   Pre-launch QA fixes (site-qa.md). Site-level overrides on top of Divi.
   ========================================================================== */

/* Below Divi's 980px nav breakpoint the header still laid the "Book an
   appointment" column out beside the logo, so the header row measured 808px at
   a 768px viewport and every page got a horizontal scrollbar. Stack it under
   the logo, the way it already does on phones. */
@media (max-width: 980px) {
	.et_pb_row_0_tb_header {
		flex-wrap: wrap;
	}

	.et_pb_column_1_tb_header {
		width: 100% !important;
		margin: 0 0 12px !important;
		float: none !important;
	}
}

/* On phones the call bar was only 50% wide but tall enough to cover the hero
   copy. Let it use the full width and sit tight against the bottom edge. */
@media (max-width: 767px) {
	.et_pb_row_3_tb_footer,
	body #page-container .et-db #et-boc .et-l .et_pb_row_3_tb_footer.et_pb_row {
		width: 100% !important;
	}

	.et_pb_row_3_tb_footer.et_pb_row {
		padding: 12px 20px !important;
		border-radius: 0 !important;
	}

	/* Its close "X" is offset right:-40px, past the screen edge on phones. */
	.et_pb_row_3_tb_footer .closemodal,
	.et_pb_row_3_tb_footer .closemodalmob {
		right: 0 !important;
	}
}

/* "Give us a call" bar: Divi sets it to 50% wide on desktop, which squeezed
   the "Contact us today" button onto two lines. Widen it, keep the button on
   one line. */
@media (min-width: 981px) {
	.et_pb_row_3_tb_footer,
	body #page-container .et-l .et_pb_row_3_tb_footer.et_pb_row {
		width: min(900px, calc(100vw - 48px)) !important;
		max-width: none !important;
	}
}

body #page-container .et_pb_section .et_pb_button_0_tb_footer {
	white-space: nowrap;
}

/* Keep the header "Book an appointment" button on one line. Divi's 43px side
   padding plus letter-spacing wrapped it onto two lines in the narrow column. */
body #page-container .et_pb_section .et_pb_button_0_tb_header {
	white-space: nowrap;
}

.et_pb_button_0_tb_header_wrapper .et_pb_button_0_tb_header,
.et_pb_button_0_tb_header_wrapper .et_pb_button_0_tb_header:hover {
	padding-left: 24px !important;
	padding-right: 24px !important;
}

/* The one-line button is wider than Divi's fixed 1/4 column, so it poked past
   the viewport and gave every page a horizontal scrollbar. On desktop let the
   button column size to the button and the logo/menu column take the rest. */
@media (min-width: 981px) {
	.et_pb_row_0_tb_header.et_pb_row {
		display: flex;
		align-items: center;
		gap: 24px;
	}

	.et_pb_row_0_tb_header > .et_pb_column_0_tb_header {
		flex: 1 1 auto;
		width: auto !important;
		min-width: 0;
		margin-right: 0 !important;
	}

	.et_pb_row_0_tb_header > .et_pb_column_1_tb_header {
		flex: 0 0 auto;
		width: auto !important;
		margin-right: 0 !important;
	}
}

/* Services dropdown: 11 links in Divi's 240px-wide list wrapped to two or
   three lines each and ran off the bottom of shorter screens. Widen the list
   so each link fits on one line, tighten the spacing, and cap the height
   (scrolling) as a fallback. */
@media (min-width: 981px) {
	.et_pb_menu_0_tb_header .et-menu .sub-menu {
		width: max-content !important;
		max-width: calc(100vw - 48px);
		max-height: calc(100vh - 140px);
		overflow-y: auto;
		padding: 8px 6px !important;
	}

	.et_pb_menu_0_tb_header .et-menu .sub-menu li {
		display: block;
		float: none;
	}

	.et_pb_menu_0_tb_header .et-menu .sub-menu li a {
		white-space: nowrap;
	}

	.et_pb_menu_0_tb_header .et-menu .sub-menu li {
		width: auto;
		padding: 0 !important;
	}

	.et_pb_menu_0_tb_header .et-menu .sub-menu li a {
		width: auto !important;
		padding: 5px 14px !important;
		font-size: 15px;
		line-height: 1.3;
		border-radius: 6px;
	}

	.et_pb_menu_0_tb_header .et-menu .sub-menu li a:hover {
		background: rgba(175, 18, 128, 0.07);
		opacity: 1;
	}
}

/* Mobile header (Divi's hamburger layout, 980px and below). */
@media (max-width: 980px) {
	/* The open menu (with the 11 Services links) ran past the bottom of the
	   screen with no way to reach the rest. Cap it to the viewport and let it
	   scroll on its own, without dragging the page behind it. */
	.et_pb_menu_0_tb_header .et_mobile_menu {
		max-height: calc(100vh - 140px);
		max-height: calc(100dvh - 140px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	/* Logo was squeezed down by the flex row beside the hamburger. */
	.et_pb_menu_0_tb_header .et_pb_menu__logo-wrap {
		flex: 0 0 auto;
		max-width: 75%;
	}

	.et_pb_menu_0_tb_header .et_pb_menu_inner_container > .et_pb_menu__logo-wrap .et_pb_menu__logo img,
	.et_pb_menu_0_tb_header .et_pb_menu__logo img {
		width: 210px !important;
		max-width: 100%;
		height: auto !important;
		max-height: none !important;
	}

	/* "Book an appointment" was oversized for a phone header. */
	body #page-container .et_pb_section .et_pb_button_0_tb_header {
		font-size: 12px;
		letter-spacing: 1px;
	}

	.et_pb_button_0_tb_header_wrapper .et_pb_button_0_tb_header,
	.et_pb_button_0_tb_header_wrapper .et_pb_button_0_tb_header:hover {
		padding: 9px 18px !important;
	}
}

/* "Leave a message" form, shown as a modal over the whole page (header
   included). The fixed footer section that holds it gets the top stacking
   order; .cf-toggle becomes a dimmed full-screen layer (jQuery's slideToggle
   still shows/hides it); the card is centred inside. The markup (copied from
   CF7) carries inline styles on the card and heading, hence the !important. */
.et_pb_section_1_tb_footer {
	z-index: 2147483000 !important;
}

/* The footer's Divi wrapper is position:relative; z-index:1, which caps
   everything inside it below the sticky header. Lift it only while the form
   is open (jQuery sets an inline display:block on .cf-toggle), so the footer
   doesn't cover the sticky header the rest of the time. */
.et-l--footer > .et_builder_inner_content:has(.cf-toggle[style*="display: block"]) {
	z-index: 2147483000;
}

.et_pb_row_2_tb_footer.cf-toggle,
body #page-container .et-l .et_pb_row_2_tb_footer.cf-toggle.et_pb_row {
	position: fixed !important;
	inset: 0;
	width: 100% !important;
	max-width: none !important;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	overflow: hidden;
	/* No dimmed backdrop: let clicks reach the page around the card. */
	pointer-events: none;
}

.cf-toggle .contactform-section .et_pb_code_inner > div {
	pointer-events: auto;
}

.cf-toggle .et_pb_column,
.cf-toggle .et_pb_module,
.cf-toggle .et_pb_code_inner {
	position: static !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.contactform-section .et_pb_code_inner > div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	width: min(440px, calc(100vw - 32px));
	max-height: calc(100% - 32px);
	overflow-y: auto;
	margin: 0 !important;
	padding: 24px 24px 22px !important;
	background: #ffffff !important;
	border-top: 5px solid #af1280;
	border-radius: 16px;
	box-shadow: 0 18px 48px rgba(33, 38, 48, 0.28);
}

.contactform-section h2 {
	margin: 0 40px 6px 0 !important;
	padding: 0;
	font-size: 22px !important;
	font-weight: 700 !important;
	line-height: 1.25;
	color: #212630 !important;
}

.contactform-section .closebtn {
	top: 18px !important;
	right: 18px !important;
	width: 32px;
	height: 32px;
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50% !important;
	background: #f1f2f4 !important;
	color: #212630 !important;
	font-size: 13px !important;
	line-height: 1;
	transition: background-color 0.2s, color 0.2s;
}

.contactform-section .closebtn:hover {
	background: #af1280 !important;
	color: #ffffff !important;
}

.contactform-section .wpcf7-form p {
	margin: 14px 0 0;
	padding: 0;
}

.contactform-section .wpcf7-form br {
	display: none;
}

.contactform-section .wpcf7-form-control-wrap {
	display: block;
	margin-bottom: 10px;
}

.contactform-section .wpcf7-form input[type="text"]:not([name="website"]),
.contactform-section .wpcf7-form input[type="email"],
.contactform-section .wpcf7-form input[type="tel"],
.contactform-section .wpcf7-form textarea {
	width: 100% !important;
	box-sizing: border-box;
	padding: 10px 14px !important;
	border: 1px solid #d6d8dd !important;
	border-radius: 10px !important;
	background: #f8f9fa !important;
	color: #212630 !important;
	font-family: inherit;
	font-size: 15px !important;
	line-height: 1.4;
	transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.contactform-section .wpcf7-form textarea {
	height: 100px;
	min-height: 80px;
	resize: vertical;
}

.contactform-section .wpcf7-form input::placeholder,
.contactform-section .wpcf7-form textarea::placeholder {
	color: #8a8f99;
	opacity: 1;
}

.contactform-section .wpcf7-form input:focus,
.contactform-section .wpcf7-form textarea:focus {
	outline: none;
	border-color: #af1280 !important;
	background: #ffffff !important;
	box-shadow: 0 0 0 3px rgba(175, 18, 128, 0.18);
}

.contactform-section .wpcf7-form .wpcf7-submit {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 14px 20px !important;
	border: 0 !important;
	border-radius: 50px !important;
	background: #af1280 !important;
	color: #ffffff !important;
	font-family: inherit;
	font-size: 15px !important;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.1s;
}

.contactform-section .wpcf7-form .wpcf7-submit:hover {
	background: #8e0e68 !important;
}

.contactform-section .wpcf7-form .wpcf7-submit:active {
	transform: translateY(1px);
}

.contactform-section .wpcf7-form .wpcf7-submit:focus-visible {
	outline: 3px solid rgba(175, 18, 128, 0.35);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.contactform-section .et_pb_code_inner > div {
		padding: 22px 18px 18px !important;
	}
}

/* In-page "Send Us A Message" form (.form-holder, sidebar / contact page).
   The fields had no inner padding or gaps, so text sat on the border and the
   boxes ran together. Same look as the "Leave a message" pop-up. */
.form-holder .wpcf7-form-control-wrap {
	display: block;
	margin-bottom: 14px;
}

.form-holder br {
	display: none;
}

.form-holder input[type="text"]:not([name="website"]),
.form-holder input[type="email"],
.form-holder input[type="tel"],
.form-holder textarea {
	width: 100% !important;
	box-sizing: border-box;
	padding: 12px 16px !important;
	border: 1px solid #d6d8dd !important;
	border-radius: 10px !important;
	background: #f8f9fa !important;
	color: #212630 !important;
	font-family: inherit;
	font-size: 15px !important;
	line-height: 1.4;
	transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.form-holder textarea {
	height: 140px;
	min-height: 100px;
	resize: vertical;
}

.form-holder input::placeholder,
.form-holder textarea::placeholder {
	color: #8a8f99;
	opacity: 1;
}

.form-holder input:focus,
.form-holder textarea:focus {
	outline: none;
	border-color: #af1280 !important;
	background: #ffffff !important;
	box-shadow: 0 0 0 3px rgba(175, 18, 128, 0.18);
}

.form-holder .wpcf7-submit {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 14px 20px !important;
	border: 0 !important;
	border-radius: 50px !important;
	background: #af1280 !important;
	color: #ffffff !important;
	font-family: inherit;
	font-size: 15px !important;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s;
}

.form-holder .wpcf7-submit:hover {
	background: #8e0e68 !important;
}

.form-holder .wpcf7-submit:focus-visible {
	outline: 3px solid rgba(175, 18, 128, 0.35);
	outline-offset: 2px;
}