/* ============================================================
   G4U Security — child theme custom CSS
   Phase work lives here (do not edit the parent Divi theme).
   ============================================================ */

/* --- Phase 1: hide Divi mobile-menu "Select Page" placeholder --- */
.select_page {
	display: none !important;
}

/* --- Phase 3: subtle contrast scrim behind hero slider headline ---
 * Keeps the background photo visible (max ~55% tint on the left where the
 * text sits, fading to near-transparent on the right) so the headline stays
 * legible without blacking out the image. Applies at all breakpoints.
 */
.g4u-hero .et_pb_slide:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		90deg,
		rgba( 0, 0, 0, 0.55 ) 0%,
		rgba( 0, 0, 0, 0.30 ) 45%,
		rgba( 0, 0, 0, 0.10 ) 100%
	);
	z-index: 1;
	pointer-events: none;
}
.g4u-hero .et_pb_slide .et_pb_container,
.g4u-hero .et_pb_slide_description {
	position: relative;
	z-index: 2;
}

/* On small screens, text usually centers over the image — use an even tint there */
@media ( max-width: 980px ) {
	.g4u-hero .et_pb_slide:after {
		background: rgba( 0, 0, 0, 0.45 );
	}
}

/* --- Phase 5: consistent Contact Form 7 styling (applies to all 5 forms) --- */
.wpcf7-form { position: relative; z-index: 1; }
.wpcf7-form label {
	display: block;
	font-weight: 600;
	margin: 0 0 14px;
	color: #333;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	box-sizing: border-box;
	margin-top: 6px;
	padding: 12px 14px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 15px;
	line-height: 1.4;
	background: #fff;
	color: #222;
}
.wpcf7-form textarea { min-height: 120px; resize: vertical; }
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: #ff6600;
	box-shadow: 0 0 0 3px rgba( 255, 102, 0, 0.15 );
}
/* checkboxes / radios */
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item,
.wpcf7-form .wpcf7-radio .wpcf7-list-item {
	display: inline-block;
	margin: 0 16px 8px 0;
	font-weight: 400;
}
.wpcf7-form .cf7-group-label { margin-top: 10px; }
/* submit button = site primary button */
.wpcf7-form input[type="submit"],
.wpcf7-form .wpcf7-submit {
	background: #ff6600;
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 13px 28px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease;
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form .wpcf7-submit:hover { background: #e65c00; }
/* fix the "Request a Quote" container overlap → clean opaque card above bleeding content */
.request-quote-form {
	position: relative;
	z-index: 2;
	background: #fff;
	padding: 24px;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.06 );
}
/* validation + response messages */
.wpcf7 .wpcf7-not-valid-tip { color: #d00; font-size: 13px; margin-top: 4px; }
.wpcf7 form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 16px;
	border-radius: 6px;
}

/* ============================================================
   Phase 6 — Accessibility & code hygiene
   ============================================================ */

/* Color utility classes — replace the repeated inline color spans */
.g4u-white  { color: #ffffff; }
.g4u-orange { color: #ff6600; }

/* Skip-to-content link (first focusable element, visible on focus) */
.g4u-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: #ff6600;
	color: #fff;
	padding: 10px 18px;
	border-radius: 0 0 6px 0;
	font-weight: 600;
	text-decoration: none;
}
.g4u-skip-link:focus { left: 0; }

/* Visible keyboard focus (does not affect mouse users) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.et_pb_button:focus-visible,
.et-social-icon a:focus-visible {
	outline: 3px solid #ff6600;
	outline-offset: 2px;
}

/* Consistent social-icon sizing between header and footer */
.et-social-icons li.et-social-icon a,
#main-footer .et-social-icons li.et-social-icon a {
	font-size: 16px;
}

/* Normalise the affiliation/badge row — equal sizing & spacing */
.g4u-badges .et_pb_image,
.g4u-badges .et_pb_image_wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}
.g4u-badges .et_pb_image img {
	max-height: 90px;
	width: auto;
	object-fit: contain;
}

/* Respect users who prefer reduced motion */
@media ( prefers-reduced-motion: reduce ) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
   Button consistency — 2-style system
   PRIMARY = brand orange (#ff4700) filled · SECONDARY = white outline
   Targeted via module classes (g4u-btn-primary / g4u-btn-secondary),
   NOT a blanket .et_pb_button override.
   ============================================================ */

/* Unify CF7 submit buttons to brand orange (overrides the Phase-5 #ff6600) */
.wpcf7-form input[type="submit"],
.wpcf7-form .wpcf7-submit { background: #ff4700; }
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form .wpcf7-submit:hover { background: #e63f00; }

/* PRIMARY — orange filled, white text (et_pb_button = class on <a>; et_pb_cta = class on wrapper) */
.g4u-btn-primary.et_pb_button,
.g4u-btn-primary .et_pb_button {
	background: #ff4700 !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 6px !important;
	padding: 13px 30px !important;
	font-weight: 600 !important;
	transition: background 0.2s ease !important;
}
.g4u-btn-primary.et_pb_button:hover,
.g4u-btn-primary .et_pb_button:hover {
	background: #e63f00 !important;
	padding: 13px 30px !important;
}

/* SECONDARY — white outline on dark backgrounds (hero CALL US NOW / GET A FREE QUOTE slides) */
.g4u-btn-secondary .et_pb_button,
.g4u-btn-secondary.et_pb_button {
	background: transparent !important;
	color: #ffffff !important;
	border: 2px solid #ffffff !important;
	border-radius: 6px !important;
	padding: 13px 30px !important;
	font-weight: 600 !important;
}
.g4u-btn-secondary .et_pb_button:hover,
.g4u-btn-secondary.et_pb_button:hover {
	background: rgba( 255, 255, 255, 0.15 ) !important;
	padding: 13px 30px !important;
}

/* Keep padding stable — drop Divi's hover arrow shift on our buttons */
.g4u-btn-primary.et_pb_button:after,
.g4u-btn-primary .et_pb_button:after,
.g4u-btn-secondary.et_pb_button:after,
.g4u-btn-secondary .et_pb_button:after { display: none !important; }

/* ============================================================
   Homepage "Featured Security Services" — equalise the 6 cards
   so images, card heights and buttons line up evenly. Real content
   (headings/descriptions/links) is unchanged; only layout is normalised.
   Scoped to the two card rows via .g4u-services-row.
   ============================================================ */
/* each card row = flex so its 3 columns are equal height */
.g4u-services-row.et_pb_row {
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch;
}
.g4u-services-row .et_pb_column {
	display: flex !important;
	flex-direction: column;
	float: none !important;
}
/* equal-size images across every card (uniform crop) */
.g4u-services-row .et_pb_image { width: 100%; margin-bottom: 18px !important; }
.g4u-services-row .et_pb_image .et_pb_image_wrap { width: 100%; display: block; }
.g4u-services-row .et_pb_image img {
	width: 100% !important;
	height: 230px !important;
	object-fit: cover;
	display: block;
}
/* push every button to the bottom so they line up; keep natural button width */
.g4u-services-row .et_pb_button_module_wrapper { margin-top: auto !important; }
.g4u-services-row .et_pb_button {
	margin-top: auto !important;
	align-self: flex-start;
}
/* on stacked mobile, a slightly shorter, still-equal image */
@media ( max-width: 980px ) {
	.g4u-services-row .et_pb_column { width: 100% !important; }
	.g4u-services-row .et_pb_image img { height: 200px !important; }
}

/* ---- Black 4-column "Mobile Patrol / Event / Residential / Concierge" cards:
        equal-height columns + buttons aligned at the bottom (no more up/down). ---- */
.g4u-equal-cards.et_pb_row {
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch;
}
.g4u-equal-cards.et_pb_row > .et_pb_column {
	display: flex !important;
	flex-direction: column !important;   /* beat Divi's et_pb_equal_columns specificity */
	float: none !important;
}
/* push the button (whatever wraps it) to the BOTTOM of its equal-height column */
.g4u-equal-cards.et_pb_row > .et_pb_column > .et_pb_button_module_wrapper,
.g4u-equal-cards.et_pb_row > .et_pb_column > .et_pb_button,
.g4u-equal-cards.et_pb_row > .et_pb_column > *:last-child {
	margin-top: auto !important;
}
/* match the rounded brand-orange "Learn More" buttons; no clipping */
.g4u-equal-cards .et_pb_button {
	align-self: flex-start;
	display: inline-block !important;
	max-width: 100%;
	white-space: normal;          /* wrap instead of overflow/clip */
	background: #ff4700 !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 6px !important;
	padding: 13px 26px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	transition: background .2s ease !important;
}
.g4u-equal-cards .et_pb_button:hover { background: #e63f00 !important; padding: 13px 26px !important; }
.g4u-equal-cards .et_pb_button:after { display: none !important; }   /* drop Divi hover arrow */
@media ( max-width: 980px ) {
	.g4u-equal-cards > .et_pb_column { width: 100% !important; }
	.g4u-equal-cards .et_pb_button { white-space: normal; }
}

/* ---- Homepage testimonials: equal-height boxes (targets the row that holds
        the et_pb_testimonial modules, via :has — no content change). ---- */
.et_pb_row:has(> .et_pb_column > .et_pb_testimonial) {
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch;
}
.et_pb_row:has(> .et_pb_column > .et_pb_testimonial) > .et_pb_column {
	display: flex !important;
	float: none !important;
}
.et_pb_row:has(.et_pb_testimonial) .et_pb_testimonial {
	height: 100% !important;
	box-sizing: border-box;
	margin-bottom: 0 !important;
}
@media ( max-width: 980px ) {
	.et_pb_row:has(> .et_pb_column > .et_pb_testimonial) > .et_pb_column { width: 100% !important; }
}

/* ---- Testimonials CONTINUOUS MARQUEE (JS adds .g4u-testi-marquee + clones the
        cards into .g4u-testi-track). Smooth, seamless, infinite scroll; pauses on
        hover. translateX(-50%) lands the cloned half exactly on the first half. ---- */
.g4u-testi-marquee {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	overflow: hidden !important;
	padding: 4px 0 !important;
	/* soft fade at both edges, like the reference */
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 4%, #000 96%, transparent );
	        mask-image: linear-gradient( 90deg, transparent, #000 4%, #000 96%, transparent );
}
.g4u-testi-track {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;     /* equal-height cards */
	width: max-content !important;
	animation: g4u-testi-scroll 36s linear infinite;
}
/* pause on hover ONLY for real mouse pointers (so touch-hover can't freeze it
   on mobile); tap/click toggles the .g4u-paused class on touch + everywhere */
@media ( hover: hover ) {
	.g4u-testi-marquee:hover .g4u-testi-track { animation-play-state: paused; }
}
.g4u-testi-marquee.g4u-paused .g4u-testi-track { animation-play-state: paused !important; }
.g4u-testi-track > .et_pb_column {
	flex: 0 0 auto !important;
	width: 320px !important;
	max-width: 82vw !important;
	margin: 0 12px !important;
	padding: 0 !important;
	float: none !important;
	display: flex !important;
}
.g4u-testi-track > .et_pb_column > .et_pb_testimonial {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
}
@keyframes g4u-testi-scroll {
	from { transform: translateX( 0 ); }
	to   { transform: translateX( -50% ); }
}
@media ( prefers-reduced-motion: reduce ) {
	.g4u-testi-track { animation: none !important; }
}
@media ( max-width: 600px ) {
	.g4u-testi-track > .et_pb_column { width: 280px !important; margin: 0 9px !important; }
}

/* ---- FAQ accordion (converted from the broken giant-button box) ----
   Match the dark-navy section + the Industries accordion on the right
   (Divi's default white/grey toggle boxes looked off-theme). ---- */
.g4u-faq .et_pb_toggle {
	background-color: #0b1c2d !important;
	border: 1px solid #20406a !important;
	border-radius: 8px !important;
	margin-bottom: 12px !important;
	padding: 18px 22px !important;
}
.g4u-faq .et_pb_toggle_title { font-size: 18px; line-height: 1.4; color: #ffffff !important; }
.g4u-faq .et_pb_toggle_open .et_pb_toggle_title { color: #E09900 !important; }
.g4u-faq .et_pb_toggle_title:before { color: #E09900 !important; }   /* +/- icon */
.g4u-faq .et_pb_toggle_content { font-size: 15px; }
.g4u-faq .et_pb_toggle_content,
.g4u-faq .et_pb_toggle_content p { color: #d7dde6 !important; }
.g4u-faq .et_pb_toggle_content a:not(.et_pb_button) { color: #E09900 !important; }
/* keep the answer's Request button brand orange */
.g4u-faq .et_pb_toggle_content .et_pb_button,
.g4u-faq .et_pb_toggle_content a.et_pb_button {
	display: inline-block !important;
	margin-top: 8px;
	color: #ffffff !important;
}

/* ============================================================
   Header — Max Mega Menu integration fixes
   (top-level menu bar only — does NOT touch the Services 3-column
   grid panel, which lives in .mega-sub-menu)
   ============================================================ */

/* 1) Remove the grey container box behind the top menu bar AND the faint
      grey behind individual items (HOME = current item, INDIGENOUS, etc.)
      in every state — no background highlight at all. Hover gives feedback
      via text colour instead. */
#mega-menu-wrap-primary-menu,
#mega-menu-primary-menu { background: transparent !important; }
#mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link,
#mega-menu-primary-menu > li.mega-menu-item:hover > a.mega-menu-link,
#mega-menu-primary-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-primary-menu > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
#mega-menu-primary-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
}
#mega-menu-primary-menu > li.mega-menu-item:hover > a.mega-menu-link,
#mega-menu-primary-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link {
	color: #ff4700 !important;
}

/* 2) Hide Divi's native mobile menu — MMM provides the mobile menu */
#et_mobile_nav_menu { display: none !important; }

/* ---- Header CTA buttons (relocated "Get a Free Quote" / "Make an Appointment").
        Server-rendered via functions.php (wp_nav_menu filter), appended after
        the primary menu — no JS, no flash. Brand orange #ff4700:
        quote = filled (primary), appointment = orange outline (secondary). ---- */
.g4u-header-cta-group {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	vertical-align: middle;
}
.g4u-header-cta {
	display: inline-block;
	padding: 9px 16px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none !important;
	transition: background .2s ease, color .2s ease;
}
.g4u-header-cta--quote { background: #ff4700; color: #fff !important; border: 2px solid #ff4700; }
.g4u-header-cta--quote:hover { background: #e63f00; border-color: #e63f00; color: #fff !important; }
.g4u-header-cta--appt { background: transparent; color: #ff4700 !important; border: 2px solid #ff4700; padding: 7px 14px; }
.g4u-header-cta--appt:hover { background: #ff4700; color: #fff !important; }
/* ============================================================
   DESKTOP 3-LEVEL HEADER (>=981px) — final agreed design
     Level 1 = Divi top utility bar (phone/email/social) — untouched.
     Level 2 = real logo image (left)  +  CTAs + search (far right).
     Level 3 = full-width menu row, centred, below Level 2.
   Technique: flatten #et-top-navigation and #top-menu-nav with
   display:contents so the menu wrap, the CTA group and the search icon
   all become DIRECT flex children of the header .container. Then `order`
   lays out Level 2, and a 100% flex-basis on the menu wrap drops it onto
   its own full-width Level-3 row. CTAs stay server-rendered (no flash).
   ============================================================ */
@media ( min-width: 981px ) {
	/* header inner = 2-row flex (Level 2 wraps to Level 3) */
	#main-header .container.et_menu_container {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		max-width: 1280px !important;
		width: 92% !important;
		padding-top: 4px;
	}
	/* kill Divi's clearfix pseudo-elements so they don't become flex items */
	#main-header .container.et_menu_container:before,
	#main-header .container.et_menu_container:after {
		content: none !important;
		display: none !important;
	}
	/* flatten the nav wrappers → their children join the container's flex */
	#main-header #et-top-navigation { display: contents !important; }
	#main-header #top-menu-nav { display: contents !important; }

	/* ---------- LEVEL 2 / logo ---------- */
	#main-header .logo_container {
		order: 1;
		position: relative !important;
		display: flex !important;
		align-items: center !important;
		float: none !important;
		width: auto !important;
		height: auto !important;
		margin: 0 24px 0 0 !important;
	}
	#main-header .logo_container .logo_helper { display: none !important; }
	#main-header #logo {
		position: static !important;
		max-height: 92px !important;
		width: auto !important;
		margin: 0 !important;
		transform: none !important;
	}
	#main-header .logo_container a span {
		font-size: 30px !important;
		line-height: 1.1 !important;
	}
	/* neutralise any leftover fake "G4U" text-logo CSS hack — show real image only */
	.et_pb_logo_container:before { content: none !important; }

	/* CTA group → Level 2 right, comfortably spaced, before the search icon */
	#main-header .g4u-header-cta-group {
		order: 2;
		margin-left: auto !important;
		margin-right: 18px;
		flex: 0 0 auto;
	}
	#main-header .g4u-header-cta { padding: 9px 18px !important; font-size: 13px !important; }
	#main-header .g4u-header-cta--appt { padding: 7px 16px !important; }

	/* search icon → far right of Level 2 */
	#main-header #et_top_search {
		order: 3;
		flex: 0 0 auto;
		display: flex !important;
		align-items: center;
	}

	/* ---------- LEVEL 3 ---------- full-width, centred menu row below */
	#main-header #mega-menu-wrap-primary-menu {
		order: 4;
		flex: 0 0 100% !important;
		width: 100% !important;
		margin-top: 6px;
		padding-top: 2px;
		/* (divider line removed per request) */
	}
	#mega-menu-primary-menu {
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;   /* left-aligned: HOME starts at the left, under the logo */
		align-items: center;
	}
	/* generous, even spacing (~26px between items), ~13.5px font */
	#mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link {
		padding-left: 13px !important;
		padding-right: 13px !important;
		font-size: 13.5px !important;
		line-height: 1.4 !important;
	}
	/* keep the logo proportional in the sticky/fixed state */
	#main-header.et-fixed-header #logo { max-height: 38px !important; }
}

/* ============================================================
   MOBILE HEADER (<=980px) — CLEAN REBUILD (robust 300–414px)
   ONE row:  [ logo + "G4U Security Ltd" ]  ……  [ search ]  [ hamburger ]
   • Proper flexbox: the logo group SHRINKS and the wordmark truncates with an
     ellipsis, so it can NEVER sit under the search icon at any width.
   • Hamburger = 3 orange bars (no "MENU" text, no X) in every state.
   • The open dropdown wraps to a full-width line BELOW the row — it never
     overlaps the logo/wordmark.
   • Sticky, compact (~52px). Desktop header untouched (min-width:981 block).
   ============================================================ */
@media ( max-width: 980px ) {
	/* Simpler FLEX approach (NO display:contents — that hid everything on some
	   mobile browsers). .container is the one-line bar: logo LEFT, the nav
	   (search icon + hamburger) RIGHT. The search FORM and the open dropdown are
	   absolute overlays dropped BELOW the bar, anchored to .container. */
	#main-header {
		position: relative !important;    /* normal flow + anchor for overlays */
		top: auto !important;
		z-index: 99 !important;
		min-height: 0 !important;
		height: auto !important;        /* beat Divi's inline header height */
		padding: 0 !important;          /* beat Divi's inline padding (.container has it) */
		line-height: 1 !important;
	}
	#main-header:before, #main-header:after { content: none !important; display: none !important; }
	/* Divi's JS adds padding-top:~66px to #page-container to offset a fixed header
	   — we keep the header in normal flow, so remove that offset (no gap). */
	#page-container { overflow: visible !important; padding-top: 0 !important; }

	/* Divi's JS switches #main-header to position:fixed on scroll (.et-fixed-header)
	   and renders a broken/empty bar. Force it to STAY in normal flow so it simply
	   scrolls away cleanly with the page — no broken fixed/empty header. */
	#main-header.et-fixed-header {
		position: relative !important;
		top: auto !important;
		height: auto !important;
		box-shadow: none !important;
	}

	/* === THE FLEX ROW === .container = compact one-line bar (logo left, nav right) */
	#main-header .container.et_menu_container {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 10px 15px !important;    /* compact ≈50px (logo 30 + 10+10) */
		position: relative !important;    /* containing block for dropdown/search */
	}
	#main-header .container.et_menu_container:before,
	#main-header .container.et_menu_container:after { content: none !important; display: none !important; }
	/* nav holds [search icon] + [hamburger] on the right, fixed size, never shrinks.
	   position:static so the absolute dropdown anchors to .container (full-width). */
	#main-header #et-top-navigation {
		flex: 0 0 auto !important;
		width: auto !important;
		float: none !important;
		padding-left: 0 !important;       /* kill Divi's 68px push */
		margin: 0 !important;
		position: static !important;
		display: flex !important;
		align-items: center !important;
	}
	#main-header #mega-menu-wrap-primary-menu { position: static !important; }

	/* LEFT: logo + wordmark — group shrinks, wordmark truncates with ellipsis */
	#main-header .logo_container {
		display: flex !important;
		align-items: center !important;
		float: none !important;
		position: static !important;   /* beat Divi's position:absolute */
		margin: 0 !important;
		height: auto !important;        /* beat Divi's height:100% */
		width: auto !important;         /* beat Divi's width:100% (the real wrap cause) */
		flex: 0 1 auto;
		min-width: 0;
		overflow: hidden;
	}
	#main-header .logo_container .logo_helper { display: none !important; }
	#main-header .logo_container a {
		display: flex !important;
		align-items: center !important;
		min-width: 0;
		overflow: hidden;
		line-height: 1 !important;
		text-decoration: none !important;
	}
	#main-header .logo_container img { height: 30px !important; max-height: 30px !important; width: auto !important; margin: 0 !important; line-height: 1 !important; vertical-align: middle; }
	#main-header #logo,
	#main-header.et-fixed-header #logo {
		position: static !important;
		height: auto !important;
		max-height: 30px !important;
		width: auto !important;
		max-width: 100% !important;
		flex: 0 0 auto;
		margin: 0 !important;
		transform: none !important;
	}
	#main-header .logo_container a span {
		flex: 0 1 auto;
		min-width: 0;
		display: inline-block !important;
		margin-left: 7px;
		font-size: 13px !important;
		font-weight: 700 !important;
		line-height: 1.15 !important;
		color: #2b2b2b !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		vertical-align: middle;
	}

	/* RIGHT group inside #et-top-navigation: search icon (order 1) BEFORE the menu
	   wrapper that holds the hamburger (order 2). Divi hides #et_top_search on
	   mobile — force it back on. */
	#main-header #et_top_search {
		order: 1;
		flex: 0 0 auto;
		display: flex !important;
		align-items: center !important;
		width: auto !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		position: relative !important;
	}
	#main-header #et_top_search #et_search_icon {
		display: inline-block !important;
		position: relative !important;
		margin: 0 !important;
		top: auto !important;
		width: 22px;
		height: 22px;
		cursor: pointer;
	}
	#main-header #et_top_search #et_search_icon:before {
		position: static !important;
		color: #2b2b2b !important;
		font-size: 19px;
		line-height: 22px;
	}
	/* the menu wrapper (the hamburger) sits to the RIGHT of the search icon */
	#main-header #top-menu-nav {
		order: 2;
		position: static !important;
		display: flex !important;
		align-items: center !important;
		margin-left: 14px !important;
		padding: 0 !important;
		width: auto !important;
	}
	#main-header .mega-menu-toggle { margin: 0 !important; flex: 0 0 auto; }

	/* the search FORM (.et_search_outer) STAYS an absolute overlay BELOW the bar —
	   so it never shows a permanent field / second line. */
	#main-header .et_search_outer {
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		z-index: 998 !important;
	}

	/* dropdown → full-width absolute line BELOW the bar (never overlaps the logo) */
	#main-header #mega-menu-primary-menu {
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		z-index: 999 !important;
	}
	#mega-menu-primary-menu { background: #ffffff !important; }
	#mega-menu-primary-menu > li.mega-menu-item { margin: 0 !important; }
	#mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link {
		padding: 11px 18px !important;
		line-height: 1.3 !important;
		color: #2b2b2b !important;
		font-size: 15px !important;
		font-weight: 600 !important;
		background: #ffffff !important;
		border-bottom: 1px solid #ececec !important;
	}
	#mega-menu-primary-menu li.mega-current-menu-item > a.mega-menu-link { color: #ff4700 !important; }

	/* CTA buttons kept OFF the compact phone bar (reachable via the menu/page). */
	#main-header .g4u-header-cta-group { display: none !important; }
}

/* Hamburger = 3 orange bars (no "MENU" text, no X). The toggle only appears on
   mobile, so these are safe globally. Also kills the MENUMENU double-text and
   keeps the toggle bar transparent (no grey box). */
.mega-menu-toggle .mega-toggle-label-closed,
.mega-menu-toggle .mega-toggle-label-open { display: none !important; }
#mega-menu-wrap-primary-menu .mega-menu-toggle { background: transparent !important; }
.mega-menu-toggle .mega-toggle-label {
	position: relative !important;
	display: inline-block !important;
	width: 30px !important;
	height: 22px !important;
	padding: 0 !important;
	cursor: pointer;
}
.mega-menu-toggle .mega-toggle-label:before {
	content: "" !important;
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	margin-top: -1.5px;
	height: 3px;
	border-radius: 2px;
	background: #ff4700;
	box-shadow: 0 -7px 0 #ff4700, 0 7px 0 #ff4700;   /* the 3 bars */
}
/* stays a hamburger when open (NO cross/X) */
.mega-menu-toggle.mega-menu-open .mega-toggle-label:before {
	box-shadow: 0 -7px 0 #ff4700, 0 7px 0 #ff4700 !important;
	transform: none !important;
}
.mega-menu-toggle.mega-menu-open .mega-toggle-label:after { content: none !important; display: none !important; }

/* (The former single-row desktop block was superseded by the DESKTOP 3-LEVEL
   HEADER block above — logo sizing, header width and the menu row now live
   there so Level 2 / Level 3 stay consistent.) */

/* ==================================================================
   PHONES (<=414px) — STICKY HEADER + CLIP-GUARD.

   STRUCTURE (verified): #page-container > #top-header (utility bar) > #main-header
   are siblings; the utility bar's mobile height is VARIABLE (phone+email wrap to
   2 lines at ~320px), so a hardcoded top offset (e.g. 32px) would overlap/gap.

   ROBUST APPROACH:
   • #top-header stays in NORMAL FLOW (position:relative) so it scrolls away and
     can NEVER sit over the logo — fixes "logo hidden behind the bars".
   • #main-header is STICKY at top:0 → it stays pinned at the very top while
     scrolling (utility bar scrolls past above it). No utility-bar height needed.
   • Divi adds .et-fixed-header (position:fixed) on scroll → we force it back to
     sticky so the bar never flips to the broken fixed/empty state.
   • LOGGED-IN ONLY: the WP admin bar is a fixed 46px bar at top on mobile — drop
     the sticky header to top:46px via body.admin-bar. Real visitors have NO admin
     bar, so they correctly get top:0 (no wrong gap).
   • Sticky sits IN FLOW → #page-container needs NO content offset (no empty gap).

   CLIP-GUARD: force the header / .container / logo box to overflow:visible so the
   FULL logo shows (beats any inline height:66px + overflow:hidden). Wordmark still
   …truncates via its own <span> (overflow:hidden + ellipsis, from the 980 block).
   This block is LAST in the file, so it wins at <=414px.  No display:contents.
   ================================================================== */
@media ( max-width: 414px ) {
	/* utility bar scrolls away in flow → can never hide the logo */
	#top-header { position: relative !important; z-index: 1 !important; }

	#main-header {
		position: -webkit-sticky !important;
		position: sticky !important;
		top: 0 !important;                /* logged-out: pin to the very top */
		z-index: 9997 !important;
		height: auto !important;          /* beat any inline height:66px */
		min-height: 0 !important;
		overflow: visible !important;     /* beat any inline overflow:hidden (the clip) */
	}
	/* Divi flips #main-header to position:fixed on scroll (.et-fixed-header) and
	   renders a broken bar — force it to STAY the same sticky slim header */
	#main-header.et-fixed-header {
		position: -webkit-sticky !important;
		position: sticky !important;
		top: 0 !important;
		height: auto !important;
		overflow: visible !important;
		box-shadow: 0 1px 6px rgba( 0, 0, 0, 0.08 );
	}
	/* LOGGED-IN ONLY: WP admin bar (fixed 46px on mobile) → drop header below it.
	   No admin bar for real visitors, so this never gives them a wrong gap. */
	body.admin-bar #main-header,
	body.admin-bar #main-header.et-fixed-header { top: 46px !important; }

	/* CLIP-GUARD: never cut off the logo */
	#main-header .container.et_menu_container {
		overflow: visible !important;
		align-items: center !important;
	}
	#main-header .logo_container {
		overflow: visible !important;     /* show the FULL logo (no vertical clip) */
		height: auto !important;
		align-items: center !important;
	}
	#main-header .logo_container a {
		overflow: visible !important;
		align-items: center !important;
	}
	#main-header .logo_container img,
	#main-header #logo { overflow: visible !important; }

	/* sticky sits in flow → NO content offset (no big empty gap above the hero) */
	#page-container { padding-top: 0 !important; }
}

/* ============================================================
   BLOG GRID  (child theme home.php = the /blog posts page).
   Responsive card grid matching the site: brand orange #ff4700,
   cover images, equal-height cards, orange "Read More" + pager.
   ============================================================ */
.g4u-blog-wrap { padding: 52px 0 72px; }
/* the blog grid has NO sidebar — kill Divi's right-sidebar divider line
   (drawn by .container:before because the body still has et_right_sidebar) */
#main-content .container.g4u-blog-wrap:before,
#main-content .container.g4u-blog-wrap:after {
	content: none !important;
	display: none !important;
	background: none !important;
	border: 0 !important;
	width: 0 !important;
}

.g4u-blog-head { text-align: center; max-width: 740px; margin: 0 auto 40px; }
.g4u-blog-title { font-size: 38px; line-height: 1.15; font-weight: 700; color: #1a1a1a; margin: 0 0 10px; }
.g4u-blog-sub { font-size: 17px; line-height: 1.5; color: #666; margin: 0; }

.g4u-blog-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 28px;
}

/* card — matches .g4u-services-row pattern (cover image, equal height, bottom-aligned CTA) */
.g4u-blog-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.05 );
	transition: transform .18s ease, box-shadow .18s ease;
}
.g4u-blog-card:hover { transform: translateY( -4px ); box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.12 ); }

.g4u-blog-card__imgwrap { position: relative; display: block; overflow: hidden; line-height: 0; }
.g4u-blog-card__img {
	width: 100%;
	height: 210px;
	object-fit: cover;            /* uniform crop across every card */
	display: block;
	transition: transform .25s ease;
}
.g4u-blog-card:hover .g4u-blog-card__img { transform: scale( 1.05 ); }
/* posts with no featured image → G4U brand logo centered over a dark panel */
.g4u-blog-card__img--placeholder {
	background-image: var( --g4u-ph-logo, none ), linear-gradient( 135deg, #2b2b2b, #4a4a4a );
	background-repeat: no-repeat;
	background-position: center center, center center;
	background-size: 130px auto, cover;
}
.g4u-blog-card__cat {
	position: absolute; left: 12px; top: 12px;
	background: #ff4700; color: #fff;
	font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
	padding: 5px 11px; border-radius: 4px;
}

.g4u-blog-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 18px 20px 22px; }
.g4u-blog-card__meta { font-size: 13px; color: #8a8a8a; margin-bottom: 8px; }
.g4u-blog-card__title { font-size: 19px; line-height: 1.35; font-weight: 700; margin: 0 0 10px; }
.g4u-blog-card__title a { color: #1a1a1a; text-decoration: none; }
.g4u-blog-card__title a:hover { color: #ff4700; }
.g4u-blog-card__excerpt { font-size: 14.5px; line-height: 1.6; color: #5f5f5f; margin: 0 0 16px; }
.g4u-blog-card__more {
	margin-top: auto;            /* pin CTA to the bottom so cards line up */
	align-self: flex-start;
	font-size: 14px; font-weight: 700; color: #ff4700; text-decoration: none;
}
.g4u-blog-card__more span { display: inline-block; transition: transform .15s ease; }
.g4u-blog-card__more:hover span { transform: translateX( 4px ); }

/* pagination — orange current page, matches brand */
.g4u-blog-pagination { margin-top: 46px; }
.g4u-blog-pagination .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.g4u-blog-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 13px;
	border: 1px solid #e2e2e2; border-radius: 6px;
	color: #2b2b2b; text-decoration: none; font-weight: 600;
}
.g4u-blog-pagination .page-numbers.current { background: #ff4700; color: #fff; border-color: #ff4700; }
.g4u-blog-pagination a.page-numbers:hover { border-color: #ff4700; color: #ff4700; }
.g4u-blog-empty { text-align: center; padding: 70px 0; color: #777; font-size: 16px; }

/* responsive: 3 → 2 → 1 columns */
@media ( max-width: 980px ) {
	.g4u-blog-grid { grid-template-columns: repeat( 2, 1fr ); gap: 22px; }
	.g4u-blog-title { font-size: 30px; }
}
@media ( max-width: 600px ) {
	.g4u-blog-grid { grid-template-columns: 1fr; gap: 20px; }
	.g4u-blog-wrap { padding: 32px 0 52px; }
	.g4u-blog-title { font-size: 26px; }
	.g4u-blog-card__img { height: 200px; }
}

/* ============================================================
   CITY / SERVICE-AREA MARQUEE — homepage dark-navy section.
   Infinite, slow, seamless horizontal scroll (à la luxor.tech).
   Track holds the area list ×6; we translateX(-50%) so the 2nd
   half lands exactly on the 1st → no jump. Pauses on hover.
   ============================================================ */
/* full-bleed: break out of the 1080px row so the band fills the whole navy
   section edge-to-edge (no big blank sides) */
.et_pb_section:has(.g4u-city-marquee) { overflow: hidden !important; }
.g4u-city-marquee {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	overflow: hidden;
	padding: 6px 0;
	/* slim fade at the very edges only */
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 3%, #000 97%, transparent );
	        mask-image: linear-gradient( 90deg, transparent, #000 3%, #000 97%, transparent );
}
.g4u-city-track {
	display: inline-flex;
	align-items: center;
	width: max-content;
	white-space: nowrap;
	will-change: transform;
	animation: g4u-city-scroll 60s linear infinite;
}
/* pause on hover ONLY for real mouse pointers — touch devices keep scrolling
   (mobile "hover" sticks on tap and would freeze it) */
@media ( hover: hover ) {
	.g4u-city-marquee:hover .g4u-city-track { animation-play-state: paused; }
}
.g4u-city {
	font-family: "Lato", Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #ffffff;
	padding: 0 4px;
}
.g4u-dot {
	color: #ff4700;             /* brand-orange separator dot */
	font-size: 12px;
	line-height: 1;
	padding: 0 22px;
	position: relative;
	top: -3px;
}
@keyframes g4u-city-scroll {
	from { transform: translateX( 0 ); }
	to   { transform: translateX( -50% ); }
}
@media ( max-width: 600px ) {
	.g4u-city { font-size: 15px; letter-spacing: .04em; }
	.g4u-dot { padding: 0 13px; }
}
@media ( prefers-reduced-motion: reduce ) {
	.g4u-city-track { animation: none; }   /* static list, no motion */
}

/* ============================================================
   "Review us on Google" — orange CTA below the testimonials
   marquee + a small link in the footer bottom bar.
   ============================================================ */
.g4u-review-cta { text-align: center; margin: 30px 0 4px; }
.g4u-review-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #ff4700;
	color: #fff !important;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	padding: 14px 30px;
	border: 2px solid #ff4700;
	border-radius: 6px;
	text-decoration: none !important;
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.g4u-review-btn:hover {
	background: #e63f00;
	border-color: #e63f00;
	color: #fff !important;
	transform: translateY( -2px );
	box-shadow: 0 6px 16px rgba( 255, 71, 0, 0.3 );
}
.g4u-review-star { color: #ffd54a; font-size: 18px; line-height: 1; }   /* gold star */

/* small footer link (JS-appended into #footer-info) */
.g4u-footer-review {
	display: inline-block;
	margin-left: 14px;
	color: #ff4700 !important;
	font-weight: 700;
	text-decoration: none !important;
	white-space: nowrap;
}
.g4u-footer-review:hover { color: #ffffff !important; text-decoration: underline !important; }
@media ( max-width: 600px ) {
	.g4u-footer-review { display: block; margin: 8px 0 0; }
	.g4u-review-btn { font-size: 15px; padding: 12px 24px; }
}

/* ============================================================
   CAREERS page — brand polish (recolored to navy/orange/light
   in the DB; this makes the now-navy hero readable + tidies the
   role cards). Scoped to careers via .g4u-careers-hero / page id.
   ============================================================ */
/* Hero section became navy → force its text white (it had no color set). */
.g4u-careers-hero .et_pb_text,
.g4u-careers-hero h1, .g4u-careers-hero h2, .g4u-careers-hero h3, .g4u-careers-hero h4,
.g4u-careers-hero p, .g4u-careers-hero li, .g4u-careers-hero span, .g4u-careers-hero strong {
	color: #ffffff !important;
}
/* the navy intro box sits on the hero image — give it padding + a soft edge so it
   reads as a card rather than blending into the navy. */
.g4u-careers-hero .et_pb_text[style*="background"],
.g4u-careers-hero .et_pb_column[style*="background"] {
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.25 );
}

/* Role cards = ONLY section 3 (.g4u-careers-roles) — rounded cards, white text/icon.
   Scoped so the Perks & Benefits blurbs (no background, dark text) are untouched. */
.g4u-careers-roles .et_pb_blurb {
	border-radius: 8px;
	overflow: hidden;
}
.g4u-careers-roles .et_pb_blurb .et_pb_blurb_content { padding: 22px 20px; }
.g4u-careers-roles .et_pb_blurb .et-pb-icon,
.g4u-careers-roles .et_pb_blurb h4,
.g4u-careers-roles .et_pb_blurb h4 a,
.g4u-careers-roles .et_pb_blurb .et_pb_blurb_description,
.g4u-careers-roles .et_pb_blurb p { color: #ffffff !important; }

/* ============================================================
   SITE FOOTER ("Footer" Divi section: Services list / Links /
   navy contact block — built into the service pages). Rebalanced:
   wider Services flowed into 2 columns, slim Links (no scrollbar),
   columns top-aligned so the navy block stops stretching into a
   huge empty gap. Hook .g4u-site-footer added across those pages.
   ============================================================ */
/* use a bit more width so the long service names have room + start further left */
.g4u-site-footer .et_pb_row { width: 92% !important; max-width: 1280px !important; }

/* row → flex so we control column widths; STRETCH so the navy block fills the
   full footer height (content stays at its top, bg extends down). */
.g4u-site-footer .et_pb_row {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
}
.g4u-site-footer .et_pb_row > .et_pb_column {
	float: none !important;
	margin: 0 !important;
	vertical-align: top;
}
/* widths: Services fits 2 sub-columns, Links slim, navy ROOMY (close to its
   original 1_2). NOTE: do NOT set padding on the navy column — it keeps its own
   built-in custom_padding:60px so the contact text isn't cramped/clipped. */
.g4u-site-footer .et_pb_row > .et_pb_column:nth-child(1) { flex: 0 0 40% !important; max-width: 40% !important; padding: 0 2% 0 0 !important; }
.g4u-site-footer .et_pb_row > .et_pb_column:nth-child(2) { flex: 0 0 16% !important; max-width: 16% !important; padding: 0 1% !important; overflow: hidden !important; }
.g4u-site-footer .et_pb_row > .et_pb_column:nth-child(3) { flex: 0 0 44% !important; max-width: 44% !important; align-self: stretch !important; }
/* navy content stays anchored at the TOP; the block's bg just extends downward */
.g4u-site-footer .et_pb_row > .et_pb_column:nth-child(3) { display: block !important; }

/* "Services" HEADING (first text module in col 1) → centered over its 2 columns */
.g4u-site-footer .et_pb_row > .et_pb_column:nth-child(1) .et_pb_text:first-child,
.g4u-site-footer .et_pb_row > .et_pb_column:nth-child(1) .et_pb_text:first-child .et_pb_text_inner {
	text-align: center !important;
}

/* Services list (the last text module in column 1) → 2 tidy columns, compact */
.g4u-site-footer .et_pb_row > .et_pb_column:nth-child(1) .et_pb_text:last-child .et_pb_text_inner {
	-webkit-columns: 2;
	   -moz-columns: 2;
	        columns: 2;
	column-gap: 28px;
	text-align: left;
}
.g4u-site-footer .et_pb_row > .et_pb_column:nth-child(1) .et_pb_text:last-child .et_pb_text_inner p {
	margin: 0 0 7px !important;
	line-height: 1.3 !important;
	overflow-wrap: break-word;       /* wrap long names instead of clipping */
	-webkit-column-break-inside: avoid;
	          break-inside: avoid;   /* never split a service name across columns */
}
/* hide the stray empty <a>/<p> placeholders a few items carry */
.g4u-site-footer .et_pb_row > .et_pb_column:nth-child(1) .et_pb_text_inner p:empty { display: none; }

/* Links column: kill the horizontal scrollbar + let links wrap inside the column */
.g4u-site-footer .et_pb_row > .et_pb_column:nth-child(2) .et_pb_text_inner,
.g4u-site-footer .et_pb_row > .et_pb_column:nth-child(2) .et_pb_text_inner * {
	max-width: 100% !important;
	overflow-wrap: break-word;
	word-break: break-word;
}
.g4u-site-footer .et_pb_row > .et_pb_column:nth-child(2) .et_pb_text_inner { overflow: visible !important; white-space: normal !important; }

/* mobile: stack columns full-width (Services drops to 1 readable column) */
@media ( max-width: 980px ) {
	.g4u-site-footer .et_pb_row > .et_pb_column:nth-child(1),
	.g4u-site-footer .et_pb_row > .et_pb_column:nth-child(2),
	.g4u-site-footer .et_pb_row > .et_pb_column:nth-child(3) {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		margin: 0 0 26px !important;
	}
	.g4u-site-footer .et_pb_row > .et_pb_column:nth-child(1) .et_pb_text:last-child .et_pb_text_inner { columns: 2; }
}

/* ============================================================
   SERVICE AREAS mega-menu (#mega-menu-item-2648) — grid restructured
   in MMM to 3 equal columns (Alberta | Manitoba | British Columbia),
   span 4 each, so it renders HORIZONTAL like the Services menu. No CSS
   override needed for the layout now (native MMM 3-column grid).
   ============================================================ */

/* ============================================================
   "Schedule a free consultation" CONTACT FORM (.g4u-consult,
   on 13 service pages). Sits on a busy photo → make the heading
   readable, match the brand (orange), and fix the submit button.
   ============================================================ */
/* The form bg is transparent (photo shows through as gray gaps) → wrap the column
   that holds the form in a SOLID dark navy CARD. Heading sits on the card too. */
.g4u-consult .et_pb_column:has(.et_pb_contact_form) {
	background: rgba( 11, 28, 45, 0.94 ) !important;
	padding: 34px 32px 38px !important;
	border-radius: 16px !important;
	box-shadow: 0 18px 46px rgba( 0, 0, 0, 0.42 ) !important;
}

/* heading + intro → WHITE & legible. Divi baked header_2_text_color:#000724 onto
   .et_pb_text_N h2, so we need the extra class to out-specify it. */
.g4u-consult .et_pb_text h1,
.g4u-consult .et_pb_text h2,
.g4u-consult .et_pb_text h3,
.g4u-consult .et_pb_module h2 {
	color: #ffffff !important;
	text-shadow: 0 2px 14px rgba( 0, 0, 0, 0.85 ), 0 0 3px rgba( 0, 0, 0, 0.6 ) !important;
}
.g4u-consult .et_pb_text p,
.g4u-consult .et_pb_text p span {
	color: #ffffff !important;
	text-shadow: 0 1px 8px rgba( 0, 0, 0, 0.8 ) !important;
}

/* fields → solid white, readable, brand focus, rounded, even spacing */
.g4u-consult .et_pb_contact_form .input,
.g4u-consult .et_pb_contact_form select,
.g4u-consult .et_pb_contact_form textarea {
	background-color: #ffffff !important;
	color: #222222 !important;
	border: 1px solid #ccd2da !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	margin-bottom: 16px !important;
}
.g4u-consult .et_pb_contact_form .input::placeholder,
.g4u-consult .et_pb_contact_form textarea::placeholder { color: #6a6a6a !important; opacity: 1 !important; }
.g4u-consult .et_pb_contact_form .input:focus,
.g4u-consult .et_pb_contact_form select:focus,
.g4u-consult .et_pb_contact_form textarea:focus {
	border-color: #ff4700 !important;
	box-shadow: 0 0 0 2px rgba( 255, 71, 0, 0.25 ) !important;
}
.g4u-consult .et_pb_contact_form select { color: #222222 !important; }

/* SUBMIT button → brand orange, ROUNDED corners, full-width, centered.
   Higher specificity (…contact_form…) so Divi's button styles can't win. */
.g4u-consult .et_pb_contact_form_container .et_contact_bottom_container { text-align: center !important; margin-top: 4px !important; }
.g4u-consult .et_pb_contact_form .et_pb_contact_submit.et_pb_button,
.g4u-consult .et_pb_contact_form_container .et_pb_contact_submit {
	background-color: #ff4700 !important;
	border: 2px solid #ff4700 !important;
	color: #ffffff !important;
	width: 100% !important;
	display: block !important;
	text-align: center !important;
	padding: 16px 30px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	border-radius: 10px !important;
	float: none !important;
	margin: 0 !important;
	transition: background-color .15s ease;
}
.g4u-consult .et_pb_contact_form .et_pb_contact_submit.et_pb_button:hover {
	background-color: #e63f00 !important;
	border-color: #e63f00 !important;
	padding: 16px 30px !important;
}
.g4u-consult .et_pb_contact_form .et_pb_contact_submit.et_pb_button:after { display: none !important; }

/* ============================================================
   Mega-menu dropdown panels → WHITE background.
   Max Mega Menu's theme paints the panel a gray gradient
   (rgb(225,225,225)→rgb(170,170,170)); make every dropdown white.
   ============================================================ */
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > ul.mega-sub-menu,
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-megamenu > ul.mega-sub-menu,
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-flyout > ul.mega-sub-menu {
	background: #ffffff !important;
	background-image: none !important;
}
/* nested sub-panels (e.g. city lists) white too */
#mega-menu-wrap-primary-menu #mega-menu-primary-menu ul.mega-sub-menu ul.mega-sub-menu {
	background: #ffffff !important;
	background-image: none !important;
}

/* ============================================================
   MAKE AN APPOINTMENT page (page-id-2601) — brand UI upgrade.
   Plain white page -> light backdrop, centered info, and the
   appointment form as a clean white card with brand-orange button.
   ============================================================ */
.page-id-2601 #main-content > .et_pb_section:not(.g4u-site-footer) {
	background: #f6f7f9 !important;
	padding: 54px 0 74px !important;
}
/* headings + info — centered, consistent */
.page-id-2601 #main-content .et_pb_text { text-align: center; }
.page-id-2601 #main-content .et_pb_text h1,
.page-id-2601 #main-content .et_pb_text h2 { color: #1a1a1a !important; font-weight: 700 !important; }

/* the form = white card on the light section */
.page-id-2601 .et_pb_contact_form_container {
	background: #ffffff !important;
	max-width: 900px !important;
	margin: 10px auto 0 !important;
	padding: 36px 40px 42px !important;
	border-radius: 14px !important;
	box-shadow: 0 10px 34px rgba( 0, 0, 0, 0.08 ) !important;
}
/* fields — clean, readable, brand focus */
.page-id-2601 .et_pb_contact_form .input,
.page-id-2601 .et_pb_contact_form select,
.page-id-2601 .et_pb_contact_form textarea {
	background: #f4f5f7 !important;
	border: 1px solid #e2e4e8 !important;
	border-radius: 8px !important;
	color: #222222 !important;
	padding: 14px 16px !important;
	box-shadow: none !important;
}
.page-id-2601 .et_pb_contact_form .input::placeholder,
.page-id-2601 .et_pb_contact_form textarea::placeholder { color: #888888 !important; opacity: 1 !important; }
.page-id-2601 .et_pb_contact_form .input:focus,
.page-id-2601 .et_pb_contact_form select:focus,
.page-id-2601 .et_pb_contact_form textarea:focus {
	border-color: #ff4700 !important;
	box-shadow: 0 0 0 2px rgba( 255, 71, 0, 0.18 ) !important;
}
/* button — brand orange filled, prominent */
.page-id-2601 .et_pb_contact_submit.et_pb_button {
	background-color: #ff4700 !important;
	border: 2px solid #ff4700 !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	padding: 15px 42px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	float: none !important;
	transition: background-color .15s ease;
}
.page-id-2601 .et_pb_contact_submit.et_pb_button:hover {
	background-color: #e63f00 !important;
	border-color: #e63f00 !important;
	padding: 15px 42px !important;
}
.page-id-2601 .et_pb_contact_submit.et_pb_button:after { display: none !important; }

/* === Consultation form — FORCE heading white + center the submit button.
   #page-container raises specificity above Divi's baked-in #000724 / button float. === */
#page-container .g4u-consult .et_pb_text h1,
#page-container .g4u-consult .et_pb_text h2,
#page-container .g4u-consult .et_pb_text h3,
#page-container .g4u-consult .et_pb_text .et_pb_text_inner h2,
#page-container .g4u-consult .et_pb_text .et_pb_text_inner p,
#page-container .g4u-consult .et_pb_text .et_pb_text_inner span {
	color: #ffffff !important;
}
/* center the Submit button at the bottom (was floated right) */
#page-container .g4u-consult .et_pb_contact_form .et_contact_bottom_container {
	text-align: center !important;
	float: none !important;
	width: 100% !important;
	display: block !important;
}
#page-container .g4u-consult .et_pb_contact_form .et_pb_contact_submit.et_pb_button {
	float: none !important;
	display: inline-block !important;
	width: auto !important;
	min-width: 200px !important;
	margin: 10px auto 0 !important;
	border-radius: 10px !important;
}