/* ---------------------------------------------------------------------------
 * Mineralocity design system.
 *
 * Moved out of divi-engineering/style.css on 2026-09-21 (phase 2) so a vendor
 * update of that third-party child theme cannot destroy it. The theme IS
 * updatable in place — ET credentials are saved and `divi-engineering` sits in
 * WordPress's theme update-check list — and the vendor ships no changelog.
 *
 * Load order: enqueued by inc/assets.php at wp_enqueue_scripts priority 20,
 * i.e. AFTER Divi's own `divi-style-child` (priority 10). That is the same
 * position this CSS already occupied when it lived in the child theme, so the
 * cascade is unchanged.
 *
 * Contents: brand variables, structure, focus states, team grid, breadcrumbs,
 * post navigation, service cards, header + mega-menu, utilities, typography.
 * ------------------------------------------------------------------------ */

 


/* ----------- PUT YOUR CUSTOM CSS BELOW THIS LINE -- DO NOT EDIT ABOVE THIS LINE --------------------------- */ 




/* ########################### */
/* ###### CHANGE COLORS ###### */
/* ########################### */

/* Custom Variables */
:root{
	--color-gold:#E49A25;
	--color-red:#991E1F;
	--color-navy:#0A222F;
	--color-white:#ffffff;
	
	/* Brand greys — guide p.16. Divi Global Color GUIDs recorded in CLAUDE.md §2c. */
	--color-grey-dark:#414042;
	--color-grey-mid:#646568;
	--color-grey-light:#aeb0b3;
	
	--color-accent-primary:#5e9eff;
	
	--color-gold-rgb:228 154 37;
	--color-red-rgb:153 30 31;
	--color-navy-rgb:10 34 47;
	--color-white-rgb:255 255 255;
	--color-grey-dark-rgb:65 64 66;
	--color-grey-mid-rgb:100 101 104;
	--color-grey-light-rgb:174 176 179;
	
	--color-mobile-icon-background:transparent;

	/* Outline card geometry — shared across pages (client, 2026-09-21).
	   Non-colour tokens only: Divi 5 Global Variables support type:"color" alone,
	   so border width/style/radius cannot live there. The card BORDER COLOUR stays
	   on the Divi Global Colour var(--gcid-b9977658-...) — do not duplicate navy here.
	   Defining these leaks nothing; each page's own card rule opts in by consuming them. */
	--card-border-width:1px;
	--card-border-style:solid;
	--card-radius:8px;

	--font-header: Roboto Slab, Helvetica, Arial, Lucida,sans-serif;
	--font-body: Roboto, Helvetica,Arial,Lucida,sans-serif;
}

/* End of Custom Variables */

/* 
 * 
 * Custom Classes 
 * 
 * 
 * */

/* Structure */
/* 
 * ---- Custom Variables ----
 * ---- Custom Classes ----
 * 
 * Generic Style
 * - Focus state
 * - List
 * 
 * Components
 * - Team Member
 * - Breadcrumb
 * - Post Navigation
 * - Service Sidebar Menu
 * - Service Card
 * - Cookies Revisit Button
 * - Pagination
 * - Category Menu
 * - Text Overflow Container
 * - Menu
 * - Mega Menu
 * - Blog post Padding (source: Divi Engine)
 * - Calendly
 * 
 * Pages
 * - Home
 * 
 * Utility Classes
 * 
 * 
 * ---- End of Custom Classes ----
 * ---- Start of Theme Default Classes ----
 * ...
 * 
 *  */

/* 
 * 
 * Generic Style 
 * 
 * */

/* Focus State: the sitewide :focus-visible ring (two-tone navy + white, D13)
   moved to the Divi header layout 98593 -> header Section -> Advanced ->
   Custom CSS (QA 2026-09-24), so it is editable in the Divi builder. The old
   rule here (outline-color: var(--color-accent-primary), 2.69:1 on white,
   1:1 on navy) was deleted so it cannot fight the new ring. */

.outline-none-container input:focus-visible{
	outline-width:0px;
}

/* List */
.custom-flex-list-container .et_pb_text_inner ul,
.custom-flex-list-container .et_pb_text_inner ol{
	display:flex;
	flex-direction:column;
	row-gap:0.625rem;
}
.custom-grid-list-container .et_pb_text_inner ul,
.custom-grid-list-container .et_pb_text_inner ol{
	display:grid;
	row-gap:0.625rem;
}

/* Number List */
.custom-number-list-container .et_pb_text_inner ol li::marker {

}

/* 
 * 
 * Components 
 * 
 * */

/* Team Member Grid */
.custom-team-grid .dipl_team_member_image_wrapper{
	border-radius:30px;
}

.custom-team-grid .dipl_team_grid_item{
	border-top-left-radius:30px;
	border-top-right-radius:30px;
}

.custom-team-grid.dipl_team_grid_0 .dipl_team_grid_item{
	margin-bottom:60px !important;
}
.custom-team-grid.dipl_team_grid_0 .dipl_team_grid_item::before{
	content:" ";
	display:block;
	pointer-events:none;
	opacity:0;
	transition:opacity .3s ease-out;
}

.custom-team-grid.dipl_team_grid_0 .dipl_team_grid_item.dipl_team_lightbox_loader::before{
	opacity:.5;
}

/* Team Member Popup */
.dipl_team_member_lightbox .dipl_team_member_content_wrapper{
	padding:30px 0 60px 40px !important;
}
.dipl_team_member_lightbox .dipl_team_member_description{
	max-height:400px;
	padding-right:40px;
	padding-bottom:10px;
	overflow-y:auto;
}

/* Breadcrumb */
.breadcrumb-container{
	font-size:14px;
	line-height:1.4;
}

/* Apply breadcrumb gutter in between */
.breadcrumb-container .et_pb_code_inner > span{
	display: flex;
    flex-direction: row;
    column-gap: .75rem;
}

@media (max-width: 980px) {
	.breadcrumb-container .et_pb_code_inner > span{
		display: inline-block;
		--breadcrumb-gutter:8px;
	}
	.breadcrumb-container .et_pb_code_inner > span > span:not(:first-child):not(:last-child){
		margin-left:var(--breadcrumb-gutter);
		margin-right:var(--breadcrumb-gutter);
	}
	.breadcrumb-container .et_pb_code_inner > span > span:first-child{
		margin-right:var(--breadcrumb-gutter);
	}
	.breadcrumb-container .et_pb_code_inner > span > span:last-child{
		margin-left:var(--breadcrumb-gutter);
	}
}

.breadcrumb-container a{
	color:var(--color-navy);
	position:relative;
}
.breadcrumb-container a::after{
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  border-radius: 5px;
  height: 1px;
  bottom: 0;
  left: 0;
  background: currentcolor;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.breadcrumb-container a:hover::after{
  transform: scaleX(1);
  transform-origin: bottom left;
}

.breadcrumb-container .breadcrumb_last{
	color:#666;
	font-weight:bold;
}

/* Post Navigation - Prev & Next */
.post-nav-container{
	display: flex;
    flex-direction: row;
    justify-content: space-between;
	gap:1rem;
}

.post-nav-container.et_pb_posts_nav.nav-single:after{
	display:none;
}

.post-nav-container .nav-previous::before{
	content:"Previous";
}

.post-nav-container .nav-next::before{
	content:"Next";
}

.post-nav-container .nav-previous::before,
.post-nav-container .nav-next::before{
	font-size:14px;
	color:var(--color-red);
	text-transform:uppercase;
	font-weight:bold;
}

.post-nav-container .nav-previous,
.post-nav-container .nav-next{
	display:flex;
	flex-direction:column;
	flex:1;
}

.post-nav-container .nav-previous a,
.post-nav-container .nav-next a{
	line-height:1.2;
}

.post-nav-container .nav-next{
	align-items:flex-end;
	text-align:right;
}


.single-post .post-nav-container .nav-previous a:hover .nav-label,
.single-post .post-nav-container .nav-next a:hover .nav-label{
	text-decoration:underline;
}

@media (max-width: 980px) {
	.post-nav-container .meta-nav{
		display:none;
	}
	
	.post-nav-container .nav-previous a:hover .nav-label,
	.post-nav-container .nav-next a:hover .nav-label,
	.post-nav-container.link-underline-hover .nav-previous a:hover .nav-label,
	.post-nav-container.link-underline-hover .nav-next a:hover .nav-label{
		text-decoration:underline;
	}
}

@media (min-width: 981px) {
	.post-nav-container.link-underline-hover .nav-previous a:hover .nav-label,
	.post-nav-container.link-underline-hover .nav-next a:hover .nav-label{
		text-decoration:underline;
	}
	
	.post-nav-container:not(.link-underline-hover) .nav-previous a .nav-label::after,
	.post-nav-container:not(.link-underline-hover) .nav-next a .nav-label::after{
	  content: '';
	  position: absolute;
	  width: 100%;
	  transform: scaleX(0);
	  border-radius: 5px;
	  height: 2px;
	  bottom: 0;
	  left: 0;
	  background: currentcolor;
	  transform-origin: bottom right;
	  transition: transform 0.25s ease-out;
	}
	.post-nav-container:not(.link-underline-hover) .nav-previous a:hover .nav-label::after,
	.post-nav-container:not(.link-underline-hover) .nav-next a:hover .nav-label::after{
	  transform: scaleX(1);
	  transform-origin: bottom left;
	}
	
	.single-post .post-nav-container .nav-previous a .nav-label::after,
	.single-post .post-nav-container .nav-next a .nav-label::after{
		display:none;
	}
}

/* 
 * Service Sidebar Menu
 *  */

.custom-menu-sidebar .nav li>ul {
    opacity: 1;
    visibility: visible;
}
.custom-menu-sidebar .nav li>ul li{
	line-height:1.4;
}
.custom-menu-sidebar .nav li.current_page_item > a,
.custom-menu-sidebar .nav li>ul li.current_page_item > a{
	font-weight:700;
}

/* Service Card */
.service-card-container > div {
	display:flex;
	flex-direction:column;
}
.service-card-container > div .et_pb_button_module_wrapper{
	margin-top:auto;
}

.service-card__btn{
	width:calc(100% - 50px);
	margin-left:25px;
	margin-right:25px;
}
/* 
 * - Cookies Revisit Button 
 * */
.cky-btn-revisit-wrapper{
	display:none !important;
}

/* 
 * - Pagination in Blog 
 * */

.et_pb_ajax_pagination_container > div + div{
	width: 100%;
	display:inline-flex;
	justify-content:center;
}

.wp-pagenavi {
    padding-top: 15px;
    display: inline-flex;
	align-items:center;
    gap: 22px;
}

.wp-pagenavi span.current{
	font-weight:bold !important;;
	border-bottom:2px solid var(--color-navy);
}
.wp-pagenavi .pages {
	border: none;
}
.wp-pagenavi a.page,
.wp-pagenavi span.current {
	padding-left:5px;
	padding-right:5px;
}
.wp-pagenavi span.extend,
.wp-pagenavi a.first,
.wp-pagenavi a.last {
	border: none!important;
}

.et_pb_blog_0 .wp-pagenavi a.first, .et_pb_blog_0 .wp-pagenavi a.last,
.et_pb_blog_0_tb_body .wp-pagenavi a.first, .et_pb_blog_0_tb_body .wp-pagenavi a.last {
	border-radius:100px;
	color:var(--color-white) !important;
	background-color:var(--color-navy);
	font-weight:bold !important;
	padding:.5rem 2rem;
	
	transition:background-color .3s ease-in-out;
}

.et_pb_blog_0 .wp-pagenavi a.last:hover,
.et_pb_blog_0_tb_body .wp-pagenavi a.last:hover {
	background-color:rgba(var(--color-navy-rgb) / 80%);
}

/* 
 * End of Pagination
 *  */

/* 
 * - Category Menu
 * */

.et_pb_widget.widget_block .cat-item a{
	transition:color .3s ease-out;
}

.et_pb_widget.widget_block .current-cat a[aria-current]{
	color:var(--color-navy);
	font-weight:500;
}

/* Header */
.text-overflow-container .et_pb_text_inner p{
	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
}

/* 
 * - Menu
 *  */
.de-custom-menu .nav li li.menu-item{
	transition:all .25s ease-in-out;
}

.header-menu.et_pb_menu--with-logo .et_pb_menu__menu>nav>ul>li:last-child .sub-menu{
	left:auto;
	right:0;
}
.de-custom-menu.et_pb_menu .et-menu-nav>ul .mega-menu > ul.sub-menu{
	box-shadow:0px 24px 50px -6px rgba(0,0,0,0.2);
}
.de-custom-menu.et_pb_menu .et-menu-nav>ul .mega-menu > ul.sub-menu li li:hover > a{
	font-weight:700;
}

/* Apply to current menu item only (override the default settings that apply to all children)
   Current state is weight, not hue: gold on white measures 2.35:1, below the WCAG AA 4.5:1
   minimum for text. Brand navy is 16.37:1. Bolding carries the state instead. */
.et_pb_menu_0_tb_header.et_pb_menu .nav li ul.sub-menu li.current-menu-item > a{
	color: var(--color-navy) !important;
	font-weight: 700 !important;
}

/* The parent of the current sub-item is bolded too, so the open trail is legible
   at the top level as well as inside the dropdown. */
.et_pb_menu_0_tb_header.et_pb_menu .nav > li.current-menu-item > a,
.et_pb_menu_0_tb_header.et_pb_menu .nav > li.current-menu-parent > a,
.et_pb_menu_0_tb_header.et_pb_menu .nav > li.current-menu-ancestor > a,
.et_pb_menu_0_tb_header.et_pb_menu .nav > li.current_page_item > a,
.et_pb_menu_0_tb_header.et_pb_menu .nav > li.current_page_parent > a,
.et_pb_menu_0_tb_header.et_pb_menu .nav > li.current_page_ancestor > a{
	color: var(--color-navy) !important;
	font-weight: 700 !important;
}

/* Menu - dropdown in mobile */

.et_pb_menu_0_tb_header.full-width-menu{
	padding-left:0;
	padding-right:0;
}

.et_pb_menu_0_tb_header.full-width-menu .et_pb_menu_inner_container{
	padding-right: 1.5rem;
    padding-left: 3rem;
}

.mobile_nav.opened .et_mobile_menu{
	overflow-y: auto;
    max-height: calc(100vh - 74px);
}

@media only screen and (max-width: 980px) {
	.et-db #et-boc .et-l ul.et_mobile_menu>li.current-menu-ancestor > a:first-child,
	.et-db #et-boc .et-l ul.et_mobile_menu>li.current-menu-ancestor .current-menu-parent > a:first-child{
		text-decoration:underline;
	}
	
	.et_pb_menu_0_tb_header.et_pb_menu ul#mobile_menu1 li.current-menu-item  a {
        color: unset !important;
    }
    .et_pb_menu_0_tb_header.et_pb_menu ul#mobile_menu1 li.current-menu-item > a {
        color: var(--color-navy) !important;
        font-weight: 700 !important;
    }
    .et_pb_menu_0_tb_header.et_pb_menu ul#mobile_menu1 > li.current-menu-parent > a:first-child,
    .et_pb_menu_0_tb_header.et_pb_menu ul#mobile_menu1 > li.current-menu-ancestor > a:first-child {
        color: var(--color-navy) !important;
        font-weight: 700 !important;
    }
}

/* 
 * - Mega Menu 
 * */

/* -- Sub-Submenu */
.de-custom-menu.et_pb_menu .et-menu-nav>ul .mega-menu > ul.sub-menu li li.menu-item-has-children > a{
	display:flex;
}
.de-custom-menu.et_pb_menu .et-menu-nav>ul .mega-menu > ul.sub-menu li li.menu-item-has-children > a::after {
    content: "\00BB";
    display: block;
	position:relative;
    top: 0;
    right: 0;
    margin-top: -5px;
    margin-left: 11px;
}

.de-custom-menu.et_pb_menu .et-menu-nav>ul .mega-menu > ul.sub-menu li li.menu-item-has-children li{
	margin-left:20px;
}

.de-custom-menu.et_pb_menu .et-menu-nav>ul .mega-menu > ul.sub-menu li{
	pointer-events:none;
	transform: translate(0px, -10px);
	opacity:0;
	
    transition: transform .8s ease-in-out,opacity .8s ease-in-out;
}
.de-custom-menu.et_pb_menu .et-menu-nav>ul .mega-menu:hover > ul.sub-menu li,
.de-custom-menu.et_pb_menu .et-menu-nav>ul .mega-menu.et-show-dropdown > ul.sub-menu li{
	pointer-events:auto;
	transform: translate(0px, 0px);
	opacity:1;
}

@media (min-width: 981px) {
	/* 	-- Menu Item */
	.header-menu.et_pb_menu--with-logo .et_pb_menu__menu>nav>ul>li{
		padding-top:3px;
		border-bottom:3px solid transparent;
		transition:all .25s ease-in-out;
		box-sizing:border-box;
	}
	
	/* 	-- Menu Item Hover & Active state */
	.single-post .header-menu.et_pb_menu--with-logo .et_pb_menu__menu>nav>ul>li.menu-news,
	.archive .header-menu.et_pb_menu--with-logo .et_pb_menu__menu>nav>ul>li.menu-news,
	.header-menu.et_pb_menu--with-logo .et_pb_menu__menu>nav>ul>li:hover,
	.header-menu.et_pb_menu--with-logo .et_pb_menu__menu>nav>ul>li.current-menu-parent,
	.header-menu.et_pb_menu--with-logo .et_pb_menu__menu>nav>ul>li.current-menu-ancestor,
	.header-menu.et_pb_menu--with-logo .et_pb_menu__menu>nav>ul>li.current_page_item,
	.header-menu.et_pb_menu--with-logo .et_pb_menu__menu>nav>ul>li.current_page_item.menu-item-has-children{
		border-bottom-color:rgba(var(--color-white-rgb) / 100%);
	}
	
	/* 	-- Submenu */
	.et_pb_menu .et_pb_menu__menu>nav>ul>li>ul{
		border-top:0;
		top:calc(100% - 1px);
		border-bottom:0;
	}
}

/* - Mega-menu Container */
.de-custom-menu.et_pb_menu .et-menu-nav>ul .mega-menu > ul.sub-menu{
	margin-top:-3px;
	
	width: 100%;
    max-width: 980px;
    right: 0;
    margin-left: auto;
	
	padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    padding-left: 6rem !important;
    padding-right: 6rem !important;
}

/* - Mega-menu header item */
.de-custom-menu.et_pb_menu .et-menu-nav>ul .mega-menu > ul.sub-menu > li.menu-item > a{
	font-size:1.125rem !important;
	font-family:var(--font-header);
}
.de-custom-menu.et_pb_menu .et-menu-nav>ul .mega-menu > ul.sub-menu > li.menu-item > a::after{
	content:" ";
	display:block;
	position:relative;
	width:80%;
	border-bottom:1px solid rgba(255,255,255,.2);
	margin-bottom:5px;
}

.de-custom-menu.et_pb_menu .et-menu-nav>ul .mega-menu > ul.sub-menu > li.menu-item.et_pb_menu_page_id-102079.menu-item-102100 > a::after {
    padding-top: 10px;
}

/* Adjust the Line height of Mega Menu child */
.de-custom-menu .et-menu .mega-menu li li a {
    padding-top: 8px;
    padding-bottom: 10px;
}

/* Disable the last child border bottom */
.et-menu-nav li.mega-menu>ul>li:last-child,
.de-custom-menu.et_pb_menu .et-menu-nav>ul .mega-menu > ul.sub-menu > li.menu-item li:last-child{
	border-bottom:0;
}

/* 
 * End of Mega Menu
 *  */


/* 
 * Blog Container Padding
 *  */
.blog-container.et_pb_post_content .et_pb_section {
	padding: 0 !important;
}
 .blog-container.et_pb_post_content .et_pb_row {
	padding: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* 
 * - Calendly Related
 *  */
.btn-calendly{
	cursor:pointer;
}

.calendly-overlay{
	z-index:99999 !important;
}


/* 
 * 
 * Pages
 *  
 * */

/* - Home */
@media (max-width: 1050px) {
	.et_pb_row.blurbs-hero{
		width:100%
	}
	.blurbs-hero > div{
		margin-left:100px;
	}
}
@media (min-width: 981px) {
    .hero-home-column-1 {
        max-width: 550px;
    }
}


/* Utility Classes */

/* Width */
.w-full{
	width:100%;
}

@media (min-width: 981px) {
	.w-md-auto{
		width:auto;
	}
}

/* Margin */
.mb-0{
	margin-bottom:0;
}
.mr-0{
	margin-right:0 !important;
}


/* visibility */
.hidden{
	display:none !important;
}
.d-none{
	display:none;
}

.block{
	display:block;
}


@media (min-width: 981px) {
	.d-md-none{
		display:none;
	}
	.d-md-block{
		display:block;
	}
	.d-md-flex{
		display:flex;
	}
}
/* Flex */
.flex{
	display:flex;
}
.flex-1{
	flex:1;
}
.flex-row{
	flex-direction:row;
}
.flex-col{
	flex-direction:column;
}
.flex-col-reverse{
	flex-direction:column-reverse;
}
@media (min-width: 981px) {
	.flex-md-row{
		flex-direction:row;
	}
	.flex-md-col{
		flex-direction:column;
	}
	.flex-md-col-reverse{
		flex-direction:column-reverse;
	}
}


.align-self-center{
	align-self:center;
}
.items-center{
	align-items:center;
}
.justify-start{
	justify-content:flex-start;	
}
.justify-center{
	justify-content:center;
}
.justify-end{
	justify-content:flex-end;
}
.justify-self-end{
	justify-self:end;
}

@media (min-width: 768px) {
	.justify-sm-center{
		justify-content:center;
	}
}
@media (min-width: 981px) {
	.justify-md-center{
		justify-content:center;
	}
}

/* Grid */
.grid{
	display:grid;
}
.grid-cols-2{
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3{
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4{
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gap-2{
	gap:0.625rem; /* 10px */
}
.gap-x-2{
	column-gap:0.625rem; /* 10px */
}
.gap-y-2{
	row-gap:0.625rem; /* 10px */
}
.gap-4{
	gap:1.25rem; /* 20px */
}
.gap-x-4{
	column-gap:1.25rem; /* 10px */
}
.gap-y-4{
	row-gap:1.25rem; /* 20px */
}
.gap-6{
	gap:1.875rem; /* 24px */
}
.gap-y-6{
	row-gap:1.875rem; /* 24px */
}

@media (min-width: 981px) {
    .d-md-flex{
		display:flex;
	}
	.grid-cols-md-2{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.grid-cols-md-3{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.grid-cols-md-4{
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
@media (min-width: 1280px) {
	.grid-cols-lg-4{
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Typography */
.whitespace-nowrap{
	white-space:nowrap;
}
.flex-wrap{
	flex-wrap: wrap;
}
.text-white{
	color:#ffffff;
}
.link-white a{
	color:#ffffff;
	transition:opacity .15s ease-out;
}
.link-white a:hover{
	opacity:0.6;
}
.text-center{
	text-align:center;
}

.text-capitalize,.text-capitalize *{
	text-transform:capitalize;
}

/* 
 * 
 * End of Utility Classes 
 * 
 * */


/* 
 * 
 * End of Custom Classes
 *  
 * */


/* Theme default classes */

/* ### Vertical line with dot ### */
.dot-right-bottom:after,
.dot-left-top:after,
.dot-left-bottom:after,
.dot-right-top:after,
.sub-page-dot.dot-right-bottom:after {
    color: var(--color-gold); /* Dot color */
}

/* ### Border bottom line dropdown menu ### */
/* .de-custom-menu .nav li li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
} */

.header-v2 .de-custom-menu .nav li li,
.header-v3 .de-custom-menu .nav li li,
.header-v4 .de-custom-menu .nav li li {
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Border line color */
}

/* #### Collaping Mobile Menu #### */

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after {
	color: var(--color-navy); /* Icon color -- matches the desktop caret, which inherits the navy link colour */
	background: var(--color-mobile-icon-background); /* Icon background color */
}

/* ### Slide icons color - home page ### */
.slide-active .et_pb_icon_wrap,
.slide-icon:hover .et_pb_icon_wrap {
	background-color: var(--color-gold); /* Background icon */
	border: 1px solid var(--color-gold); /* Border icon */
    color: #fff; /* Icon color */
}

.slide-active .et_pb_icon_wrap .et-pb-icon,
.slide-icon:hover .et_pb_icon_wrap .et-pb-icon {
	color: #fff !important; /* Icon hover color */
}

/* ### Service card V2 ### */
.card-overlay-triangle:before {
	background-color: var(--color-gold); /* Background triangle */
}

.active-card-v2 .service-card-v2:before {
	background-color: rgb(var(--color-gold-rgb) / 74%); /* Background triangle when hovered */
}

.card-overlay-triangle:after {
	content: "READ MORE"; /* Read more text */
    color: var(--color-white); /* Read more text color */
}

/* ### Person module ### */
.person-module .et_pb_member_social_links {
    background-color: var(--color-gold); /* Social link background color */
}

.person-module .et_pb_team_member_image:before {
	content: "READ MORE"; /* Read more text */
	background-color: rgb(var(--color-navy-rgb) / 74%); /* background overlay color */
    color: #fff; /* Read more text color */	
}

/* ### Blog fullwidth ### */
.blog-fullwidth article {
	border-bottom: 5px solid var(--color-gold) !important; /* Bottom border color */
}

.blog-sidebar .et_pb_widget {
    border-bottom: 5px solid var(--color-gold); /* Bottom border color */
	background-color: #fff; /* Widget background color */
}

.blog-sidebar .et_pb_widget ul li::before {
    color: var(--color-gold);	/* Widget list icon color */
}

/* ### Header V2 ### */
.header-v2 .header-menu.et_pb_menu--with-logo .et_pb_menu__menu>nav>ul>li {
    border-left: 1px solid rgba(255,255,255,.2); /* Header vertical line color */
}

.header-menu.et_pb_menu--with-logo .et_pb_menu__menu>nav>ul>li {
    border-left: 0 !important; /* Header vertical line color */
}

/* ### Header V4 ### */
.header-v4 .de-custom-menu li.current-menu-item,
.header-v4 .de-custom-menu li:hover {
    background-color: var(--color-gold);	/* Background color */	
}

.header-v4 .de-custom-menu.et_pb_menu ul li.current-menu-item a,
.header-v4 .de-custom-menu.et_pb_menu ul li:hover a {
	color: #fff !important /* Text color */;
	opacity: 1;
}

/* ### Slide-in scrollbar ### */
#style-scrollbar::-webkit-scrollbar-track,
#style-scrollbar::-webkit-scrollbar {
  background-color: #F5F5F5; /* Scroll bar color */
}

#style-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--color-gold); /* Scroll bar handle color */
}

/* ### END COLORS ### */

/* ### Menu ### */
.header-menu .et_pb_menu_inner_container {
	height: 100%;
}

.header-menu.et_pb_menu--with-logo .et_pb_menu__menu>nav>ul>li {
    margin-top: 0;
    border-left: 1px solid #e1e1e1;
    padding: 20px 30px;
}

.header-menu.et_pb_menu--with-logo .et_pb_menu__menu>nav>ul>li>a {
    align-self: center;
}

.header-column {
	display:flex;
}

.header-menu {
	display: flex;
    align-items: center;
}

.de-custom-menu,
.et_pb_menu_inner_container {
	width: 100%;
}

.blurb-header-phone .et_pb_blurb_content {
	display: flex;
    justify-content: flex-end;
	align-items: center;
}

.blurb-header-phone .et_pb_main_blurb_image {
	margin-bottom: 0px;
}

.blurb-header-phone h4.et_pb_module_header {
	padding-bottom: 0px;
}

.top-custom-header {
	display: flex;
    align-items: center;
}

@media (max-width: 980px) {
.de-custom-menu.et_pb_menu .et_mobile_nav_menu {
    float: right;
}}

.header-slide-in-icon .et_pb_icon_wrap  {
	height: 100%;
	display: flex;
    align-items: center;
}

.hero-home-column-1 {
	-webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.de-custom-menu .et-menu-nav > ul .mega-menu > ul.sub-menu > li.menu-item-has-children>a:first-child::after {
    top: 12px !important;
	right:0 !important;
}

/* ### Menu header V4 ### */
.header-v4 .de-custom-menu li {
	-webkit-transition: all 0.2s 0s ease-in-out;
	-moz-transition: all 0.2s 0s ease-in-out;
	-o-transition: all 0.2s 0s ease-in-out;
	transition: all 0.2s 0s ease-in-out;
}

.header-v4 .de-custom-menu {
	padding-right: 0px !important;
}

/* ########## Dropdown menu ########### */

.de-custom-menu.et_pb_menu .et-menu-nav>ul ul {
    padding: 0px 0 !important;
	border-radius: 0px;
}

.de-custom-menu .nav li li {
	padding: 0 0px !important;
}

.de-custom-menu .nav li ul {
    width: 240px;
}

.de-custom-menu .et-menu li li a {
    width: 240px !important;
	padding: 12px 20px;
	font-size: 14px !important;
	line-height:1.4;
}

.de-custom-menu .nav li li:last-child {
/*     border-bottom: 1px solid rgba(255, 255, 255, 0.2); */
	padding-bottom:3px;
}

.de-custom-menu .fas {
	padding-right: 10px;
}

/* ### General ### */

@media (max-width: 980px) {
.remove-margin-column {
	margin-bottom: 0px !important;
}}

/* ### Logos row ### */
@media (min-width: 981px) {
.logos-row {
    display: flex;
    align-items: center;
}}

/* ### Circle counter percent ### */
.circle-counter-percent .percent-sign {
	font-size:26px;
}

/* ### Projects special section ### */

@media (min-width: 981px) {
.project-special-section .et_pb_column.et_pb_column_1_2>.et_pb_row_inner.et_pb_gutters2>.et_pb_column_1_4, .project-special-section .et_pb_gutters2 .et_pb_column_1_2>.et_pb_row_inner>.et_pb_column_1_4 {
    width: 49.25%;
    margin-right: 1.5%;
}

.project-special-section .et_pb_gutters2 .et_pb_column_1_2, .project-special-section .et_pb_gutters2.et_pb_row .et_pb_column_1_2 {
    width: 49.65%;
    margin-right: 0.7%;
}

.project-overlay:before {
	content: '';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;	
	opacity:0;
	-webkit-transition: all 0.2s 0s ease-in-out;
	-moz-transition: all 0.2s 0s ease-in-out;
	-o-transition: all 0.2s 0s ease-in-out;
	transition: all 0.2s 0s ease-in-out;
	background-color: rgb(0 0 0 / 43%);
}

.project-overlay:hover:before {
	opacity:1;
}}

/* ### Projects section 2 columns ### */
@media (min-width: 981px) {
.project-row.et_pb_gutters2 .et_pb_column_1_2, .project-row.et_pb_gutters2.et_pb_row .et_pb_column_1_2 {
    width: 49.75%;
}

.project-row.et_pb_gutters2 .et_pb_column, .project-row.et_pb_gutters2.et_pb_row .et_pb_column {
    margin-right: 0.5%;
}}

/* ### Projects section 4 columns ### */
@media (min-width: 981px) {
.project-row.et_pb_gutters2 .et_pb_column_1_4, .project-row.et_pb_gutters2.et_pb_row .et_pb_column_1_4 {
    width: 24.625%;
}}

/* ### Projects section 5 columns ### */
@media (min-width: 981px) {
.project-row.et_pb_gutters2 .et_pb_column_1_5, .project-row.et_pb_gutters2.et_pb_row .et_pb_column_1_5 {
    width: 19.6%;
}}

/* ### Projects overlay columns ### */
.project-row .et_pb_column:before {
	content: '';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;	
	opacity:0;
	z-index:-1;
	-webkit-transition: all 0.2s 0s ease-in-out;
	-moz-transition: all 0.2s 0s ease-in-out;
	-o-transition: all 0.2s 0s ease-in-out;
	transition: all 0.2s 0s ease-in-out;
	background-color: rgb(0 0 0 / 43%);
}

.project-row .et_pb_column:hover:before {
	opacity:1;
} 

/* ### Custom slider ### */

/* ### Slide icons ### */
.slide-active .et_pb_icon_wrap,
.slide-icon:hover .et_pb_icon_wrap {
	cursor: pointer;
}

.slide-icon .et_pb_icon_wrap {
	-webkit-transition: all 0.2s 0s ease-in-out;
	-moz-transition: all 0.2s 0s ease-in-out;
	-o-transition: all 0.2s 0s ease-in-out;
	transition: all 0.2s 0s ease-in-out;	
}

.icon-row {
	display: flex;
	flex-wrap: wrap;
}

#slider-icon-row .slide-icon {
	margin-left: 0px !important;
    margin-right: 20px !important;	
}

/* ### Slide text ### */
.slider-text {
	display: none;
}

.slider-text.active-slide-text {
	display: block;
}

/* ### Slide image ### */
.slider-image {
	position: absolute;
	visibility: hidden;
  	opacity: 0;
}

.slider-image.active-slide-image {
	visibility: visible;
  	opacity: 1;
	position: relative;
}

/* ### Service card V1 ### */
.service-card-blurb-v1 {
	position: absolute;
    bottom: -125px;
	-webkit-transition: all 0.4s 0s ease-in-out;
	-moz-transition: all 0.4s 0s ease-in-out;
	-o-transition: all 0.4s 0s ease-in-out;
	transition: all 0.4s 0s ease-in-out;
}

.active-card-blurb-v1 .service-card-blurb-v1 {
	bottom: 0px;
}

/* ### Service card V2 ### */
.card-overlay-triangle:before {
	content:"";
	width: 100%;
	height: 100%;
	position: absolute;
	top:-70%;
	right:-70%;
	z-index: 9;
	transform: rotate(45deg);
	-webkit-transition: all 0.4s 0s ease-in-out;
	-moz-transition: all 0.4s 0s ease-in-out;
	-o-transition: all 0.4s 0s ease-in-out;
	transition: all 0.4s 0s ease-in-out;
}

.active-card-v2 .service-card-v2:before {
	width: 300%;
	height: 300%;
}

.card-overlay-triangle:after {
	font-size: 18px;
	font-weight: 900;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
	opacity:0;
	-webkit-transition: all 0.4s 0s ease-in-out;
	-moz-transition: all 0.4s 0s ease-in-out;
	-o-transition: all 0.4s 0s ease-in-out;
	transition: all 0.4s 0s ease-in-out;
}

.active-card-v2 .service-card-v2:after {
	opacity:1;
}

/* ### Service card V3 ### */
.service-card-blurb-v3 {
	position: absolute;
    top: 100%;
	margin-top:-8px;
	height: 100%;
	display: flex;
    align-items: center;
	-webkit-transition: all 0.4s 0s ease-in-out;
	-moz-transition: all 0.4s 0s ease-in-out;
	-o-transition: all 0.4s 0s ease-in-out;
	transition: all 0.4s 0s ease-in-out;
}

.active-card-blurb-v3 .service-card-blurb-v3 {
	top: 0%;
	margin-top:0px;
}

/* ### Service card V3 ### */
.project-blurb {
	position: absolute;
    top: 100%;
	margin-top:-8px;
	height: 100%;
	display: flex;
    align-items: center;
	-webkit-transition: all 0.4s 0s ease-in-out;
	-moz-transition: all 0.4s 0s ease-in-out;
	-o-transition: all 0.4s 0s ease-in-out;
	transition: all 0.4s 0s ease-in-out;
}

.active-project .project-blurb {
	top: 0%;
	margin-top:0px;
}

@media (min-width: 981px) {
.project-5-column.et_pb_gutters1 .et_pb_column_1_5, .project-5-column.et_pb_gutters1.et_pb_row .et_pb_column_1_5 {
    width: 19.68%;
}
	
.project-5-column.et_pb_gutters1 .et_pb_column, .project-5-column.et_pb_gutters1.et_pb_row .et_pb_column {
    margin-right: .4%;
}}

/* ### Person module ### */
.person-module .et_pb_member_social_links {
	position: absolute;
	bottom:0;
	left:0;
	width: 100%;
    padding: 5px 20px 0px 20px;
	visibility: hidden;
	z-index:-999;
	-webkit-transition: all 0.4s 0s ease-in-out;
	-moz-transition: all 0.4s 0s ease-in-out;
	-o-transition: all 0.4s 0s ease-in-out;
	transition: all 0.4s 0s ease-in-out;
}

.person-module:hover .et_pb_member_social_links {
	bottom:-32px;
	visibility: visible;
	z-index:1;
}

.et_pb_team_member_description {
	padding: 10px 20px;
}

.et_pb_team_member_description h4.et_pb_module_header {
	padding-bottom: 0px;
}

.person-module .et_pb_team_member_image:before {
	font-size: 18px;
	font-weight: 900;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
	opacity:0;
	-webkit-transition: all 0.4s 0s ease-in-out;
	-moz-transition: all 0.4s 0s ease-in-out;
	-o-transition: all 0.4s 0s ease-in-out;
	transition: all 0.4s 0s ease-in-out;	
}

.person-module:hover .et_pb_team_member_image:before {
	opacity:1;
}

/* ### Blurbs under hero ### */
@media (max-width: 479px) {
.blurbs-hero .et_pb_blurb_container {
	padding-left: 6px !important;
}}

/* ### Blog fullwidth ### */
.blog-fullwidth article {
    padding-bottom: 45px;	
}

.blog-sidebar .et_pb_widget {
	padding: 25px;
    box-shadow: 0 0 30px 5px rgb(0 0 0 / 10%);
	border-radius: 3px;
}

.blog-sidebar .et_pb_widget ul li::before {
	content: "\25a0";
    font-weight: bold;
    display: inline-block;
    width: 1.5em;
    margin-left: -1.5em;
    margin-top: -2px;
    float: left;	
}

.blog-sidebar.et_pb_widget_area ul {
    margin: 0 0 1.5em 1.5em !important;
}

/* #### Collaping Mobile Menu #### */

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after {
	position: static; /* centred by the flex parent below, not nudged by `top` */
	font-family: "ETModules";
	content: '\33';
}

ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open>.mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open>.mobile-toggle-icon::after {
	content: '\32';
}

.et_mobile_menu .menu-item-has-children>a {
    font-weight: 500 !important; 
}

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon {
	width: 44px;
	padding: 0px !important;
	border: none;
	position: absolute;
	right: 0px;
	/* Height of ONE row (link padding 1rem x2 + its 26px line-height), so the
	   glyph stays beside the parent label. Must NOT be bottom:0/height:auto --
	   an expanded <li> contains its .sub-menu, so that centres the glyph across
	   the whole open block and drops it next to the first child item. */
	top: 0;
	height: calc(2rem + 26px);
	max-height: none;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
	background-color: transparent;
}

ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
	position: relative;
}

.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent;
}

ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
/* 	display: none !important; */
/* 	visibility: hidden !important; */
	max-height: 0;
    transition: max-height 0.5s ease-in-out;
    overflow: hidden;
}

ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
/* 	display: block !important; */
/* 	visibility: visible !important; */
	max-height: 900px;
    transition: max-height 0.5s ease-in-out;
}

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon {
	text-align: center;
	opacity: 1;
}

/* ### Responsive from 981px ### */

@media (min-width: 981px) and (max-width: 1200px) { 
.hero-home-column-1 {
	padding: 35px !important;	
}}

@media (min-width: 1201px) and (max-width: 1500px) { 
.hero-home-column-1 {
	padding: 75px !important;	
}}

@media (min-width: 981px) and (max-width: 1500px) { 
.hero-home-column-1 h1 {
    font-size: 54px !important;
}}

@media (min-width: 981px) and (max-width: 1100px) { 
.header-menu.et_pb_menu--with-logo .et_pb_menu__menu>nav>ul>li {
    padding: 0px 20px !important;
}}

@media (max-width: 981px) { 
	.hero-home-column-1 {
		-webkit-backdrop-filter: blur(0px);
		backdrop-filter: blur(0px);
	}
}



/* ### Responsive from 981px - single service page ### */

@media (min-width: 981px) and (max-width: 1400px) {
.single-service-column-2 {
	padding: 20px !important;
}

.single-service-column-2 .et_pb_blurb_description p {
	font-size: 18px !important;	
}

.single-service-column-2 .et_pb_blurb_0 .et_pb_main_blurb_image .et_pb_image_wrap {
    width: 50px !important;
}}

/* ### Responsive from 981px - project page ### */

@media (min-width: 981px) and (max-width: 1400px) {
.project-column .et_pb_blurb.project-blurb {
	padding-right: 20px!important;
    padding-left: 20px!important;
}

.project-column .et_pb_blurb.project-blurb .et_pb_blurb_description {
	font-size: 12px;
	line-height: 1.5em;
}

.project-column .et_pb_blurb.project-blurb .et_pb_main_blurb_image {
    display: inline-block;
	margin-bottom: 10px;
}}

@media (max-width: 980px) {
.circle-counter-row .et_pb_column_1_6 {
	width: 100%!important;
	margin-right: 0px !important;
	margin-bottom: 30px !important;
}}

/* ### Line dot - top left to right bottom ### */

.dot-right-bottom:after {
	content: '\25CF';
    font-size: 20px;
    position: absolute;
    right: -7px;
	top:65px;	
}

.dot-left-top:after {
	content: '\25CF';
    font-size: 20px;
    position: absolute;
    left: -7px;
	top:-15px;
}

.dot-left-bottom:after {
	content: '\25CF';
    font-size: 20px;
    position: absolute;
    left: -7px;
	top:65px;
}

.dot-right-top:after {
	content: '\25CF';
    font-size: 20px;
    position: absolute;
    right: -7px;
    top: -15px;
}

.sub-page-dot.dot-right-bottom:after {
	content: '\25CF';
    font-size: 20px;
    position: absolute;
    right: -7px;
	top:15px;	
}


.et-l--footer .et_builder_inner_content {
    z-index: 9; /*99999*/
}

/* Set the Footer Email Subscription label to be sr-only */
.et_pb_contact_form_label {
	display:block !important;
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}
  
.slide-in-section .custom-menu-v1-row:before {
  content:"";
  background-color: #000;
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
} 

/* ###  Style scroll bar ### */

#style-scrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 0px;
}

#style-scrollbar::-webkit-scrollbar {
  width: 10px;
}

#style-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
}

.custom-menu-v1-row {
	overflow: hidden;
  	transform: translateX(100%);
  	transition: all .3s ease;
	opacity:1;
}

.custom-menu-v1-row.active-menu-v1 {
  	overflow: hidden;
  	transform: translateX(0%);
  	transition: all .3s ease;
	opacity:1;
}
  
@media (max-width: 980px) {
.menu-v1-desktop-column {
   	height: 100vh; 
}} 
  
/* ###  Hide on visual builder ### */

.et-fb .slide-image-2,
.et-fb .slide-image-3,
.et-fb .slide-image-4,
.et-fb .slide-image-5,
.et-fb .slide-image-6 {
display: none;
}

/* Blog Single Post */
.single-post .et_pb_title_container {
	text-align: center;
}
.single-post .et_pb_title_meta_container {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 8px;
    margin-top: 10px;
}
/* Divi 5 hand-written blocks lay Rows out with flexbox (et_flex_row / et_flex_column).
   Columns get a *_tablet / *_phone full-width class but the Row never wraps, so two
   100%-basis columns just shrink side by side (measured 213px|82px at 390px on Solutions).
   Wrapping the Row is the fix. Scoped to .et_flex_row on purpose: D4-migrated pages
   (et_block_row) already stack via their et_pb_column_1_2 fraction classes, and the
   Theme Builder header row must stay horizontal. */
@media (max-width: 980px) {
	.et_pb_row.et_flex_row {
		flex-wrap: wrap;
	}
	.et_pb_row.et_flex_row > .et_pb_column {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

/* Smooth in-page scrolling for anchor links (Support Center category chips, Solutions
   persona gateway). Measured 2026-09-10: this site has NO fixed/sticky header — the nav
   scrolls away — so the offset is breathing room, not header clearance.
   `:focus-within` guard is deliberately omitted: scroll-behavior on the root is what makes
   Divi's own anchor jumps animate, and Divi does not intercept same-page hash links. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Anchor targets stop clear of the viewport edge instead of flush against it. */
[id] {
	scroll-margin-top: 24px;
}

/* Contact form anchor (/contact-us/#contact_gform) — every "Contact Us" / "Request a
   Quote" / "Sign Up" CTA lands here. Measured 2026-09-22: the TB header section
   (.et_pb_section_0_tb_header) IS position:fixed once scrolled, which supersedes the
   2026-09-10 note above — 140px tall at 1440, 120px at 981-1200, 64-79px at <=980. With
   only the 24px default the header covered the top of the form. Desktop (>980): the
   form's heading ("ESTIMATE YOUR PROJECT" / "Send us a message") sits in the adjacent
   column ~56px above the form top, so the offset clears the tallest header (140) + that
   heading (56) + 24px breathing room. <=980 the columns stack and the heading is far
   above the form, so there the offset is header (79) + 24 and the form top is the target. */
#contact_gform {
	scroll-margin-top: 220px;
}

@media (max-width: 980px) {
	#contact_gform {
		scroll-margin-top: 103px;
	}
}

/* ---------------------------------------------------------------------------
 * Header CTA — icon overlapped the label on hover
 *
 * Measured 2026-09-10: the button block declares icon placement "left" with
 * onHover "off", so Divi emits padding-left:2em / padding-right:0.7em!important
 * — a gutter on the LEFT. But it still renders the glyph in ::after on the
 * RIGHT and only fades it in on hover (opacity 0 -> 1) without growing the
 * 269px width. Result: the icon lands on top of "…Today".
 * Fix: honour the block's own intent — pin the glyph in the LEFT gutter,
 * always visible, and stop it participating in layout.
 * `.btn-icon-gutter` was already on the button in header layout 98593 but had
 * no CSS anywhere; this is the rule it was waiting for.
 * ------------------------------------------------------------------------- */
.btn-icon-gutter.et_pb_button {
	position: relative;
}

/* Divi's own right-hand hover glyph: remove it entirely on this button. */
.btn-icon-gutter.et_pb_button::after {
	display: none !important;
}

/* Re-place the glyph in the left gutter that Divi already padded for.
   2026-09-16: switched from FontAwesome codepoints to Divi's OWN icon font.
   Divi 5.11.1 does enqueue FontAwesome on the frontend (regular-400 /
   solid-900 / brands-400 under Divi/core/admin/fonts/fontawesome/), so the
   old f274/f135 did render real glyphs -- but FA's rocket (f135) is a
   diagonal silhouette that turns to mush at 16px and crowded the red
   button's rounded left edge. ETmodules is loaded frontend-wide by Divi
   itself and its glyphs are drawn for small sizes.
   e023 = Calendar (styles: divi/line/solid, weight 400).

   SPECIFICITY: the glyph is NOT ours by default. Divi emits, from the button
   module's own icon setting on header layout 98593:
     .et_pb_button_N_tb_header:before{content:attr(data-icon);
       font-family:"FontAwesome"!important;font-weight:400|900!important}
   i.e. the codepoint lives in the button's data-icon HTML attribute and the
   family is forced with !important. A plain child-theme rule loses. Hence the
   long body #page-container selectors + !important below, and the explicit
   margin-left:0 (Divi sets -1.3em, and +0.3em on hover, to slide the glyph). */
body #page-container .et_pb_section .btn-icon-gutter.et_pb_button::before,
body #page-container .btn-icon-gutter.et_pb_button::before,
body #page-container .et_pb_section .btn-icon-gutter.et_pb_button:hover::before,
body #page-container .btn-icon-gutter.et_pb_button:hover::before {
	content: "\e023" !important;
	font-family: ETmodules !important;
	font-weight: 400 !important;
	font-size: 1.05em !important;
	position: absolute;
	left: 1.05em;
	top: 50%;
	transform: translateY(-50%);
	margin-left: 0 !important;
	opacity: 1;
	line-height: 1 !important;
	display: block;
	pointer-events: none;
}

/* Keep the label clear of the glyph in BOTH states — Divi flips padding on
   hover, which is what let the text drift under the icon. */
body #page-container .et_pb_section .btn-icon-gutter.et_pb_button,
body #page-container .btn-icon-gutter.et_pb_button,
body #page-container .et_pb_section .btn-icon-gutter.et_pb_button:hover,
body #page-container .btn-icon-gutter.et_pb_button:hover {
	padding-left: 2.6em !important;
	padding-right: 1.4em !important;
}


/* =========================================================================
 * ===== R2 HEADER REWORK (2026-09-16) — Burgex pattern, Mineralocity tokens
 * Targets: compact 80-90px header at 1440, logo left on the same row as a
 * right-aligned nav, 14px/400 sentence-case nav links, hamburger <=980,
 * two header CTAs (outline "Book a Demo" + primary red trial).
 *
 * WHY CSS and not block attrs: the oversized header came from THIS file —
 * `.header-menu...>nav>ul>li { padding:20px 30px; border-left:1px solid }`
 * (60px of horizontal padding per item x 7 items) forced the nav to wrap
 * under the logo, giving a 298.8px header. Divi block attrs cannot override
 * a child-theme rule, so the fix belongs here.
 * ========================================================================= */

/* --- 1. Nav item metrics: kill the wrap-forcing padding and the dividers --- */
@media (min-width: 981px) {
	.header-menu.et_pb_menu--with-logo .et_pb_menu__menu > nav > ul > li {
		padding: 6px 14px !important;
		border-left: 0 !important;
		margin-top: 0;
	}

	/* 16px / 400 / sentence case. This rule is the ONE place desktop menu type
	   is set -- it carries !important, so anything added elsewhere loses to it
	   no matter how specific. Was 14px/400 on an earlier reading of Burgex;
	   burgex.com in fact computes 16px/500 on the same Roboto face, so the size
	   is matched here. Weight stays 400: the client asked for the larger size
	   without the heavier stroke.
	   Divi's own rule puts 31px of top/bottom padding on the anchor, which is
	   what kept the nav 95px tall even at 14px type. Zero it and let the row's
	   own 12px padding set the height. */
	.header-menu.et_pb_menu--with-logo .et_pb_menu__menu > nav > ul > li > a {
		font-size: 16px !important;
		font-weight: 400 !important;
		text-transform: none !important;
		letter-spacing: normal !important;
		line-height: 1.3 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* Items align to the row's centre rather than stretching to its height. */
	.header-menu.et_pb_menu--with-logo .et_pb_menu__menu > nav > ul {
		align-items: center;
	}

	.header-menu.et_pb_menu--with-logo .et_pb_menu__menu > nav > ul > li {
		align-items: center;
	}

	/* Logo + nav share one row; logo flush to the container's left edge. */
	.header-menu.et_pb_menu--with-logo .et_pb_menu_inner_container {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
	}

	.header-menu.et_pb_menu--with-logo .et_pb_menu__logo-wrap {
		margin: 0;
		flex: 0 0 auto;
	}

	.header-menu.et_pb_menu--with-logo .et_pb_menu__logo {
		margin: 0;
	}

	/* ~12px top/bottom around a 60px logo => ~84px row.
	   Horizontal padding lives on the MODULE (the block already sets 3rem/1.5rem
	   there); adding more on the inner container double-indented the logo to
	   x=96 while the top bar's content starts at x=25. Zero the inner padding
	   and set the module's gutter to 25px so the logo is flush with the top-bar
	   text — the container's real left edge. */
	.et_pb_menu_0_tb_header.full-width-menu .et_pb_menu_inner_container {
		padding-top: 12px;
		padding-bottom: 12px;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.header-menu.et_pb_menu_0_tb_header {
		padding-left: 25px !important;
		padding-right: 25px !important;
	}

	.header-menu.et_pb_menu--with-logo .et_pb_menu__menu {
		flex: 1 1 auto;
		justify-content: flex-end;
	}

	.header-menu.et_pb_menu--with-logo .et_pb_menu__menu > nav > ul {
		flex-wrap: nowrap;
		justify-content: flex-end;
	}
}

/* The 981-1100 override upstream re-inflates the padding; keep it in step. */
@media (min-width: 981px) and (max-width: 1100px) {
	.header-menu.et_pb_menu--with-logo .et_pb_menu__menu > nav > ul > li {
		padding: 6px 10px !important;
	}
}

/* --- 2. Logo box: 56px desktop (ink-trimmed logo, 2026-09-23 -- same ink
   size as the old 60px padded PNG), mobile size set in the 2026-09-23 block --- */
@media (min-width: 981px) {
	.header-menu .et_pb_menu__logo img {
		height: 56px !important;
		width: auto !important;
		max-width: none !important;
		display: block;
	}
}

@media (max-width: 980px) {
	.header-menu .et_pb_menu__logo img {
		height: 44px !important;
		width: auto !important;
		max-width: none !important;
		display: block;
	}

	.et_pb_menu_0_tb_header.full-width-menu .et_pb_menu_inner_container {
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 0 !important;
		padding-right: 0 !important;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.header-menu.et_pb_menu_0_tb_header {
		padding-left: 25px !important;
		padding-right: 25px !important;
	}

	/* --- Contrast: the block inherits Burgex's WHITE hamburger + white mobile
	   link colour, which was correct on Burgex's NAVY bar but is invisible on
	   Mineralocity's WHITE header. Measured white-on-white (1:1) for both the
	   hamburger glyph and every mobile menu link. Brand navy restores it
	   (#0A222F on white = 16.37:1). --- */
	.header-menu.et_pb_menu .mobile_menu_bar::before,
	.header-menu.et_pb_menu .mobile_menu_bar::after {
		color: var(--color-navy) !important;
	}

	.header-menu.et_pb_menu .et_mobile_menu,
	.header-menu.et_pb_menu .et_mobile_menu li a {
		color: var(--color-navy) !important;
	}

	/* Give the open panel a visible edge against the page behind it. */
	.header-menu.et_pb_menu .et_mobile_menu {
		border-top: 3px solid var(--color-red);
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
	}

	/* Hamburger shown at tablet AND phone; desktop nav stays hidden. */
	.header-menu.et_pb_menu .et_pb_menu__menu {
		display: none !important;
	}

	.header-menu.et_pb_menu .et_mobile_nav_menu {
		display: block !important;
		float: none;
		margin: 0;
	}

	.header-menu.et_pb_menu .mobile_menu_bar {
		display: block !important;
	}
}

/* --- 3. The two header CTAs -------------------------------------------- */
/* Primary (Start Free 14-Day Trial): brand red. Outline (Book a Demo): white
   hairline on the navy bar, mirroring the site's hero button pair. */
body #page-container .et_pb_section .hdr-cta.et_pb_button,
body #page-container .hdr-cta.et_pb_button {
	font-size: 16px !important;
	line-height: 1.4 !important;
	border-radius: 10px !important;
	white-space: nowrap;
}

/* ponytail: both header CTAs are now ghost buttons -- transparent at rest,
   translucent white wash on hover. Identical treatment to --outline below;
   kept as a separate rule only because the ::before glyph differs. */
body #page-container .et_pb_section .hdr-cta--primary.et_pb_button,
body #page-container .hdr-cta--primary.et_pb_button {
	background-color: transparent !important;
	color: var(--color-white) !important;
	border: 0 !important;
}

body #page-container .et_pb_section .hdr-cta--primary.et_pb_button:hover,
body #page-container .hdr-cta--primary.et_pb_button:hover,
body #page-container .et_pb_section .hdr-cta--primary.et_pb_button:focus-visible,
body #page-container .hdr-cta--primary.et_pb_button:focus-visible {
	background-color: rgb(var(--color-white-rgb) / 20%) !important;
	color: var(--color-white) !important;
	border: 0 !important;
}

/* Book a Demo: borderless + transparent at rest, translucent white wash on
   hover -- matching Burgex's own header CTA (rest: no border, transparent;
   hover: rgba(255,255,255,.2), text stays white). Text is kept white on
   hover because the 20% wash is far too dark for navy text to read. */
body #page-container .et_pb_section .hdr-cta--outline.et_pb_button,
body #page-container .hdr-cta--outline.et_pb_button {
	background-color: transparent !important;
	color: var(--color-white) !important;
	border: 0 !important;
}

body #page-container .et_pb_section .hdr-cta--outline.et_pb_button:hover,
body #page-container .hdr-cta--outline.et_pb_button:hover,
body #page-container .et_pb_section .hdr-cta--outline.et_pb_button:focus-visible,
body #page-container .hdr-cta--outline.et_pb_button:focus-visible {
	background-color: rgb(var(--color-white-rgb) / 20%) !important;
	color: var(--color-white) !important;
	border: 0 !important;
}

/* Header CTA underline -- BOTH header buttons (feedback 2026-09-23, items 3 + 7;
   item 7 extended it from "Book a Demo" to "Start Free 14-Day Trial").
   Underlined at rest; on hover / keyboard focus the line SWEEPS: it retracts
   to the right, then redraws from the left (Burgex's ::after bar pattern,
   adapted because our rest state already shows the line).
   ::before is taken by the calendar glyph (gutter fix above); ::after was
   switched off by `.btn-icon-gutter.et_pb_button::after{display:none}` and
   still carries Divi's icon declarations (font, content, opacity 0,
   margin-left, 0.2s transition) — every one is reset here, hence the long
   selector + !important. left/right equal the button's padding (2.6em /
   1.4em at font-size:inherit) so the bar spans the label only, never the
   icon gutter. Colour is currentColor (white). */
body #page-container .et_pb_section .hdr-cta.btn-icon-gutter.et_pb_button::after,
body #page-container .hdr-cta.btn-icon-gutter.et_pb_button::after,
body #page-container .et_pb_section .hdr-cta.btn-icon-gutter.et_pb_button:hover::after,
body #page-container .hdr-cta.btn-icon-gutter.et_pb_button:hover::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	font-size: inherit !important;
	line-height: 0 !important;
	left: 2.6em !important;
	right: 1.4em !important;
	top: auto !important;
	bottom: 0.4em !important;
	width: auto !important;
	height: 2px !important;
	margin: 0 !important;
	opacity: 1 !important;
	border-radius: 5px;
	background: currentColor !important;
	transform: scaleX(1);
	transform-origin: bottom right;
	transition: none !important;
	pointer-events: none;
}

@keyframes mnr-underline-sweep {
	0%      { transform: scaleX(1); transform-origin: bottom right; animation-timing-function: ease-out; }
	50%     { transform: scaleX(0); transform-origin: bottom right; }
	50.01%  { transform: scaleX(0); transform-origin: bottom left; animation-timing-function: ease-out; }
	100%    { transform: scaleX(1); transform-origin: bottom left; }
}

@media (prefers-reduced-motion: no-preference) {
	body #page-container .hdr-cta.btn-icon-gutter.et_pb_button:hover::after,
	body #page-container .hdr-cta.btn-icon-gutter.et_pb_button:focus-visible::after {
		animation: mnr-underline-sweep 0.5s both;
	}
}

/* The gutter fix (2026-09-10 §1) hardcodes the calendar glyph for every
   .btn-icon-gutter, so the trial button needs its own.
   ETmodules has no rocket. 0x24 = "Arrow Right" (styles: divi/line, weight
   400) -- a clean forward/start signifier that reads correctly at 16px,
   which the FA rocket did not. */
body #page-container .et_pb_section .hdr-cta--primary.btn-icon-gutter.et_pb_button::before,
body #page-container .hdr-cta--primary.btn-icon-gutter.et_pb_button::before,
body #page-container .et_pb_section .hdr-cta--primary.btn-icon-gutter.et_pb_button:hover::before,
body #page-container .hdr-cta--primary.btn-icon-gutter.et_pb_button:hover::before {
	content: "\24" !important;
	font-weight: 400 !important;
}

/* --- 4. Top bar: keep it thin so the two rows total ~85 + ~40 ----------- */
.top-custom-header {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}

.top-custom-header .et_pb_text {
	font-size: 14.5px;
	line-height: 1.35;
}

/* --- 5. Hero eyebrow ----------------------------------------------------
   The homepage hero eyebrow used to be its own Text module, which meant the
   phrase "The Intelligence Layer" rendered twice in a row and the h1 read
   wrong to screen readers and to Google. It now lives INSIDE the h1 as
   <span class="mnr-eyebrow">, so the document has exactly one h1 whose text
   is the full headline. These rules restore the eyebrow's original look
   (gold, 24px/700, off-white shadow) on top of the inherited h1 styling.
   Values carried verbatim from the retired module: size 24px, weight 700,
   colour gcid-2de1c91a (#f9f9f9) with the gold gcid-2eb85268 heading tint. */
.mnr-eyebrow {
	display: block;
	margin-bottom: 2px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--gcid-2eb85268-1f51-4f24-a4be-13bed7ca8ff6, #e49a25);
	text-shadow: 0.02em 0.02em 0 rgba(0, 0, 0, 0.23);
}

@media (max-width: 980px) {
	.mnr-eyebrow { font-size: 21px; }
}

@media (max-width: 767px) {
	.mnr-eyebrow { font-size: 18px; }
}

/* ============================================================================
   CTA BAND  .mnr-cta-band
   A full-width call-to-action band: small gold eyebrow, a centred lead
   paragraph, then a button. Sits on the deep-navy ground.

   Used on: Solutions (103691) and Support Center (103689). Promoted here
   2026-09-16 from those two pages' own custom CSS, where it was duplicated
   and had begun to drift apart.

   Markup (Divi "CSS Class" field on each module inside the CTA section):
     section     .mnr-cta-band
       row/text  .mnr-cta-band__eyebrow    e.g. "SOLUTIONS"
       row/text  .mnr-cta-band__body       the lead sentence
       row/button .mnr-cta-band__action    e.g. "Book a Demo"

   NOTE ON SPECIFICITY: these hooks sit on Divi Rows, whose own margin rules
   are emitted by Divi with high specificity. The `body #page-container`
   prefix is required to win the cascade - the same pattern .hdr-cta uses
   above. Dropping it silently zeroes every margin here.

   Body text colour is intentionally NOT set here - each page sets it on the
   module so a light or dark ground can both be supported.
   ========================================================================= */
body #page-container .mnr-cta-band .mnr-cta-band__eyebrow { margin-bottom: 10px !important; }

body #page-container .mnr-cta-band .mnr-cta-band__eyebrow p {
	color: var(--gcid-2eb85268-1f51-4f24-a4be-13bed7ca8ff6) !important; /* brand gold */
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding-bottom: 0 !important;
}

body #page-container .mnr-cta-band .mnr-cta-band__body { margin-top: 20px !important; }

body #page-container .mnr-cta-band .mnr-cta-band__body p {
	max-width: 720px;
	margin-inline: auto;
	line-height: 1.8em;
}

body #page-container .mnr-cta-band .mnr-cta-band__action { margin-top: 28px !important; }

@media (max-width: 767px) {
	body #page-container .mnr-cta-band .mnr-cta-band__action { margin-top: 24px !important; }
}


/* --- Footer signup CTA: separate the grey card from the red section ------
   The #f7f7f7 row carries margin-top:75px but margin-bottom:0, and its
   parent section has zero padding -- so on every page the grey card's
   bottom edge butts straight into the red "Have a Question?" section.
   Mirror the top margin on the bottom. (2026-09-17) */
.et-l--footer .et_pb_section:first-child .et_pb_row:first-child {
	margin-bottom: 75px !important;
}

@media (max-width: 980px) {
	.et-l--footer .et_pb_section:first-child .et_pb_row:first-child {
		margin-bottom: 50px !important;
	}
}

/* --- Solutions/Suppliers list: no dangling divider ----------------------
   .sol-supplier-item draws a bottom rule to separate stacked items, but
   each column holds exactly one item, so every rule is a last-child line
   with nothing under it. Strip it from the final item in each column. */
.sol-supplier-item:last-child {
	border-bottom: 0 !important;
}


/* =======================================================================
   Header nav responsiveness (2026-09-17)
   ======================================================================= */

/* THE BREAKPOINT. Divi swaps to the hamburger at <=980px, but this menu's
   the menu used to carry 8 top-level items totalling 893px which, with the
   204px logo, needed ~1147px -- so it was raised to 1200px (client decision
   2026-09-17) to stop 981-1146px clipping a desktop menu that did not fit.

   2026-09-30: Pricing and Resources now group four of those items away, so the
   bar carries 6. Lowered back to Divi's own 980px at the client's request.
   NOTE: desktop type also went 14px -> 16px in the same pass, so the saving is
   smaller than the item count suggests. 981-1100px is the tight band; its item
   padding is set by the "Nav item metrics" section further down (the 6px 10px
   override), NOT by the 981-1100 block above it, which that section supersedes.
   Check there first if the bar ever wraps.

   Scoped to the HEADER NAV ONLY: 38 other rules in this file key off the
   980px boundary, so the global breakpoint is deliberately left alone.

   ONE source of truth for this number. The mobile-menu *styling* further
   down MUST use the same value -- see note 3. */

/* --- 1. Swap desktop menu for the hamburger ---------------------------- */
@media (max-width: 980px) {
	.et-l--header .et-menu,
	.et-l--header .et_pb_menu__menu {
		display: none !important;
	}
	.et-l--header .et_mobile_nav_menu {
		display: block !important;
		float: right;
		margin: 0;
	}
	.et-l--header .mobile_menu_bar {
		display: block !important;
	}
}

/* --- 2. Expanded mobile menu: full width, no margin bleed ---------------
   .et_mobile_menu is absolutely positioned inside .et_pb_menu_inner_container,
   which carries the row's horizontal padding -- so the open panel started
   25px in from the left and stopped short on the right instead of spanning
   the viewport. Break it out of the padded container. */
@media (max-width: 980px) {
	.et-l--header .et_pb_menu { position: relative; }
	.et-l--header .et_pb_menu_inner_container { position: static; }
	.et-l--header .et_mobile_nav_menu { position: static; }

	.et-l--header .et_mobile_menu {
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		margin: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		/* Divi's default 5% padding left a gap above the first item and below the
		   last; the items carry their own vertical rhythm instead. */
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		box-sizing: border-box;
	}
	/* Re-inset the LINKS, not the panel, so text still has a gutter, and give
	   each row 1rem of vertical breathing room now that the panel has none. */
	.et-l--header .et_mobile_menu > li > a,
	.et-l--header .et_mobile_menu .sub-menu > li > a {
		padding-left: 24px !important;
		padding-right: 24px !important;
		padding-top: 1rem !important;
		padding-bottom: 1rem !important;
	}

	/* Step children in so the hierarchy reads, as burgex.com does with
	   `.et_mobile_menu li li{padding-left:5%}`. */
	.et-l--header .et_mobile_menu .sub-menu > li > a {
		padding-left: 48px !important;
	}
}

/* --- 3. Carry the mobile-menu STYLING up to the same breakpoint ---------
   🔴 The bug this fixed. Three earlier blocks style the mobile menu behind
   `@media (max-width: 980px)`. While the hamburger appeared below 1200px,
   everything from 981-1200px got the hamburger with NONE of its styling --
   and the most important of those rules is a contrast fix:

     the glyph and the mobile links inherit Burgex's WHITE colour, which was
     correct on Burgex's navy bar but is invisible on Mineralocity's WHITE
     header (measured 1:1, white-on-white).

   So in that band the hamburger was rendered but unseeable, the logo kept
   its 60px desktop height, and the panel had no border or shadow. Restated
   here. Now that the breakpoint is back at 980px these restatements duplicate
   the 980px originals exactly; kept so the header rules stay readable in one
   place, and harmless. */
@media (max-width: 980px) {
	/* Contrast: navy glyph + navy links on the white header (16.37:1). */
	.header-menu.et_pb_menu .mobile_menu_bar::before,
	.header-menu.et_pb_menu .mobile_menu_bar::after {
		color: var(--color-navy) !important;
	}

	.header-menu.et_pb_menu .et_mobile_menu,
	.header-menu.et_pb_menu .et_mobile_menu li a {
		color: var(--color-navy) !important;
	}

	/* Visible edge against the page behind the open panel.
	   !important is required: Divi's per-module CSS sets a white border-top
	   on .et_mobile_menu and outranks a plain declaration here -- so the
	   980px original above has silently rendered white, not red, all along. */
	/* The Menu module's own "Dropdown Menu Border Color" is set to the WHITE
	   global colour and emitted inline as
	     .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu{border-color:...!important}
	   Inline <style> comes after this file, so a tie on specificity loses.
	   Match the module selector AND set border-top-color (the same longhand
	   family it writes) so this wins outright. */
	.header-menu.et_pb_menu .et_mobile_menu,
	.et-l--header .et_mobile_menu,
	.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu,
	body #page-container .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu {
		border-top-width: 3px !important;
		border-top-style: solid !important;
		border-top-color: var(--color-red) !important;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
	}

	/* Logo drops to the compact height the mobile bar is built around. */
	.header-menu .et_pb_menu__logo img {
		height: 44px !important;
		width: auto !important;
		max-width: none !important;
		display: block;
	}

	/* Bar layout: logo left, hamburger right, gutters on the module. */
	.et_pb_menu_0_tb_header.full-width-menu .et_pb_menu_inner_container {
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 0 !important;
		padding-right: 0 !important;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.header-menu.et_pb_menu_0_tb_header {
		padding-left: 25px !important;
		padding-right: 25px !important;
	}

	.de-custom-menu.et_pb_menu .et_mobile_nav_menu {
		float: right;
	}

	/* Current-item emphasis, also originally 980-only. */
	.et_pb_menu_0_tb_header.et_pb_menu ul#mobile_menu1 li.current-menu-item > a {
		color: var(--color-navy) !important;
		font-weight: 700 !important;
	}
}


/* --- Homepage "Built for how you use the data": tighter card gap --------
   The 3 persona cards sit at Divi's gutter width 3 -- margin-right 5.5%
   with columns at 29.6667%, i.e. a ~66px gap at 1200px. Narrow the gutter
   to 3% and give the width back to the cards, so the three read as one
   group rather than three separate islands.
   Widths must still total 100%: (31.3333 x 3) + (3 x 2) = 100. (2026-09-17) */
@media (min-width: 981px) {
	.service-card-container.et_pb_row .et_pb_column.service-card-column-v2 {
		width: 32% !important;
		margin-right: 2% !important;
	}
	.service-card-container.et_pb_row .et_pb_column.service-card-column-v2:last-child,
	.service-card-container.et_pb_row .et_pb_column.service-card-column-v2.et-last-child {
		margin-right: 0 !important;
	}
}

/* The gutter was only ~22% of the visible gap. Measured at 1440px, the space
   between one card's TEXT and the next was ~159px:
       35px  column margin-right (the gutter)
     + 64px  column padding      (32px on each of the two facing sides)
     + 60px  module padding      (30px on each of the two facing modules)
   Trimming the gutter alone barely moved it. Cut the inner padding too --
   that is where most of the whitespace actually lives. The cards have no
   background (transparent columns), so this padding buys nothing visually;
   it only pushes the text apart. (2026-09-17) */
@media (min-width: 981px) {
	.service-card-container.et_pb_row .et_pb_column.service-card-column-v2 {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
	.service-card-container.et_pb_row .service-card-column-v2 > .et_pb_module {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* .service-card__btn is inset by 25px to line up with the old 30px module
	   padding; match the new inset so the button still aligns with the copy. */
	.service-card-container .service-card__btn {
		width: 100% !important;
		margin-left: 0 !important;
	}
}


/* --- Mobile header bar + testimonial arrows (2026-09-23) -----------------
   Client feedback, measured at 390px:
   1. Logo 44px read too small -> 1.5x. The logo file is now trimmed to its
      ink (attachment 104411, mineralocity-mining-made-visible-logo.webp; the old PNG carried ~7% transparent margin, so
      it sat visibly right of the gutter). 62px of trimmed logo = 1.5x the old
      ink. Bar padding 10px top/bottom: header ~82px tall.
   2. Mobile dropdown links were 14px/400. burgex.com computes 16px/500
      (Roboto, 26px line-height) -- matched here, sub-menu included.
      Current-item 700 weight (ID selector above) still wins.
   Scoped to <=980px: that is where the hamburger bar starts (see §3). */
@media (max-width: 980px) {
	.header-menu .et_pb_menu__logo img {
		height: 62px !important;
	}
	.header-menu.et_pb_menu_0_tb_header {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	.et_pb_menu_0_tb_header.full-width-menu .et_pb_menu_inner_container {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}
	.et-l--header .et_mobile_menu li a {
		font-size: 16px !important;
		font-weight: 500 !important;
		line-height: 26px !important;
	}
}

/* 3. Testimonial slider arrows caused horizontal scroll on phones. They sit
   "outside" the slider (translateX(-100% - 10px)) and carry 30px of side
   padding from the module settings, so each 72px button hung 43px past the
   viewport edge. Dropping the side padding shrinks the button to the 24px
   glyph, which then fits in the column gutter. Desktop is untouched. */
@media (max-width: 980px) {
	.dipl_testimonial_slider .dipl_arrows_outside .swiper-button-prev,
	.dipl_testimonial_slider .dipl_arrows_outside .swiper-button-next {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}


/* --- Gravity Forms submit button inside the Divi Plus Form Styler (2026-09-23)
   The styler's submit settings (navy bg, gold hover, white 18px, 50px pill,
   0.75em/4em padding) survived the D4->D5 migration, but divi-plus 2.3.0
   emits them for `form input[type="submit"]` only. Gravity Forms now renders
   `<button type="submit" class="gform_button">`, so nothing matched and the
   button fell back to the browser default (13px black on grey). Same values,
   restated for the element GF actually renders -- Burgex /contact-us/ is the
   visual reference.
   Deliberate deviation from Burgex: its hover is white text on GOLD (2.35:1,
   fails WCAG). Client asked 2026-09-23 for brand RED + white text on hover
   and focus instead -- 8.2:1. */
.dipl_gravity_form_styler .gform_footer .gform_button,
.dipl_gravity_form_styler .gform_page_footer .gform_button {
	background-color: var(--gcid-b9977658-4716-4f1b-8f0f-15b61fc8dfd9) !important;
	color: var(--gcid-0801664e-c48a-4392-82db-fcd3445a4a4d) !important;
	font-family: var(--font-body, Roboto, Helvetica, Arial, sans-serif) !important;
	font-size: 18px !important;
	font-weight: 400;
	line-height: normal;
	padding: 0.75em 4em !important;
	border: 0 !important;
	border-radius: 50px !important;
	cursor: pointer;
	transition: background-color 300ms ease, color 300ms ease;
}
.dipl_gravity_form_styler .gform_footer .gform_button:hover,
.dipl_gravity_form_styler .gform_footer .gform_button:focus-visible,
.dipl_gravity_form_styler .gform_page_footer .gform_button:hover,
.dipl_gravity_form_styler .gform_page_footer .gform_button:focus-visible {
	background-color: var(--gcid-7ce7b00a-a0f7-4559-8af2-0adef5afd391) !important;
	color: var(--gcid-0801664e-c48a-4392-82db-fcd3445a4a4d) !important;
}

/* Newsletter form in the grey CTA card (Global section 101566 + its copy in
   footer layout 96782; GF 6 "Subscribe to Our Newsletter"). Moved out of the
   black footer column into the card 2026-09-28 (client: one sign-up, above the
   footer). Class/ID kept as mnr-footer-newsletter / #footer-newsletter so old
   hooks still match. Light ground (row bg #f7f7f7), so:
   - underline inputs after burgex.com: transparent, no box, 3px bottom rule
     navy @35% at rest, solid navy on focus (~15:1 on the card; gold would be
     ~2.2:1 and invisible), dark-grey 15px text, 16px padding;
   - labels navy (block attr), sub-labels dark grey, required asterisk brand
     red at label size (~7.6:1), legend mid grey 14px (~5.5:1);
   - Subscribe: red pill, white 600 16px; navy bg + white text on hover/focus
     (client ask). Overrides the sitewide styler submit rule above. */
.mnr-footer-newsletter.dipl_gravity_form_styler .gform_footer .gform_button {
	background-color: var(--gcid-7ce7b00a-a0f7-4559-8af2-0adef5afd391) !important;
	color: var(--gcid-0801664e-c48a-4392-82db-fcd3445a4a4d) !important;
	font-size: 16px !important;
	font-weight: 600;
	padding: 0.75em 2.75em !important;
	border-radius: 100px !important;
}
.mnr-footer-newsletter.dipl_gravity_form_styler .gform_footer .gform_button:hover,
.mnr-footer-newsletter.dipl_gravity_form_styler .gform_footer .gform_button:focus-visible {
	background-color: var(--color-navy) !important;
	color: var(--color-white) !important;
}
.mnr-footer-newsletter .gform_wrapper .gfield_label,
.mnr-footer-newsletter .gform_wrapper legend.gform-field-label--type-sub-label {
	color: var(--color-navy) !important;
}
.mnr-footer-newsletter .gform_wrapper .gfield_required,
.mnr-footer-newsletter .gform_wrapper .gfield_required_asterisk {
	color: var(--color-red) !important;
	font-size: inherit !important;
	font-weight: inherit;
	font-style: normal;
}
.mnr-footer-newsletter .gform_wrapper .gform_required_legend {
	color: var(--color-grey-mid) !important;
	font-size: 14px !important;
	font-style: normal;
}
.mnr-footer-newsletter.dipl_gravity_form_styler .gform_wrapper input[type="text"],
.mnr-footer-newsletter.dipl_gravity_form_styler .gform_wrapper input[type="email"] {
	background: transparent !important;
	color: var(--color-grey-dark) !important;
	border: 0 !important;
	border-bottom: 3px solid rgb(var(--color-navy-rgb) / 0.35) !important;
	border-radius: 0 !important;
	padding: 16px !important;
	font-size: 15px !important;
	box-shadow: none;
}
.mnr-footer-newsletter.dipl_gravity_form_styler .gform_wrapper input[type="text"]:focus,
.mnr-footer-newsletter.dipl_gravity_form_styler .gform_wrapper input[type="email"]:focus {
	border-bottom-color: var(--color-navy) !important;
	/* Underline-only fields: drop the sitewide ring. Text inputs match
	   :focus-visible on click too, so the navy underline is the focus cue. */
	outline: none !important;
	box-shadow: none !important;
}
.mnr-footer-newsletter .gform_wrapper .gform-field-label--type-sub {
	color: var(--color-grey-dark) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
}
/* Below 981px the card stacks: crop its square image (Global image 102933,
   also used elsewhere, so scoped to the card) to a 16:9 banner so the card
   with the form stays a sensible height. */
@media (max-width: 980px) {
	.et_pb_row:has(.mnr-footer-newsletter) .et_pb_image img {
		width: 100%;
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}
}
/* reCAPTCHA v2 is a fixed 304px iframe; the phone column is ~262px. Scale it
   so it stays inside the card. */
@media (max-width: 400px) {
	.mnr-footer-newsletter .ginput_recaptcha {
		transform: scale(0.85);
		transform-origin: 0 0;
		height: 66px;
	}
}

/* ---------------------------------------------------------------------------
 * Striped product rows — opt-in (feedback 2026-09-23, item 4)
 *
 * Put on a Section:  da-striped  +  da-striped--odd | da-striped--even
 * Alternate `.da-product` Rows get an edge-to-edge light-grey band. Parity is
 * counted among `.da-product` Rows ONLY (`of .da-product`), so a header Row
 * before them does not shift the count: --even paints layer rows 2, 4, ...
 *
 * Full bleed without widening the page: a 100vmax box-shadow spread paints
 * the band past the Row's own width, and clip-path trims it back to the Row's
 * height. Neither box-shadow nor clip-path creates scrollable overflow, so no
 * horizontal scroll. The Row itself keeps its width (86%/1200px), which means
 * its border-top divider stays exactly as wide as before.
 *
 * Divider colour: the band is #efefef, the same token as the divider, so the
 * divider would vanish on (and next to) a painted Row. On those rows only,
 * the divider moves up one step to brand light grey so it stays
 * visible at its original width. It uses the :root token --color-grey-light,
 * not the gcid- variable: Divi 5 only emits --gcid-* for colours the page's own
 * blocks reference, so --gcid-187cd70c computed EMPTY on 103684 (measured).
 * The band keeps the gcid (#efefef) because the catalog divider already
 * references it, with a token-derived fallback for pages that do not.
 * ------------------------------------------------------------------------- */
/* Only where a band is: the painted Row's own divider, the divider of the
   Row right after it (it sits on the band's bottom edge), and the chips on
   the painted Row. Unpainted rows keep the original #efefef gcid. */
.da-striped--odd > .et_pb_row.da-product:nth-child(odd of .da-product),
.da-striped--even > .et_pb_row.da-product:nth-child(even of .da-product),
.da-striped--odd > .et_pb_row.da-product:nth-child(odd of .da-product) + .et_pb_row.da-product,
.da-striped--even > .et_pb_row.da-product:nth-child(even of .da-product) + .et_pb_row.da-product {
	border-top-color: var(--color-grey-light);
}

.da-striped--odd > .et_pb_row.da-product:nth-child(odd of .da-product) .da-tags li,
.da-striped--even > .et_pb_row.da-product:nth-child(even of .da-product) .da-tags li {
	border-color: var(--color-grey-light);
}

.da-striped--odd > .et_pb_row.da-product:nth-child(odd of .da-product),
.da-striped--even > .et_pb_row.da-product:nth-child(even of .da-product) {
	background-color: var(--gcid-bcbaf607-1e27-4879-aa23-8421c8e1cff3, rgb(var(--color-grey-light-rgb) / 25%));
	box-shadow: 0 0 0 100vmax var(--gcid-bcbaf607-1e27-4879-aa23-8421c8e1cff3, rgb(var(--color-grey-light-rgb) / 25%));
	clip-path: inset(0 -100vmax);
}

/* ---------------------------------------------------------------------------
 * Team-bio modal entrance / exit (feedback 2026-09-23, item 1)
 * divi-plus opens the bio with magnific-popup and mainClass
 * `dipl_team_member_lightbox` on both .mfp-bg and .mfp-wrap, but never adds
 * `mfp-fade`, so it popped in with no transition. Magnific adds `mfp-ready`
 * ~16ms after open and `mfp-removing` for removalDelay on close (160ms,
 * injected by js/team-popup.js). Backdrop fades to the plugin's own 0.8;
 * content fades and rises 8px. No motion under prefers-reduced-motion.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.mfp-bg.dipl_team_member_lightbox {
		opacity: 0;
		transition: opacity 180ms ease-out;
	}
	.mfp-bg.dipl_team_member_lightbox.mfp-ready {
		opacity: 0.8;
	}
	.mfp-wrap.dipl_team_member_lightbox .mfp-content {
		opacity: 0;
		transform: translateY(8px);
		transition: opacity 180ms ease-out, transform 180ms ease-out;
	}
	.mfp-wrap.dipl_team_member_lightbox.mfp-ready .mfp-content {
		opacity: 1;
		transform: none;
	}
	.mfp-bg.dipl_team_member_lightbox.mfp-removing {
		opacity: 0;
		transition-duration: 160ms;
	}
	.mfp-wrap.dipl_team_member_lightbox.mfp-removing .mfp-content {
		opacity: 0;
		transform: translateY(4px);
		transition-duration: 160ms;
	}
}

/* Header: the first Row holds only the a11y <script> Code Module (0px tall), but Divi's
   .et_pb_column{min-height:1px} still renders it 1px tall, exposing the white Section
   background as a 1px line above the navy bar. display:none does not stop the script running. */
.et-l--header .et_pb_row:has(> .et_pb_column > .et_pb_code_0_tb_header:only-child){display:none}