/* =============================================================
   CONTACT PAGE — 2026 redesign
   Lighthouse Enterprises

   Append to style.css (or new-homepage-styles.css). Uses existing
   theme tokens/utilities (bg-lt-blue, bg-lt-blue2, bg-yellow,
   btn-yellow, btn-navy, color-navy, header-text-bullet).

   Sections:
     1. Discovery-call form  (Gravity Form #6, "Steps" indicator)
     2. Blue bar             (.lhe-bluebar)
     3. Lighthouse Difference(.lhe-diff-row)
     4. Contact FAQ          (.lhe-contact-faq)  [reuses .faq2-* styles]
     5. Reach-out            (.lhe-reachout)
   ============================================================= */


/* =============================================================
   1. DISCOVERY-CALL FORM  —  scoped to #gform_wrapper_6
   The form is a multi-page Gravity Form using the "Steps" progress
   indicator. Everything below is scoped to that form only, so no
   other Gravity Forms on the site are affected.
   ============================================================= */

/* Card shell */
#gform_wrapper_6 {
	background: #FFFFFF;
	border-radius: 22px;
	box-shadow: 0px 24px 60px -18px rgba(44, 88, 241, 0.28);
	padding: 34px 34px 30px;
	max-width: 540px;
	margin-top: 28px;
}

/* --- Steps progress indicator (#gf_page_steps_6 > .gf_step) --- */
#gform_wrapper_6 .gf_page_steps {
	display: flex;
	gap: 0;
	border: none;
	margin: 0 0 28px;
	padding: 0;
}

#gform_wrapper_6 .gf_step {
	flex: 1 1 0;
	display: flex;
	align-items: baseline;
	gap: 5px;
	min-height: 0;
	margin: 0;
	padding: 0 0 10px;
	border-bottom: 3px solid #DCE1E9;
	opacity: 1;
	font-family: 'Lato', sans-serif;
}

#gform_wrapper_6 .gf_step_active {
	border-bottom-color: #FFD03E;
}

/* Flatten GF's default numbered circle into "STEP n:" text */
#gform_wrapper_6 .gf_step_number {
	all: unset;
	font-family: 'Lato', sans-serif;
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #5C666F;
}

#gform_wrapper_6 .gf_step_number::before { content: 'Step '; }
#gform_wrapper_6 .gf_step_number::after  { content: ':'; }

#gform_wrapper_6 .gf_step_label {
	font-family: 'Lato', sans-serif;
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #5C666F;
}

#gform_wrapper_6 .gf_step_active .gf_step_number,
#gform_wrapper_6 .gf_step_active .gf_step_label {
	color: #003A5C;
}

/* --- Section heading inside the form (GF Section field) --- */
#gform_wrapper_6 .gsection {
	border: none;
	margin: 0 0 18px;
	padding: 0;
}

#gform_wrapper_6 .gsection_title {
	font-family: 'Lato', sans-serif;
	font-weight: 800;
	font-size: 28px;
	line-height: 1.25;
	color: #003A5C;
	margin: 0 0 4px;
}

#gform_wrapper_6 .gsection_description,
#gform_wrapper_6 .gform_description,
.partial_entry_warning {
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #5C666F;
}

/* --- Fields --- */
#gform_wrapper_6 .gform_fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 18px;
}

/* Full-width fields (email, phone, company, website, textarea, section) */
#gform_wrapper_6 .gfield {
	grid-column: 1 / -1;
	margin: 0;
}

/* First name + Last name sit side by side (first two text fields) */
#gform_wrapper_6 .gfield--type-text.gfield--width-full:nth-of-type(1),
#gform_wrapper_6 #field_6_1 { grid-column: 1 / 2; }
#gform_wrapper_6 #field_6_2 { grid-column: 2 / 3; }

/* Labels — force visible (fields ship with hidden_label) + uppercase */
#gform_wrapper_6 .gfield_label,
#gform_wrapper_6 .gform-field-label--type-sub  {
	display: block;
	font-family: 'Lato', sans-serif;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #272B2F;
	margin: 0 0 6px;
}

#gform_wrapper_6 .hidden_label .gfield_label,
#gform_wrapper_6 .gfield_label.gform-field-label--type-sub {
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 0 6px !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
}

#gform_wrapper_6 .gfield_required_text,
#gform_wrapper_6 .gfield_required {
	color: #FF7F3F;
	font-weight: 800;
	margin-left: 3px;
}

/* Inputs */
#gform_wrapper_6 input[type="text"],
#gform_wrapper_6 input[type="email"],
#gform_wrapper_6 input[type="tel"],
#gform_wrapper_6 input[type="url"],
#gform_wrapper_6 input[type="number"],
#gform_wrapper_6 select,
#gform_wrapper_6 textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: 'Lato', sans-serif;
	font-size: 15px;
	color: #272B2F;
	background: #F4F6F8;
	border: 1px solid #E3E8EE;
	border-radius: 9px;
	padding: 12px 14px;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

#gform_wrapper_6 select{
	/* Down arrow stored once so it can be reused on :focus below */
	--select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
	-webkit-appearance: none;   /* remove the native dropdown arrow */
	-moz-appearance: none;
	appearance: none;
	padding: 0px;   /* 12px 40px 12px 14px leave room on the right for the arrow */
	background-image: var(--select-arrow);
	background-repeat: no-repeat;
	background-position: right 14px center; /* Positions arrow 14px from the right */
	background-size: 16px; /* Controls the size of the arrow */
	padding-left: 8px;
}

#gform_wrapper_6 select::-ms-expand { display: none; } /* old Edge/IE */

#gform_wrapper_6 textarea { min-height: 120px; resize: vertical; }

#gform_wrapper_6 input:focus,
#gform_wrapper_6 select:focus,
#gform_wrapper_6 textarea:focus {
	outline: none;
	background: #FFFFFF;
	border-color: #61B3E4;
	box-shadow: 0 0 0 3px rgba(97, 179, 228, 0.22);
}
#gform_wrapper_6 select:focus{
	/* Use background-color (not the shorthand) so the arrow image is kept */
	background-color: #F4F6F8;
	background-image: var(--select-arrow);
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
}

/* Labels carry the field name now, so suppress the duplicate placeholder */
#gform_wrapper_6 input::placeholder,
#gform_wrapper_6 textarea::placeholder { color: transparent; }

/* Validation / error states */
#gform_wrapper_6 .gfield_error input,
#gform_wrapper_6 .gfield_error textarea,
#gform_wrapper_6 .gfield_error select {
	border-color: #E24C4C !important;
	background: #FFFFFF !important;
}

#gform_wrapper_6 .gfield_validation_message,
#gform_wrapper_6 .validation_message {
	font-family: 'Inter', sans-serif;
	font-size: 12.25px;
	line-height: 17.5px;
	font-weight: 400;
	color: #D4183D;
	background: none;
	border: none;
	padding: 4px 0 0;
	margin: 0;
}

#gform_wrapper_6 .gform_validation_errors {
	border-radius: 10px;
	box-shadow: none;
	border: 1px solid #F3C6C6;
	background: #FDECEC;
}

/* --- Buttons --- */
#gform_wrapper_6 .gform_page_footer {
	margin-top: 6px;
	border: none;
	display: flex;
	gap: 12px;
	align-items: center;
}

#gform_wrapper_6 .gform_next_button,
#gform_wrapper_6 .gform_button,
#gform_wrapper_6 input[type="submit"],
#gform_wrapper_6 .gform_previous_button,
#gform_wrapper_6 input[type="previous"] {
	background: #FFD03E !important;
	color: #003A5C !important;
	font-family: 'Lato', sans-serif !important;
	font-weight: 800 !important;
	font-size: 20px !important;
	letter-spacing: 5%;
	line-height: 100%;
	border: none !important;
	border-radius: 100px !important;
	padding: 8px 12px !important;
	cursor: pointer;
	transition: background 0.3s ease;
	width: 440px !important;
	margin-top: 20px;
}

#gform_wrapper_6 .gform_next_button:hover,
#gform_wrapper_6 .gform_button:hover,
#gform_wrapper_6 input[type="submit"]:hover,
#gform_wrapper_6 .gform_previous_button:hover,
#gform_wrapper_6 input[type="previous"]:hover
{
	background: #61B3E4 !important;
}
/*
#gform_wrapper_6 .gform_previous_button {
	background: transparent !important;
	color: #003A5C !important;
	font-family: 'Lato', sans-serif !important;
	font-weight: 800 !important;
	font-size: 16px !important;
	border: 2px solid #DCE1E9 !important;
	border-radius: 100px !important;
	padding: 12px 26px !important;
	cursor: pointer;
	width: auto !important;
	transition: border-color 0.3s ease, color 0.3s ease;
}

#gform_wrapper_6 .gform_previous_button:hover {
	border-color: #61B3E4 !important;
	color: #61B3E4 !important;
}
*/
/* "Prefer to Talk? Call Us..." link (GF HTML field at the bottom) */
#gform_wrapper_6 .gfield--type-html {
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	color: #5C666F;
	margin-top: 4px;
}

#gform_wrapper_6 .gfield--type-html a {
	color: #003A5C;
	font-weight: 800;
	text-decoration: none;
}

#gform_wrapper_6 .gfield--type-html a:hover { color: #61B3E4; }

#gform_wrapper_6 .gform_required_legend {display: none;}

@media (max-width: 600px) {
	#gform_wrapper_6 { padding: 24px 20px; }
	#gform_wrapper_6 .gform_fields { grid-template-columns: 1fr; }
	#gform_wrapper_6 #field_6_1,
	#gform_wrapper_6 #field_6_2 { grid-column: 1 / -1; }
}

#field_6_19 label,
#field_6_22 label {
	/*visibility: hidden;*/
}

.gform-theme--framework input[type=checkbox]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *))::before {
	color: #61B3E4;
}
/* =============================================================
   2. BLUE BAR
   ============================================================= */

.lhe-bluebar-row .vc_column-inner { padding-top: 22px !important; padding-bottom: 22px !important; }

.lhe-bluebar-row .wpb_raw_code.wpb_content_element.wpb_raw_html{
	margin-bottom: 0px;
}

.lhe-bluebar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 21%;
	max-width: var(--pagemax, 1321px);
	margin: 0 auto;
}

.lhe-bluebar-item {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: 'Lato', sans-serif;
	font-weight: 800;
	font-size: 17px;
	line-height: 1.25;
	color: #003A5C;
	text-align: center;
}

.lhe-check {
	flex: 0 0 auto;
	position: relative;
	width: 24px;
	height: 24px;
}

.lhe-check::before {
	content: '';
	position: absolute;
	left: 7px;
	top: 1px;
	width: 8px;
	height: 15px;
	border-right: 4px solid #FFD03E;
	border-bottom: 4px solid #FFD03E;
	transform: rotate(45deg);
}

@media (max-width: 767px) {
	.lhe-bluebar {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding-left: 8px;
	}
}


/* =============================================================
   3. THE LIGHTHOUSE DIFFERENCE
   ============================================================= */

.lhe-diff-row .vc_column-inner { padding-top: 70px !important; padding-bottom: 70px !important; }

.lhe-diff-image img {
	border-radius: 22px;
	box-shadow: 0px 18px 40px -12px rgba(44, 88, 241, 0.22);
	display: block;
}

.lhe-diff-list {
	list-style: disc;
	padding-left: 22px;
	margin: 20px 0 28px;
}

.lhe-diff-list li {
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #272B2F;
	/*margin-bottom: 12px;*/
}

.lhe-diff-list li:last-child { margin-bottom: 0; }

.lhe-diff-list strong,
.lhe-diff-list b {
	color: #272B2F;
	font-weight: 800;
}

@media (max-width: 991px) {
	.lhe-diff-image { margin-bottom: 34px; }
	.lhe-diff-image img { max-width: 480px; margin: 0 auto; }
}


/* =============================================================
   4. CONTACT-PAGE FAQ  (reuses .faq2-* accordion styles)
   ============================================================= */

.lhe-contact-faq .vc_column-inner { padding-top: 70px !important; padding-bottom: 76px !important; }

.lhe-contact-faq h2.vc_custom_heading {
	margin: 0px auto;
    margin-bottom: 40px !important;
    max-width: 920px;
}

/* Center + constrain the no-sidebar accordion */
.lhe-contact-faq .faq2-module.faq2-no-sidebar {
	max-width: 900px;
}

.lhe-contact-faq .faqs-viewall {
	text-align: left;
	margin-top: 34px;
}

.lhe-contact-faq .faqs-viewall p { margin: 0; }


/* =============================================================
   5. REACH-OUT  (gold band)
   ============================================================= */

.lhe-reachout .vc_column-inner { }

/* Ensure text/headings read navy on the gold background */
.lhe-reachout,
.lhe-reachout h1,
.lhe-reachout h2,
.lhe-reachout h3,
.lhe-reachout h4,
.lhe-reachout p,
.lhe-reachout span {
	color: #003A5C;
}

.lhe-reachout .contact-tel a,
.lhe-reachout a[href^="tel"],
.lhe-reachout a[href^="tel"] span {
	color: #003A5C !important;
}

.lhe-reachout .header-text-bullet {
	color: #003A5C !important;
}

.lhe-reachout-cta { display: flex; align-items: flex-end; }
.lhe-reachout-cta p { margin: 0; }

@media (max-width: 991px) {
	.lhe-reachout-cta { margin-top: 24px; }
}

.custom-next-text{
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	color: #272B2F;
	letter-spacing: 0;
	margin-top: 15px;
}
.custom-next-text a{
	color: #003A5C;
}

.gform-theme--framework .gf_step_completed .gf_step_number::after{
    background-color: transparent;
    border: none;
	color: transparent;
}
.full-width-map-row .vc_row.vc_inner {
    max-width: none !important;
}