/* ---------- Home page counters bubble ----------
 * White rounded card that straddles the seam between the purple hero
 * (section_1) and the white about-section (section_3). The bubble is
 * the first row inside section_3, pulled up with a negative margin so
 * roughly half of its height is in the hero, half below.
 *
 * Why display:flow-root on section_3: without it, the bubble's
 * negative margin-top collapses with section_3's own margin-top (per
 * CSS margin-collapse rules between a block parent and its first
 * in-flow child) and propagates up the tree, where it disappears
 * silently — visually leaving the bubble flush at the seam regardless
 * of how negative the margin is. flow-root makes section_3 a BFC so
 * the margin no longer collapses, and overflow stays visible so the
 * bubble can paint above section_3's top edge into the hero. */
body #page-container .et_pb_section_3 {
	display: flow-root !important;
	overflow: visible !important;
}

body #page-container .et_pb_section_3 .sa-counters-row,
.sa-counters-row {
	position: relative !important;
	z-index: 50 !important;
	background: #ffffff !important;
	border-radius: 36px !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14) !important;
	width: calc(100% - 60px) !important;
	max-width: 1100px !important;
	margin: -48px auto 40px !important;
	padding: 18px 40px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
}

.sa-counters {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 24px !important;
	text-align: center !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	align-items: center !important;
}

.sa-counter {
	padding: 8px 6px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.sa-counter-number {
	font-family: 'Quicksand', Helvetica, Arial, sans-serif !important;
	font-size: 64px !important;
	font-weight: 700 !important;
	color: #6f2878 !important;
	line-height: 1 !important;
	margin-bottom: 10px !important;
}

.sa-counter-label {
	font-family: 'Quicksand', Helvetica, Arial, sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #555 !important;
	text-transform: uppercase !important;
	letter-spacing: 1.5px !important;
	line-height: 1.3 !important;
}

@media (max-width: 980px) {
	body #page-container .et_pb_section_3 .sa-counters-row,
	.sa-counters-row {
		margin-top: -28px !important;
		padding: 14px 18px !important;
		border-radius: 24px !important;
		width: calc(100% - 30px) !important;
	}
	.sa-counters {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}
	.sa-counter-number { font-size: 48px !important; }
}

/* Drop section_2's empty gap so section_3 sits flush under the hero. */
.et_pb_section.et_pb_section_2 {
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	height: 0 !important;
	display: block !important;
}

.et_pb_section.et_pb_section_3 {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Hide any slider arrows that remain INSIDE the slider container.
   Divi's runtime slider JS injects its own copies; we use the ones our
   JS moves out to the parent section so they appear at the section's
   edges instead of cramped near the slide content. */
.et_pb_slider .et-pb-arrow-prev,
.et_pb_slider .et-pb-arrow-next {
	display: none !important;
}

/* Slider side arrows — plain white chevrons at the section's left/right
   edges, matching the home page's fullwidth slider style. JS moves these
   anchors out of the slider and into the parent .et_pb_section so they
   sit at the section edges regardless of slider width. */
.et_pb_section > .et-pb-slider-arrows .et-pb-arrow-prev,
.et_pb_section > .et-pb-slider-arrows .et-pb-arrow-next,
.et_pb_section .et-pb-arrow-prev,
.et_pb_section .et-pb-arrow-next {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 100 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	width: auto !important;
	height: auto !important;
	font-size: 0 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	opacity: 0.9 !important;
	padding: 16px !important;
	margin-top: 0 !important;
	transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.et_pb_section .et-pb-arrow-prev { left: 24px !important; }
.et_pb_section .et-pb-arrow-next { right: 24px !important; }

.et_pb_section .et-pb-arrow-prev:hover,
.et_pb_section .et-pb-arrow-next:hover {
	opacity: 1 !important;
	transform: translateY(-50%) scale(1.15) !important;
}

.et_pb_section .et-pb-arrow-prev:before,
.et_pb_section .et-pb-arrow-next:before {
	font-family: Arial, "Helvetica Neue", sans-serif !important;
	font-size: 64px !important;
	line-height: 1 !important;
	font-weight: 300 !important;
	color: #ffffff !important;
	display: inline-block !important;
	position: static !important;
	margin: 0 !important;
	padding: 0 !important;
	opacity: 1 !important;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
}

.et_pb_section .et-pb-arrow-prev:before { content: "\2039" !important; }
.et_pb_section .et-pb-arrow-next:before { content: "\203A" !important; }

/* On non-fullwidth sliders the arrows used to inherit dark text (Divi's
   rule for et_pb_bg_layout_light) — keep them white at the section level
   so they're visible against the section background. */
.et_pb_section .et-pb-arrow-prev,
.et_pb_section .et-pb-arrow-next { color: #ffffff !important; }

/* Controllers (dots) — make them visible, clickable, and on-brand */
.et_pb_slider .et-pb-controllers {
	position: absolute;
	bottom: 14px;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 100;
}

.et_pb_slider .et-pb-controllers a {
	display: inline-block;
	width: 11px;
	height: 11px;
	margin: 0 5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	font-size: 0;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
	cursor: pointer;
	vertical-align: middle;
}

.et_pb_slider .et-pb-controllers a:hover { background: rgba(255, 255, 255, 0.8); }

.et_pb_slider .et-pb-controllers a.et-pb-active-control {
	background: #8bbc3a;
	transform: scale(1.2);
}

/* Smooth slide transitions */
.et_pb_slider .et_pb_slide {
	transition: opacity 0.4s ease;
}

@media (hover: hover) {
	body a.et_pb_button[href*="ndis-provider-"],
	body #page-container .et_pb_section a.et_pb_button[href*="ndis-provider-"] {
		transition: transform 0.25s ease-out, box-shadow 0.25s ease-out !important;
		will-change: transform;
	}
	body a.et_pb_button[href*="ndis-provider-"]:hover,
	body #page-container .et_pb_section a.et_pb_button[href*="ndis-provider-"]:hover {
		transform: translateY(-4px) scale(1.02) !important;
		box-shadow: 0 8px 20px rgba(111, 40, 120, 0.18) !important;
	}
}

/* Headings demoted by the SEO cascade fix (orphan H4/H5/H6 promoted to
   close gaps left by Divi's H2-then-H4 default). Override the Divi
   per-text-module heading rules so the visual size matches the original
   tag. Color/text-align inherit from context so per-section colors stay. */
.seo-was-h4 {
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.4em !important;
}

.seo-was-h5 {
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.4em !important;
}

.seo-was-h6 {
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.4em !important;
}

/* Hide Divi's own validation message — forms.js does its own validation
   and any "Please fill in the following fields" panel left over from Divi's
   JS would just duplicate the inline error we already show. */
.et-pb-contact-message,
.et_pb_contact_form_static .et-pb-contact-message,
.et_pb_contact_form_container .et-pb-contact-message {
	display: none !important;
}

/* Divi contact form: lock dark purple bg + white text in every state.
   Selector covers both et_pb_contact_form and the renamed et_pb_contact_form_static. */
.et_pb_contact_form .input,
.et_pb_contact_form_static .input,
.et_pb_contact_form input[type="text"],
.et_pb_contact_form_static input[type="text"],
.et_pb_contact_form input[type="email"],
.et_pb_contact_form_static input[type="email"],
.et_pb_contact_form input[type="tel"],
.et_pb_contact_form_static input[type="tel"],
.et_pb_contact_form textarea,
.et_pb_contact_form_static textarea {
	background-color: #6f2878 !important;
	color: #ffffff !important;
}

.et_pb_contact_form .input::placeholder,
.et_pb_contact_form_static .input::placeholder,
.et_pb_contact_form textarea::placeholder,
.et_pb_contact_form_static textarea::placeholder {
	color: rgba(255, 255, 255, 0.7) !important;
}

/* Suppress browser autofill yellow/lavender highlight on saved values */
.et_pb_contact_form .input:-webkit-autofill,
.et_pb_contact_form_static .input:-webkit-autofill,
.et_pb_contact_form .input:-webkit-autofill:hover,
.et_pb_contact_form_static .input:-webkit-autofill:hover,
.et_pb_contact_form .input:-webkit-autofill:focus,
.et_pb_contact_form_static .input:-webkit-autofill:focus,
.et_pb_contact_form input:-webkit-autofill,
.et_pb_contact_form_static input:-webkit-autofill,
.et_pb_contact_form textarea:-webkit-autofill,
.et_pb_contact_form_static textarea:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #6f2878 inset !important;
	-webkit-text-fill-color: #ffffff !important;
	caret-color: #ffffff !important;
	transition: background-color 9999s ease-in-out 0s !important;
}

/* Custom checkbox / radio indicators: Divi renders a small <i> after the
   label as the visible square/circle. Give it a purple outline so it's
   visible on the white form card, with a brand-green fill when checked. */
.et_pb_contact_form input[type="checkbox"] + label i,
.et_pb_contact_form_static input[type="checkbox"] + label i,
.et_pb_contact_form input[type="radio"] + label i,
.et_pb_contact_form_static input[type="radio"] + label i {
	background-color: #ffffff !important;
	border: 2px solid #6f2878 !important;
}

.et_pb_contact_form input[type="checkbox"]:checked + label i,
.et_pb_contact_form_static input[type="checkbox"]:checked + label i,
.et_pb_contact_form input[type="radio"]:checked + label i,
.et_pb_contact_form_static input[type="radio"]:checked + label i {
	background-color: #8bbc3a !important;
	border-color: #8bbc3a !important;
}

.et_pb_contact_form input[type="checkbox"]:checked + label i:before,
.et_pb_contact_form_static input[type="checkbox"]:checked + label i:before,
.et_pb_contact_form input[type="radio"]:checked + label i:before,
.et_pb_contact_form_static input[type="radio"]:checked + label i:before {
	color: #ffffff !important;
	background-color: transparent !important;
}

/* Career form (Contact Form 7) — same dark purple + white text treatment */
.wpcf7-form-static input[type="text"],
.wpcf7-form-static input[type="email"],
.wpcf7-form-static input[type="tel"],
.wpcf7-form-static input[type="file"],
.wpcf7-form-static textarea,
.wpcf7-form-static select {
	background-color: #6f2878 !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

.wpcf7-form-static input::placeholder,
.wpcf7-form-static textarea::placeholder {
	color: rgba(255, 255, 255, 0.7) !important;
}

.wpcf7-form-static input:-webkit-autofill,
.wpcf7-form-static textarea:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #6f2878 inset !important;
	-webkit-text-fill-color: #ffffff !important;
	caret-color: #ffffff !important;
	transition: background-color 9999s ease-in-out 0s !important;
}

.wpcf7-form-static label {
	color: #ffffff !important;
}