.text-white > .contactForm .contactFormHead .contactFormSmall,
.text-white > .contactForm .contactFormHead h2,
.text-white > .contactForm .contactFormHead p { color:var(--light-font-color); }

.text-body-alt > .contactForm .contactFormHead .contactFormSmall,
.text-body-alt > .contactForm .contactFormHead h2,
.text-body-alt > .contactForm .contactFormHead p { color:var(--light-font-color2); }

.text-primary > .contactForm .contactFormHead .contactFormSmall,
.text-primary > .contactForm .contactFormHead h2,
.text-primary > .contactForm .contactFormHead p { color:var(--main-clr); }

.text-secondary > .contactForm .contactFormHead .contactFormSmall,
.text-secondary > .contactForm .contactFormHead h2,
.text-secondary > .contactForm .contactFormHead p { color:var(--head-font-color); }

.contactFormHead{max-width:700px;margin-bottom:50px;}
.contactFormSmall{display:block;color:var(--black-clr);opacity:.4;font-size:18px;font-weight:600;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:15px;}
.contactFormHead h2{color:var(--head-font-color);font-weight:400;font-size:var(--fs-30);}
.contactFormHead h2 b, .contactFormHead h2 strong { font-weight:600; }
.contactFormHead h2:not(:last-child){padding-bottom:15px;}
.contactFormHead p{color:var(--body-font-color);opacity:.75;font-size:16px;}
.contactFormHead p:last-child{padding-bottom:0;}

/* Once contact-form-block.js sees this form's confirmation load, it adds "is-confirmed" here -
   the head (title/content) is only meant to be seen before the visitor has submitted. */
.contactForm.is-confirmed .contactFormHead{display:none;}

/* Utility for a DIFFERENT block on the same page: add "showAfterContactFormConfirmation" via
   that block's own Advanced > Additional CSS Class(es) field to keep it hidden until this
   form's confirmation has loaded (contact-form-block.js adds "contact-form-confirmed" to body). */
.showAfterContactFormConfirmation{display:none;}
body.contact-form-confirmed .showAfterContactFormConfirmation{display:block;}

/* Gravity Forms override - retheme the plugin's own Orbital styling to match this block's
   pill inputs / cta button, same approach as cta-form-block.css. */
.contactFormGravity .gform_wrapper{margin:0;}
.contactFormGravity .gform_fields{display:flex !important;flex-wrap:wrap;align-items:flex-start;gap:20px;list-style:none;margin:0;padding:0;}
.contactFormGravity .gfield{width:100%;margin:0 !important;border:none;padding:0;}
.contactFormGravity .gfield--width-half{width:calc(50% - 10px);}
.contactFormGravity .gfield_label,
.contactFormGravity .gform_fields legend{display:none !important;}

.contactFormGravity input[type="text"],
.contactFormGravity input[type="email"],
.contactFormGravity input[type="tel"],
.contactFormGravity input[type="number"],
.contactFormGravity select,
.contactFormGravity textarea{
	box-sizing:border-box !important;
	width:100% !important;
	height:auto !important;
	min-height:54px !important;
	line-height:1.4 !important;
	background:var(--light-bg) !important;
	border:none !important;
	border-radius:0px !important;
	padding:16px 18px !important;
	font-size:var(--fs-16) !important;
	/* text-transform:uppercase; */
	letter-spacing:0.05em;
	border:1px solid rgba(28,43,56,0.15) !important;
	color:var(--head-font-color) !important;
}
.contactFormGravity textarea{min-height:140px !important;}

.contactFormGravity select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%231c2b38' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 18px center !important;}

/* Name field's First/Last split - lay the two spans out side by side like the phone/email pair. */
.contactFormGravity .ginput_complex.gform-grid-row{display:flex;} /* gap:20px; */
.contactFormGravity .ginput_complex .gform-grid-col{flex:1;}

/* Section fields - numbered circle to the left, title + description stacked to its right. The
   number comes purely from CSS (counter-increment per .gsection encountered), no PHP/JS needed. */
.contactFormGravity .gform_fields{counter-reset:contactFormSection;}
.contactFormGravity .gform_wrapper form .gform_body .gform_fields .gsection{
	counter-increment:contactFormSection;
	display:grid;
	grid-template-columns:auto 1fr;
	column-gap:20px;
	align-items:start;
	border:none;
	padding:0;
	margin:0;
	border:0;
}
.contactFormGravity .gsection::before{
	content:counter(contactFormSection);
	grid-column:1;
	grid-row:1 / span 2;
	min-width:50px;
	min-height:50px;
	border-radius:50%;
	/* background:var(--light-bg); */
	background-color: rgba(136, 136, 136, 0.1);
	color:var(--head-font-color);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:var(--fs-18);
	font-weight:400;
}
.contactFormGravity .gsection_title{grid-column:2;grid-row:1;font-size:var(--fs-20);font-weight:700;color:var(--head-font-color);margin:auto 0 0 0;padding:0;}
.contactFormGravity .gsection_description{grid-column:2;grid-row:2;color:var(--body-font-color);opacity:.75;font-size:var(--fs-14);margin-top:5px;}

/* Checkboxes - bordered boxes in a grid instead of Gravity Forms' default stacked list. */
.contactFormGravity .gfield_checkbox{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;list-style:none;margin:0;padding:0;}
.contactFormGravity .gform_wrapper form .gform_body .gform_fields .gchoice{display: flex; margin:0;position:relative;}
.contactFormGravity .gfield-choice-input{position:absolute !important;top:0 !important;left:0 !important;width:1px !important;height:1px !important;opacity:0 !important;}
.contactFormGravity .gchoice label{
	width: 100%;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	min-height:100px;
	padding:15px 20px;
	border:1px solid rgba(28,43,56,0.15);
	border-radius:0px;
	cursor:pointer;
	font-size:var(--fs-18);
	color:var(--head-font-color);
	transition:0.2s;
	margin: 0rem;
}
/* .contactFormGravity .gfield-choice-input:checked + label{border-color:var(--head-font-color) !important;background:var(--head-font-color) !important;color:var(--light-font-color) !important;} */
.contactFormGravity .gfield-choice-input:checked + label{border-color:var(--head-font-color);}
.contactFormGravity .gfield-choice-input:focus-visible + label{outline:2px solid var(--head-font-color);outline-offset:2px;}

.contactFormGravity .gform-footer,
.contactFormGravity .gform_footer,
.contactFormGravity .gform_page_footer{margin:10px 0 0;padding:0;}

.contactFormGravity .gform_button,
.contactFormGravity input[type="submit"]{
	display:inline-flex;align-items:center;gap:10px;
	background:var(--main-clr) !important;
	color:var(--light-font-color) !important;
	border:none !important;
	border-radius:100px !important;
	padding:16px 32px !important;
	font-size:var(--fs-16) !important;
	font-weight:500 !important;
	cursor:pointer;transition:0.3s;
}
.contactFormGravity .gform_button:hover,
.contactFormGravity input[type="submit"]:hover{background:var(--tertiary-color) !important;}

.contactFormGravity .validation_error,
.contactFormGravity .gfield_description.validation_message{color:var(--tertiary-color);}

/* Confirmation message - checkmark circle above the h2 that Gravity Forms renders from the
   form's own Confirmation setting. */
.contactFormGravity .gform_confirmation_wrapper{text-align:center;padding:20px 0;}
.contactFormGravity .gform_confirmation_message::before{
	content:"\f00c";
	font-family:"Font Awesome 6 Free";
	font-weight:900;
	font-size:var(--fs-30);
	display:flex;
	align-items:center;
	justify-content:center;
	width:50px;
	height:50px;
	margin:0 auto 24px;
	border-radius:50%;
	background-color: rgba(136, 136, 136, 0.1);
	color:var(--head-font-color);
}
.contactFormGravity .gform_confirmation_message h2{font-size:var(--fs-28);font-weight:700;color:var(--head-font-color);margin:0 0 20px; padding: 0px;}
.contactFormGravity .gform_confirmation_message p{color:var(--body-font-color);opacity:.85;}

@media(max-width:991.98px){
	.contactFormGravity .gfield_checkbox{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:767.98px){
	.contactForm br{display:none;}
	.contactFormGravity .gfield--width-half{width:100% !important;}
	.contactFormGravity .ginput_complex.gform-grid-row{flex-direction:column;gap:20px;}
}

@media(max-width:567.98px){
	.contactFormGravity .gfield_checkbox{grid-template-columns:1fr;}
}

@media(min-width:568px){ 
	.contactFormGravity .gsection::before { min-width: 60px; min-height: 60px; font-size:var(--fs-36); } .contactFormHead h2{font-size:var(--fs-36);} 
	.contactFormGravity .gform_confirmation_message::before { min-width: 60px; min-height: 60px; font-size:var(--fs-36); }
}
@media(min-width:992px){ 
	.contactFormGravity .gsection::before { min-width: 72px; min-height: 72px; font-size:var(--fs-42); } .contactFormHead h2{font-size:var(--fs-42);} 
	.contactFormGravity .gchoice label { min-height: 80px; font-size:var(--fs-18); }
	.contactFormGravity .gform_confirmation_message::before { min-width: 72px; min-height: 72px; font-size:var(--fs-42); }
}
@media(min-width:1200px){ 
	.contactFormGravity .gsection::before { min-width: 84px; min-height: 84px; } 
	.contactFormGravity .gchoice label { min-height: 90px; }
	.contactFormGravity .gform_confirmation_message::before { min-width: 84px; min-height: 84px; }
}
@media(min-width:1600px){ 
	.contactFormGravity .gsection::before { min-width: 96px; min-height: 96px; font-size:var(--fs-48); } .contactFormHead h2{font-size:var(--fs-48);} 
	.contactFormGravity .gchoice label { min-height: 100px; }
	.contactFormGravity .gform_confirmation_message::before { min-width: 96px; min-height: 96px; font-size:var(--fs-48); }
}