/* Additional CSS from the approved build's Customizer (wp-custom-css). */

/* ---------- Contact and Workforce Solutions: hero behind the header ----------
   Both pages run their hero image up behind a header that is fully
   transparent on them, and the kit did it by pulling the hero section up with
   a fixed margin-top: -115px. The header is not a fixed height though - it
   measures anywhere from 106px to 132px across the breakpoints - so that one
   number could never line up: it left a strip of the white body showing above
   the hero at most widths (5px on desktop, up to 17px on phones) and at a
   couple of widths over-pulled the hero so its heading ran under the nav.

   Take the header out of the flow on these two pages instead. It then reserves
   no height at all, the hero starts at the top of the viewport at every width,
   and the negative margin is no longer needed - see kit-contact.css and
   kit-workforce-solutions.css, where both are now 0.

   The z-index is what keeps the nav painting over the hero: absolute makes the
   header a positioned box, the hero is positioned too, and without it the hero
   would win simply for coming later in the document. 100 clears the hero while
   staying well under the mobile menu panel (9997) and its toggle (9998). */
body.elementor-page-2142 .elementor-location-header,
body.elementor-page-2000 .elementor-location-header {
	position: absolute;
	/* No vertical offset: both headers sit at exactly the level every other page
	   uses - logo top 20px, nav and button top 37px. These two pages spent a
	   while carrying one (16px, then 30px) to lift the row off a hero photo that
	   now runs to the very top edge, but it only ever made them look out of step
	   with the rest of the site. If one is added back, add it to
	   kit-workforce-solutions.css's hero padding too, or the logo plate clips
	   the top of "BUILDING". */
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

/* ---------- ...and clear of the admin bar when one is showing ----------
   Taking the header out of the flow on these two pages costs it the one
   thing flow gave it for free: the room WordPress reserves for its own
   toolbar. Logged out nothing changes - there is no bar - but logged in,
   html carries a 32px top margin that every other page's header simply sits
   below, while these two are pinned to top: 0 and so run 12px up underneath
   the bar, which clips the top of the white logo plate and makes their
   header band read shorter than the rest of the site.

   Offsetting by the bar's own height puts the row back at the level every
   other page uses. 32px is the bar at desktop widths; at 782px and below
   WordPress draws it 46px tall instead. Both only apply alongside the
   .admin-bar body class, so a visitor still gets the hero running to the
   very top edge. */
body.admin-bar.elementor-page-2142 .elementor-location-header,
body.admin-bar.elementor-page-2000 .elementor-location-header {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar.elementor-page-2142 .elementor-location-header,
	body.admin-bar.elementor-page-2000 .elementor-location-header {
		top: 46px;
	}
}

/* No logo offset here on purpose. These two pages briefly carried a 16px
   margin-top on the logo, to lift it off the top edge now that the hero photo
   runs all the way up behind it. It was reverted so the header lands in exactly
   the same place on every page as it does on Home: logo top 20px, nav and
   button top 37px. Anything added here has to be added site-wide, or these two
   drift out of step with the rest again. */

/* ---------- Smooth scrolling, held back until the page has settled ----------
   The browser performs its own scroll to a #fragment while a document is still
   loading, and with smooth scrolling in force that arrival is animated: a link
   such as /workforce-solutions/#a106e2e lands at the top of the new page and
   then slides ~1900px down under its own steam, which reads as the page
   lurching about after a click. Holding the root at auto until load keeps the
   arrival instant, and the class - added by initSmoothScroll in
   assets/js/frontend.js - restores smooth scrolling afterwards, for anchors
   the visitor actually clicks.

   This lives here rather than in assets/css/main.css because main.css is only
   enqueued on the templates the theme authors itself; the reproduced kit pages
   never see it. Elementor's frontend.min.css sets html{scroll-behavior:smooth}
   under a prefers-reduced-motion query, so both rules below carry a class and
   beat it on specificity rather than depending on enqueue order. */
html:not( .lm-scroll-ready ) {
	scroll-behavior: auto;
}
html.lm-scroll-ready {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html.lm-scroll-ready {
		scroll-behavior: auto;
	}
}

/* Home "Specialized Workforce Solutions" industry cards: the icon and title
   were already links, but the background photo itself wasn't clickable.
   This full-card overlay link (added right after .elementor-background-
   overlay in each card, so the icon/title anchors that follow it in the DOM
   still paint - and receive clicks - on top of it) makes the whole card
   clickable without nesting anchors. */
.ind-card-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* ==========================================================================
   The approved gold button
   The gold runs on a 59deg diagonal with the highlight peaking at 67% and
   dropping away sharply over the next 13%; that hard edge is what reads as
   brushed metal. Stops are sampled off the design at 16 points along its own
   gradient axis. Held as custom properties so every button carrying the
   treatment stays in step. The angle is its own property: a button can re-angle
   the same gold by setting --lm-btn-gold-angle on itself.
   ========================================================================== */
:root {
	--lm-btn-gold-angle: 59deg;
	--lm-btn-gold-stops:
		#a77f29 0%,
		#ba9034 7%,
		#c49c3f 13%,
		#c9a54a 20%,
		#cfae55 27%,
		#d7b962 33%,
		#dbbf6b 40%,
		#e0c876 47%,
		#e6d181 53%,
		#ecd98c 60%,
		#f1e197 67%,
		#e6cf75 73%,
		#b58b2d 80%,
		#bc943d 87%,
		#ceac56 93%,
		#e1c46e 100%;
	--lm-btn-gold-label: #6a4a09;
	--lm-btn-gold-rim: inset 0 0 0 1px rgba( 120, 86, 14, 0.45 );
}

/* ==========================================================================
   The approved gold text
   The hero's "Talent" runs the gold as a 16deg gradient clipped to the glyphs:
   near-white at the foot, a dark #8a5a0a band two thirds up, pale again at the
   cap. Held here so anything else taking the same treatment stays in step, and
   split angle-from-stops like the button gold above, so a use can re-angle it.

   The hero keeps its own inline copy rather than reading these. That one is a
   field default the client can edit from the admin, so it has to carry the
   whole declaration itself and survive without this stylesheet.
   ========================================================================== */
:root {
	--lm-gold-text-angle: 16deg;
	--lm-gold-text-stops:
		#fff9c4 0%,
		#f7e08a 12%,
		#c69224 28%,
		#fff3a1 42%,
		#d4a72c 52%,
		#8a5a0a 68%,
		#e8c65d 82%,
		#fff1a8 100%;

	/* The same ramp with its floor raised. Three stops read dark at body-text
	   size on navy - against the About Us ground #8a5a0a measured 3.08:1,
	   #c69224 6.54 and #d4a72c 8.12. All three are lifted to about 10:1 by
	   raising lightness only, so the hue and saturation - the gold itself -
	   are unchanged.
	
	   The four pale stops are deliberately untouched. The metallic read comes
	   from the spread between light and dark, so brightening those as well
	   would flatten the ramp into one flat colour. It now runs 10:1 to 17:1
	   rather than 3:1 to 17:1. */
	--lm-gold-text-bright-stops:
		#fff9c4 0%,
		#f7e08a 12%,
		#e3bb65 28%,
		#fff3a1 42%,
		#dfbd61 52%,
		#f2b652 68%,
		#e8c65d 82%,
		#fff1a8 100%;
}

li.menu-item .elementor-item:after {
    width: 0;
    /* Pages outside the gold-gradient overlay treatment (e.g. About) would
       otherwise fall back to the kit's default --e-global-color-accent
       (#EC3237, red) for this underline; pin it to the site's gold instead.
       !important is needed to beat kit-global.css's more specific
       .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed)
       .elementor-item:after{background-color:var(--e-global-color-accent)} rule. */
    background-color: #dfa33e !important;
    transform: translateX(-50%) !important;
    left: 50%;
    transition: .5s;
}

li.menu-item .elementor-item:hover:after {
    width: 100%;
}

/* Show the underline pointer by default on the current page's nav item
   (elementor-item-active, added dynamically by lm_nav_link_attributes()
   in inc/nav-menu.php), not just on hover. Sized to the full item width
   (not the earlier fixed 17px) so it reads as a clear underline under the
   whole label instead of a small stub, especially on longer labels like
   "About Us". */
li.menu-item .elementor-item.elementor-item-active:after {
    width: 100%;
}

.ssb_p .elementor-element {
    position: absolute;
    top: 0;
    z-index: 1;
    bottom: 0;
    right: 0;
}

.ssb_p .elementor-element img {
    height: 100%;
    width: 60px;
}

.job_descrp_de_crd {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    margin-bottom: 30px !important;
}
.sd_btn a.elementor-button {
    border: 1px solid #040413;
    box-shadow: 2px 2px 0px #040413 !important;
    position: relative;
    overflow: hidden;
	transition:.5s !important;
}

.sd_btn a.elementor-button:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    bottom: -50%;
    left: 0;
    background: #3f3c7f;
	transform:translateY(-50%);
	height:0;
	transition:.5s !important;
}

.sd_btn a.elementor-button span {
	position:relative;
	z-index:1;
}

.sd_btn a.elementor-button:hover:after {
	height:100%;
}

/*
.sd_btn a.elementor-button:hover {
	border: 1px solid #fff;
    box-shadow: 2px 2px 0px #fff !important;
}
*/

.sd_btn.three a.elementor-button span {
	transition:.5s !important;
}

.sd_btn.three a.elementor-button:after {
    background: #fff;
}

.sd_btn.three a.elementor-button:hover span {
	color: #3f3c7f;
}

.sd_abt_img img {
    aspect-ratio: 6 / 7;
	object-fit:cover;
}

.hover_anm1 {
    transition: .5s !important;
}

.hover_anm1:hover {
    transform: translateY(-10px);
}

.bg_img_hover1 .elementor-widget-wrap.elementor-element-populated {
    transition: .5s !important;
}

.bg_img_hover1 .elementor-widget-wrap.elementor-element-populated:hover {
   /* background-position: 20% 20% !important;
	background-size: 160% !important;
    background-position: center;*/
}
 
.bg_img_hover1 .elementor-widget-wrap.elementor-element-populated{
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* Background zoom fix (Elementor background works normally) */
.bg_img_hover1 .elementor-widget-wrap.elementor-element-populated:hover {
    transform: scale(1.0);
    transition: 0.5s ease;
}

.bg_img_hover1 .elementor-widget-wrap.elementor-element-populated::before {
    content: "";
    position: absolute;
    top: -150%;
    left: -150%;
    width: 50%;
    height: 300%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.15) 40%,
        rgba(255,255,255,0.6) 50%,
        rgba(255,255,255,0.15) 60%,
        transparent 100%
    );
    transform: rotate(25deg);
    transition: all 0.8s ease;
    z-index: 2;
    pointer-events: none;
}

/* Hover animation */
.bg_img_hover1 .elementor-widget-wrap.elementor-element-populated:hover::before {
    top: -50%;
    left: 120%;
}

/* Optional dark overlay */
.bg_img_hover1::after {
 /*   content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.25);
    z-index: 1;
    transition: 0.3s ease;  */
}

.bg_img_hover1 .elementor-widget-wrap.elementor-element-populated:hover::after {
    background: rgba(0,0,0,0.4);
}

.bg_img_hover1 .elementor-widget-wrap.elementor-element-populated .elementor-widget-wrap.elementor-element-populated::before {
	display:none;
}

.bg_img_hover1 .elementor-widget-wrap.elementor-element-populated:hover section.elementor-section.elementor-inner-section {
    background-color: #3f3c7f;
}

.sd_btn.four a.elementor-button {
    border: 1px solid #ffffff;
    box-shadow: 2px 2px 0px #ffffff !important;
}

.bgm_crd_m {
    border-radius: 15px;
    clip-path: polygon(20% 0%, 70% 0, 100% 32%, 100% 100%, 80% 100%, 20% 100%, 0 100%, 0 0);
    padding: 20px !important;
    min-height: 240px;
}

.mmg_img img {
    aspect-ratio: 6 / 6;
    object-fit: cover;
}

.hm_cnt_item .elementor-counter .elementor-counter-number-wrapper {
    width: max-content !important;
    max-width: max-content !important;
}

.hm_cnt_item .elementor-counter-title {
    padding-left: 10px;
}

.hm_cnt_item.lst span.elementor-counter-number {
    opacity: 0 !important;
}

.hm_cnt_item.lst span.elementor-counter-number-suffix {
    font-size: 52px !important;
    line-height: 1 !important;
}

.ovh_hidd  {
    overflow: hidden;
}

.num_ind_itm .elementor-container.elementor-column-gap-no {
    position: relative;
}

.num_ind_itm .elementor-container.elementor-column-gap-no:before {
	content:'';
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	background: linear-gradient(90deg, #C9A84C 0%, #E8C878 100%);
	height:3px;
z-index: 2;
	transition:.5s;
}

.num_ind_itm .elementor-container.elementor-column-gap-no:after {
	content:'';
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	background: linear-gradient(90deg, #C9A84C 0%, #E8C878 100%);
	height:3px;
z-index: 0;
	transition:.5s;
	opacity:.5;
}

.num_ind_itm:hover .elementor-container.elementor-column-gap-no:after {
	height:100%;
	opacity:.001;
}

.num_ind_itm .elementor-container.elementor-column-gap-no  .elementor-widget-wrap.elementor-element-populated {
	position:relative;
	z-index:3;
}

 

.num_ind_itm {
	transition:.3s !important;
}



.serv_grid h4.elementor-heading-title {
	transition:.3s;
}

.serv_grid:hover h4.elementor-heading-title {
	color:#E8C878 !important;
}

.why_us_card .elementor-widget-wrap.elementor-element-populated {
    background: #58585821;
    backdrop-filter: blur(2px);
	transition:.5s;
}
.why_us_card:hover .elementor-widget-wrap.elementor-element-populated {
    background: #0a16287a;
    backdrop-filter: blur(5px);
}


.hm_cnt_item {
	transition:.3s;
}

.hm_cnt_item:hover {
	transform:translateY(-10px);
}

.spl_grd .elementor-widget-wrap.elementor-element-populated {
    position: relative;
	overflow:hidden;
}
.spl_grd .elementor-widget-wrap.elementor-element-populated:after {
   content: '';
    position: absolute;
    background: #f6f6f6;
    z-index: 2;
    height: 100px;
    width: 100px;
    right: 50%;
    bottom: 0;
    border-radius: 50%;
    transition: .5s;
    transform: scale(0);
    opacity: .4;
}

.spl_grd .elementor-widget-wrap.elementor-element-populated:before {
    content: '';
    position: absolute;
    background: #feffd9;
    z-index: 1;
    height: 200px;
    width: 200px;
    right: -90px;
    bottom: 0;
    border-radius: 50%;
    transition: .5s;
    transform: scale(0);
}

.spl_grd .elementor-widget-wrap.elementor-element-populated .elementor-image-box-wrapper {
    position: relative;
    z-index: 3;
}

.spl_grd:hover .elementor-widget-wrap.elementor-element-populated:after {
	transform: scale(1.5);
}

.spl_grd:hover .elementor-widget-wrap.elementor-element-populated:before {
	transform: scale(2.5);
}

.sdd_btn .elementor-button {
	position:relative;
	overflow:hidden;
}
.sdd_btn .elementor-button:before {
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 0;
    transform: scaleY(0);
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    border-radius: 0px;
    background: #fff;
}

.sdd_btn .elementor-button:hover:before {
    transform: scaleY(1);
}

.sdd_btn .elementor-button span {
	position:relative;
	z-index:1;
}

.sdd_btn.wh_bgno .elementor-button:hover span {
	color:#132040;
}

.sdd_btn.wh_bgno .elementor-button:hover span svg {
	fill:#132040;
}

 
.sdd_btn.wh_bg3 .elementor-button:hover span {
	color:#132040;
}

.sdd_btn.wh_bg3 .elementor-button:hover span svg {
	fill:#132040;
}

.sdd_btn.wh_bg3 .elementor-button {
	border:1px solid #132040;
}


.sdd_btn.wh_bg4 .elementor-button {
	border:1px solid #132040;
}

.sdd_btn.wh_bg4 .elementor-button:hover span {
	color:#132040;
}

.sdd_btn.wh_bg4 .elementor-button:hover span svg {
	fill:#132040;
}

.inds_crd_p_image img {
    width: 100%;
    aspect-ratio: 8 / 6;
    object-fit: cover;
}

.hd_menu_l_btn a.elementor-item {
    background-color: #e2e8f0;
    border-radius: 10px;
}

.hd_menu_l_btn a.elementor-item:after {
	display:none;
}

.hd_menu_l_btn a.elementor-item:hover {
    background-color: #0a1628;
    color: #fff !important;
}

.blg_crd_cnt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
	margin-bottom: 10px;
}

.blg_card_wll_w_img img {
    aspect-ratio: 9 / 6;
    object-fit: cover;
}
.blog_card_sd {
    overflow: hidden;
}

.blog_card_heading h4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.sd_pst_lp_hm .blog_card_sd {
    height: 100%;
}

.spc_btn_flx .elementor-container.elementor-column-gap-no {
    justify-content: space-between;
}

.sd_ab_img_box .elementor-image-box-description span {
    color: #efa002;
}

.no_pad_icn_bx .elementor-icon-box-title {
    margin: 0;
}

.orv_m_aa .elementor-image-box-title {
    margin-bottom: 6px !important;
}

/* About: Vision / Mission / Commitment. The three read as one row, so the
   copy is set once here rather than per card. Nothing in the kit gives
   these paragraphs a line-height, so they were falling back to reset.css's
   body 1.5 - tight for a 15px measure this narrow. 1.65 is the leading the
   theme already names for reading text (--lm-leading-normal in style.css).

   text-wrap: pretty stops the last line of a card being left with a single
   word and evens the rag; where it is not supported the paragraphs simply
   wrap as they do now. */
.orv_m_aa .elementor-image-box-description {
    line-height: 1.65;
    text-wrap: pretty;
}

.elementor-nav-menu li.menu-item {
    position: relative;
}

.elementor-nav-menu li.menu-item:before {
    position: absolute;
    content: '';
    height: 20px;
    width: 1px;
    background: #000;
    top: 13px;
    left: 0px;
	opacity:.2;
}

div.job_listings ul.job_listings {
    margin-top: 60px;
}

.elementor-nav-menu li.menu-item:nth-child(1):before {
	display:none;
}

.elementor-nav-menu li.menu-item {
	text-transform: uppercase;
}

.sd_srv_sml_bx .elementor-widget-wrap {
    overflow: hidden !important;
}

.serv_catg_img_bx img {
    border-radius: 50%;
    box-shadow: 0px 0px 10px #00000036;
}

.sd_srv_sml_bx .big_thumb {
	
	overflow:hidden;
}

.sd_srv_sml_bx .big_thumb img {
    transition: .4s !important;
    aspect-ratio: 9 / 7;
    object-fit: cover;
}

.sd_srv_sml_bx:hover .big_thumb img {
    transform: scale(1.1);
}
/* "Submit Requirement" - the approved button, used wherever the item appears:
   the desktop and tablet menu bars and the phone menu panel. The gold runs on a
   59deg diagonal with the highlight peaking at 67% and dropping away sharply
   over the next 13%; that hard edge is what reads as brushed metal. Stops are
   sampled off the design at 16 points along its own gradient axis. */
.cst-sm
{
	font-weight: 700 !important;
	background: linear-gradient( var( --lm-btn-gold-angle ), var( --lm-btn-gold-stops ) ) !important;
	color: var( --lm-btn-gold-label ) !important;
	border: none !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	/* A hairline of the label's own brown around the edge, inset so the button
	   keeps its size. */
	box-shadow: var( --lm-btn-gold-rim ) !important;
	filter: none !important;
	animation: none !important;
}

/* A step down in size for the header's "Submit Requirement" button. The kit
   gives it 14px type on 13px of vertical padding, which came out 172x46 - taller
   than it needs to be next to 14px nav labels and heavy enough to compete with
   them. 13px type on 10px of padding brings it to roughly 160x40, still the
   largest thing in the bar but reading as a button beside the nav rather than
   against it. The 10px of clear space each side of the label is untouched.

   Scoped to .elementor-nav-menu--main: the phone menu panel has its own
   full-width version of this button, sized separately (min-height 59px, 16px
   type), and it should keep those. */
.elementor-nav-menu--main li.menu-item.cst-sm > a.elementor-item {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	font-size: 13px !important;
}
/* The <li> is a flex child of the nav row and stretches to the row's height by
   default, which held the button at the full 46px however little padding its
   label carried. Centring it instead lets it take its own height - and centres
   the shorter button against the nav labels rather than hanging it from the
   top. */
.elementor-nav-menu--main li.menu-item.cst-sm {
	align-self: center;
}

/* "Submit Requirement" is a menu item, so it picks up the nav's hover/active
   underline - a 2px gold bar along its bottom edge, overhanging it on the
   right. On a solid gold button that reads as a stray highlight, so it is
   suppressed here. Five classes because the overlay variants of the underline
   rule (.lm-hero-overlay .only_hm_stl ... and custom-69.css's .home
   .only_hm_stl ...) carry four, and this has to win wherever it sits in the
   file. */
li.menu-item.cst-sm.elementor-button.elementor-button-link a.elementor-item:after,
li.menu-item.cst-sm.elementor-button.elementor-button-link a.elementor-item:before
{
	content: none !important;
	display: none !important;
	width: 0 !important;
}

.cst-sm a
{
	box-shadow: none !important;
	filter: none !important;
	text-shadow: none !important;
}
@keyframes lm-cst-sm-zoom {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.08); }
}
.cst-sm a,
.cst-sm .elementor-item,
.lm-hero-overlay .only_hm_stl li.menu-item.cst-sm a
{
	color: var( --lm-btn-gold-label ) !important;
	fill: var( --lm-btn-gold-label ) !important;
	font-weight: 700 !important;
}

/* Home hero's "Build Your Team" carries the approved gold button treatment. */
.elementor-element-215b604 .elementor-button
{
	font-weight: 700 !important;
	--lm-btn-gold-angle: 133deg;
	/* A heavier rim than the shared 1px hairline: 2px, and carried a little
	   further up in opacity so the extra width actually reads rather than just
	   blurring the edge. Redefined locally rather than on :root because the
	   hairline is shared by nine gold buttons across the site, and only this one
	   was asked to change - same trick the angle above uses. */
	--lm-btn-gold-rim: inset 0 0 0 2px rgba( 120, 86, 14, 0.6 );
	background: linear-gradient( var( --lm-btn-gold-angle ), var( --lm-btn-gold-stops ) ) !important;
	color: var( --lm-btn-gold-label ) !important;
	fill: var( --lm-btn-gold-label ) !important;
	border: none !important;
	box-shadow: var( --lm-btn-gold-rim ) !important;
	cursor: pointer !important;
	animation: none !important;
}

/* The added "Home" nav item pushed the sticky header's boxed row past its
   1140px cap, wrapping the menu onto a second line under the logo. Widening
   just this row's container gives the extra item room without touching any
   other boxed section on the site. */
.elementor-element-477efbd.elementor-section-boxed > .elementor-container,
.elementor-element-d492a50.elementor-section-boxed > .elementor-container {
	max-width: 1320px;
}

.elementor-element-cc33759 .elementor-nav-menu--main .elementor-nav-menu,
.elementor-element-69c27bb .elementor-nav-menu--main .elementor-nav-menu {
	flex-wrap: nowrap;
}

/* Any page in the $overlay_pages list (inc/setup.php lm_body_classes) gets
   the "lm-hero-overlay" body class, which makes the header overlay the hero
   image instead of stacking as its own white bar above it, mirroring the
   homepage's existing overlay look. Each such page's hero section still
   needs the matching -132px pull-up margin added in its own kit CSS file. */
.lm-hero-overlay .only_hm_stl {
	background: transparent !important;
}

/* The white plate behind the logo. Not scoped to .lm-hero-overlay: the 5px of
   padding is part of the logo's rendered height (80px with it, 73px without),
   so leaving About Us - the one page without that body class - out of this rule
   made its header 113px tall instead of 120px and sat the nav and button 3px
   higher than on every other page. The plate itself costs About nothing, its
   header band being white already. */
.only_hm_stl .elementor-element-4e93119 img {
	background: #fff;
	border-radius: 5px;
	padding: 5px;
}

.lm-hero-overlay .only_hm_stl li.menu-item a {
	color: #fff !important;
}

/* The current-page underline. This is deliberately not scoped to
   .lm-hero-overlay: About Us is the one page carrying neither that class nor
   .home, so it was the only page left on the flat #dfa33e the base rule above
   pins, and its marker read duller than everywhere else. Unscoping the
   gradient puts every page on the same gold - it only ever sets the colour of
   the 2px bar, so none of the overlay treatment around it (transparent header,
   white labels) travels with it.

   It outranks that base rule on specificity, three classes to two, with
   !important on both sides. */
.only_hm_stl li.menu-item .elementor-item:after {
	background: linear-gradient( 181deg, var( --lm-gold-text-stops ) ) !important;
}

.lm-hero-overlay .only_hm_stl li.menu-item .elementor-item:hover:after,
.lm-hero-overlay .only_hm_stl li.menu-item .elementor-item.elementor-item-active:after {
	width: 100%;
}

/* Site-wide gold CTA button style, applied to every button on every page
   except Home (Home's buttons - the hero "Build Your Team" button and the
   shared header "Submit Requirement"/nav buttons - already carry this
   exact treatment via their own dedicated rules above, so re-applying it
   here would be redundant, not wrong; excluding Home keeps this rule from
   fighting with Home's other, intentionally different secondary button).
   Covers: Elementor button widgets and form submit buttons (.elementor-button,
   shared by CTA links, the header/nav buttons and the Contact/Submit
   Requirement form submit buttons), the Build Your Team page's native
   form submit input, and the Find Jobs page's custom job-card/search
   buttons. Icon-only utility buttons (e.g. the Knowledge Hub search
   icon) are intentionally left out - this treatment is sized for buttons
   with visible text. Find Jobs' "View Details" button (.btn-view) is also
   excluded - it's the secondary action on each job card and was reverted
   to its original white/outlined design (see find-jobs/section-2.php's
   own inline styles) at the user's request. */
/* The "Submit Requirement" menu item carries .elementor-button too, so without
   the :not() this site-wide gold would outrank .cst-sm's own diagonal gradient
   by one class - and did, on every page but the front one. */
body:not(.elementor-page-31) .elementor-button:not(.cst-sm),
body:not(.elementor-page-31) input[type="submit"],
body:not(.elementor-page-31) .btn-search,
body:not(.elementor-page-31) .btn-apply,
body:not(.elementor-page-31) .btn-view-all {
	font-weight: 700 !important;
	background: linear-gradient(90deg, #8a6418 0%, #c49a3a 20%, #fff2a8 45%, #d4af37 55%, #a87920 75%, #f6df8b 100%) !important;
	color: #000e21 !important;
	border: none !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	box-shadow: none !important;
	filter: none !important;
	animation: none !important;
}

/* "Apply Now" keeps the gold gradient above but without the zoom animation. */
body:not(.elementor-page-31) .btn-apply {
	animation: none !important;
}

/* "Search Jobs" keeps the gold gradient above but without the zoom animation. */
body:not(.elementor-page-31) .btn-search {
	animation: none !important;
}

/* "View All Current Vacancies" keeps the gold gradient above but without the
   zoom animation. */
body:not(.elementor-page-31) .btn-view-all {
	animation: none !important;
}

/* Build Your Team's "Submit Workforce Requirement" form button keeps the
   gold gradient above but without the zoom animation. Scoped to .sd_wrkf_frm
   (unique to this form) so it doesn't affect the Contact or Submit
   Requirement pages' submit buttons, which share the same #lm-form id. */
body:not(.elementor-page-31) .sd_wrkf_frm input[type="submit"] {
	animation: none !important;
}

/* ---------- Build Your Team: workforce form's file field as Find Jobs's "Attach Resume" button ----------
   custom-69.css (the "Simple Custom CSS and JS" plugin's managed file, marked
   not to edit directly) only ever gave this field a plain white box - none of
   the gold-bordered control Find Jobs uses for its resume upload
   (.resume-upload-field in template-parts/pages/find-jobs/section-2.php).
   Same technique here: the wrapping span is the visible button - cream fill,
   the shared gold ramp painted into its border, an upload icon and label -
   and the real <input type="file"> stretches over it at opacity: 0, so the
   click, the file dialog and the "required" validation stay the browser's
   own. !important beats custom-69.css's .workforce-form input and
   .workforce-form input[type=file] rules, which load before this stylesheet.

   height: 56px matches the fixed height custom-69.css gives every field in
   this form, including the "Additional Requirements" textarea beside it -
   this control has no text to wrap, so nothing is lost by pinning it rather
   than letting its own content decide. */
.workforce-form .lm-file-upload {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100% !important;
	height: 56px !important;
	padding: 0 16px !important;
	border-radius: 10px !important;
	border: 1.5px solid transparent !important;
	background:
		linear-gradient( #fcefdb, #fcefdb ) padding-box,
		linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) ) border-box !important;
	box-sizing: border-box !important;
}
.workforce-form .lm-file-upload__icon {
	flex-shrink: 0;
}
.workforce-form .lm-file-upload__label {
	font-size: 13px;
	font-weight: 600;
	color: #0b1739;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* The accepted types and size limit under the control. Turns red, with the
   reason, when frontend.js turns a file away for being too large. */
.workforce-form .lm-file-upload__hint {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.4;
	color: rgba( 255, 255, 255, 0.7 );
}
.workforce-form .lm-file-upload__hint.is-error {
	color: #ff8f8f;
	font-weight: 600;
}
.workforce-form .lm-file-upload input[type="file"] {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	margin: 0;
	padding: 0 !important;
	opacity: 0;
	cursor: pointer;
	background: transparent !important;
}

/* Contact page's form "submit" button keeps the gold gradient above but
   without the zoom animation. Scoped to elementor-element-b7fb368 (the
   Contact form widget) so the Submit Requirement page's identical form
   button is unaffected. */
body:not(.elementor-page-31) .elementor-element-b7fb368 .elementor-button {
	animation: none !important;
}

/* Knowledge Hub article cards' "Read More" button (elementor-element-e1b8d3f,
   repeated per card via the loop template) keeps the gold gradient above but
   without the zoom animation. The arrow icon inherits the base Elementor
   button's fill:#fff, making it nearly invisible on gold - give it an
   explicit dark fill matching the button text. */
body:not(.elementor-page-31) .elementor-element-e1b8d3f .elementor-button {
	animation: none !important;
}
body .elementor-element-e1b8d3f .elementor-button-icon svg {
	fill: #000e21 !important;
}

/* Workforce Solutions hero's "Request Talent" button - arrow icon given the
   same explicit dark fill as the button text, matching the "Read More"
   fix above. */
body .elementor-element-dcf0987 .elementor-button-icon svg {
	fill: #000e21 !important;
}

/* Workforce Solutions' "Explore All Solutions" button - arrow icon given the
   same explicit dark fill as the button text, plus a gold border and gold
   text on hover. */
body .elementor-element-efe71e4 .elementor-button-icon svg {
	fill: #000e21 !important;
}
body .elementor-element-efe71e4 .elementor-button:hover {
	border: 2px solid #dfa33e !important;
}
body .elementor-element-efe71e4 .elementor-button:hover .elementor-button-text {
	color: #dfa33e !important;
}
body .elementor-element-efe71e4 .elementor-button:hover .elementor-button-icon svg {
	fill: #dfa33e !important;
}

/* Build Your Team's "Submit Workforce Requirement" CTA button - arrow icon
   given the same explicit dark fill as the button text. */
body .elementor-element-ca0a0f6 .elementor-button-icon svg {
	fill: #000e21 !important;
}

/* Home hero's "Build Your Team" and "Find Jobs" buttons - gold edge and
   gold text/icon on hover.

   The edge is an inset box-shadow, not a border. A 2px border on hover grew
   each button - Build Your Team from no border, Find Jobs from its 1px - so
   the button row, and with it the whole hero, got 2px taller while the pointer
   was over either one, and the stats section below jumped down and back.
   An inset shadow paints the same 2px gold line inside the button's own box,
   so nothing around it moves. Each button keeps its resting border width. */
body .elementor-element-215b604 .elementor-button:hover,
body .elementor-element-b710817 .elementor-button:hover {
	box-shadow: inset 0 0 0 2px #dfa33e !important;
}
body .elementor-element-215b604 .elementor-button:hover .elementor-button-text,
body .elementor-element-b710817 .elementor-button:hover .elementor-button-text {
	color: #dfa33e !important;
}
body .elementor-element-215b604 .elementor-button:hover .elementor-button-icon svg,
body .elementor-element-b710817 .elementor-button:hover .elementor-button-icon svg {
	fill: #dfa33e !important;
}

/* "Submit Requirement" takes the same hover as "Build Your Team" above: the
   gold gradient stays put and the button gains a 2px #dfa33e outline with its
   label turning the same gold. It had no hover feedback at all until now - the
   nav's underline is suppressed on it (it reads as a stray highlight on a
   solid gold button) and its label colour is pinned, so nothing moved.

   The outline is an inset box-shadow rather than the border "Build Your Team"
   uses, because this one is a menu item: a real border would add 4px to its
   width and shove the nav bar sideways every time the pointer crossed it. An
   inset shadow paints the same 2px line inside the existing box and costs no
   layout. It replaces the hairline rim from the base rule, which is the same
   shadow one pixel thinner - so the two never fight, the rim just thickens
   and turns gold.

   No transition is declared here: the item carries .elementor-button, so it
   already inherits Elementor's transition: all .3s, which is exactly what
   "Build Your Team" eases on. */
/* The hover is "Build Your Team"'s, mechanism and all. That button carries
   .sdd_btn.wh_bg1, and the family implements its hover as a wipe rather than a
   colour swap: a white panel held at transform: scaleY(0) behind the label,
   scaled open to scaleY(1) over 0.3s on hover, with the label lifted above it
   on z-index 1 so it stays legible as the white arrives. That is why no
   background rule anywhere resolves to white - nothing ever sets one.

   Reproduced here on the <li>, because that is the element carrying this
   button's gold and its 6px radius; overflow: hidden clips the panel to that
   radius. Two departures, both forced by this being a menu item rather than a
   standalone anchor:

   - The panel is ::after, not ::before. The nav already spends ::before on
     every item: .elementor-nav-menu li.menu-item:before is the 1px separator
     between items. ::after is free here - the rule that suppresses this
     item's underline targets a.elementor-item:after, the anchor's, not the
     list item's.
   - The gold outline rides on the panel itself as a border rather than being
     "Build Your Team"'s border on the button. A real border on this <li>
     would add 4px to its width and shove the whole nav bar sideways each time
     the pointer crossed it. On the panel it costs no layout and appears with
     the white, which is what the design shows. */
li.menu-item.cst-sm {
	position: relative;
	overflow: hidden;
}
li.menu-item.cst-sm::after {
	position: absolute;
	content: '';
	height: 100%;
	width: 100%;
	left: 0;
	bottom: 0;
	z-index: 0;
	box-sizing: border-box;
	border: 2px solid transparent;
	transform: scaleY(0);
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	border-radius: 0px;
	/* The panel that wipes up on hover: flat white, so the gold button inverts
	   to a white one with a gold rim and gold label. This briefly carried the
	   gold ramp instead; white is the wanted behaviour. */
	background: #fff;
}
li.menu-item.cst-sm:hover::after {
	transform: scaleY(1);
	border-color: #dfa33e;
}
/* The label has to clear the panel, exactly as .sdd_btn does it for its own
   span. This anchor holds a bare text node, so the anchor itself is lifted. */
li.menu-item.cst-sm > a.elementor-item {
	position: relative;
	z-index: 1;
}
/* Gold label against the white hover panel, matching the gold rim that comes in
   with it. It has to track the panel colour: while that panel was briefly gold,
   this had to be the button's dark olive-brown instead, or the label would have
   been gold on gold. */
body li.menu-item.cst-sm:hover > a.elementor-item,
body li.menu-item.cst-sm:hover a,
body li.menu-item.cst-sm:hover .elementor-item,
body .lm-hero-overlay .only_hm_stl li.menu-item.cst-sm:hover a {
	background: transparent !important;
	color: #dfa33e !important;
	fill: #dfa33e !important;
}

/* Find Jobs hero's "Apply for a Job" and "Upload Resume / CV" buttons - same
   gold border and gold text/icon on hover. */
body .elementor-element-d894217 .elementor-button:hover,
body .elementor-element-cbfbbfb .elementor-button:hover {
	border: 2px solid #dfa33e !important;
}
body .elementor-element-d894217 .elementor-button:hover .elementor-button-text,
body .elementor-element-cbfbbfb .elementor-button:hover .elementor-button-text {
	color: #dfa33e !important;
}
body .elementor-element-d894217 .elementor-button:hover .elementor-button-icon svg,
body .elementor-element-cbfbbfb .elementor-button:hover .elementor-button-icon svg {
	fill: #dfa33e !important;
}

/* Workforce Solutions hero's "Request Talent" and "Explore Our Solutions"
   buttons - same gold border and gold text/icon on hover. */
body .elementor-element-dcf0987 .elementor-button:hover,
body .elementor-element-f8d2b74 .elementor-button:hover {
	border: 2px solid #dfa33e !important;
}
body .elementor-element-dcf0987 .elementor-button:hover .elementor-button-text,
body .elementor-element-f8d2b74 .elementor-button:hover .elementor-button-text {
	color: #dfa33e !important;
}
body .elementor-element-dcf0987 .elementor-button:hover .elementor-button-icon svg,
body .elementor-element-f8d2b74 .elementor-button:hover .elementor-button-icon svg {
	fill: #dfa33e !important;
}

/* Find Jobs' hero "Apply for a Job" button (elementor-element-d894217) uses
   the same hover treatment as the job-card "Apply Now" buttons (.btn-apply):
   no continuous zoom animation, and the background darkens to gold-dark on
   hover instead. */
body:not(.elementor-page-31) .elementor-element-d894217 .elementor-button {
	animation: none !important;
}
body .elementor-element-d894217 .elementor-button:hover {
	background: #e69500 !important;
}

/* Find Jobs' "Upload Resume / CV" hero button (elementor-element-cbfbbfb) is
   a secondary/outline button - transparent background, gold border, white
   text - matching the same secondary-button pattern used elsewhere (e.g.
   Home's "Find Jobs" button). Restored to its original kit-find-jobs.css
   values, undoing the global gold-gradient rule above for this one button. */
/* The selector has to outrank the site-wide gold above, not merely follow it.
   That rule is body:not(.elementor-page-31) .elementor-button:not(.cst-sm) -
   three classes and an element, both :not() arguments counting - against the
   two classes this rule used to carry. Both are !important, so specificity
   decided it and the gold won: the button rendered filled, which is what the
   comment above says it was meant to undo. Adding .elementor-element and the
   same :not(.elementor-page-31) takes this to four classes, which settles it
   on specificity rather than on which rule happens to come later. */
body:not(.elementor-page-31) .elementor-element.elementor-element-cbfbbfb .elementor-button {
	font-weight: 600 !important;
	background: #1F428700 !important;
	color: #FFFFFF !important;
	/* 2px, matching the heavier gold edge carried across the site's buttons.
	   Set here rather than overridden later: this rule is deliberately weighted
	   at four classes to beat the site-wide gold, so anything trying to widen
	   the border from outside would have to out-specify it all over again. */
	border: 2px solid var( --e-global-color-ac8659d ) !important;
	border-radius: 4px !important;
	animation: none !important;
}

/* The shared hover rule for these two buttons carries three classes, so with
   the base above now at four it would no longer land on this one. Restated
   here with the hover pseudo-class taking it to five. "Apply for a Job"
   keeps the shared rule and is unaffected. */
body:not(.elementor-page-31) .elementor-element.elementor-element-cbfbbfb .elementor-button:hover {
	border: 2px solid #dfa33e !important;
}

/* Find Jobs' "Apply for a Job" takes "Build Your Team"'s treatment: the same
   brushed gold at the same 133deg and the same dark olive-brown label, held
   in the shared --lm-btn-gold-* properties so the two stay in step. It was
   showing the site-wide gold instead - a flatter 90deg ramp peaking at
   #fff2a8 with a near-black #000e21 label - because it had no rule of its
   own and simply inherited that one.

   Four classes for the same reason as the button above: the site-wide gold
   carries three and an element, and both rules are !important, so anything
   less than four loses on specificity no matter where it sits in the file. */
body:not(.elementor-page-31) .elementor-element.elementor-element-d894217 .elementor-button {
	font-weight: 700 !important;
	--lm-btn-gold-angle: 133deg;
	background: linear-gradient( var( --lm-btn-gold-angle ), var( --lm-btn-gold-stops ) ) !important;
	color: var( --lm-btn-gold-label ) !important;
	fill: var( --lm-btn-gold-label ) !important;
	border: none !important;
	box-shadow: var( --lm-btn-gold-rim ) !important;
	cursor: pointer !important;
	animation: none !important;
}

/* Its existing hover - the amber fill and the gold border - restated at five
   classes so the base above does not swallow it. Behaviour is unchanged;
   only the specificity moves. */
body:not(.elementor-page-31) .elementor-element.elementor-element-d894217 .elementor-button:hover {
	background: #e69500 !important;
	border: 2px solid #dfa33e !important;
}

/* The job search bar's "Search Jobs" button takes "Apply for a Job"'s
   treatment, rest and hover both, so the two golds on this page match.

   It is not an Elementor button - it is a plain <button class="btn-search">
   styled by the inline block in find-jobs/section-2.php - so three things
   have to be said here that "Apply for a Job" gets for free:

   - transition. Elementor gives its buttons transition: all .3s; this one
     declares transition: background .15s ease, which would ease the fill at
     twice the speed and snap the border and label. Restated to match.
   - the icon. The magnifier is stroked, not filled, and its colour is a
     presentation attribute on the <svg> (stroke="#000e21"). CSS outranks a
     presentation attribute, so stroke is set here to track the label the way
     "Apply for a Job"'s arrow tracks its own.
   - the hover. Its own rule, .btn-search:hover, sets a navy fill without
     !important, so the site-wide gold has been overriding it and the button
     has had no hover at all.

   Two classes and two elements, which clears the site-wide gold's two
   classes and one element. The 2px hover border costs no layout: box-sizing
   is border-box both site-wide and in this template's own reset, so it
   insets rather than growing the 44px box and nudging the search row. */
body:not(.elementor-page-31) button.btn-search {
	font-weight: 700 !important;
	--lm-btn-gold-angle: 133deg;
	background: linear-gradient( var( --lm-btn-gold-angle ), var( --lm-btn-gold-stops ) ) !important;
	color: var( --lm-btn-gold-label ) !important;
	fill: var( --lm-btn-gold-label ) !important;
	border: none !important;
	box-shadow: var( --lm-btn-gold-rim ) !important;
	cursor: pointer !important;
	animation: none !important;
	transition: all .3s !important;
	/* Wipe container, as .sdd_btn does it for "Build Your Team". isolation
	   makes this button a stacking context so the panel below can sit at
	   z-index -1 and still paint above this gold rather than behind it. */
	position: relative !important;
	overflow: hidden !important;
	isolation: isolate !important;
}
body:not(.elementor-page-31) button.btn-search svg {
	stroke: var( --lm-btn-gold-label ) !important;
}
/* Hover is "Submit Requirement"'s, which is "Build Your Team"'s: a white
   panel held at scaleY(0) and opened to scaleY(1) over 0.3s, rather than a
   fill that simply changes colour. The gold stays underneath and the label
   and magnifier turn #dfa33e as the white arrives.

   The panel sits at z-index -1, not the z-index 0 those two use. Both of
   them lift their label above the panel instead - .sdd_btn has a <span> and
   the nav item has an <a> - but this button's label is a bare text node with
   nothing to select. Inline content paints above a negative-z-index child,
   so putting the panel under it gets the same result without touching the
   markup, and the magnifier rides above it for free.

   The gold outline rides on the panel, so it arrives with the white and
   costs no layout. */
body:not(.elementor-page-31) button.btn-search::after {
	position: absolute;
	content: '';
	height: 100%;
	width: 100%;
	left: 0;
	bottom: 0;
	z-index: -1;
	box-sizing: border-box;
	border: 2px solid transparent;
	transform: scaleY(0);
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	border-radius: 0px;
	background: #fff;
}
body:not(.elementor-page-31) button.btn-search:hover::after {
	transform: scaleY(1);
	border-color: #dfa33e;
}
body:not(.elementor-page-31) button.btn-search:hover {
	color: #dfa33e !important;
}
body:not(.elementor-page-31) button.btn-search:hover svg {
	stroke: #dfa33e !important;
}

/* Build Your Team's "Submit Workforce Requirement" takes "Submit
   Requirement"'s treatment outright - the same gold at rest and the same
   white wipe on hover.

   No --lm-btn-gold-angle is set, deliberately: .cst-sm does not set one
   either, so both fall through to the 59deg on :root and stay in step if it
   ever moves. It was showing the site-wide gold instead, a flatter 90deg
   ramp with a near-black label.

   Four classes to clear the site-wide gold's three-and-an-element. The kit's
   own hover here (background-color on :hover, five classes) carries no
   !important, so it loses to these regardless of that count.

   This one has a content wrapper holding both the label and the arrow, so a
   single lift puts the pair above the panel - closer to .sdd_btn, which
   lifts its span, than to the search button, which had a bare text node and
   needed the panel pushed underneath instead. */
body:not(.elementor-page-31) .elementor-element.elementor-element-ca0a0f6 .elementor-button {
	font-weight: 700 !important;
	background: linear-gradient( var( --lm-btn-gold-angle ), var( --lm-btn-gold-stops ) ) !important;
	color: var( --lm-btn-gold-label ) !important;
	fill: var( --lm-btn-gold-label ) !important;
	border: none !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	box-shadow: var( --lm-btn-gold-rim ) !important;
	filter: none !important;
	animation: none !important;
	position: relative !important;
	overflow: hidden !important;
}
/* The arrow is pinned to #000e21 further up, from when this button wore the
   site-wide gold. Retaken so it matches the label the way the rest do. */
body:not(.elementor-page-31) .elementor-element.elementor-element-ca0a0f6 .elementor-button .elementor-button-icon svg {
	fill: var( --lm-btn-gold-label ) !important;
}
body:not(.elementor-page-31) .elementor-element.elementor-element-ca0a0f6 .elementor-button::after {
	position: absolute;
	content: '';
	height: 100%;
	width: 100%;
	left: 0;
	bottom: 0;
	z-index: 0;
	box-sizing: border-box;
	border: 2px solid transparent;
	transform: scaleY(0);
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	border-radius: 0px;
	background: #fff;
}
body:not(.elementor-page-31) .elementor-element.elementor-element-ca0a0f6 .elementor-button:hover::after {
	transform: scaleY(1);
	border-color: #dfa33e;
}
body:not(.elementor-page-31) .elementor-element.elementor-element-ca0a0f6 .elementor-button .elementor-button-content-wrapper {
	position: relative;
	z-index: 1;
}
body:not(.elementor-page-31) .elementor-element.elementor-element-ca0a0f6 .elementor-button:hover .elementor-button-text {
	color: #dfa33e !important;
}
body:not(.elementor-page-31) .elementor-element.elementor-element-ca0a0f6 .elementor-button:hover .elementor-button-icon svg {
	fill: #dfa33e !important;
}

/* The form's own "Submit Workforce Requirement" - the wide button at the foot
   of the workforce form - takes "Submit Requirement"'s treatment too. It
   carries the same label as the ca0a0f6 anchor above it, so the two have to
   agree; the anchor scrolls to this form, this one submits it.

   The wipe is built differently here because the element is an <input>, and
   an input has no ::before or ::after to put a panel in. Two background
   layers stand in for it: white on top of the gold, the white sized 100% 0%
   and grown to 100% 100% on hover. Both layers are centred, so it opens from
   the middle outward over 0.3s - the same movement scaleY(0) to scaleY(1)
   gives the others, from the one property an input can animate.

   The outline is an inset box-shadow for the same reason: a real border would
   add 4px to a button whose width comes from its padding. Inset shadows paint
   above the background layers, so it stays visible over the white.

   Three classes and two elements, which clears the site-wide gold's two and
   two. */
body:not(.elementor-page-31) .sd_wrkf_frm input[type="submit"] {
	font-weight: 700 !important;
	background-color: transparent !important;
	background-image: linear-gradient( #fff, #fff ), linear-gradient( var( --lm-btn-gold-angle ), var( --lm-btn-gold-stops ) ) !important;
	background-repeat: no-repeat, no-repeat !important;
	background-position: center center, center center !important;
	background-size: 100% 0%, 100% 100% !important;
	color: var( --lm-btn-gold-label ) !important;
	border: none !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	box-shadow: var( --lm-btn-gold-rim ) !important;
	filter: none !important;
	animation: none !important;
	transition: background-size 0.3s, color 0.3s, box-shadow 0.3s !important;
}
body:not(.elementor-page-31) .sd_wrkf_frm input[type="submit"]:hover {
	background-size: 100% 100%, 100% 100% !important;
	color: #dfa33e !important;
	box-shadow: inset 0 0 0 2px #dfa33e !important;
}

/* Workforce Solutions' "Explore Our Solutions" hero button (elementor-
   element-f8d2b74) is the same kind of secondary/outline button, restored
   to its original kit-workforce-solutions.css values. */
body .elementor-element-f8d2b74 .elementor-button {
	font-weight: 600 !important;
	background: #1F428700 !important;
	color: #FFFFFF !important;
	border: 1px solid #FFFFFF !important;
	border-radius: 4px !important;
	animation: none !important;
}

/* Knowledge Hub's 6 resource-card "Download" buttons (small icon buttons
   overlaid on white cards) are restored to their original kit-knowledge-
   hub.css values - navy text on white, no gradient, no animation. */
body .elementor-element-d0ebd79 .elementor-button,
body .elementor-element-867e6b9 .elementor-button,
body .elementor-element-4a8e5aa .elementor-button,
body .elementor-element-33ed60f .elementor-button,
body .elementor-element-a89985b .elementor-button,
body .elementor-element-0c5ddfe .elementor-button {
	font-weight: 500 !important;
	background: #FFFFFF !important;
	color: #011735 !important;
	fill: #011735 !important;
	border: none !important;
	border-radius: 0 !important;
	animation: none !important;
}

/* Site-wide nav: bold link text. */
.elementor-nav-menu .elementor-item,
.elementor-nav-menu .elementor-sub-item {
	font-weight: 700 !important;
}

/* Site-wide: bigger header logo (both the main header and the sticky-header
   copy, which share the site-wide max-width caps set in kit-global.css). */
.elementor-element-90ae37f img {
	max-width: 260px !important;
}
.elementor-element-4e93119 img {
	max-width: 280px !important;
}

/* "Home" nav item shown in red. Matches the specificity of the default nav
   link color rule above and the overlay-header white-text rule in
   custom-69.css, and is defined last, so it wins via source order on every
   page - including the homepage and hero-overlay pages. */
.only_hm_stl li.menu-item-home a.elementor-item,
.elementor-nav-menu li.menu-item-home a.elementor-item {
	color: #EC3237 !important;
}

/* About page's tagline bar - the user-supplied banner photo used directly as
   one single full-width background (not split into edge pieces - that
   earlier approach left a tall empty gap below since the bar's height was
   still driven by the two lines of text, not the image). The box's height
   is now locked to the image's own aspect ratio (1828:315) via aspect-ratio,
   so at any width the full image shows with no cropping and no leftover
   background-color space, and the heading is centered on the image's own
   clean middle band via flexbox. Text color stays dark navy to read
   against this light background; "Connecting People. Empowering
   Businesses" keeps its gold-gradient treatment from the template default
   in about/section-4.php. */
.elementor-element-75a32c5 {
	position: relative;
	aspect-ratio: 1828 / 315;
	height: auto !important;
	background-color: #edeef0 !important;
	background-image: url("/wp-content/uploads/2026/09/about-banner-full.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border-top: none !important;
	border-bottom: none !important;
}
.elementor-element-75a32c5 .elementor-heading-title {
	color: #0b1739 !important;
	max-width: 47%;
	margin: 0 auto;
	text-align: center;
}

/* Workforce Solutions' "Our Key Offerings" cards - the image and title are
   both inside the same column now covered by a full-card overlay link
   (added in section-4.php) that routes to that offering's own page,
   matching the pattern used for the homepage industry cards. */
.ovf_hidden {
	position: relative;
}
.offer-card-link {
	position: absolute;
	inset: 0;
	z-index: 5;
}

/* Footer "Follow Us" email/website line (elementor-element-f0llow2m) - this
   block was added directly in footer.php rather than through the Elementor
   kit, so it has none of the kit's per-widget-ID rules that every other
   footer icon-list relies on for BOTH color and font-size (they're all
   scoped to specific element IDs like elementor-element-8bc2298, not a
   shared class). Without an explicit font-size the text inherits the
   theme's base 0px size - confirmed via live DevTools inspection
   (getComputedStyle showed font-size: 0px on the text span, height: 0 on
   its box), which is what actually made it invisible, not a caching issue
   or the color alone (color was already correct white). Matches the
   Contact Us list's own font-size/family/weight and colors: white text,
   gold icons. */
.elementor-element-f0llow2m .elementor-icon-list-item > .elementor-icon-list-text {
	font-family: "DM Sans", Sans-serif !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	color: #FFFFFF !important;
}
.elementor-element-f0llow2m {
	--e-icon-list-icon-size: 18px;
	margin-top: 18px;
}
.elementor-element-f0llow2m .elementor-icon-list-item {
	padding-block: 4px;
}
.elementor-element-f0llow2m .elementor-icon-list-icon {
	margin-inline-end: 10px;
}
.elementor-element-f0llow2m .elementor-icon-list-icon svg,
.elementor-element-f0llow2m .elementor-icon-list-icon i {
	fill: #DFA33E !important;
	color: #DFA33E !important;
	width: 18px !important;
	height: 18px !important;
}

/* Workforce Solutions' "Industries We Serve" cards - full-card overlay links
   (added in section-5.php) route each icon/title card to its own industry
   page. No other interactive elements inside these cards, so a full overlay
   is safe here (unlike the homepage partners carousel). */
.elementor-element-2ba3fc5,
.elementor-element-b78b934,
.elementor-element-e5b3e9d,
.elementor-element-c986e88,
.elementor-element-1637d48,
.elementor-element-a7a65dc,
.elementor-element-dd64ee6,
.elementor-element-44e4fb7,
.elementor-element-494c241,
.elementor-element-b42a493,
.elementor-element-191a1cb,
.elementor-element-9f0ff56 {
	position: relative;
}
.isrv-card-link {
	position: absolute;
	inset: 0;
	z-index: 5;
}

/* Knowledge Hub's new "Shipbuilding" category card (elementor-element-
   9f0ff56/57/58) - a hand-added sibling to the other 5 cards in this row,
   which each get their box border, radius, width, icon size and heading
   color from rules scoped to their own specific element ID in
   kit-knowledge-hub.css. Replicated the same values here so the new card
   matches instead of rendering unstyled/unsized. */
.elementor-element-9f0ff56 > .elementor-element-populated {
	border: 1px solid #E7E7E7;
	border-radius: 8px;
	margin: 8px;
}
.elementor-element-9f0ff56 {
	width: 25%;
}

/* This row originally held 8 equal-width cards (each fixed to 1/8th of the
   row, ~167.5px, leaving 2 removed slots' worth of empty space now that only
   6 remain: Aviation, Healthcare, Manufacturing, Construction, Hospitality,
   Shipbuilding). Stretching all 6 to fill the row evenly instead. */
.elementor-element-dd64ee6,
.elementor-element-44e4fb7,
.elementor-element-494c241,
.elementor-element-b42a493,
.elementor-element-191a1cb,
.elementor-element-9f0ff56 {
	width: 16.666% !important;
}
@media (max-width: 767px) {
	.elementor-element-dd64ee6,
	.elementor-element-44e4fb7,
	.elementor-element-494c241,
	.elementor-element-b42a493,
	.elementor-element-191a1cb,
	.elementor-element-9f0ff56 {
		width: 50% !important;
	}
}
.elementor-element-9f0ff57 {
	margin: 10px 0 10px 0;
	text-align: center;
}
.elementor-element-9f0ff57 img {
	width: 100%;
	max-width: 44px;
}
.elementor-element-9f0ff58 {
	margin: 0 0 10px 0;
	text-align: center;
}
.elementor-element-9f0ff58 .elementor-heading-title {
	font-family: "DM Sans", Sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #001635 !important;
}

/* About page only (elementor-1632 prefix scopes it there, since element id
   3e9a001 could otherwise collide with the same id on another page). */
.elementor-1632 .elementor-element.elementor-element-3e9a001 {
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.19);
	transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
	margin-top: 5px !important;
	margin-bottom: 0px;
}

/* About page only. kit-about.css has margin-top:80px on this element with
   identical specificity and loads after custom-customizer.css, so
   !important is required to override it. */
.elementor-1632 .elementor-element.elementor-element-766fef7 {
	transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
	margin-top: 0px !important;
	margin-bottom: 0px;
}

/* Single-post "Latest Post" sidebar (lm_render_related_articles() in
   inc/article.php) - restyled as a bordered thumbnail card, matching the
   Knowledge Hub's own "Most Read Articles" card look, instead of the
   original plain text-only list. */
.lm-related-post {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 14px;
	border: 1px solid #E7E7E7;
	border-radius: 7px;
	padding: 8px;
	margin-bottom: 10px;
}
.lm-related-post__thumb {
	flex: 0 0 90px;
	display: block;
}
.lm-related-post__img {
	display: block;
	width: 90px;
	height: 64px;
	object-fit: cover;
	border-radius: 5px;
}
.lm-related-post__img--placeholder {
	background: #f0f1f4;
}
.lm-related-post__text {
	flex: 1;
	min-width: 0;
}
.lm-related-post .elementor-post__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 4px 0;
}
.lm-related-post .elementor-post__title a {
	color: #011735;
}
.lm-related-post .elementor-post-date {
	font-size: 12px;
	color: #888888;
}

/* Contact: the hero tagline and the trust-badge image were each the last
   widget in their column, so neither carried Elementor's inter-widget
   spacing - the 20px it gives every widget that is not the last one, through
   --kit-widget-spacing. Each has gained a phone-only sibling after it, which
   makes it a not-last widget at every width, including the two where that
   sibling is hidden, and so would open 20px under it on tablet and desktop.
   Pinning the variable back to 0 restores exactly what those two breakpoints
   had. Deliberately outside the phone block, where the same widgets are laid
   out afresh and the spacing is set there. */
.elementor-2142 .elementor-element.elementor-element-d67bfa0,
.elementor-2142 .elementor-element.elementor-element-4cba958 {
	--kit-widget-spacing: 0px;
}

/* Home's three stat figures - 15,000+, 50+ and 18+ - take the "Talent" gold,
   clipped to the glyphs the same way the hero does it. The kit paints them a
   flat --e-global-color-ac8659d and loads after this file, so the override
   needs !important to land; the kit's :has(:focus) rule sets that same colour,
   so suppressing it costs no hover or focus behaviour.

   width: fit-content shrinks each heading's box to its own text. The gradient
   is painted across the element box, so a full-width box would hand each
   figure only the slice of the ramp its glyphs happen to sit over - and the
   three differ enough in width ("15,000+" against "18+") that they would land
   on visibly different colours. Shrunk to the text, each one gets the whole
   ramp end to end and the row reads as one treatment. It stays display: block,
   so the description below is unmoved.
   ========================================================================== */
.elementor-31 .elementor-element.elementor-element-ade8490 .elementor-image-box-title,
.elementor-31 .elementor-element.elementor-element-44af1f6 .elementor-image-box-title,
.elementor-31 .elementor-element.elementor-element-061a916 .elementor-image-box-title {
	width: fit-content !important;
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) ) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}
/* On phones the kit stacks each stat - icon, figure, label - and centres the
   text (custom-69.css). A fit-content box ignores text-align for its own
   position, though: centring only moves the text inside the box, and the box
   itself stayed on the left edge, so 15,000+, 50+ and 18+ sat hard left under
   centred icons and labels. Auto side margins centre the box itself. Desktop
   and tablet set each figure beside its icon, left-aligned, and are untouched. */
@media (max-width: 767px) {
	.elementor-31 .elementor-element.elementor-element-ade8490 .elementor-image-box-title,
	.elementor-31 .elementor-element.elementor-element-44af1f6 .elementor-image-box-title,
	.elementor-31 .elementor-element.elementor-element-061a916 .elementor-image-box-title {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* Home industry cards: the icon ring and the card outline take the "Talent"
   gold. Both were a flat --e-global-color-ac8659d, the same token the stat
   figures used, and the kit loads after this file, so both need !important.
   The glyphs themselves are not here - they are baked into serv-1..6.png and
   were repainted in the file, the PNGs being opaque with the navy behind them
   rather than line art on transparency.

   A border cannot take a gradient, so each ring is painted rather than
   coloured, and the two rings need different techniques because one of them
   is on an <img>.

   The icon ring is a background on the image itself. Its border goes
   transparent and the gradient is laid across the whole border box, so it
   shows only in the 2px the border occupies - the PNG is opaque and covers
   everything inside it. No pseudo-element is possible here: img is a replaced
   element and has none. border-radius: 50% from the kit clips the gradient,
   the PNG and its square corners alike into the circle. */
.elementor-31 .elementor-element.elementor-element-2e1bace img,
.elementor-31 .elementor-element.elementor-element-556565c img,
.elementor-31 .elementor-element.elementor-element-7629114 img,
.elementor-31 .elementor-element.elementor-element-5cebe0c img,
.elementor-31 .elementor-element.elementor-element-6d42a54 img,
.elementor-31 .elementor-element.elementor-element-b933c97 img {
	border-color: transparent !important;
	background-image: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) ) !important;
	background-origin: border-box !important;
	background-clip: border-box !important;
}

/* The card outline gets a ring drawn over where its border sits. The card
   already carries the industry photo as its own background, so the background
   trick above is not available without restating all six photo URLs here; an
   ::after leaves the backgrounds alone. inset: -2px grows the pseudo-element
   from the padding box back out to the border box, and the two masks - one
   over the content box, one over the whole - cancel to leave just the 2px
   band, which border-radius rounds to match the card. ::before and ::after
   are free on these cards; the kit's only ones are scoped to .bg_img_hover1
   and .spl_grd. pointer-events: none keeps the full-card .ind-card-link
   clickable through it. */
.elementor-31 .elementor-element.elementor-element-5dad122 > .elementor-element-populated,
.elementor-31 .elementor-element.elementor-element-c540e32 > .elementor-element-populated,
.elementor-31 .elementor-element.elementor-element-2596aa7 > .elementor-element-populated,
.elementor-31 .elementor-element.elementor-element-1d5d5a4 > .elementor-element-populated,
.elementor-31 .elementor-element.elementor-element-de650da > .elementor-element-populated,
.elementor-31 .elementor-element.elementor-element-127b7fb > .elementor-element-populated {
	border-color: transparent !important;
}
.elementor-31 .elementor-element.elementor-element-5dad122 > .elementor-element-populated::after,
.elementor-31 .elementor-element.elementor-element-c540e32 > .elementor-element-populated::after,
.elementor-31 .elementor-element.elementor-element-2596aa7 > .elementor-element-populated::after,
.elementor-31 .elementor-element.elementor-element-1d5d5a4 > .elementor-element-populated::after,
.elementor-31 .elementor-element.elementor-element-de650da > .elementor-element-populated::after,
.elementor-31 .elementor-element.elementor-element-127b7fb > .elementor-element-populated::after {
	content: "";
	position: absolute;
	inset: -2px;
	padding: 2px;
	border-radius: 10px;
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) );
	-webkit-mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	        mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
	z-index: 2;
}

/* ==========================================================================
   Footer: the gold takes the "Talent" gradient
   Covers the three column rules, the "Follow Us" heading and every inline
   icon in the footer. Deliberately excluded: the LeoMarshell logo and the
   five social buttons, which keep their own brand colours.

   The industry, licence and tagline icons are not here - those are images
   (nn-1..6.jpg, hh.jpg, hhf.jpg) and were repainted in the files themselves.
   ========================================================================== */

/* The rules were a 3px border in a flat #FBB112, and a border cannot hold a
   gradient. Dropping the border and giving the separator its own height turns
   the same 50px rule into a painted box the gradient can fill. */
.elementor-element-0839a2f .elementor-divider-separator,
.elementor-element-f5858bd .elementor-divider-separator,
.elementor-element-f5c9919 .elementor-divider-separator {
	border-block-start: 0 !important;
	block-size: 3px !important;
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) ) !important;
}

/* "Follow Us" was the same flat #FBB112. Clipped to the glyphs like the stat
   figures, and shrunk to its own text so it gets the whole ramp rather than
   the slice a full-width box would leave it. */
.elementor-element-6a8e760 .elementor-heading-title {
	width: fit-content !important;
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) ) !important;
	-webkit-background-clip: text !important;
	        background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

/* The inline icons: the map pin and phone, the seven Quick Links chevrons,
   and the website and email marks. Each fill points at the gradient declared
   in footer.php. The chevrons were white rather than gold and are included
   deliberately - the ask was every icon in the footer bar the logo and the
   five social buttons, which are untouched below.

   Both the svg and the i are set: the kit styles each list through both, and
   which one renders depends on whether Elementor is serving its icons as
   inline SVG or as the webfont. */
.elementor-element-8bc2298 .elementor-icon-list-icon svg,
.elementor-element-d561068 .elementor-icon-list-icon svg,
.elementor-element-f0llow2m .elementor-icon-list-icon svg {
	fill: url( #lm-gold-icon ) !important;
}
.elementor-element-8bc2298 .elementor-icon-list-icon i,
.elementor-element-d561068 .elementor-icon-list-icon i,
.elementor-element-f0llow2m .elementor-icon-list-icon i {
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) ) !important;
	-webkit-background-clip: text !important;
	        background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

/* About Us hero: the words picked out in orange take the "Talent" gold.
   Two sources, one rule. The subheading's "Experience" and "Excellence" are
   spans carrying an inline color: #faaa04, which arrives from the saved field
   rather than the template, so it cannot be edited out of the markup here -
   and an inline style loses only to !important, which is why every
   declaration below carries it. The three paragraphs mark their terms up as
   bare spans instead and are painted by .sd_ab_img_box .elementor-image-box-
   description span, a flat #efa002 further up this file.

   box-decoration-break: clone matters here in a way it did not for the stat
   figures: these spans sit in running text and wrap. "future-ready teams"
   breaks across two lines in the design, and without clone the gradient
   would be laid once across the pair of fragments, handing each line a
   different part of the ramp. With it, every fragment gets the whole ramp.

   "About Us" above is deliberately untouched: its "Us" is red, not orange. */
.elementor-1632 .elementor-element.elementor-element-fa6e2bb .elementor-heading-title span,
.sd_ab_img_box .elementor-image-box-description span {
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-bright-stops ) ) !important;
	-webkit-background-clip: text !important;
	        background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	-webkit-box-decoration-break: clone;
	        box-decoration-break: clone;
}

/* About Us stats band: the four figures - 15,000+, 18+, GLOBAL, ETHICAL -
   take the "Talent" gold. They were a flat #EFA002 at 32px, and the kit
   loads after this file, so the clip needs !important; the kit's :has(:focus)
   rule sets that same colour, so nothing is lost by overriding it.

   width: fit-content for the same reason as the home page figures: the
   gradient is painted across the element box, and these four differ enough
   in width ("15,000+" against "18+") that a full-width box would hand each
   one a different part of the ramp. Shrunk to its own text, each gets the
   whole ramp and the row reads as one treatment.

   The band's fifth box - "YEARS OF EXCELLENCE", widget bcc03a4 - is left
   alone: it is a different, top-aligned widget and was not in the design
   this came from. The four white icons beside these figures are not here
   either; they are n-1..4.jpg and were repainted in the files. */
.elementor-1632 .elementor-element.elementor-element-8de2241 .elementor-image-box-title,
.elementor-1632 .elementor-element.elementor-element-fdc3b8b .elementor-image-box-title,
.elementor-1632 .elementor-element.elementor-element-c553d8c .elementor-image-box-title,
.elementor-1632 .elementor-element.elementor-element-b904e92 .elementor-image-box-title {
	width: fit-content !important;
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) ) !important;
	-webkit-background-clip: text !important;
	        background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

/* Build Your Team's "The Leo Marshell Advantage" rule takes the "Talent"
   gold. It was 3px of --e-global-color-513fed6, the red, and a border cannot
   hold a gradient, so the border goes and the separator becomes a painted
   60px box the gradient fills - the same swap the footer rules took.

   The six icons above it are not here: they are f1..6.jpg and were repainted
   in the files. Note that both sit on white, unlike every other surface this
   gold has gone onto, so the pale stops in the ramp carry very little
   contrast there - see the note handed over with this change. */
.elementor-2272 .elementor-element.elementor-element-eff8033 .elementor-divider-separator {
	border-block-start: 0 !important;
	block-size: 3px !important;
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) ) !important;
}

/* "Our Talent Delivery Framework" rule, the same red-to-gold swap as the
   Advantage rule above: the border goes and the separator becomes a painted
   box the gradient can fill.

   Its six step icons are not here. Only their rings were meant to move, and
   the ring, the navy disc and the white glyph all live in the one JPEG, so
   they were separated in the file rather than in CSS: R minus B tells the
   three apart cleanly - about +200 across the ring, 0 on the white ground
   and negative on the navy - so only the ring shifts and its antialiased
   edges against both neighbours shift proportionally. The numbered badges
   keep their white fill and navy digits; their rings move with the rest. */
.elementor-2272 .elementor-element.elementor-element-9417de8 .elementor-divider-separator {
	border-block-start: 0 !important;
	block-size: 3px !important;
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) ) !important;
}

/* "Let's Build Your Winning Team Together" - the gold on "Winning Team".

   Done in CSS rather than in the template, because the template default is
   not what renders: the field is saved on the page, and the saved copy wraps
   the words in an inline color:#dfa33e instead of the template's gradient.
   An inline style loses only to !important, hence every declaration below.
   The template default was re-angled to 16deg alongside this so the two
   agree if the saved value is ever cleared.

   Scoped to the span inside this one heading so the surrounding white text
   is untouched. box-decoration-break: clone in case the line wraps and the
   span breaks in two - each fragment then gets the whole ramp rather than
   half of it. */
.elementor-2272 .elementor-element.elementor-element-802b661 .elementor-heading-title span {
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) ) !important;
	-webkit-background-clip: text !important;
	        background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	-webkit-box-decoration-break: clone;
	        box-decoration-break: clone;
}

/* Workforce Solutions hero: "Request Talent" takes "Submit Requirement"'s
   gold - the shared --lm-btn-gold-* at the 59deg on :root, with the same
   olive-brown label. No angle is set here, exactly as .cst-sm sets none, so
   both follow :root together if it ever moves.

   It previously wore the "Talent" text ramp, which peaks near white and
   carried a near-black label; the button gold peaks at #f1e197 and reads
   as brushed metal instead. Both were showing the site-wide
   gold, a flatter 90deg ramp.

   Four classes to clear that rule's three-and-an-element. Only the fill is
   set: the label keeps the #000e21 the site-wide rule gives it, and the
   existing hover on both is left as it stands.

   Worth knowing for later: "Explore Our Solutions" still carries an older
   rule further up meaning to make it a transparent outline button, which
   has never applied - it sits at two classes and loses to the site-wide
   gold. This rule settles what that button looks like; the older one is now
   doubly dead. */
body:not(.elementor-page-31) .elementor-element.elementor-element-dcf0987 .elementor-button {
	font-weight: 700 !important;
	background: linear-gradient( var( --lm-btn-gold-angle ), var( --lm-btn-gold-stops ) ) !important;
	color: var( --lm-btn-gold-label ) !important;
	fill: var( --lm-btn-gold-label ) !important;
	border: none !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	box-shadow: var( --lm-btn-gold-rim ) !important;
	filter: none !important;
	animation: none !important;
}
/* The label and arrow are pinned to #12100a by the kit at four classes, and
   the arrow again at two, from when this wore a different gold. Retaken at
   five so both track the button. */
body:not(.elementor-page-31) .elementor-element.elementor-element-dcf0987 .elementor-button .elementor-button-text,
body:not(.elementor-page-31) .elementor-element.elementor-element-dcf0987 .elementor-button .elementor-button-icon svg {
	color: var( --lm-btn-gold-label ) !important;
	fill: var( --lm-btn-gold-label ) !important;
}
/* The olive above is the resting label only. This button carries
   .sdd_btn.wh_bg1, so hovering opens a white panel behind the label, and the
   rule that turns it #dfa33e for the hover sits a class below the resting
   one - so the olive was holding through the hover and reading dull against
   the white. Restated with :hover in the selector, which puts it one clear. */
body:not(.elementor-page-31) .elementor-element.elementor-element-dcf0987 .elementor-button:hover .elementor-button-text,
body:not(.elementor-page-31) .elementor-element.elementor-element-dcf0987 .elementor-button:hover .elementor-button-icon svg {
	color: #dfa33e !important;
	fill: #dfa33e !important;
}

/* "Explore Our Solutions" was built as the secondary of the pair - a muted
   #8a7a4e border with a pale #dcc084 label - so filling it with the gold
   above leaves that label sitting on its own colour. Measured against the
   ramp it runs from 1.06:1 to 1.64:1 across seven of the eight stops, which
   is not a dim label, it is an absent one. It takes its neighbour's #12100a
   instead, which holds 3.21:1 at the ramp's darkest point and better
   everywhere else.

   Four classes and an element, to clear the kit's own four-class rule. */
/* "Explore Our Solutions" is the secondary of the pair after all: no fill,
   just the gold outline, with a white label - the treatment Home's "Find
   Jobs" carries. Values taken off that button as rendered: #ffffff label,
   #dfa33e border, and the hero showing through where the fill would be.

   This is what the older rule further up has been trying to do since it was
   written; it sits at two classes and has always lost to the site-wide gold.
   Four classes and an element here, which clears both that gold and the
   kit's own four-class border-color. */
body:not(.elementor-page-31) .elementor-element.elementor-element-f8d2b74 .elementor-button {
	background: transparent !important;
	background-image: none !important;
	/* The 1px stays in the box so the button keeps its size, but it is no
	   longer what you see: the edge is now the 16deg gold ramp, drawn as a
	   masked ring on ::after further down. Left at #dfa33e it would have shown
	   as a flat line just outside the ramp - the doubled border again. Set
	   here rather than overridden later because this rule is deliberately
	   weighted at four classes to beat both the site-wide gold and the kit. */
	border: 1px solid transparent !important;
}
body:not(.elementor-page-31) .elementor-element.elementor-element-f8d2b74 .elementor-button-text,
body:not(.elementor-page-31) .elementor-element.elementor-element-f8d2b74 .elementor-button-icon svg {
	color: #ffffff !important;
	fill: #ffffff !important;
}
/* The white above is for the resting button only. This widget carries
   .sdd_btn.wh_bgno, so hovering scales a white panel open behind the label -
   and the rule that turns the label gold for the hover sits at the same four
   classes as the white one, which meant the white won on file order alone
   and the text disappeared into the panel. Restated here with :hover and
   .elementor-button in the selector, which puts it two classes clear.

   #dfa33e is the colour its neighbour "Request Talent" already uses on the
   same white panel, so the pair hover alike. */
body:not(.elementor-page-31) .elementor-element.elementor-element-f8d2b74 .elementor-button:hover .elementor-button-text,
body:not(.elementor-page-31) .elementor-element.elementor-element-f8d2b74 .elementor-button:hover .elementor-button-icon svg {
	color: #dfa33e !important;
	fill: #dfa33e !important;
}

/* Workforce Solutions' two section rules - under "The Leo Marshell Advantage"
   and under "Comprehensive Workforce Solutions" - take the "Talent" gold.
   Both were 3px of --e-global-color-513fed6, the red, and a border cannot
   hold a gradient, so each separator drops its border and becomes a painted
   box the gradient fills. Same swap the Build Your Team rules took.

   The page's other two dividers are deliberately left alone: e87825f in the
   hero is already transparent (#FFFFFF00), and 896dae1 is the 2px accent
   pair flanking the "Why Global Employers" eyebrow, not an underline. */
.elementor-2000 .elementor-element.elementor-element-a306495 .elementor-divider-separator,
.elementor-2000 .elementor-element.elementor-element-6870267 .elementor-divider-separator {
	border-block-start: 0 !important;
	block-size: 3px !important;
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) ) !important;
}

/* Knowledge Hub's three section rules - under "Explore by Category",
   "Featured Article" and "Most Read Articles" - take the "Talent" gold.
   All three were 3px of --e-global-color-ac8659d, the flat gold token the
   stat figures used to carry, and a border cannot hold a gradient, so each
   separator drops its border and becomes a painted box the gradient fills. */
.elementor-2767 .elementor-element.elementor-element-d3294d4 .elementor-divider-separator,
.elementor-2767 .elementor-element.elementor-element-6f9db8b .elementor-divider-separator,
.elementor-2767 .elementor-element.elementor-element-8695f27 .elementor-divider-separator {
	border-block-start: 0 !important;
	block-size: 3px !important;
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) ) !important;
}

/* Knowledge Hub's "Read More" takes "Build Your Team"'s treatment: the same
   brushed gold re-angled to 133deg on itself, the same olive-brown label,
   and the same white wipe on hover. It was wearing the site-wide gold - a
   flatter 90deg ramp with a near-black #000e21 label.

   Four classes to clear that gold's three-and-an-element. The card's own
   styles arrive in an inline block on the page (prefixed .elementor-3510,
   the template it renders from) and carry no !important, so they lose to
   these whatever their count.

   The wipe is rebuilt here rather than inherited: this widget does not carry
   .sdd_btn, the class that gives "Build Your Team" its panel. The content
   wrapper holds both label and arrow, so one lift clears the pair, and the
   gold outline rides on the panel so it arrives with the white and costs no
   layout. */
body:not(.elementor-page-31) .elementor-element.elementor-element-e1b8d3f .elementor-button {
	font-weight: 700 !important;
	--lm-btn-gold-angle: 133deg;
	background: linear-gradient( var( --lm-btn-gold-angle ), var( --lm-btn-gold-stops ) ) !important;
	color: var( --lm-btn-gold-label ) !important;
	fill: var( --lm-btn-gold-label ) !important;
	border: none !important;
	box-shadow: var( --lm-btn-gold-rim ) !important;
	cursor: pointer !important;
	animation: none !important;
	position: relative !important;
	overflow: hidden !important;
}
/* The arrow is pinned to #000e21 further up, from when this wore the
   site-wide gold. Retaken so it matches the label. */
body:not(.elementor-page-31) .elementor-element.elementor-element-e1b8d3f .elementor-button .elementor-button-icon svg {
	fill: var( --lm-btn-gold-label ) !important;
}
body:not(.elementor-page-31) .elementor-element.elementor-element-e1b8d3f .elementor-button::after {
	position: absolute;
	content: '';
	height: 100%;
	width: 100%;
	left: 0;
	bottom: 0;
	z-index: 0;
	box-sizing: border-box;
	border: 2px solid transparent;
	transform: scaleY(0);
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	border-radius: 0px;
	background: #fff;
}
body:not(.elementor-page-31) .elementor-element.elementor-element-e1b8d3f .elementor-button:hover::after {
	transform: scaleY(1);
	border-color: #dfa33e;
}
body:not(.elementor-page-31) .elementor-element.elementor-element-e1b8d3f .elementor-button .elementor-button-content-wrapper {
	position: relative;
	z-index: 1;
}
body:not(.elementor-page-31) .elementor-element.elementor-element-e1b8d3f .elementor-button:hover .elementor-button-text {
	color: #dfa33e !important;
}
body:not(.elementor-page-31) .elementor-element.elementor-element-e1b8d3f .elementor-button:hover .elementor-button-icon svg {
	fill: #dfa33e !important;
}

/* Knowledge Hub resources: the six "Download" links lose the gold fill.

   They were never meant to be filled buttons. The kit sets each of them
   background-color:#FFFFFF, color:#011735 and padding:0 - a plain navy text
   link sitting on the white card. The site-wide gold caught them because
   they are .elementor-button, and with padding:0 it wrapped the words
   tightly, which is why they read as highlighted text rather than buttons.

   Their own values restored. Four classes clears the site-wide gold's three
   and an element; the kit rules themselves carry no !important, so they lost
   to it despite sitting at four. Background is transparent rather than the
   kit's white so the link holds up if the card colour ever changes. */
body:not(.elementor-page-31) .elementor-element.elementor-element-0c5ddfe .elementor-button,
body:not(.elementor-page-31) .elementor-element.elementor-element-33ed60f .elementor-button,
body:not(.elementor-page-31) .elementor-element.elementor-element-4a8e5aa .elementor-button,
body:not(.elementor-page-31) .elementor-element.elementor-element-867e6b9 .elementor-button,
body:not(.elementor-page-31) .elementor-element.elementor-element-a89985b .elementor-button,
body:not(.elementor-page-31) .elementor-element.elementor-element-d0ebd79 .elementor-button {
	background: transparent !important;
	background-image: none !important;
	color: #011735 !important;
	fill: #011735 !important;
	border: none !important;
}
body:not(.elementor-page-31) .elementor-element.elementor-element-0c5ddfe .elementor-button .elementor-button-icon svg,
body:not(.elementor-page-31) .elementor-element.elementor-element-33ed60f .elementor-button .elementor-button-icon svg,
body:not(.elementor-page-31) .elementor-element.elementor-element-4a8e5aa .elementor-button .elementor-button-icon svg,
body:not(.elementor-page-31) .elementor-element.elementor-element-867e6b9 .elementor-button .elementor-button-icon svg,
body:not(.elementor-page-31) .elementor-element.elementor-element-a89985b .elementor-button .elementor-button-icon svg,
body:not(.elementor-page-31) .elementor-element.elementor-element-d0ebd79 .elementor-button .elementor-button-icon svg {
	fill: #011735 !important;
}

/* Knowledge Hub, the remaining eight rules: the two section underlines
   ("Employer Insights", "Career Resources") and the six bars along the foot
   of the downloadable-resource cards. All eight are divider widgets with the
   same 3px --e-global-color-ac8659d, so they take the gold together - the
   card bars are simply the ones set to width:100%.

   Same swap as every other rule: the border goes and the separator becomes a
   painted box the gradient fills. */
.elementor-2767 .elementor-element.elementor-element-32ccfcc .elementor-divider-separator,
.elementor-2767 .elementor-element.elementor-element-4b03e98 .elementor-divider-separator,
.elementor-2767 .elementor-element.elementor-element-09bea27 .elementor-divider-separator,
.elementor-2767 .elementor-element.elementor-element-7061cf2 .elementor-divider-separator,
.elementor-2767 .elementor-element.elementor-element-7fd57f8 .elementor-divider-separator,
.elementor-2767 .elementor-element.elementor-element-8e5e8d7 .elementor-divider-separator,
.elementor-2767 .elementor-element.elementor-element-a3b05ba .elementor-divider-separator,
.elementor-2767 .elementor-element.elementor-element-e247559 .elementor-divider-separator {
	border-block-start: 0 !important;
	block-size: 3px !important;
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) ) !important;
}

/* Contact's hero rule, under "Your Gateway to Global Talent Solutions",
   takes the "Talent" gold. It was 100px of --e-global-color-ac8659d.

   block-size reads --divider-border-width rather than naming 3px, because
   this is the one rule on the site with a phone override: the block below
   pins that variable to 2px under 767px. Naming the height outright here
   would have quietly overridden that and left the phone a 3px bar. The other
   rules given this treatment have no such override, so they name their
   height directly.

   The 60px red rule above the heading (aa2b12a, under the "CONTACT US"
   eyebrow) is a different divider and is left as it is. */
.elementor-2142 .elementor-element.elementor-element-2cf9d4f .elementor-divider-separator {
	border-block-start: 0 !important;
	block-size: var( --divider-border-width, 3px ) !important;
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) ) !important;
}

/* Contact's form submit takes "Build Your Team"'s treatment: the same
   brushed gold re-angled to 133deg, the same olive-brown label, and the same
   white wipe on hover. It was wearing the site-wide gold.

   Scoped to the Contact form widget (b7fb368) rather than to submit buttons
   generally, because the Submit Requirement page carries an identical form
   with the same markup and is left alone.

   This is a <button>, so the panel can be a pseudo-element as it is on the
   other buttons - unlike Build Your Team's own form submit, which is an
   <input> and had to fake the wipe with background layers. The content
   wrapper lifts the label clear of it.

   Four classes clears the site-wide gold's three-and-an-element. The kit's
   own :hover here sits at six classes but carries no !important, so it loses
   to these regardless. */
body:not(.elementor-page-31) .elementor-element.elementor-element-b7fb368 .elementor-button {
	font-weight: 700 !important;
	--lm-btn-gold-angle: 133deg;
	background: linear-gradient( var( --lm-btn-gold-angle ), var( --lm-btn-gold-stops ) ) !important;
	color: var( --lm-btn-gold-label ) !important;
	fill: var( --lm-btn-gold-label ) !important;
	border: none !important;
	box-shadow: var( --lm-btn-gold-rim ) !important;
	cursor: pointer !important;
	animation: none !important;
	position: relative !important;
	overflow: hidden !important;
}
body:not(.elementor-page-31) .elementor-element.elementor-element-b7fb368 .elementor-button::after {
	position: absolute;
	content: '';
	height: 100%;
	width: 100%;
	left: 0;
	bottom: 0;
	z-index: 0;
	box-sizing: border-box;
	border: 2px solid transparent;
	transform: scaleY(0);
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	border-radius: 0px;
	background: #fff;
}
body:not(.elementor-page-31) .elementor-element.elementor-element-b7fb368 .elementor-button:hover::after {
	transform: scaleY(1);
	border-color: #dfa33e;
}
body:not(.elementor-page-31) .elementor-element.elementor-element-b7fb368 .elementor-button .elementor-button-content-wrapper {
	position: relative;
	z-index: 1;
}
body:not(.elementor-page-31) .elementor-element.elementor-element-b7fb368 .elementor-button:hover,
body:not(.elementor-page-31) .elementor-element.elementor-element-b7fb368 .elementor-button:hover .elementor-button-text {
	color: #dfa33e !important;
}

/* Contact only: the overlay header's menu labels go navy.

   Every hero-overlay page holds its nav white, which works over the dark
   heroes the other pages use. Contact's hero is a bright daylight photo, so
   white on white leaves the labels barely there. They take #011735 instead -
   the colour of the "CONTACT US" heading below them, sampled off the page.

   .elementor-page-2142 keeps this to Contact, so no other page changes. It
   is also scoped to .only_hm_stl, the overlay header over the hero, and so
   does not touch the sticky header that appears on scroll with its own
   background and its own colours.

   Two items are excluded by name rather than by hoping they are darker than
   the rest: :not(.menu-item-home) leaves "Home" its #EC3237 red, and
   :not(.cst-sm) leaves "Submit Requirement" alone - it is a gold button, and
   navy on gold is not what that item wants.

   Seven classes, which clears the white rule's three-and-two comfortably.

   Scoped to .elementor-nav-menu--main, the horizontal menu that sits over the
   photo. The phone menu panel lives inside the same header, so without it the
   navy also landed on the panel's dark background - every label but Home and
   Submit Requirement went nearly invisible. The panel keeps the colours it has
   on every other page.

   Both page and overlay classes sit on <body>, so they are written as one
   compound - .elementor-page-2142.lm-hero-overlay, no space. Separated by a
   space they read as "an overlay inside the page", which no element can
   satisfy when the two live on the same tag, and the rule matches nothing. */
.elementor-page-2142.lm-hero-overlay .only_hm_stl .elementor-nav-menu--main li.menu-item:not(.menu-item-home):not(.cst-sm) a.elementor-item {
	color: #011735 !important;
}

/* Workforce Request form: the notice that follows a submission.

   It now sits under the submit button rather than above the heading, and it
   sits on the panel's #061c47, so the success line is set white. Elementor
   ships no colour for .elementor-message-success at all - only
   .form-message-success, a different class - so it was inheriting whatever
   the panel gave it and barely showing.

   Scoped to .workforce-form, which only this form has. Its #lm-form id would
   have been the obvious hook but four templates share it, so it would have
   reached the Contact, Find Jobs and Submit Requirement forms too.

   The error colour is deliberately left red: white would read as another
   confirmation. The ::before is dropped on both, though - it asks for a glyph
   from the eicons font, which this build does not load, so it renders as an
   empty box against the text. */
.workforce-form .elementor-message {
	margin: 18px 0 0 !important;
	font-size: 15px;
	line-height: 1.5;
}
.workforce-form .elementor-message::before {
	content: none !important;
	margin-inline-end: 0 !important;
}
.workforce-form .elementor-message-success {
	color: #ffffff !important;
}

/* Build Your Team hero rule, under "The Right Talent. The Right Way.", takes
   the "Talent" gold. It was 60px of --e-global-color-ac8659d.

   block-size reads --divider-border-width rather than naming 3px: the phone
   block pins that variable to 2px for this divider, and removing the border
   would otherwise strand it. Same reason as the Contact hero rule. */
.elementor-2272 .elementor-element.elementor-element-a078b6c .elementor-divider-separator {
	border-block-start: 0 !important;
	block-size: var( --divider-border-width, 3px ) !important;
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) ) !important;
}

/* Contact form: the notice that follows a submission now sits under the
   submit button rather than above the first field.

   No colour is set here, deliberately. The workforce notice needed white
   because it sits on that form's #061c47 panel; this one sits on a white
   card, where the default dark text is what you want and white would be
   invisible. Only the spacing and the glyph are touched.

   The ::before asks for an icon from the eicons font, which this build does
   not load, so it draws an empty box in front of the message. Dropped, as it
   was on the workforce form. */
.elementor-2142 .elementor-element.elementor-element-b7fb368 .elementor-message {
	margin: 16px 0 0 !important;
	line-height: 1.5;
}
.elementor-2142 .elementor-element.elementor-element-b7fb368 .elementor-message::before {
	content: none !important;
	margin-inline-end: 0 !important;
}

/* Knowledge Hub stats band: the "Global Employer & Recruitment Partner
   Network" box had no figure above it, unlike the three beside it. It gains
   a 50+, matching the same claim on the home page, and takes the "Talent"
   gold.

   The kit already carried a title rule for this widget - 28px DM Sans at
   #FFFFFF - so only the markup was missing; the new heading inherits that
   sizing and this overrides just the colour. width: fit-content for the same
   reason as the other figures: the gradient paints across the element box,
   and a full-width one would hand the two characters a sliver of the ramp.

   Its own key, lm_box_3_value, rather than lm_box_4_title: the numbering in
   this file is already offset (the fourth box's figure is lm_box_3_title),
   so a numbered key here would read as belonging to a different box. Page
   fields are derived from the templates, so this becomes editable in the
   admin on its own.

   All four figures in the band take the gold together - 15,000+, 18+, 50+
   and Government of India - so the row reads as one treatment rather than one gold figure
   among three white ones. e181e1b (15,000+) is included even though its
   column is not currently rendered, so it matches if it returns. */
.elementor-2767 .elementor-element.elementor-element-e181e1b .elementor-image-box-title,
.elementor-2767 .elementor-element.elementor-element-4422acf .elementor-image-box-title,
.elementor-2767 .elementor-element.elementor-element-9433a7b .elementor-image-box-title,
.elementor-2767 .elementor-element.elementor-element-af99e04 .elementor-image-box-title {
	width: fit-content !important;
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) ) !important;
	-webkit-background-clip: text !important;
	        background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

/* ---------- Knowledge Hub band: the four icons on one line ----------
   (lm-kh-band-icons-level) The four claims carry elementor-vertical-align-top
   and each box aligns its own icon to its own text, so on their own they
   would all start level. The kit then centres every widget inside its
   column, and the four are not the same height - the captions run to two,
   two, three and four lines - so each taller box started higher than the
   one before it and the icons stepped up across the row: measured at 755,
   758, 744 and 729 from the top of the page, a 29px stagger.

   Aligning the column to the start instead lets every box begin at the same
   line, which is what the widgets were asking for. The handshake box used
   to carry a 10px top margin on its icon to fake this - that came off with
   this rule, since it now sits level on its own and the nudge would only
   push it back out by 10px.

   Phones are untouched: under 767px the band is re-laid as a 2x2 grid with
   its own alignment, later in this file. */
.elementor-2767 .elementor-element.elementor-element-d94d329 > .elementor-container > .elementor-column > .elementor-widget-wrap {
	align-content: flex-start !important;
	align-items: flex-start !important;
}

/* Build Your Team hero stats: the two counted figures take the "Talent"
   gold. Both were #FFFFFF at 22px from the kit.

   "Global" beside them is left white on purpose - it is a word, not a count,
   and the ask was for these two.

   width: fit-content for the same reason as every other figure given this
   treatment: the gradient paints across the element box, and these headings
   are full-width, so "18+" would otherwise be handed a sliver of the ramp
   while "15,000+" got a different part of it. */
.elementor-2272 .elementor-element.elementor-element-09aaaac .elementor-heading-title,
.elementor-2272 .elementor-element.elementor-element-caebc10 .elementor-heading-title {
	width: fit-content !important;
	/* these two are text-align: center, and a shrunk block with no auto
	   margins hugs the left - so the box has to be re-centred by hand */
	margin-inline: auto !important;
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) ) !important;
	-webkit-background-clip: text !important;
	        background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

/* About Us: the licence call to action, between the banner and the footer.
   It wears "Submit Requirement"'s gold and its hover, so no angle is set -
   .cst-sm sets none either, and both fall through to the 59deg on :root.

   Three classes and two elements. The site-wide gold sits at three and one
   and is !important, so the section element in the selector is what carries
   this past it rather than luck with source order.

   The wipe is built here rather than inherited: this button does not carry
   .sdd_btn. Its content wrapper holds the label, so one lift clears it, and
   the gold outline rides on the panel so it arrives with the white and costs
   no layout. */
section.lm-licence-cta {
	text-align: center;
	padding: 56px 20px 64px;
}
body:not(.elementor-page-31) section.lm-licence-cta .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 34px !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	background: linear-gradient( var( --lm-btn-gold-angle ), var( --lm-btn-gold-stops ) ) !important;
	color: var( --lm-btn-gold-label ) !important;
	fill: var( --lm-btn-gold-label ) !important;
	border: none !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	box-shadow: var( --lm-btn-gold-rim ) !important;
	filter: none !important;
	animation: none !important;
	position: relative !important;
	overflow: hidden !important;
	transition: all .3s !important;
}
body:not(.elementor-page-31) section.lm-licence-cta .elementor-button::after {
	position: absolute;
	content: '';
	height: 100%;
	width: 100%;
	left: 0;
	bottom: 0;
	z-index: 0;
	box-sizing: border-box;
	border: 2px solid transparent;
	transform: scaleY(0);
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	border-radius: 0px;
	background: #fff;
}
body:not(.elementor-page-31) section.lm-licence-cta .elementor-button:hover::after {
	transform: scaleY(1);
	border-color: #dfa33e;
}
body:not(.elementor-page-31) section.lm-licence-cta .elementor-button .elementor-button-content-wrapper {
	position: relative;
	z-index: 1;
}
body:not(.elementor-page-31) section.lm-licence-cta .elementor-button:hover .elementor-button-text {
	color: #dfa33e !important;
}

/* About Us: the licence dialog the CTA opens.

   Dressed in the site's own colours: the header navy (#001535) for the
   heading band, the 16deg gold ramp on the title as on the dark hero
   headings, and the white-safe gold for accents on the white body - the
   bright stops in the dark-ground ramp vanish on white. Text is the navy
   of the headings, softened for labels.

   position: fixed puts it over the page regardless of where the section sits
   in the document, and the [hidden] rule needs !important because the
   overlay is a flex container - display: flex would otherwise beat the
   browser default that hidden relies on, and the dialog would never close.

   The panel is still the scroller (the script resets its scrollTop on open);
   the heading band is sticky inside it rather than a separate pane. */
.lm-lic-overlay {
	--lm-lic-navy: #001535;
	--lm-lic-ink: #0b1f4a;
	--lm-lic-muted: #5d6781;
	--lm-lic-line: #e5e8f0;
	--lm-lic-gold: #b8851c;
	--lm-lic-gold-soft: #fbf4e2;
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba( 0, 10, 28, 0.78 );
	-webkit-backdrop-filter: blur( 3px );
	        backdrop-filter: blur( 3px );
}
.lm-lic-overlay[hidden] {
	display: none !important;
}
.lm-lic-panel {
	position: relative;
	width: min( 820px, 100% );
	max-height: 88vh;
	overflow-y: auto;
	/* The panel only ever scrolls vertically. Left implicit this computes to
	   auto, and the fit-to-height script in section-5.php widens the body
	   slightly before scaling it back down with zoom - a sub-pixel rounding
	   remainder there is harmless but was enough to turn on a horizontal
	   scrollbar; hidden here clips that remainder instead of showing one. */
	overflow-x: hidden;
	/* The dialog frame takes "Build Your Team"'s border: the same 1px band of
	   the shared gold-text ramp at the same 16deg, with the same 2px rim inside
	   it. It replaces the flat rgba( 223, 163, 62, 0.35 ) hairline this carried,
	   which was one colour the whole way round and caught no light.

	   Drawn as a border rather than as the masked pseudo-element the buttons
	   use: this panel is a scroll container, and a ring positioned inside it
	   would be clipped by that scrolling and slide away with the content
	   whenever the licence is taller than the window. Painting the gold into a
	   transparent 1px border and the panel colour onto the padding box gives
	   the same result on the element's own box, so it stays put and follows the
	   corner radius at every breakpoint.

	   box-sizing is stated so the added border cannot change the panel size. */
	box-sizing: border-box;
	border: 1px solid transparent;
	background:
		linear-gradient( #f6f7fb, #f6f7fb ) padding-box,
		linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) ) border-box;
	border-radius: 14px;
	box-shadow: 0 30px 80px rgba( 0, 0, 0, 0.5 ), inset 0 0 0 2px rgba( 120, 86, 14, 0.6 );
	scrollbar-width: thin;
	scrollbar-color: #c69224 #e9ecf3;
}
.lm-lic-panel::-webkit-scrollbar {
	width: 10px;
}
.lm-lic-panel::-webkit-scrollbar-track {
	background: #e9ecf3;
}
.lm-lic-panel::-webkit-scrollbar-thumb {
	background: linear-gradient( 180deg, #d9ae45, #b8851c );
	border-radius: 6px;
}

/* Heading band. The gold line along its foot is a background layer, so it
   costs no height and follows the band's width exactly. */
.lm-lic-head {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 28px 84px 26px 40px;
	background:
		linear-gradient( 90deg, #b8851c, #f7e08a 30%, #c69224 60%, #fff1a8 85%, #b8851c ) left bottom / 100% 3px no-repeat,
		radial-gradient( 120% 160% at 100% 0%, rgba( 223, 163, 62, 0.16 ), transparent 55% ),
		linear-gradient( 135deg, #001a42 0%, var( --lm-lic-navy ) 55%, #000e24 100% );
}
.lm-lic-eyebrow {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #e8c65d;
}
.lm-lic-title {
	margin: 0;
	font-size: 34px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.02em;
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) );
	-webkit-background-clip: text;
	        background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #e8c65d;
}
/* The heading leads and the agency line sits beside it, on the title's
   middle, rather than stacked above it: the band reads "RA INFORMATION"
   first, as the markup now does. Where the two will not fit on one line -
   phones - the agency line wraps under the title instead. The eyebrow's
   bottom margin, restated at several widths below for the stacked layout,
   is cleared here with one class more than those rules carry. The close
   button is positioned absolutely, so the row does not move it. */
.lm-lic-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 18px;
	row-gap: 6px;
}
.lm-lic-head .lm-lic-eyebrow {
	margin: 0;
	/* Centring the boxes left the small capitals about 1px above the
	   title's, measured on the rendered letters: the two faces sit
	   differently in their line boxes. This squares the letter centres. */
	position: relative;
	top: 1px;
}

/* About Us: the red "Us" takes the red of the curved stripe down the left
   edge of the panel it sits on. That stripe is part of the background photo
   (uploads/2026/06/bgg.jpg), sampled there at #c90406 - a deeper red than
   the kit's #ec3237 the word was wearing. On the panel's #011234 navy it
   holds 3.08:1, above the 3:1 that 44px bold needs. "About" keeps its own
   white, set inline on its span. The widget class is the fourth class: the
   page kit loads after this file and sets the old red at three. */
.elementor-1632 .elementor-element.elementor-element-e92b115.elementor-widget-heading .elementor-heading-title {
	color: #c90406;
}
.lm-lic-close {
	position: absolute;
	top: 50%;
	right: 28px;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	padding: 0;
	/* The markup keeps its &times; for anything that reads the text, but it is
	   hidden here: a text glyph sits where the font puts it, which is a little
	   off the middle of a round button. The cross is drawn below instead, from
	   two bars positioned on the button's exact centre. */
	font-size: 0;
	line-height: 0;
	color: transparent;
	background: rgba( 255, 255, 255, 0.06 );
	border: 1px solid rgba( 223, 163, 62, 0.7 );
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
}
.lm-lic-close::before,
.lm-lic-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 2px;
	margin: -1px 0 0 -8px;
	border-radius: 1px;
	background: #e8c65d;
}
.lm-lic-close::before {
	transform: rotate( 45deg );
}
.lm-lic-close::after {
	transform: rotate( -45deg );
}
/* No hover state: the button looks the same under the pointer as at rest.
   :hover and :focus still restate the resting look rather than being left out,
   because the dialog moves focus onto this button as it opens and reset.css
   would otherwise fill a focused or hovered button crimson. A keyboard user
   still gets a ring, so the focus is not lost. */
.lm-lic-close:hover,
.lm-lic-close:focus {
	background: rgba( 255, 255, 255, 0.06 );
	border-color: rgba( 223, 163, 62, 0.7 );
	color: transparent;
	box-shadow: none;
	outline: none;
	transform: none;
}
.lm-lic-close:focus-visible {
	box-shadow: 0 0 0 3px rgba( 232, 198, 93, 0.45 );
}
/* Hover changes colour only: the disc fills with the site's gold button
   gradient and the cross turns that button's dark label colour. Nothing is
   transformed and no border width changes, so the button and everything around
   it stays exactly where it is. This sits after the :hover/:focus rule above,
   which still holds the resting look for focus alone - the dialog focuses this
   button as it opens, and it should not open already gold. */
.lm-lic-close {
	transition: background-color 0.25s, border-color 0.25s;
}
.lm-lic-close::before,
.lm-lic-close::after {
	transition: background-color 0.25s;
}
.lm-lic-close:hover {
	background: linear-gradient( var( --lm-btn-gold-angle ), var( --lm-btn-gold-stops ) );
	border-color: #e8c65d;
}
.lm-lic-close:hover::before,
.lm-lic-close:hover::after {
	background: var( --lm-btn-gold-label );
}

/* Body */
.lm-lic-body {
	padding: 26px 32px 32px;
	color: var( --lm-lic-ink );
}
.lm-lic-sec,
.lm-lic-card {
	margin: 0 0 16px;
	padding: 20px 24px;
	background: #ffffff;
	border: 1px solid var( --lm-lic-line );
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba( 0, 21, 53, 0.04 );
}
.lm-lic-grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 16px;
	margin: 0 0 16px;
}
.lm-lic-grid .lm-lic-card {
	margin: 0;
}
/* (lm-lic-level-columns) The four desktop columns are real containers rather
   than a balanced multi-column flow - see the single view below. Everywhere
   else they are inert, so the phone stack and the tablet pairs are unchanged. */
.lm-lic-col {
	display: contents;
}
.lm-lic-body .lm-lic-h {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --lm-lic-navy );
}
.lm-lic-body .lm-lic-h::before {
	content: '';
	flex: 0 0 auto;
	width: 4px;
	height: 16px;
	border-radius: 2px;
	background: linear-gradient( 180deg, #d9ae45, #b8851c 60%, #7d5108 );
}
.lm-lic-body p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var( --lm-lic-ink );
}
.lm-lic-body p + p {
	margin-top: 10px;
}

/* Label / value rows */
.lm-lic-dl {
	margin: 0;
}
.lm-lic-dl > div {
	display: grid;
	grid-template-columns: 210px minmax( 0, 1fr );
	align-items: baseline;
	gap: 16px;
	padding: 10px 0;
	border-top: 1px dashed var( --lm-lic-line );
}
.lm-lic-dl > div:first-child {
	padding-top: 0;
	border-top: 0;
}
.lm-lic-dl > div:last-child {
	padding-bottom: 0;
}
.lm-lic-dl dt {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.6;
	color: var( --lm-lic-muted );
}
.lm-lic-dl dd {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.6;
	color: var( --lm-lic-ink );
	overflow-wrap: anywhere;
}
.lm-lic-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.7;
	white-space: nowrap;
	color: var( --lm-btn-gold-label );
	background: linear-gradient( var( --lm-btn-gold-angle ), var( --lm-btn-gold-stops ) );
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba( 120, 86, 14, 0.35 );
}

.lm-lic-body .lm-lic-callout {
	padding: 14px 18px;
	font-weight: 600;
	background: var( --lm-lic-gold-soft );
	border-left: 3px solid #c69224;
	border-radius: 0 8px 8px 0;
}

/* Fees */
.lm-lic-fees {
	margin: 0;
	padding: 0;
	list-style: none;
}
.lm-lic-fees li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	padding: 11px 0;
	font-size: 15px;
	line-height: 1.5;
	border-top: 1px dashed var( --lm-lic-line );
}
.lm-lic-fees li:first-child {
	padding-top: 0;
	border-top: 0;
}
.lm-lic-fees li:last-child {
	padding-bottom: 0;
}
.lm-lic-fees span {
	color: var( --lm-lic-ink );
}
.lm-lic-fees strong {
	font-weight: 700;
	color: var( --lm-lic-gold );
	white-space: nowrap;
}
.lm-lic-fees small {
	font-size: 12px;
	font-weight: 500;
	color: var( --lm-lic-muted );
}

/* Payment modes */
.lm-lic-ticks {
	margin: 0;
	padding: 0;
	list-style: none;
}
.lm-lic-ticks li {
	position: relative;
	padding: 4px 0 4px 28px;
	font-size: 15px;
	line-height: 1.6;
	color: var( --lm-lic-ink );
}
.lm-lic-ticks li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: linear-gradient( var( --lm-btn-gold-angle ), var( --lm-btn-gold-stops ) );
}
.lm-lic-ticks li::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 11px;
	width: 5px;
	height: 9px;
	border: solid var( --lm-btn-gold-label );
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg );
}
.lm-lic-body .lm-lic-note {
	margin-top: 12px;
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 600;
	color: #8a1c1c;
	background: #fdf0f0;
	border-radius: 6px;
}

.lm-lic-body .lm-lic-card__foot {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px dashed var( --lm-lic-line );
}
.lm-lic-body .lm-lic-site {
	margin-top: 4px;
	text-align: center;
	font-size: 14px;
	color: var( --lm-lic-muted );
}

.lm-lic-body .lm-lic-link {
	font-weight: 600;
	color: var( --lm-lic-gold );
	text-decoration: none;
	background: linear-gradient( currentColor, currentColor ) left bottom / 0 1px no-repeat;
	transition: background-size 0.25s, color 0.25s;
}
.lm-lic-body .lm-lic-link:hover,
.lm-lic-body .lm-lic-link:focus-visible {
	color: #7d5108;
	background-size: 100% 1px;
}

@media (max-width: 767px) {
	.lm-lic-overlay {
		padding: 12px;
	}
	.lm-lic-panel {
		max-height: 92vh;
		border-radius: 12px;
	}
	.lm-lic-head {
		padding: 20px 64px 18px 20px;
	}
	.lm-lic-eyebrow {
		font-size: 10px;
		letter-spacing: 0.1em;
	}
	.lm-lic-title {
		font-size: 24px;
	}
	.lm-lic-close {
		right: 16px;
		width: 36px;
		height: 36px;
		margin-top: -18px;
	}
	.lm-lic-close::before,
	.lm-lic-close::after {
		width: 14px;
		margin-left: -7px;
	}
	.lm-lic-body {
		padding: 16px 14px 20px;
	}
	.lm-lic-sec,
	.lm-lic-card {
		padding: 16px;
	}
	.lm-lic-grid {
		grid-template-columns: minmax( 0, 1fr );
		gap: 12px;
		margin-bottom: 12px;
	}
	.lm-lic-dl > div {
		grid-template-columns: minmax( 0, 1fr );
		gap: 2px;
	}
	.lm-lic-body p,
	.lm-lic-dl dd,
	.lm-lic-fees li,
	.lm-lic-ticks li {
		font-size: 14px;
	}
	.lm-lic-fees strong {
		white-space: normal;
	}
}

/* Home hero: the three buttons take the industry cards' gradient rim.

   Same ring the cards use - two masks cancelling to leave a 2px band, which
   is how a gradient can follow a rounded corner where a border cannot.
   border-radius: inherit so each one picks up its own corner rather than
   having a radius restated here.

   Which pseudo-element each can spare differs, and none of them had both:

   - "Build Your Team" and "Find Jobs" carry .sdd_btn, whose ::before is the
     white hover panel, so the ring goes on ::after.
   - "Submit Requirement" is the other way round: its ::after is that same
     panel, so the ring takes ::before - which the nav was spending on a 1px
     separator. On a solid gold button that separator was a faint dark tick at
     the left edge, so replacing it is a small gain rather than a loss.

   z-index 2 puts the ring above the white panel, so it stays visible through
   the hover rather than being wiped over, and pointer-events: none keeps the
   button clickable through it. */
body .elementor-element-215b604 .elementor-button::after,
body .elementor-element-b710817 .elementor-button::after,
body li.menu-item.cst-sm::before,
body .lm-lic-open::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) );
	-webkit-mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	        mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
	z-index: 2;
}

/* "Find Jobs" carries a flat 1px gold border from the kit. Left as it is it
   would sit under the ring and show at the corners, where the two radii do
   not quite agree, so it goes transparent and the ring alone draws the edge. */
body .elementor-element-b710817 .elementor-button {
	border-color: transparent !important;
}

/* ==========================================================================
   Mobile responsive fixes (max-width: 767px)
   Scoped, additive overrides only — desktop/tablet rules above are untouched.
   ========================================================================== */
@media (max-width: 767px) {
	/* About page navy panel. Two problems on phones:

	   1. The decorative red/white curve is a full-height ribbon baked into
	      bgg.jpg. With background-size:cover it stretched down across the
	      paragraph text; scaled to the panel width instead it only reaches
	      ~345px of the panel's ~930px height, so the ribbon stopped dead
	      mid-panel with a hard white edge. There is no scale that both
	      completes the ribbon and keeps it clear of the text at this aspect
	      ratio, so the flourish is dropped on phones and the panel uses the
	      image's own navy as a flat background. Tablet and desktop keep it.

	   2. The column's 90px left / 10px right padding exists on desktop to
	      hold the text clear of that ribbon. With no ribbon it just pushed
	      the text into a narrow off-centre column (290px of 390px), so the
	      padding is evened up and the text gets the full width. */
	.elementor-1632 .elementor-element.elementor-element-0e1cc74 > .elementor-widget-wrap {
		background-image: none !important;
		background-color: #011435 !important;
		padding: 0 20px 45px 20px !important;
	}

	/* About page tagline banner. The banner photo is a 1828x315 panorama with
	   silhouettes down the left and right and a deliberately clean, light
	   centre band for the heading to sit on. The box's height is driven by
	   the wrapped heading, which on a phone always needs far more height
	   than that 5.8:1 ratio gives, so:

	     - "contain" letterboxed the photo into a thin strip across the
	       middle of a much taller box, and the heading then ran straight
	       over that strip - the overlap in the reported design.
	     - "cover" fills the box properly, but the taller the heading the
	       more it has to zoom, and past a point it crops away both
	       silhouette edges and leaves only the empty centre band.

	   So: cover (no letterboxing, nothing to overlap) plus a smaller
	   heading, which keeps the box short enough that the zoom stays mild
	   and the flanking silhouettes still read, with the text on the light
	   centre where the dark navy and gold stay legible. */
	.elementor-element-75a32c5 {
		background-size: cover !important;
		background-position: center !important;
		padding: 14px 0 !important;
	}
	.elementor-element-75a32c5 .elementor-heading-title {
		max-width: 92% !important;
		font-size: 19px !important;
		line-height: 1.35 !important;
	}
	/* The two statements are one heading with no <br> between them, so at
	   some widths "...Partner" and "Connecting People." share a line and the
	   two sentences read as one. The gold half is already its own span, so
	   blocking it guarantees the split at every phone width. */
	.elementor-element-75a32c5 .elementor-heading-title span {
		display: block;
	}

	/* Workforce Solutions hero: the banner this photo replaced had
	   MANUFACTURING / HEALTHCARE / CONSTRUCTION labels baked into its right
	   edge, and the anchor here was picked to keep the mobile crop off them.
	   The team photo carries no baked-in text, so the crop is free to sit
	   where the picture is: centred, which is where the group is. The phone
	   hero is taller than it is wide, so cover scales this photo to the
	   section's height and trims the sides - the vertical anchor has nothing
	   left to move. */
	.elementor-2000 .elementor-element.elementor-element-78e5bd9 {
		background-position: center center !important;
	}

}

/* ---------- Nav breakpoint: close the gap where neither menu fits ----------
   The horizontal nav needs 1267px to lay out (233px of logo plus 986px of
   items), but the kit only swaps in the toggle at Elementor's tablet
   breakpoint of 1024px. Every width in between overflowed the viewport - by
   2px at 1266 rising to 190px at 1030 - so on those screens every page on the
   site could be dragged sideways.

   Bring the toggle in at 1266px instead, and carry the designed panel up with
   it: the rules below were written for phones and stopped at 767px, so the
   768-1266px band would otherwise fall back to the kit's plain white dropdown.
   Their vw-based font sizes are all min()-capped, so on the wider screens they
   simply settle at their ceiling. */
@media (max-width: 1266px) {

	/* These three outrank the kit's own breakpoint rules on load order:
	   custom-customizer.css is enqueued after widget-nav-menu.min.css. */
	.elementor-nav-menu--dropdown-tablet .elementor-nav-menu--main {
		display: none;
	}
	.elementor-nav-menu--dropdown-tablet .elementor-menu-toggle {
		display: flex;
	}
	.elementor-nav-menu--dropdown-tablet .elementor-nav-menu--dropdown {
		display: block;
	}

	/* ---- Mobile menu: the approved design ----
	   A full-width panel fixed to the top of the screen, so the navy runs
	   behind the header rather than starting under it. The kit's absolute
	   positioning anchored it inside the narrow toggle column at the right of
	   the header, which left it only as wide as that column and mostly off the
	   right edge; fixed positioning takes the viewport as the reference
	   instead, so left:0 and 100vw need no offset arithmetic. The 95px of top
	   padding drops the first item clear of the close button, whose bottom edge
	   sits at 83px at the widest phone. Applies to both header variants
	   (regular and the sticky one). */
	.elementor-element-69c27bb .elementor-nav-menu--dropdown,
	.elementor-element-cc33759 .elementor-nav-menu--dropdown {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: auto !important;
		bottom: auto !important;
		margin: 0 !important;
		width: 100vw !important;
		max-width: none !important;
		background-color: #0c1124 !important;
		padding: 95px 0 30px 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		/* Fixed to the viewport, the panel no longer scrolls with the page, so
		   on a short screen the last items would be unreachable. Cap it and let
		   it scroll inside itself instead. */
		max-height: 100vh !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
	}

	/* While the menu is open the panel runs the full height of the screen. It
	   was only as tall as its links - 625px - so on any taller phone the page
	   showed in a strip underneath it, and on a 360x740 screen that strip was
	   exactly where the hero's gold-edged "Build Your Team" button sits, its
	   outline peeking out under Submit Requirement. Scoped to the open state
	   (the toggle reports aria-expanded="true"), so the kit's closing animation
	   is untouched; dvh follows the phone browser's own bars where supported. */
	.elementor-element-69c27bb:has( .elementor-menu-toggle[aria-expanded="true"] ) .elementor-nav-menu--dropdown,
	.elementor-element-cc33759:has( .elementor-menu-toggle[aria-expanded="true"] ) .elementor-nav-menu--dropdown {
		min-height: 100vh !important;
		min-height: 100dvh !important;
	}

	/* The panel sits inside the header section (477efbd), whose z-index is 2
	   in the kit - so however high the panel's own z-index, nothing outside
	   the header can be painted under anything higher than 2. The Home hero's
	   gold ring on "Build Your Team" / "Find Jobs" is a z-index 2 pseudo-element
	   that comes later in the page, so it drew its outline on top of the open
	   menu. While the menu is open the header section is lifted over the
	   whole page; closed, it is back to the kit's 2. */
	.elementor-element-477efbd:has( .elementor-menu-toggle[aria-expanded="true"] ) {
		z-index: 10000 !important;
	}

	/* Only the close button is lifted over the panel (whose own z-index is
	   9997, set by the kit) - without it the menu could not be closed. The logo
	   stays behind the panel: floating it over a panel that scrolls inside
	   itself on a short screen puts the top of the list underneath it. */
	.elementor-element-69c27bb .elementor-menu-toggle,
	.elementor-element-cc33759 .elementor-menu-toggle {
		position: relative;
		z-index: 9998;
	}

	/* Being fixed, the panel stays put while the page scrolls behind it - which
	   carries the header, and with it the close button, off the top of the
	   screen and leaves no way out of the menu. Hold the page still for as long
	   as the menu is open. The toggle lives in the header at the top of the
	   document, so the page is always at the top when the menu opens, and the
	   lock keeps it there. It goes on the root element as well as the body:
	   on the body alone the root is still the scrolling box. */
	html:has( .elementor-menu-toggle[aria-expanded="true"] ),
	body:has( .elementor-menu-toggle[aria-expanded="true"] ) {
		overflow: hidden;
	}

	/* Menu labels: centred, 18px caps. Below about 245px the longest label
	   ("Workforce Solutions") no longer fits on one line, so it scales with the
	   viewport from there down. The selector carries li.menu-item and a. to
	   outrank custom-69.css's `.home .only_hm_stl li.menu-item a`, which is
	   !important too and would otherwise hold these white on the front page
	   only. */
	.elementor-element-69c27bb .elementor-nav-menu--dropdown li.menu-item a.elementor-item,
	.elementor-element-cc33759 .elementor-nav-menu--dropdown li.menu-item a.elementor-item {
		display: flex !important;
		align-items: center;
		justify-content: center;
		min-height: 63px;
		padding: 0 12px !important;
		font-size: min( 18px, calc( 8.2vw - 2px ) ) !important;
		font-weight: 700 !important;
		line-height: 1.1 !important;
		text-transform: uppercase;
		text-align: center !important;
		color: #e4ded4 !important;
		fill: #e4ded4 !important;
		background-color: transparent !important;
	}

	/* The current page carries a gold hairline above and below it over a soft
	   gold wash, all three brightest at the centre of the panel and fading out
	   to nothing at both edges - hence three horizontal gradients rather than a
	   border and a flat fill. The lines sit 4px inside the item, which is what
	   puts them the design's 55px apart. */
	.elementor-element-69c27bb .elementor-nav-menu--dropdown li.menu-item a.elementor-item.elementor-item-active,
	.elementor-element-cc33759 .elementor-nav-menu--dropdown li.menu-item a.elementor-item.elementor-item-active {
		color: #f5e4c1 !important;
		fill: #f5e4c1 !important;
		background-color: transparent !important;
		background-image:
			linear-gradient( 90deg, rgba( 242, 214, 155, 0 ) 0%, rgba( 242, 214, 155, 0.95 ) 50%, rgba( 242, 214, 155, 0 ) 100% ),
			linear-gradient( 90deg, rgba( 242, 214, 155, 0 ) 0%, rgba( 242, 214, 155, 0.95 ) 50%, rgba( 242, 214, 155, 0 ) 100% ),
			linear-gradient( 90deg, rgba( 212, 167, 90, 0 ) 0%, rgba( 212, 167, 90, 0.47 ) 50%, rgba( 212, 167, 90, 0 ) 100% ) !important;
		background-size: 100% 2px, 100% 2px, 100% 100% !important;
		background-position: left top 4px, left bottom 4px, left center !important;
		background-repeat: no-repeat !important;
	}

	/* "Submit Requirement" is a menu item styled as a button; the design gives
	   it the full pill. It used to follow straight on from the list with no gap
	   of its own, which read as the button running into "Contact Us" rather
	   than sitting apart from the links above it - a 20px top margin separates
	   them. Scoped inside this file's max-width:1266px block, which only ever
	   renders as the phone/tablet dropdown panel; the desktop horizontal nav
	   uses a different rule entirely and is untouched. The kit's asymmetric
	   10px/20px padding would knock the label off centre, and the label has to
	   scale below about 355px or it takes a second line inside the pill. */
	.elementor-element-69c27bb .elementor-nav-menu--dropdown li.cst-sm,
	.elementor-element-cc33759 .elementor-nav-menu--dropdown li.cst-sm {
		margin: 20px 32px 0 32px !important;
		/* Gradient, radius and label colour all come from the shared .cst-sm
		   rule above; the panel adds only the drop shadow. */
		box-shadow:
			inset 0 0 0 1px rgba( 120, 86, 14, 0.45 ),
			0 2px 7px rgba( 0, 0, 0, 0.55 ) !important;
	}
	.elementor-element-69c27bb .elementor-nav-menu--dropdown li.cst-sm a.elementor-item,
	.elementor-element-cc33759 .elementor-nav-menu--dropdown li.cst-sm a.elementor-item {
		min-height: 59px;
		padding: 0 20px !important;
		font-size: min( 16px, calc( 9.2vw - 9.6px ) ) !important;
		/* The design sets the label in a dark olive-brown, not the near-black
		   navy the kit gives it. */
		color: #6a4a09 !important;
		fill: #6a4a09 !important;
		background-image: none !important;
	}
}

@media (max-width: 767px) {

	/* ---- Home hero: the approved phone design ----
	   Heading, intro copy, a full-bleed band of the hero photo, then the two
	   buttons full width on flat navy. The band is rendered by the phone-only
	   copy inside the text column (see home/section-hero.php), so the second
	   column has nothing left to show and would otherwise contribute empty
	   padding above the text. */
	.elementor-31 .elementor-element.elementor-element-c686bf4 {
		display: none !important;
	}

	/* The hero's inner section carries a base margin-top:100px, which used to
	   sit above the photo when the photo came first (and was itself pulled up
	   50px). With the text first that margin becomes a large blank gap under
	   the header, so trim it on phones only - the base value still applies to
	   tablet and desktop. Bottom padding comes down to the design's short strip
	   under the second button. */
	.elementor-31 .elementor-element.elementor-element-9af5067 {
		margin-top: 0 !important;
	}
	.elementor-31 .elementor-element.elementor-element-9a9d12b {
		padding-top: 125px !important;
		padding-bottom: 24px !important;
	}

	/* The kit blacks the background photo out on phones and tablets (overlay
	   opacity:1 over #060b1b), which flattens the hero to near-black. The
	   design keeps the navy and the faint world-map dots of the photo's left
	   edge, and that region is already the exact navy it uses - so re-anchor
	   the crop there and let it through. Staying left of about 40% also keeps
	   the photo's own group of people out of the way of the copy. */
	.elementor-31 .elementor-element.elementor-element-9a9d12b:not(.elementor-motion-effects-element-type-background) {
		background-position: 12% top !important;
	}
	.elementor-31 .elementor-element.elementor-element-9a9d12b > .elementor-background-overlay {
		opacity: 0 !important;
	}

	/* Heading: the design runs both lines nearly edge to edge, so the widget
	   takes 10px back from the column gutter on each side. The gold half
	   carries an inline font-size:54px sized for the desktop column - three
	   times the height of the white half at phone sizes - so it needs
	   !important to come down level with it. */
	.elementor-31 .elementor-element.elementor-element-9a64215 {
		margin-left: -10px !important;
		margin-right: -10px !important;
		width: auto !important;
		max-width: none !important;
	}
	/* Capped at 41px, where "Solutions Partner" fills the line as it does in
	   the design; below about 375px it has to come down with the viewport or it
	   wraps. The gold half is sized as a share of the white half so the two
	   stay level at every width. */
	.elementor-31 .elementor-element.elementor-element-9a64215 .elementor-heading-title {
		font-size: min( 41px, calc( 11.5vw - 2.5px ) ) !important;
		line-height: 1.21 !important;
		letter-spacing: -0.5px !important;
	}
	.elementor-31 .elementor-element.elementor-element-9a64215 .elementor-heading-title span {
		font-size: 90% !important;
		letter-spacing: 0 !important;
	}

	/* The design has no rule between the heading and the intro copy. */
	.elementor-31 .elementor-element.elementor-element-0899910,
	.elementor-31 .elementor-element.elementor-element-a2db8c8 {
		display: none !important;
	}

	/* Intro copy: 14px over the design's three lines, and like the heading it
	   runs wider than the column gutter allows. */
	.elementor-31 .elementor-element.elementor-element-f2e0710 {
		margin: -14px -12px calc( var( --kit-widget-spacing, 0px ) + 0px ) -12px !important;
		width: calc( 100% + 24px ) !important;
		max-width: none !important;
	}
	.elementor-31 .elementor-element.elementor-element-f2e0710 .elementor-heading-title {
		font-size: min( 14px, calc( 3.9vw - 0.8px ) ) !important;
		line-height: 1.55 !important;
	}

	/* Photo band: full bleed, square, and cropped to the group of people from
	   the hero background photo - 190% of the band width scales them to the
	   size the design gives them, the left offset frames them, and the top
	   offset leaves a little of the sky above their heads while the band's own
	   height cuts them off at the thigh. Percentages throughout, so the crop
	   holds at every phone width; they are read off this photo's composition,
	   so a different image in the field will land differently. */
	.elementor-31 .lm-hero-band-mobile {
		margin: 16px -20px 31px -20px !important;
		width: calc( 100% + 40px ) !important;
		max-width: none !important;
		aspect-ratio: 390 / 260;
		position: relative;
		overflow: hidden;
	}
	.elementor-31 .lm-hero-band-mobile img {
		position: absolute;
		width: 190%;
		max-width: none;
		height: auto;
		left: -79.7%;
		top: -32.3%;
	}

	/* Elementor's .elementor-mobile-align-center rule forces
	   .elementor-button back to width:auto, so the button widgets are already
	   full width but the buttons inside them stay pill-sized and centred.
	   Stretch the buttons themselves to match the design. */
	.elementor-31 .elementor-element.elementor-element-215b604 .elementor-button,
	.elementor-31 .elementor-element.elementor-element-b710817 .elementor-button {
		width: 100% !important;
		display: flex;
		justify-content: center;
	}
	/* The design sets both labels in caps and picks up the gold of the border
	   for the outlined button's label and arrow. */
	.elementor-31 .elementor-element.elementor-element-215b604 .elementor-button-text,
	.elementor-31 .elementor-element.elementor-element-b710817 .elementor-button-text {
		text-transform: uppercase;
		letter-spacing: 0.4px;
	}
	.elementor-31 .elementor-element.elementor-element-b710817 .elementor-button-text {
		color: #e2cc9c !important;
	}
	.elementor-31 .elementor-element.elementor-element-b710817 .elementor-button-icon svg {
		fill: #e2cc9c !important;
	}
	/* Gap between the two stacked buttons (the second one carries a -10px top
	   margin from the kit, tuned for the old side-by-side row). */
	.elementor-31 .elementor-element.elementor-element-b710817 {
		margin-top: -2px !important;
	}

	/* ---- Find Jobs hero: the approved phone design ----
	   Heading and intro copy, then the team cut-out full-bleed, then the two
	   buttons underneath it. The heading/copy and the buttons are both inside
	   the same column (745f78e) as the photo's sibling column (b01398c), so
	   simply re-ordering the two columns can only move the photo above or
	   below the copy as a whole block - it cannot land it between the copy
	   and the buttons that follow it. Turning the column and its wrap
	   "transparent" with display:contents promotes their four widgets
	   (heading, intro text, the two buttons) to be flex items of the row
	   directly, alongside the photo column, so each can carry its own order:
	   copy first, the photo column second, the buttons last. */
	.elementor-2235 .elementor-element.elementor-element-745f78e,
	.elementor-2235 .elementor-element.elementor-element-745f78e > .elementor-widget-wrap {
		display: contents;
	}
	.elementor-2235 .elementor-element.elementor-element-6d22a91,
	.elementor-2235 .elementor-element.elementor-element-ff0151d {
		width: 100%;
		order: 1;
	}
	.elementor-2235 .elementor-element.elementor-element-b01398c {
		order: 2;
	}
	.elementor-2235 .elementor-element.elementor-element-d894217,
	.elementor-2235 .elementor-element.elementor-element-cbfbbfb {
		width: 100%;
		order: 3;
	}

	/* The kit's 100px inner offset and its 150px/50px padding were spacing the
	   old photo-on-top layout. Trimmed so the copy sits just under the header
	   and the cut-out ends a short navy strip above the white search card,
	   which the next section already pulls up by 40px of its own. */
	.elementor-2235 .elementor-element.elementor-element-90cd031 {
		margin-top: 0 !important;
	}
	.elementor-2235 .elementor-element.elementor-element-6bf07ed {
		padding-top: 125px !important;
		padding-bottom: 40px !important;
	}

	/* The kit blacks the background photo out completely below 1024px
	   (overlay opacity:1 over #060b1b). The phone design keeps the mid-navy of
	   the photo's left edge, so the overlay is reopened just enough to let it
	   through - the gradient evens out the photo's own top-to-bottom falloff so
	   the panel reads as one flat navy behind the copy. */
	.elementor-2235 .elementor-element.elementor-element-6bf07ed:not(.elementor-motion-effects-element-type-background) {
		background-position: left top !important;
	}
	.elementor-2235 .elementor-element.elementor-element-6bf07ed > .elementor-background-overlay {
		background-color: transparent !important;
		background-image: linear-gradient( 180deg, rgba( 6, 11, 27, 0.49 ) 0%, rgba( 6, 11, 27, 0.43 ) 40%, rgba( 4, 20, 48, 0.24 ) 100% ) !important;
	}

	/* Heading: the design sets both lines at much the same size. The gold half
	   carries an inline font-size:51px sized for the desktop column, so it
	   needs !important to come down. */
	.elementor-2235 .elementor-element.elementor-element-6d22a91 .elementor-heading-title {
		font-size: min( 35px, 9vw ) !important;
		line-height: 1.15 !important;
		letter-spacing: -0.5px !important;
	}
	/* Capped at 32px, but "Career Opportunity" is eighteen characters and has to
	   hold one line: it needs the full column, which is the viewport less the
	   40px of gutter, hence the -5px rather than a plain vw fraction. Without it
	   the line wraps from about 375px down. */
	.elementor-2235 .elementor-element.elementor-element-6d22a91 .elementor-heading-title span {
		font-size: min( 32px, calc( 9.4vw - 5px ) ) !important;
		letter-spacing: 0 !important;
	}

	/* Intro copy over the design's three lines: 330px is the width that breaks
	   it after "Job" and after "Employers". */
	.elementor-2235 .elementor-element.elementor-element-ff0151d .elementor-heading-title {
		font-size: 17px !important;
		max-width: 330px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Full-width stacked buttons. The widgets are already 100% wide here; it is
	   frontend.min.css's .elementor-mobile-align-center rule that keeps the
	   button inside them at width:auto. */
	.elementor-2235 .elementor-element.elementor-element-d894217 .elementor-button,
	.elementor-2235 .elementor-element.elementor-element-cbfbbfb .elementor-button {
		width: 100% !important;
		display: flex;
		justify-content: center;
	}

	/* Team cut-out: edge to edge, so -20px clears the section's 10px gutter and
	   the column's own 10px padding. */
	.elementor-2235 .lm-fj-hero-img-mobile {
		margin: 20px -20px 0 -20px !important;
		width: calc( 100% + 40px ) !important;
		max-width: calc( 100% + 40px ) !important;
		line-height: 0;
		text-align: center;
		overflow: hidden;
	}
	/* The phone image is fj-mobile.webp, a crop of the desktop hero photo
	   (fj.jpg) around the team, its top faded out so the sky meets the navy
	   above. It is a full photo edge to edge, so it runs at the screen's width;
	   the old gff.png cut-out was widened to 108% only to lose its transparent
	   margin, which would now cut into the outer figures. */
	.elementor-2235 .lm-fj-hero-img-mobile img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	/* ---- Contact hero: matched to the Find Jobs phone layout ----
	   This used to run cnt-bg-clear.jpg as a background behind the heading,
	   the paragraph and the CTA button - laid in twice, one copy per end of
	   the panorama, faded into a sky-blue gradient at the seam - which is
	   the layout every other phone hero on the site has since moved off:
	   the photo comes out from behind the copy entirely, flat navy takes
	   its place (the same #000E24 the trust-badge row directly under this
	   section already uses, so the two read as one continuous panel), and
	   goes back in as an ordinary block after the CTA button, at the
	   panorama's own aspect ratio - the same position Find Jobs keeps its
	   photo at. Desktop and tablet keep the two-up background photo
	   untouched; only this ≤767px rule changes it.

	   The design draws no header above the hero; on the page there is one,
	   131px tall and overlaying the hero, so the copy keeps its own start
	   below that and the spacing below it follows the design. */
	.elementor-2142 .elementor-element.elementor-element-957f95c {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
	}
	.elementor-2142 .elementor-element.elementor-element-957f95c:not(.elementor-motion-effects-element-type-background) {
		background-color: #000E24 !important;
		background-image: none !important;
	}

	/* The kit's 78px column margin was written for a fixed-height hero that
	   centred its column; with the height now driven by the copy it becomes
	   the copy's own top offset, so it is spent as padding instead. The
	   124px this carried was sized to also clear the header, back when the
	   header overlaid this hero; the header is static on the Contact page
	   now (it takes its own 131px rather than floating over the hero), so
	   that clearance is already spoken for and the top padding only needs
	   to be an ordinary gap, the same as the one below. */
	.elementor-2142 .elementor-element.elementor-element-c9668a2 > .elementor-element-populated {
		margin: 0 !important;
		padding: 28px 10px 28px 10px !important;
	}

	.elementor-2142 .elementor-element.elementor-element-b112fe0 {
		margin: 0 0 9px 0 !important;
	}
	/* (lm-cnt-phone-text-size) "CONTACT US" a little larger on phones - 32px
	   read small under the site's other phone banner titles. "Your Gateway to"
	   and the tagline below step up with it, for the same reason. */
	.elementor-2142 .elementor-element.elementor-element-b112fe0 .elementor-heading-title {
		font-size: 36px !important;
	}

	/* Both rules are the same length and weight in the design, where the kit
	   gives them 60px/100px at 3px for the desktop hero. */
	.elementor-2142 .elementor-element.elementor-element-aa2b12a,
	.elementor-2142 .elementor-element.elementor-element-2cf9d4f {
		--divider-border-width: 2px !important;
	}
	.elementor-2142 .elementor-element.elementor-element-aa2b12a .elementor-divider-separator,
	.elementor-2142 .elementor-element.elementor-element-2cf9d4f .elementor-divider-separator {
		width: 46px !important;
	}
	.elementor-2142 .elementor-element.elementor-element-aa2b12a {
		margin: 0 0 10px 0 !important;
	}
	.elementor-2142 .elementor-element.elementor-element-2cf9d4f {
		margin: 3px 0 9px 0 !important;
	}

	/* This heading is the one widget in the hero the kit gives no margin of
	   its own, so it keeps the kit's 20px widget spacing underneath - which
	   is 20px more than the design leaves between it and the gold rule. */
	.elementor-2142 .elementor-element.elementor-element-8ab3ea1 {
		margin: 0 !important;
	}
	.elementor-2142 .elementor-element.elementor-element-8ab3ea1 .elementor-heading-title {
		font-size: 19px !important;
		line-height: 1.3 !important;
	}

	/* The tagline breaks after "Singapore." in the design. At 16px the first
	   sentence measures 314px, and adding "Serving" would need 375px, so a
	   335px column holds the same break at every phone width - up from 290px,
	   which was sized for the smaller 14px this ran at before. */
	.elementor-2142 .elementor-element.elementor-element-d67bfa0 {
		width: 100% !important;
		max-width: 335px !important;
		margin: 0 auto !important;
	}
	.elementor-2142 .elementor-element.elementor-element-d67bfa0 .elementor-heading-title {
		font-size: 16px !important;
	}

	/* The gold is a brushed-metal sheen, brightest just left of centre and
	   again at the right edge, sampled off the design. */
	.elementor-2142 .lm-contact-cta-mobile {
		margin-top: 28px !important;
		text-align: center;
	}
	.elementor-2142 .lm-contact-cta-mobile .elementor-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 187px;
		max-width: 100%;
		min-height: 37px;
		padding: 0 10px;
		border-radius: 5px;
		background-color: #d0ad59;
		background-image: linear-gradient( 90deg, #9c6f1e 0%, #b28834 13%, #d7b55e 30%, #f4e089 43%, #d9b34a 60%, #ae7e2a 76%, #d4b259 90%, #ecdd9c 100% );
		box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.28 );
	}
	.elementor-2142 .lm-contact-cta-mobile .elementor-button-text {
		font-family: "Inter", Sans-serif;
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.3px;
		text-transform: uppercase;
		white-space: nowrap;
		color: #0d0d0d;
	}
	/* The panorama, back in as an ordinary block after the CTA button - see
	   the comment above the hero's background rule. cnt-bg-clear.jpg is
	   1672x941 (stale here as 2048x768 until now - a leftover from before
	   the photo was swapped this session; the two never matched after
	   that, which would have let a replacement upload through "Hero
	   Background Mobile" render letterboxed or cropped oddly). */
	.elementor-2142 .elementor-element.elementor-element-c9668a2 > .elementor-element-populated::after {
		content: "";
		display: block;
		width: 100%;
		aspect-ratio: 1672 / 941;
		margin: 26px 0 0 0;
		border-radius: 12px;
		background-image: url("/wp-content/uploads/2026/09/cnt-bg-clear.jpg");
		background-size: cover;
		background-position: center center;
	}

	/* ---- Contact trust badges: the approved phone design ----
	   One navy panel holding a 2x2 grid of stacked icon-over-caption cells
	   becomes four full-width cards, one per claim, each with its icon at the
	   left and its caption beside it. So the panel gives up its fill, border
	   and radius, and each column takes them on. */
	.elementor-2142 .elementor-element.elementor-element-9f2e3c2 {
		background-color: transparent !important;
		border: 0 !important;
		margin: 0 !important;
	}
	.elementor-2142 .elementor-element.elementor-element-9f2e3c2,
	.elementor-2142 .elementor-element.elementor-element-9f2e3c2 > .elementor-background-overlay {
		border-radius: 0 !important;
	}
	.elementor-2142 .elementor-element.elementor-element-f58c3ee,
	.elementor-2142 .elementor-element.elementor-element-be587bc,
	.elementor-2142 .elementor-element.elementor-element-112289f,
	.elementor-2142 .elementor-element.elementor-element-4d9d513 {
		width: 100% !important;
	}
	.elementor-2142 .elementor-element.elementor-element-f58c3ee > .elementor-element-populated,
	.elementor-2142 .elementor-element.elementor-element-be587bc > .elementor-element-populated,
	.elementor-2142 .elementor-element.elementor-element-112289f > .elementor-element-populated,
	.elementor-2142 .elementor-element.elementor-element-4d9d513 > .elementor-element-populated {
		background-color: #000E24;
		border: 1px solid #FFFFFF30;
		border-radius: 12px;
		margin: 0 9px 11px 9px !important;
		padding: 7px 18px !important;
	}
	.elementor-2142 .elementor-element.elementor-element-4d9d513 > .elementor-element-populated {
		margin-bottom: 0 !important;
	}

	/* Elementor drops image-box widgets to icon-over-text below 768px and
	   centres the icon; the design keeps the desktop row, so the flex layout
	   is put back for these three. */
	.elementor-2142 .elementor-element.elementor-element-9f2e3c2 .elementor-image-box-wrapper {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 19px;
		text-align: start;
	}
	.elementor-2142 .elementor-element.elementor-element-9f2e3c2 .elementor-image-box-img {
		flex: 0 0 46px;
		width: 46px;
		margin: 0 !important;
	}
	.elementor-2142 .elementor-element.elementor-element-9f2e3c2 .elementor-image-box-img img {
		width: 100%;
		height: auto;
	}
	.elementor-2142 .elementor-element.elementor-element-9f2e3c2 .elementor-image-box-description {
		font-size: 12.5px !important;
		line-height: 1.4;
	}

	/* The badge card is not an image-box - it is a bare image widget plus the
	   phone-only caption beside it - so its column carries the same row. */
	.elementor-2142 .elementor-element.elementor-element-f58c3ee > .elementor-element-populated {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 19px;
	}
	/* Both widgets are cells of that row now, so the kit's widget spacing
	   underneath them would only make the card taller than the other three. */
	.elementor-2142 .elementor-element.elementor-element-4cba958,
	.elementor-2142 .lm-badge-label-mobile {
		margin-bottom: 0 !important;
	}
	.elementor-2142 .elementor-element.elementor-element-4cba958 {
		flex: 0 0 46px;
		width: 46px;
	}
	.elementor-2142 .elementor-element.elementor-element-4cba958 img {
		max-width: 38px !important;
	}
	.elementor-2142 .lm-badge-label-mobile {
		flex: 1 1 auto;
		width: auto;
	}
	.elementor-2142 .lm-badge-label-mobile .elementor-heading-title {
		font-family: "Inter", Sans-serif;
		font-size: 12.5px;
		font-weight: 400;
		line-height: 1.4;
		color: #FFFFFF;
	}

	/* ---- Knowledge Hub hero: the approved phone design ----
	   The section's background photo is dropped here and re-laid as the 2x2
	   grid below, so the hero keeps only the flat navy the design gives it.
	   The kit centres the copy on phones; the design sets it left. */
	.elementor-2767 .elementor-element.elementor-element-103aeea:not(.elementor-motion-effects-element-type-background) {
		background-image: none !important;
		background-color: #051934 !important;
	}
	/* The copy and the grid share one 15px margin off both edges, as the design
	   draws them. That is one gutter, not the two the nested columns stack up
	   by default, so the outer one is dropped and the inner one carries it. */
	.elementor-2767 .elementor-element.elementor-element-91ca572 > .elementor-element-populated {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.elementor-2767 .elementor-element.elementor-element-b8f8ca3 > .elementor-element-populated {
		padding: 0 15px !important;
	}
	.elementor-2767 .elementor-element.elementor-element-103aeea {
		padding: 0 0 26px 0 !important;
	}
	/* The header used to overlay the hero, 131px tall, so the copy was pushed
	   130px down to clear it. It now sits in the flow above the hero, so that
	   padding only left a 141px empty band under it; 30px is kept as the
	   breathing room between the header and the heading. */
	.elementor-2767 .elementor-element.elementor-element-1aa7eb1 {
		padding-top: 30px !important;
	}

	.elementor-2767 .elementor-element.elementor-element-4be447a {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 0 5px 0 !important;
		text-align: start !important;
	}
	.elementor-2767 .elementor-element.elementor-element-4be447a .elementor-heading-title {
		font-size: 26px !important;
		line-height: 1.08 !important;
	}
	.elementor-2767 .elementor-element.elementor-element-ea84ae9 {
		margin: 0 !important;
		text-align: start !important;
	}
	.elementor-2767 .elementor-element.elementor-element-ea84ae9 .elementor-heading-title {
		font-size: 13.5px !important;
		line-height: 1.2 !important;
	}

	/* Four re-framings of knldg.jpg (1983x793). Each tile's background-size is
	   the whole photo scaled so that exactly the wanted slice spans the tile,
	   and the percentage background-position then slides that slice into view -
	   both resolution-independent, so the crops hold at every phone width.
	   The design's two rows are not the same height: the top pair is landscape
	   and the bottom pair portrait, which is also why the bottom two carry a
	   different scale from the top two. */
	/* The search bar sat flush against the bottom of the photo grid, with
	   20px under it before Popular Searches. It takes the same 20px above, so
	   it sits centred between the two. The placeholder steps down from 16px
	   to 14px so the whole prompt fits the field; only the placeholder does -
	   typed text keeps 16px, below which iOS zooms the page on focus. */
	.elementor-2767 .knhub_search.elementor-widget-search {
		margin-top: 20px !important;
	}
	.elementor-2767 .knhub_search input::placeholder {
		font-size: 14px;
	}

	.elementor-2767 .lm-kh-grid-mobile {
		margin: 10px 0 0 0 !important;
	}
	.elementor-2767 .lm-kh-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}
	.elementor-2767 .lm-kh-tile {
		display: block;
		border: 1px solid rgba( 255, 255, 255, 0.75 );
		border-radius: 9px;
		background-image: url("/wp-content/uploads/2026/08/knldg.jpg");
		background-repeat: no-repeat;
	}
	.elementor-2767 .lm-kh-tile--aviation,
	.elementor-2767 .lm-kh-tile--construction {
		aspect-ratio: 176.2 / 157.9;
	}
	.elementor-2767 .lm-kh-tile--marine,
	.elementor-2767 .lm-kh-tile--manufacturing {
		aspect-ratio: 176.2 / 199.6;
	}
	/* The aircraft, across the middle of the photo. */
	.elementor-2767 .lm-kh-tile--aviation {
		background-size: 477.8% auto;
		background-position: 45.92% 23.75%;
	}
	/* The construction panel, top right. Its inset is a parallelogram, so the
	   slice is the largest upright rectangle that stays inside it - anything
	   wider would pull the navy behind it into the corners. */
	.elementor-2767 .lm-kh-tile--construction {
		background-size: 467.7% auto;
		background-position: 91.72% 3.63%;
	}
	/* The shipyard panel, bottom middle. */
	.elementor-2767 .lm-kh-tile--marine {
		background-size: 600.9% auto;
		background-position: 68.97% 99.05%;
	}
	/* The welding panel, bottom right. */
	.elementor-2767 .lm-kh-tile--manufacturing {
		background-size: 600.9% auto;
		background-position: 95.28% 99.05%;
	}

	/* ---- Knowledge Hub stats band: the approved phone design ----
	   The five columns stack one per row on phones, which runs the band to
	   five screenfuls of scrolling. The approved layout puts the badge across
	   the top, centred, and the four claims in a 2x2 block underneath it. */
	/* The band keeps the kit's #001635 rather than the slightly darker, more
	   neutral navy the design paints it. The four claim icons are JPEGs with
	   that exact navy baked in behind the artwork, so any other band colour
	   puts a visible square around each of them - a worse artefact than the
	   tonal difference, and not fixable without redrawing the icons. */
	.elementor-2767 .elementor-element.elementor-element-78de80a {
		padding: 14px 0 !important;
	}
	.elementor-2767 .elementor-element.elementor-element-d94d329 > .elementor-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
	/* All five cells are placed by hand rather than left to auto-flow: the
	   badge takes the full width of the first row, and the four claims fill
	   the two rows under it top-to-bottom then left-to-right, which is the
	   order they are already written in - so the grid reads the way the
	   markup does and no widget has to be reordered. */
	.elementor-2767 .elementor-element.elementor-element-0a8daf2 {
		grid-column: 1 / -1;
		grid-row: 1;
	}
	.elementor-2767 .elementor-element.elementor-element-4a4e572 {
		grid-column: 1;
		grid-row: 2;
	}
	.elementor-2767 .elementor-element.elementor-element-08dfe0c {
		grid-column: 1;
		grid-row: 3;
	}
	.elementor-2767 .elementor-element.elementor-element-57f5f0b {
		grid-column: 2;
		grid-row: 2;
	}
	.elementor-2767 .elementor-element.elementor-element-e39c695 {
		grid-column: 2;
		grid-row: 3;
	}
	.elementor-2767 .elementor-element.elementor-element-0a8daf2,
	.elementor-2767 .elementor-element.elementor-element-4a4e572,
	.elementor-2767 .elementor-element.elementor-element-08dfe0c,
	.elementor-2767 .elementor-element.elementor-element-57f5f0b,
	.elementor-2767 .elementor-element.elementor-element-e39c695 {
		width: auto !important;
	}
	.elementor-2767 .elementor-element.elementor-element-0a8daf2 > .elementor-element-populated {
		padding: 2px 0 14px 0 !important;
	}
	.elementor-2767 .elementor-element.elementor-element-e1df10f img {
		max-width: 68px !important;
	}

	/* The hairline between the two claim columns. custom-69.css hides these on
	   phones for the layouts that stack; here it is part of the design, so it
	   comes back on the two columns that sit against the fold. The badge no
	   longer has one: it sits above the claims now, not beside them. */
	.elementor-2767 .feat_col_hr_btm .elementor-column.elementor-inner-column.elementor-element.elementor-element-4a4e572:after,
	.elementor-2767 .feat_col_hr_btm .elementor-column.elementor-inner-column.elementor-element.elementor-element-08dfe0c:after {
		display: block;
		top: 6px;
		bottom: 6px;
		right: 8px;
	}

	/* Elementor drops image-box widgets to icon-over-text below 768px; the
	   design keeps the desktop row, at the size it draws them. */
	.elementor-2767 .elementor-element.elementor-element-d94d329 .elementor-image-box-wrapper {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 13px;
		text-align: start;
	}
	.elementor-2767 .elementor-element.elementor-element-d94d329 .elementor-image-box-img {
		flex: 0 0 32px;
		width: 32px !important;
		margin: 0 !important;
	}
	.elementor-2767 .elementor-element.elementor-element-d94d329 .elementor-image-box-img img {
		width: 100%;
		height: auto;
	}
	.elementor-2767 .elementor-element.elementor-element-d94d329 .elementor-image-box-title {
		font-size: 22px !important;
		line-height: 1.15 !important;
		margin-bottom: 0 !important;
	}
	.elementor-2767 .elementor-element.elementor-element-d94d329 .elementor-image-box-description {
		font-size: 14px !important;
		line-height: 1.25 !important;
	}
	.elementor-2767 .elementor-element.elementor-element-d94d329 .elementor-column > .elementor-element-populated {
		padding: 4px 8px !important;
	}

	/* ---- Workforce Solutions hero: the approved phone design ----
	   The design draws no header over the hero; the page has one, 131px tall
	   and overlaying it, so the copy starts below that rather than at the top
	   edge the design shows, and the spacing under it follows the design. */
	.elementor-2000 .elementor-element.elementor-element-71b4082 {
		margin-top: 0 !important;
		padding-top: 54px !important;
	}
	/* Matched to the Find Jobs phone layout, the same way as the Build Your
	   Team hero above: the team photo comes out from behind the heading,
	   paragraph and buttons - flat navy takes its place, the same #001430 the
	   trust-icon row right below it already uses, so the two sections read as
	   one continuous panel - and goes back in as an ordinary block after the
	   buttons, at its own aspect ratio. Desktop and tablet keep the
	   background photo untouched; only this ≤767px rule changes it. */
	.elementor-2000 .elementor-element.elementor-element-78e5bd9:not(.elementor-motion-effects-element-type-background) {
		background-color: #001430 !important;
		background-image: none !important;
	}
	.elementor-2000 .elementor-element.elementor-element-78e5bd9 > .elementor-background-overlay {
		opacity: 0 !important;
	}
	.elementor-2000 .elementor-element.elementor-element-78e5bd9 {
		padding-bottom: 12px !important;
	}
	.elementor-2000 .elementor-element.elementor-element-8825be4 > .elementor-widget-wrap::after {
		content: "";
		display: block;
		width: 100%;
		aspect-ratio: 1422 / 1106;
		margin: 18px 0 4px;
		border-radius: 12px;
		background-image: url("/wp-content/uploads/2026/09/workforce-solutions-hero.jpg");
		background-size: cover;
		background-position: center 35%;
		/* Between the tagline and the buttons, not after them - see the
		   order rules on the two buttons below. */
		order: 1;
	}
	.elementor-2000 .elementor-element.elementor-element-052f9eb {
		margin: 0 !important;
	}
	.elementor-2000 .elementor-element.elementor-element-052f9eb .elementor-heading-title {
		font-size: 26px !important;
		line-height: 1.1 !important;
		letter-spacing: -0.5px !important;
	}
	/* The gold half carries its own 51px inline style from the export, which
	   no stylesheet rule can reach without !important. The design sets it a
	   little larger than the white line above it. */
	.elementor-2000 .elementor-element.elementor-element-052f9eb .elementor-heading-title span {
		font-size: 108% !important;
		letter-spacing: 0 !important;
	}
	.elementor-2000 .elementor-element.elementor-element-6c67ce8 {
		margin: 2px 0 0 0 !important;
	}
	.elementor-2000 .elementor-element.elementor-element-6c67ce8 .elementor-heading-title {
		font-size: 18px !important;
		line-height: 1.25 !important;
	}
	/* One line in the design, which needs the full column at this size. */
	.elementor-2000 .elementor-element.elementor-element-acec890 {
		margin: 4px 0 0 0 !important;
	}
	.elementor-2000 .elementor-element.elementor-element-acec890 .elementor-heading-title {
		font-size: min( 15.5px, 4vw ) !important;
		line-height: 1.25 !important;
	}
	/* The rule between the copy and the buttons is transparent in the kit, so
	   it only ever contributed spacing; the design's gap is smaller. */
	.elementor-2000 .elementor-element.elementor-element-e87825f {
		margin: 0 !important;
	}

	/* Both buttons are a fixed 182px pill centred under the copy, not the full
	   width the kit gives them on phones. Ordered after the photo (see the
	   ::after above): image first, then the two buttons, matching the
	   design. */
	.elementor-2000 .elementor-element.elementor-element-dcf0987,
	.elementor-2000 .elementor-element.elementor-element-f8d2b74 {
		text-align: center;
		order: 2;
	}
	.elementor-2000 .elementor-element.elementor-element-dcf0987 {
		margin: 18px 0 0 0 !important;
	}
	.elementor-2000 .elementor-element.elementor-element-f8d2b74 {
		margin: 6px 0 0 0 !important;
	}
	.elementor-2000 .elementor-element.elementor-element-dcf0987 .elementor-button,
	.elementor-2000 .elementor-element.elementor-element-f8d2b74 .elementor-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		width: 182px;
		max-width: 100%;
		min-height: 29px;
		padding: 0 10px !important;
		/* The kit's own rule for these two buttons has the same specificity and
		   loads after this file, so the type has to be marked to win it. At the
		   kit's 15px "Explore Our Solutions" is wider than the design's 182px
		   pill, and .sdd_btn clips the overflow, which ate the first two
		   letters of the label. */
		font-size: 10px !important;
		line-height: 1.2 !important;
		letter-spacing: 0.3px;
		white-space: nowrap;
		border-radius: 4px !important;
	}
	/* The filled button is a brushed-metal gold sampled off the design,
	   brightest just left of centre and again at the right edge. */
	.elementor-2000 .elementor-element.elementor-element-dcf0987 .elementor-button {
		background-color: #d0ad59;
		background-image: linear-gradient( 90deg, #9c7c2b 0%, #b28834 15%, #d7b45f 27%, #f0de88 49%, #cfa841 60%, #b2842c 72%, #cf9f4a 84%, #edd994 100% ) !important;
		box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.3 );
	}
	.elementor-2000 .elementor-element.elementor-element-dcf0987 .elementor-button-text,
	.elementor-2000 .elementor-element.elementor-element-dcf0987 .elementor-button-icon svg {
		color: #12100a !important;
		fill: #12100a !important;
	}
	/* The outlined button takes the same gold for its border and its label,
	   where the kit leaves both white. */
	.elementor-2000 .elementor-element.elementor-element-f8d2b74 .elementor-button {
		border-color: #8a7a4e !important;
	}
	.elementor-2000 .elementor-element.elementor-element-f8d2b74 .elementor-button-text,
	.elementor-2000 .elementor-element.elementor-element-f8d2b74 .elementor-button-icon svg {
		color: #dcc084 !important;
		fill: #dcc084 !important;
	}

	/* ---- Workforce Solutions "why" strip: the approved phone design ----
	   The six claims run one per row on phones, icon over a centred title over
	   a description - six screenfuls of scrolling. The design pairs them up
	   two to a row, icon at the left of its title, and drops the descriptions,
	   which the other two breakpoints keep. */
	.elementor-2000 .elementor-element.elementor-element-76c9a76,
	.elementor-2000 .elementor-element.elementor-element-d04fd8e,
	.elementor-2000 .elementor-element.elementor-element-75f8e96,
	.elementor-2000 .elementor-element.elementor-element-b2671ea,
	.elementor-2000 .elementor-element.elementor-element-cb1e3b1,
	.elementor-2000 .elementor-element.elementor-element-3bbd2b1 {
		width: 50% !important;
	}
	.elementor-2000 .elementor-element.elementor-element-76c9a76 > .elementor-element-populated,
	.elementor-2000 .elementor-element.elementor-element-d04fd8e > .elementor-element-populated,
	.elementor-2000 .elementor-element.elementor-element-75f8e96 > .elementor-element-populated,
	.elementor-2000 .elementor-element.elementor-element-b2671ea > .elementor-element-populated,
	.elementor-2000 .elementor-element.elementor-element-cb1e3b1 > .elementor-element-populated,
	.elementor-2000 .elementor-element.elementor-element-3bbd2b1 > .elementor-element-populated {
		margin: 0 0 14px 0 !important;
		padding: 0 8px !important;
	}
	.elementor-2000 .elementor-element.elementor-element-030c405,
	.elementor-2000 .elementor-element.elementor-element-c1e4866,
	.elementor-2000 .elementor-element.elementor-element-219844e,
	.elementor-2000 .elementor-element.elementor-element-e91c124,
	.elementor-2000 .elementor-element.elementor-element-ddde8cc,
	.elementor-2000 .elementor-element.elementor-element-2de10cf {
		display: none;
	}
	/* A hidden description is still a following sibling, so its image-box goes
	   on carrying Elementor's 20px inter-widget spacing underneath it - which
	   with nothing after it to separate just makes every cell 20px taller than
	   the design's. */
	.elementor-2000 .elementor-element.elementor-element-5bf4901,
	.elementor-2000 .elementor-element.elementor-element-017e048,
	.elementor-2000 .elementor-element.elementor-element-480970f,
	.elementor-2000 .elementor-element.elementor-element-d03c47d,
	.elementor-2000 .elementor-element.elementor-element-d2d38aa,
	.elementor-2000 .elementor-element.elementor-element-fab8f1f {
		--kit-widget-spacing: 0px;
		margin-bottom: 0 !important;
	}
	/* Elementor drops image-box widgets to icon-over-text below 768px; the
	   design keeps the desktop row, at the size it draws them. */
	.elementor-2000 .elementor-element.elementor-element-28d81e2 .elementor-image-box-wrapper {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 10px;
		text-align: start;
	}
	.elementor-2000 .elementor-element.elementor-element-28d81e2 .elementor-image-box-img {
		flex: 0 0 29px;
		width: 29px !important;
		margin: 0 !important;
	}
	.elementor-2000 .elementor-element.elementor-element-28d81e2 .elementor-image-box-img img {
		width: 100%;
		height: auto !important;
	}
	.elementor-2000 .elementor-element.elementor-element-28d81e2 .elementor-image-box-content,
	.elementor-2000 .elementor-element.elementor-element-28d81e2 .elementor-image-box-title {
		text-align: start !important;
	}
	.elementor-2000 .elementor-element.elementor-element-28d81e2 .elementor-image-box-title {
		font-size: 11.5px !important;
		line-height: 1.2 !important;
	}

	/* ---- Build Your Team hero: matched to the Find Jobs phone layout ----
	   Find Jobs puts its team photo below the copy as its own block on a flat
	   navy hero; this hero instead ran the photo as a full-bleed background
	   behind the heading, the paragraph and the trust badges, which is the
	   "blur/clutter" the phone design was asked to drop. The photo comes out
	   of the background entirely - flat navy takes its place, same as the
	   kit already gives every other page below 1024px - and goes back in as
	   an ordinary block, sized to its own aspect ratio. Desktop and tablet
	   keep the background photo untouched; only this ≤767px rule changes
	   it. */
	.elementor-2272 .elementor-element.elementor-element-59cf348:not(.elementor-motion-effects-element-type-background) {
		background-color: #060b1b !important;
		background-image: none !important;
	}
	.elementor-2272 .elementor-element.elementor-element-59cf348 > .elementor-background-overlay {
		opacity: 0 !important;
	}
	.elementor-2272 .elementor-element.elementor-element-59cf348 {
		padding-top: 101px !important;
	}
	.elementor-2272 .elementor-element.elementor-element-46ae408 > .elementor-widget-wrap::after {
		content: "";
		display: block;
		width: 100%;
		aspect-ratio: 996 / 775;
		margin: 26px 0 4px;
		border-radius: 12px;
		/* --lm-hero-background-mobile: set inline on the section above, by
		   the "Hero Background Mobile" field, when the client has uploaded a
		   phone-only photo of their own; falls back to the approved one
		   otherwise. Deliberately its own property, separate from
		   --lm-hero-background-desktop below - a photo picked for the wide
		   two-column layout is not necessarily the right crop for this
		   single full-bleed block. */
		background-image: var( --lm-hero-background-mobile, url("/wp-content/uploads/2026/09/build-your-team-hero.jpg") );
		background-size: cover;
		background-position: center 30%;
		/* Between the paragraph and the trust row, not after it - see the
		   order rules just below. */
		order: 1;
	}
	/* The photo (the ::after above) and the trust row are both flex items of
	   this same column (flex-direction: column), so re-ordering them is a
	   flag apiece rather than a markup move: the trust row's default order
	   is 0, tied with the photo's undecorated stats/heading siblings above
	   it, which is what put it right after the paragraph and left the photo
	   trailing at the very end. Bumped to 2, it drops behind the photo's 1
	   while everything still at the default 0 - the heading, the paragraph,
	   all of it - stays right where it was, ahead of both. */
	.elementor-2272 .elementor-element.elementor-element-9a340f1 {
		order: 2;
	}

	/* The design sets both lines in caps, where the kit leaves the copy in
	   title case, and the gold half a little larger than the white one. That
	   half carries an inline font-size:51px sized for the desktop column, so
	   it needs !important to come down. */
	.elementor-2272 .elementor-element.elementor-element-ebdbce7 {
		margin: 0 0 13px 0 !important;
	}
	/* Caps are wider than the title case the kit sets, so the 30px it gives
	   this heading on phones no longer holds either line: both come down to
	   the size that keeps them one line each, as the design has them. */
	/* Capped at 28px, but "GROW YOUR BUSINESS." in caps is the widest line on
	   the page and has to hold one line: it needs the full column, which is
	   the viewport less the 40px of gutter, hence the -3.4px rather than a
	   plain vw fraction. Without it the line wraps from about 385px down. */
	.elementor-2272 .elementor-element.elementor-element-ebdbce7 .elementor-heading-title {
		font-size: min( 28px, calc( 8.2vw - 3.4px ) ) !important;
		line-height: 1.3 !important;
		text-transform: uppercase;
	}
	.elementor-2272 .elementor-element.elementor-element-ebdbce7 .elementor-heading-title span {
		font-size: 103% !important;
		letter-spacing: 0 !important;
	}

	.elementor-2272 .elementor-element.elementor-element-33fb740 {
		margin: 0 !important;
	}
	.elementor-2272 .elementor-element.elementor-element-33fb740 .elementor-heading-title {
		font-size: 14.6px !important;
	}

	.elementor-2272 .elementor-element.elementor-element-a078b6c {
		--divider-border-width: 2px !important;
		margin: 12px 0 0 0 !important;
	}
	.elementor-2272 .elementor-element.elementor-element-a078b6c .elementor-divider-separator {
		width: 44px !important;
	}

	.elementor-2272 .elementor-element.elementor-element-bd3c9bf {
		margin: 7px 0 0 0 !important;
	}
	.elementor-2272 .elementor-element.elementor-element-bd3c9bf .elementor-heading-title {
		font-size: 14px !important;
		line-height: 1.5 !important;
	}
}

/* Tablet (768-1024px): the same re-anchor as the phone rule above. The
   labelled banner had to be held away from the buttons here too; the team
   photo only needs to be framed, and at this ratio cover trims its height,
   so 35% is what keeps the group's faces in the crop rather than its feet.
   Superseded by the rule of the same shape further down this file, which
   this one is kept beside for the record. */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-2000 .elementor-element.elementor-element-78e5bd9 {
		background-position: center 35% !important;
	}
}


/* ---------- Submit state for the Workforce Request form ----------
   The submit control is an <input>, which cannot contain a child, so the
   spinner sits beside it as a sibling. Nothing about the button's own design
   is touched: only the disabled look while the post is in flight. */
.lm-submit-spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 10px;
	vertical-align: middle;
	border: 2px solid rgba( 12, 17, 36, 0.25 );
	border-top-color: #0c1124;
	border-radius: 50%;
	animation: lm-submit-spin 0.7s linear infinite;
}

@keyframes lm-submit-spin {
	to { transform: rotate( 360deg ); }
}

/* The label alone still says what is happening, so the spinner simply holds
   still rather than disappearing. */
@media ( prefers-reduced-motion: reduce ) {
	.lm-submit-spinner { animation: none; }
}

.lm-is-submitting .wpcf7-submit,
.lm-is-submitting input[type="submit"] {
	cursor: progress;
	opacity: 0.75;
}

/* The page-wide loader shown while the form posts. A light, slightly see-
   through veil so the page stays visible behind it, with a navy-and-gold
   ring in the middle of the viewport. It also swallows clicks, so nothing
   else on the page can be set off mid-submission. */
.lm-submit-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	background: rgba( 255, 255, 255, 0.55 );
	-webkit-backdrop-filter: blur( 2px );
	backdrop-filter: blur( 2px );
	cursor: progress;
	animation: lm-submit-fade 0.2s ease-out;
}

.lm-submit-overlay__ring {
	width: 56px;
	height: 56px;
	border: 5px solid rgba( 1, 23, 53, 0.15 );
	border-top-color: #c69224;
	border-right-color: #011735;
	border-radius: 50%;
	animation: lm-submit-spin 0.8s linear infinite;
}

.lm-submit-overlay__text {
	padding: 0 16px;
	color: #011735;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-align: center;
}

@keyframes lm-submit-fade {
	from { opacity: 0; }
}

@media ( prefers-reduced-motion: reduce ) {
	.lm-submit-overlay,
	.lm-submit-overlay__ring { animation: none; }
}

/* ---------- Footer icons: brighter gold ----------
   The eight footer icons - the six industry marks and the two licence badges -
   are JPGs, so each carries its own baked-in slab of navy rather than
   transparency, and that slab is a shade darker than the footer behind it
   (rgb(0,19,52) against rgb(0,21,53)). Brightening with a filter alone lifts
   the slab too and every icon becomes a visible lighter square; adding contrast
   to hold the slab down turns it into a visible darker one instead. Both were
   tried and both showed.

   mix-blend-mode: lighten takes the per-channel maximum of icon and footer, so
   anything in the JPG darker than the footer is replaced by the footer itself:
   the slab disappears no matter what the filter does to it. That frees the
   filter to push hard on the line art - contrast drops the ground away,
   brightness and saturate lift the gold, and the blend cleans up behind them.

   Scoped to .ft_mmn_bx, which this theme uses for these eight and nothing else
   (six in template-parts/chrome/footer.php, two in licence.php). The blend
   depends on the flat navy behind them; if one is ever moved onto a photo or a
   gradient it will need rechecking. */
.ft_mmn_bx figure img {
	mix-blend-mode: lighten;
	filter: contrast( 1.3 ) brightness( 1.35 ) saturate( 1.1 );
}

/* ---------- Heavier gold edges on the two remaining hero/header buttons ----------
   Matching what "Build Your Team" was given. Those buttons carry two separate
   gold edges: the masked gradient ring on the pseudo-element (its padding is
   the ring's thickness) and, on the solid gold ones, the darker
   --lm-btn-gold-rim line inset just inside it. Which one to thicken depends on
   what the button actually shows.

   "Submit Requirement" is solid gold like "Build Your Team", so it takes the
   identical treatment: the rim redefined locally at 2px and a little more
   opacity. Redefined on the item rather than on :root because the hairline is
   shared by the remaining gold buttons across the site, which were not asked to
   change. The phone menu's copy of this button sets its own box-shadow
   literal rather than reading the token, so it is untouched by this. */
.elementor-nav-menu--main li.menu-item.cst-sm {
	--lm-btn-gold-rim: inset 0 0 0 2px rgba( 120, 86, 14, 0.6 );
}

/* ---------- ...and the rest of "Build Your Team"'s edge and gold ----------
   Three things were different:

   - The gradient ring never drew here at all. It rides on ::before (this
     button's ::after is the white hover panel), and the nav's own separator,
     .elementor-nav-menu li.menu-item:before, is a 1px x 20px tick that ties
     the ring rule on specificity and sets an explicit width and height. The
     ring only says inset: 0, which overrides the tick's top and left but not
     its width and height, so the ring was collapsing to that sliver at the
     left edge. Clearing both back to auto lets inset govern and the ring
     covers the button, the way it does on "Build Your Team".
   - The gold ran on the shared 59deg diagonal rather than the hero's 133deg.
   - 6px corners against the hero's 4px.

   Nothing else about the edge is touched. The ring keeps the shared 1px band
   on the gold-text ramp and the rim keeps the 2px line set for this button
   above, which is exactly what "Build Your Team" carries, so the two borders
   are the same colour and the same shine. A brighter ramp of its own and a
   thinner rim were both tried here and both made this edge read differently
   from the hero's, which was the thing to avoid.

   Scoped to .elementor-nav-menu--main: the phone menu panel has its own
   full-width copy of this button, with its own sizing and its own box-shadow
   literal, and it keeps them. */
.elementor-nav-menu--main li.menu-item.cst-sm {
	--lm-btn-gold-angle: 133deg;
	border-radius: 4px !important;
}
.elementor-nav-menu--main li.menu-item.cst-sm::before {
	/* ...and the separator's opacity, which was the whole of why this ring
	   looked washed out next to "Build Your Team"'s. That tick is drawn as a
	   black bar at opacity .2, and while the ring rule replaces its background
	   and its position, nothing replaced the opacity - so the gold band was
	   being painted at a fifth of its strength. The edge measured a flat
	   104-140 against the hero's 80-217 on identical CSS. Back to 1 and the
	   two rings are the same gold at the same strength. */
	opacity: 1;
	width: auto;
	height: auto;
}

/* "Find Jobs" is the outline button of the pair - transparent fill, white
   label - so it has no rim to thicken, and giving it one would only draw a
   muddy brown line inside a see-through button. Its gold edge is the ring
   alone, so the ring is what grows: 1px to 2px of padding. */
body .elementor-element-b710817 .elementor-button::after {
	padding: 2px;
}

/* About Us' "Click here to view license details" takes the same heavier edge as
   "Build Your Team" and "Submit Requirement". It is a solid gold button reading
   the shared hairline rim and carrying no gradient ring of its own, so the rim
   is the whole of its border and thickening it is the entire change.

   Defined on the button rather than on :root for the same reason as the others:
   the 1px hairline is still what the remaining gold buttons across the site
   use. .lm-lic-open is unique to this one button (template-parts/pages/about/
   section-5.php), and the site-wide gold CTA rule applies the box-shadow to
   this same element, so the local value is what that shadow resolves. */
.lm-lic-open {
	--lm-btn-gold-rim: inset 0 0 0 2px rgba( 120, 86, 14, 0.6 );
}

/* ...and the rest of "Build Your Team"'s edge, so this button matches it and
   "Submit Requirement" exactly rather than only in its rim. Two values and one
   pseudo-element were missing:

   - No ring at all. Its ::after is the white hover panel, so the ring goes on
     ::before, which is free here - joined to the shared ring rule above rather
     than restated, so the band, the ramp and the masks cannot drift apart from
     the other three buttons carrying it.
   - The face ran on the shared 59deg diagonal rather than the hero's 133deg.
   - 6px corners against the hero's 4px.

   What styles this button is the licence CTA rule earlier in this file,
   body:not(.elementor-page-31) section.lm-licence-cta .elementor-button, which
   pins the radius at 6px with !important. That is three classes and two
   elements, so it cannot be outranked by anything reasonable here - this
   selector matches it exactly and wins on source order instead, being the
   later of the two. An earlier attempt at two classes and two elements lost
   to it outright and left the corners at 6px. */
body:not(.elementor-page-31) button.lm-lic-open.elementor-button {
	--lm-btn-gold-angle: 133deg;
	border-radius: 4px !important;
}


/* ==========================================================================
   Find Jobs: every button on the page takes the "Build Your Team" treatment
   ==========================================================================
   Colour, border, label, ring, hover behaviour, hover end state and timing are
   all copied from .elementor-element-215b604 (Home hero). Measured off that
   button rather than reconstructed: gold face on a 133deg ramp, #6a4a09 label,
   no border, the 2px dark rim inset, the 16deg gradient ring on ::after, and a
   hover that wipes a white panel up from the centre over 0.3s while a 2px
   #dfa33e border and #dfa33e label come in.

   The wipe is done with a second background layer rather than the absolutely
   positioned ::before that .sdd_btn gives Build Your Team. Four of these six
   buttons hold their label as a bare text node or a raw <svg>, with nothing to
   raise above a panel, so a positioned panel would paint straight over the
   label. A background layer always sits behind text, needs no extra element,
   and reproduces the same motion: sized 100% 0 and positioned centre, it grows
   symmetrically out of the middle, which is exactly what scaleY from a centre
   transform-origin does.

   Two of them already carried a white ::before panel of their own (they are in
   the same .sdd_btn family) and button.btn-search carried one on ::after; those are
   switched off below so only one wipe runs.

   Selector weights are deliberate, not stylistic: "Apply Now" is zeroed by the
   site-wide body:not(.elementor-page-31) .btn-apply rule, the hero pair is
   pinned by four-class rules written to outrank the site-wide gold, and
   "View Details" is styled from an inline <style> block in
   template-parts/pages/find-jobs/section-2.php that the browser reads after
   this file. Every selector here is carried at the weight needed to win. */
body:not(.elementor-page-31) .elementor-element.elementor-element-d894217 .elementor-button,
body:not(.elementor-page-31) button.btn-search,
body:not(.elementor-page-31) .btn-apply,
body:not(.elementor-page-31) .resume-upload-card__submit {
	position: relative;
	overflow: hidden;
	--lm-btn-gold-angle: 133deg;
	--lm-btn-gold-rim: inset 0 0 0 2px rgba( 120, 86, 14, 0.6 );
	background-image:
		linear-gradient( #fff, #fff ),
		linear-gradient( var( --lm-btn-gold-angle ), var( --lm-btn-gold-stops ) ) !important;
	background-repeat: no-repeat !important;
	background-position: center center, center center !important;
	background-size: 100% 0, 100% 100% !important;
	background-color: transparent !important;
	color: var( --lm-btn-gold-label ) !important;
	fill: var( --lm-btn-gold-label ) !important;
	font-weight: 700 !important;
	border: none !important;
	border-radius: 4px !important;
	box-shadow: var( --lm-btn-gold-rim ) !important;
	cursor: pointer !important;
	animation: none !important;
	transition: background-size 0.3s, border-color 0.3s, border-width 0.3s, color 0.3s, fill 0.3s !important;
}

/* The gold ring, identical to the one Build Your Team carries. */
body:not(.elementor-page-31) .elementor-element.elementor-element-d894217 .elementor-button::after,
body:not(.elementor-page-31) button.btn-search::after,
body:not(.elementor-page-31) .btn-apply::after,
body:not(.elementor-page-31) .resume-upload-card__submit::after {
	content: "" !important;
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) );
	-webkit-mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	        mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
	z-index: 2;
}

/* The panel this button already had, switched off so one wipe runs. The hero's
   "Upload Resume / CV" is not listed: it keeps its own outline styling and its
   own wipe. */
body:not(.elementor-page-31) .elementor-element.elementor-element-d894217 .elementor-button::before {
	content: none !important;
}

/* Hover: the white face, gold border and gold label Build Your Team ends on. */
body:not(.elementor-page-31) .elementor-element.elementor-element-d894217 .elementor-button:hover,
body:not(.elementor-page-31) button.btn-search:hover,
body:not(.elementor-page-31) .btn-apply:hover,
body:not(.elementor-page-31) .resume-upload-card__submit:hover {
	/* The two layers are restated here, not just resized. "Apply for a Job"
	   still carries an older hover of its own (background: #e69500 !important,
	   the amber fill this button used to take) at the same weight as this rule,
	   and a background shorthand resets background-image to none - which blanked
	   the gold mid-wipe. Naming the layers again keeps them whichever of the two
	   the cascade picks. */
	background-image:
		linear-gradient( #fff, #fff ),
		linear-gradient( var( --lm-btn-gold-angle ), var( --lm-btn-gold-stops ) ) !important;
	background-repeat: no-repeat !important;
	background-position: center center, center center !important;
	background-size: 100% 100%, 100% 100% !important;
	border: none !important;
	box-shadow: inset 0 0 0 2px #dfa33e !important;
	color: #dfa33e !important;
	fill: #dfa33e !important;
	/* The rim comes off for the hover. On Build Your Team the white panel is a
	   positioned ::before, which paints over the inset rim and hides it, so its
	   hover is a clean white face inside one gold border. Here the panel is a
	   background layer, and backgrounds paint under an inset box-shadow - the
	   dark rim stayed on top of the white and read as a heavy second line
	   inside the border. Dropping it leaves the border and the ring, which is
	   exactly what the reference shows. */
}

/* Elementor wraps its labels in spans and its arrows in <svg>; both pin their
   own colour, so the hover colour has to be restated on them. */
body:not(.elementor-page-31) .elementor-element.elementor-element-d894217 .elementor-button:hover .elementor-button-text,
body:not(.elementor-page-31) button.btn-search:hover svg,
body:not(.elementor-page-31) .btn-apply:hover svg,
body:not(.elementor-page-31) .resume-upload-card__submit:hover svg,
body:not(.elementor-page-31) .elementor-element.elementor-element-d894217 .elementor-button:hover .elementor-button-icon svg {
	color: #dfa33e !important;
	fill: #dfa33e !important;
}

/* ---------- The job application form's "Submit application" ----------
   The same "Build Your Team" treatment the Find Jobs buttons above take, on the
   submit button inside the apply form (inc/job-apply.php, rendered on single
   job pages by single-lm_job.php). Gold face on the 133deg ramp, #6a4a09 label,
   the 2px dark rim, the 16deg gradient ring, and a hover that wipes white up
   from the centre over 0.3s while a 2px #dfa33e border and label come in.

   The wipe is the background-layer version again - this button's label is a
   bare text node, so a positioned panel would cover it.

   Scoped through .lm-job-apply rather than to .lm-btn--primary on its own: that
   class is also worn by the 404 page's home link, searchform.php's Search and
   the Contact template's submit, none of which were asked to change. Two
   classes also clears main.css's single-class .lm-btn--primary, so the cascade
   does not depend on which of the two stylesheets is enqueued last. */
.lm-job-apply .lm-btn--primary {
	position: relative;
	overflow: hidden;
	--lm-btn-gold-angle: 133deg;
	--lm-btn-gold-rim: inset 0 0 0 2px rgba( 120, 86, 14, 0.6 );
	background-image:
		linear-gradient( #fff, #fff ),
		linear-gradient( var( --lm-btn-gold-angle ), var( --lm-btn-gold-stops ) ) !important;
	background-repeat: no-repeat !important;
	background-position: center center, center center !important;
	background-size: 100% 0, 100% 100% !important;
	background-color: transparent !important;
	color: var( --lm-btn-gold-label ) !important;
	fill: var( --lm-btn-gold-label ) !important;
	font-weight: 700 !important;
	border: none !important;
	border-radius: 4px !important;
	box-shadow: var( --lm-btn-gold-rim ) !important;
	cursor: pointer !important;
	animation: none !important;
	transition: background-size 0.3s, border-color 0.3s, border-width 0.3s, color 0.3s, fill 0.3s !important;
}

.lm-job-apply .lm-btn--primary::after {
	content: "" !important;
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) );
	-webkit-mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	        mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
	z-index: 2;
}

.lm-job-apply .lm-btn--primary:hover {
	background-image:
		linear-gradient( #fff, #fff ),
		linear-gradient( var( --lm-btn-gold-angle ), var( --lm-btn-gold-stops ) ) !important;
	background-repeat: no-repeat !important;
	background-position: center center, center center !important;
	background-size: 100% 100%, 100% 100% !important;
	border: none !important;
	box-shadow: inset 0 0 0 2px #dfa33e !important;
	color: #dfa33e !important;
	fill: #dfa33e !important;
	/* Rim off on hover, for the reason given on the Find Jobs hover above: the
	   background-layer panel cannot cover an inset shadow the way Build Your
	   Team's positioned panel does, so the rim would show through the white. */
}

/* ---------- One border on hover, not two ----------
   These buttons carry two gold edges: the masked gradient ring on ::after, and
   the 2px #dfa33e border that comes in on hover. At rest only the ring is gold,
   so the edge reads as a single line with the dark rim as a bevel behind it -
   which is what the reference looks like. On hover both are gold at once, a
   pale mask stop lands between them, and the result is two concentric gold
   lines with a gap: a visibly doubled border.

   The ring is dropped for the duration of the hover, leaving the 2px border as
   the only edge. Rest is untouched, so the resting look that was already
   approved still stands. */
body:not(.elementor-page-31) .elementor-element.elementor-element-d894217 .elementor-button:hover::after,
body:not(.elementor-page-31) button.btn-search:hover::after,
body:not(.elementor-page-31) .btn-apply:hover::after,
body:not(.elementor-page-31) .resume-upload-card__submit:hover::after,
.lm-job-apply .lm-btn--primary:hover::after {
	content: none !important;
}

/* ---------- Build Your Team: gold edge on the six capability cards ----------
   The kit gives each card a flat 2px #E7E7E7 border. These take the site's gold
   ramp instead, at the same 16deg and the same 2px, so nothing about the grid
   moves.

   Painted as a two-layer background rather than a bordered pseudo-element: the
   border stays 2px and solid-transparent, the gradient is laid into the border
   box and a flat white into the padding box, and background-clip cuts each to
   its own area. That leaves the ring exactly where the grey border was - an
   absolutely positioned ring would have sat against the padding box, 2px in
   from it, and pulled the visible edge inward. The white is what the card
   already showed: its own background is transparent over a white section, so
   naming it changes nothing on screen.

   The stops are the white-safe ramp used for this page's industry icons, not
   the hero's. The hero ramp runs its highlights to near-white because it sits
   on navy; against this white section those stops measure about 1.1:1 and
   vanish, which on a continuous border shows up as the line breaking into
   dashes. Every stop here clears 2:1 and the light-to-dark spread is kept, so
   the edge still reads as metal.

   Four classes plus body to clear the kit's own four-class selector. */
body .elementor-2272 .elementor-element.elementor-element-47eb2d2 > .elementor-element-populated,
body .elementor-2272 .elementor-element.elementor-element-5f0a52c > .elementor-element-populated,
body .elementor-2272 .elementor-element.elementor-element-1fac942 > .elementor-element-populated,
body .elementor-2272 .elementor-element.elementor-element-cd77e68 > .elementor-element-populated,
body .elementor-2272 .elementor-element.elementor-element-4cfb002 > .elementor-element-populated,
body .elementor-2272 .elementor-element.elementor-element-8c5553e > .elementor-element-populated {
	border: 2px solid transparent;
	background-image:
		linear-gradient( #fff, #fff ),
		linear-gradient( 16deg, #d9ae45 0%, #cb9c33 12%, #b8851c 28%, #d3a640 42%, #c69224 52%, #7d5108 68%, #c49a34 82%, #d8ad44 100% );
	background-origin: border-box;
	background-clip: padding-box, border-box;
	background-repeat: no-repeat;
}

/* ---------- Build Your Team: an edge on "Submit Workforce Requirement" ----------
   The label appears twice on this page - as the CTA link (elementor-element-
   ca0a0f6) and as the workforce form's own submit - so both take the edge, or
   the two would stop matching. Each gets the 2px dark rim the site's gold
   buttons carry plus the 16deg ramp as a ring. Both sit on navy, so the ramp is
   the original one, highlights and all; the lowered-ceiling variant is only
   needed where the ground is white.

   The CTA link is an <a> and takes the ring the ordinary way, on ::after. */
body .elementor-element-ca0a0f6 .elementor-button {
	--lm-btn-gold-rim: inset 0 0 0 2px rgba( 120, 86, 14, 0.6 );
}
body .elementor-element-ca0a0f6 .elementor-button::after {
	content: "" !important;
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) );
	-webkit-mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	        mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
	z-index: 2;
}

/* The form's submit is an <input>, which has no ::before or ::after to put a
   ring on, so the ring goes in as a third background layer instead: a 1px
   transparent border gives it somewhere to sit, background-origin measures all
   three layers against the border box, and background-clip keeps the white
   wipe and the gold face inside the padding box while the ring alone fills the
   border. The first two layers and their sizes are restated exactly as the
   existing rule sets them - the wipe still rests at 100% 0 and grows on hover,
   which that rule handles. */
body:not(.elementor-page-31) .sd_wrkf_frm input[type="submit"] {
	--lm-btn-gold-rim: inset 0 0 0 2px rgba( 120, 86, 14, 0.6 );
	border: 1px solid transparent !important;
	background-image:
		linear-gradient( #fff, #fff ),
		linear-gradient( var( --lm-btn-gold-angle ), var( --lm-btn-gold-stops ) ),
		linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) ) !important;
	background-origin: border-box !important;
	background-clip: padding-box, padding-box, border-box !important;
	background-size: 100% 0%, 100% 100%, 100% 100% !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	box-shadow: var( --lm-btn-gold-rim ) !important;
}
body:not(.elementor-page-31) .sd_wrkf_frm input[type="submit"]:hover {
	background-size: 100% 100%, 100% 100%, 100% 100% !important;
}

/* ---------- Workforce Solutions hero: the gold ramp on both CTA edges ----------
   "Request Talent" is gold-faced and "Explore Our Solutions" is the outline
   button beside it, so the ramp arrives differently on each - but both end up
   with the same 16deg gold edge. Both sit over the hero photo, so this is the
   original ramp with its highlights; the lowered-ceiling variant is only for
   the white sections.

   Neither uses ::after, so the ring goes there on both. ::before is left alone:
   it carries the white hover wipe these buttons already have. */
body .elementor-element-dcf0987 .elementor-button {
	--lm-btn-gold-rim: inset 0 0 0 2px rgba( 120, 86, 14, 0.6 );
}
body .elementor-element-dcf0987 .elementor-button::after,
body .elementor-element-f8d2b74 .elementor-button::after {
	content: "" !important;
	position: absolute;
	inset: 0;
	padding: 2px;
	border-radius: inherit;
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) );
	-webkit-mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	        mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
	z-index: 2;
}


/* ---------- "Submit Workforce Requirement" (the CTA link): a hover that reads --
   This button had no hover panel of its own - ::before is empty on it, unlike
   the .sdd_btn family - so its hover only recoloured the label to #dfa33e while
   the gold face stayed put. Gold on gold: the label all but disappeared.

   It gets the same hover the rest of the site's gold buttons now use: a white
   panel wiping out from the centre over 0.3s with the label in gold on top,
   ending on a single 2px #dfa33e border. Done with a background layer for the
   same reason as elsewhere - the label here is a <span> that would need lifting
   over a positioned panel, and a background layer sits behind text for free.

   Its own 59deg face angle is kept; only the panel is added over it. */
body:not(.elementor-page-31) .elementor-element.elementor-element-ca0a0f6 .elementor-button {
	background-color: transparent !important;
	background-image:
		linear-gradient( #fff, #fff ),
		linear-gradient( var( --lm-btn-gold-angle ), var( --lm-btn-gold-stops ) ) !important;
	background-repeat: no-repeat !important;
	background-position: center center, center center !important;
	background-size: 100% 0, 100% 100% !important;
	transition: background-size 0.3s, border-color 0.3s, color 0.3s !important;
}
body:not(.elementor-page-31) .elementor-element.elementor-element-ca0a0f6 .elementor-button:hover {
	background-image:
		linear-gradient( #fff, #fff ),
		linear-gradient( var( --lm-btn-gold-angle ), var( --lm-btn-gold-stops ) ) !important;
	background-repeat: no-repeat !important;
	background-position: center center, center center !important;
	background-size: 100% 100%, 100% 100% !important;
	border: none !important;
	box-shadow: inset 0 0 0 2px #dfa33e !important;
	color: #dfa33e !important;
	/* Rim and ring both come off for the hover, exactly as on the Find Jobs
	   buttons: against the white face the rim reads as a dark second line, and
	   the ring plus the border read as a doubled gold edge. */
}
body:not(.elementor-page-31) .elementor-element.elementor-element-ca0a0f6 .elementor-button:hover::after {
	content: none !important;
}

/* ---------- Workforce Solutions: gold edges and gold icons on the six cards ----
   Section elementor-element-49e99b6. The kit gives each card a flat 2px #E7E7E7
   border; these take the gold ramp at the same 2px and 10px radius, painted the
   same way as the Build Your Team cards - gradient into the border box, white
   into the padding box, background-clip cutting each to its own area. That
   holds the edge exactly where the grey was and leaves the card its size.

   White-safe ramp again: this section is white, and the hero ramp's near-white
   highlights measure about 1.1:1 there, which on a continuous border shows as
   the line breaking into dashes. */
body .elementor-2000 .elementor-element.elementor-element-5f2f917 > .elementor-element-populated,
body .elementor-2000 .elementor-element.elementor-element-ee4f29d > .elementor-element-populated,
body .elementor-2000 .elementor-element.elementor-element-7e6d5c7 > .elementor-element-populated,
body .elementor-2000 .elementor-element.elementor-element-dbfd569 > .elementor-element-populated,
body .elementor-2000 .elementor-element.elementor-element-63e4509 > .elementor-element-populated,
body .elementor-2000 .elementor-element.elementor-element-0e72ea8 > .elementor-element-populated {
	border: 2px solid transparent;
	background-image:
		linear-gradient( #fff, #fff ),
		linear-gradient( 16deg, #d9ae45 0%, #cb9c33 12%, #b8851c 28%, #d3a640 42%, #c69224 52%, #7d5108 68%, #c49a34 82%, #d8ad44 100% );
	background-origin: border-box;
	background-clip: padding-box, border-box;
	background-repeat: no-repeat;
}

/* The five line-art icons (u1.jpg - u5.jpg) turned gold. They are flat JPGs of
   navy artwork on white, so there is no stroke to recolour and no transparency
   to tint - a filter would have to hit the white ground as well as the art.

   Instead the gold is laid behind each image and the image is composited with
   mix-blend-mode: lighten, which keeps the lighter of image and backdrop per
   channel. The art is darker than the gold, so it takes the gold; the white
   ground is lighter than the gold, so it stays white. The figure is shrunk to
   the bitmap so the gold sits exactly under the artwork and nowhere else.

   The sixth card is deliberately not in this list. Its image is ll.png, the
   "30 Years of Excellence" badge - a full-colour brand asset in navy, red and
   silver, not line art. Blending that against gold would flatten every colour
   in it that is darker than the gold and wreck the badge. */
body .elementor-element-ee4f29d figure.elementor-image-box-img,
body .elementor-element-7e6d5c7 figure.elementor-image-box-img,
body .elementor-element-dbfd569 figure.elementor-image-box-img,
body .elementor-element-63e4509 figure.elementor-image-box-img,
body .elementor-element-0e72ea8 figure.elementor-image-box-img {
	display: inline-block;
	line-height: 0;
	background: linear-gradient( 16deg, #d9ae45 0%, #cb9c33 12%, #b8851c 28%, #d3a640 42%, #c69224 52%, #7d5108 68%, #c49a34 82%, #d8ad44 100% );
}
body .elementor-element-ee4f29d figure.elementor-image-box-img img,
body .elementor-element-7e6d5c7 figure.elementor-image-box-img img,
body .elementor-element-dbfd569 figure.elementor-image-box-img img,
body .elementor-element-63e4509 figure.elementor-image-box-img img,
body .elementor-element-0e72ea8 figure.elementor-image-box-img img {
	mix-blend-mode: lighten;
	/* width:auto so the element box shrinks to the artwork. The kit sizes these
	   at 125px wide by 80px tall with object-fit:contain, and the sources are
	   125x128 - so the picture is letterboxed to about 78px wide inside a 125px
	   box, leaving ~23px of empty box each side. The gold behind it showed
	   straight through those gaps as two bars flanking every icon. With the box
	   shrunk to what is actually painted, the gold sits under the artwork and
	   nowhere else. */
	width: auto !important;
}

/* ---------- Workforce Solutions: the five numbered step badges ----------
   Each badge is a 90x90 JPG - a navy disc with a white glyph - drawn at 70px
   and rounded by border-radius on the <img> itself. Two things are asked of it:
   a gold ring around the disc, and the glyph in gold.

   Neither can be done to the image. It is a flat two-tone bitmap with no
   transparency, so there is nothing to recolour, and an <img> is a replaced
   element with no ::before or ::after of its own. Both layers are therefore
   hung on the widget div that wraps it, which is already position:relative,
   exactly 70px tall, and centres the image - so a 70px box pinned to its top
   and centred lands precisely on the disc.

   ::before draws the ring, masked to its own edge the way the buttons' rings
   are. ::after paints the gold and masks it with the badge artwork read as
   luminance: the white glyph is bright, so it keeps the gold; the navy disc is
   dark, so it drops out and the original navy shows through untouched. That is
   why the disc keeps its colour while only the glyph turns.

   The ramp is the original one, highlights and all - these sit on navy, not on
   the white sections that needed the lowered ceiling. */
body .elementor-element-7cff0a4::before,
body .elementor-element-507e6e6::before,
body .elementor-element-200cc89::before,
body .elementor-element-39c9d13::before,
body .elementor-element-2e725b6::before,
body .elementor-element-7cff0a4::after,
body .elementor-element-507e6e6::after,
body .elementor-element-200cc89::after,
body .elementor-element-39c9d13::after,
body .elementor-element-2e725b6::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX( -50% );
	width: 70px;
	height: 70px;
	border-radius: 50%;
	box-sizing: border-box;
	pointer-events: none;
}

/* The ring. */
body .elementor-element-7cff0a4::before,
body .elementor-element-507e6e6::before,
body .elementor-element-200cc89::before,
body .elementor-element-39c9d13::before,
body .elementor-element-2e725b6::before {
	padding: 2px;
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) );
	-webkit-mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	        mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	z-index: 2;
}

/* The glyph, gold through the artwork's own luminance. */
body .elementor-element-7cff0a4::after,
body .elementor-element-507e6e6::after,
body .elementor-element-200cc89::after,
body .elementor-element-39c9d13::after,
body .elementor-element-2e725b6::after {
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) );
	-webkit-mask-size: 100% 100%;
	        mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-source-type: luminance;
	        mask-mode: luminance;
	z-index: 1;
}
body .elementor-element-7cff0a4::after {
	-webkit-mask-image: url( "/wp-content/uploads/2026/08/sc-1.jpg" );
	        mask-image: url( "/wp-content/uploads/2026/08/sc-1.jpg" );
}
body .elementor-element-507e6e6::after {
	-webkit-mask-image: url( "/wp-content/uploads/2026/08/sc-2.jpg" );
	        mask-image: url( "/wp-content/uploads/2026/08/sc-2.jpg" );
}
body .elementor-element-200cc89::after {
	-webkit-mask-image: url( "/wp-content/uploads/2026/08/sc-3.jpg" );
	        mask-image: url( "/wp-content/uploads/2026/08/sc-3.jpg" );
}
body .elementor-element-39c9d13::after {
	-webkit-mask-image: url( "/wp-content/uploads/2026/08/sc-4.jpg" );
	        mask-image: url( "/wp-content/uploads/2026/08/sc-4.jpg" );
}
body .elementor-element-2e725b6::after {
	-webkit-mask-image: url( "/wp-content/uploads/2026/08/sc-5.jpg" );
	        mask-image: url( "/wp-content/uploads/2026/08/sc-5.jpg" );
}

/* ---------- Workforce Solutions: the six industry boxes (section 133a59c) ----
   Borders first: the kit gives each box a flat 1px #DBDBDB at 8px radius. The
   gold ramp replaces it the same way as the other card sets - gradient into the
   border box, white into the padding box, background-clip cutting each to its
   own area, so the edge stays put and the box keeps its size. The width stays
   1px; only the colour changes. White-safe ramp, since this section is white. */
body .elementor-2000 .elementor-element.elementor-element-2ba3fc5 > .elementor-element-populated,
body .elementor-2000 .elementor-element.elementor-element-b78b934 > .elementor-element-populated,
body .elementor-2000 .elementor-element.elementor-element-e5b3e9d > .elementor-element-populated,
body .elementor-2000 .elementor-element.elementor-element-c986e88 > .elementor-element-populated,
body .elementor-2000 .elementor-element.elementor-element-1637d48 > .elementor-element-populated,
body .elementor-2000 .elementor-element.elementor-element-a7a65dc > .elementor-element-populated {
	border: 1px solid transparent;
	background-image:
		linear-gradient( #fff, #fff ),
		linear-gradient( 16deg, #d9ae45 0%, #cb9c33 12%, #b8851c 28%, #d3a640 42%, #c69224 52%, #7d5108 68%, #c49a34 82%, #d8ad44 100% );
	background-origin: border-box;
	background-clip: padding-box, border-box;
	background-repeat: no-repeat;
}

/* The icons. Same situation as the other JPG line art on this site - navy
   artwork on a white ground, nothing to recolour - so the gold goes behind the
   image and the image composites with mix-blend-mode: lighten: the art is
   darker than the gold and takes it, the white ground is lighter and stays.

   The gold is a background on the image's own wrapper, not a pseudo-element.
   A pseudo-element was tried first and failed instructively: at z-index:-1 it
   sank behind the card's white background, so the image was blending against
   white instead, and lighten against white is white - every icon vanished.
   Above the image it would have covered it. A background on the parent paints
   beneath in-flow children by definition, which is exactly the backdrop the
   blend needs.

   It cannot simply fill the box either. These are 124x92 sources drawn into a
   70x70 box with object-fit:contain, so the picture letterboxes to 70x51.94 and
   the bands above and below it are transparent, not white - gold across the
   whole box would show through them as bars. background-size pins the panel to
   the picture, and centre position lands it on the art, which is centred both
   ways inside the wrapper. The figures come from the 124:92 ratio all six
   sources share. */
body .elementor-element-d2c4b2c,
body .elementor-element-b78b934 .elementor-widget-image,
body .elementor-element-e5b3e9d .elementor-widget-image,
body .elementor-element-c986e88 .elementor-widget-image,
body .elementor-element-1637d48 .elementor-widget-image,
body .elementor-element-a7a65dc .elementor-widget-image {
	background-image: linear-gradient( 16deg, #d9ae45 0%, #cb9c33 12%, #b8851c 28%, #d3a640 42%, #c69224 52%, #7d5108 68%, #c49a34 82%, #d8ad44 100% );
	background-size: 70px 51.94px;
	background-position: center center;
	background-repeat: no-repeat;
}
body .elementor-element-d2c4b2c img,
body .elementor-element-b78b934 .elementor-widget-image img,
body .elementor-element-e5b3e9d .elementor-widget-image img,
body .elementor-element-c986e88 .elementor-widget-image img,
body .elementor-element-1637d48 .elementor-widget-image img,
body .elementor-element-a7a65dc .elementor-widget-image img {
	mix-blend-mode: lighten;
}

/* ---------- A single word in the gold ramp ----------
   For picking one word out of an otherwise flat heading - "SERVE" in
   "INDUSTRIES WE SERVE" on Workforce Solutions. CSS cannot address a word on
   its own, so the word is wrapped in <span class="lm-gold-word"> in the content
   and this paints it.

   The flat colour stays under the gradient as the fallback: background-clip
   text needs the fill transparent, so anywhere the clip does not apply the word
   would otherwise vanish rather than degrade.

   White-safe ramp, because the headings that use this sit on white. The hero
   ramp's near-white highlights measure about 1.1:1 there and would punch holes
   through the letterforms. */
.lm-gold-word {
	color: #b8851c;
	background: linear-gradient( 16deg, #d9ae45 0%, #cb9c33 12%, #b8851c 28%, #d3a640 42%, #c69224 52%, #7d5108 68%, #c49a34 82%, #d8ad44 100% );
	-webkit-background-clip: text;
	        background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* The same word treatment for a heading on a dark photo - "Workforce
   Decisions" in the Knowledge Hub hero. It is "Career Opportunity" on Find
   Jobs exactly: the hero ramp with its bright highlights, which read on a dark
   ground where the white-safe ramp above would look dull, and the one-sided
   shadow underneath the letters rather than a halo around them.

   box-decoration-break: clone gives each line its own gradient and shadow if
   the words wrap on a narrow screen; without it the second line would take
   only the tail of one gradient stretched across both. */
.lm-gold-word.lm-gold-word--hero {
	color: #e8c65d;
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) );
	-webkit-background-clip: text;
	        background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow( 0 2px 1px rgba( 70, 40, 0, 0.6 ) );
	-webkit-box-decoration-break: clone;
	        box-decoration-break: clone;
}

/* ---------- Knowledge Hub: the "Read More" button (elementor-element-e1b8d3f) --
   Same edge as the site's other gold buttons: the 2px dark rim inset plus the
   16deg ramp as a ring.

   The ring goes on ::before here, not ::after. This button's ::after is already
   taken - it is the white panel that scales up on hover - so the ring takes the
   free pseudo-element and z-index 2 lifts it over that panel.

   Hover gets the same correction as the Find Jobs buttons. The panel turns the
   face white, and against white the dark rim reads as a second line inside the
   edge while the ring would stack against the gold line into a doubled border.
   Both come off for the hover and a single 2px #dfa33e line is drawn instead -
   as an inset shadow, so the button keeps its size and nothing around it moves. */
body .elementor-element-e1b8d3f .elementor-button {
	--lm-btn-gold-rim: inset 0 0 0 2px rgba( 120, 86, 14, 0.6 );
}
body .elementor-element-e1b8d3f .elementor-button::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) );
	-webkit-mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	        mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
	z-index: 2;
}
/* Carried at five classes: the rim is pinned by a four-class
   body:not(.elementor-page-31) .elementor-element.elementor-element-e1b8d3f
   rule with !important, which a lighter hover selector cannot outweigh. */
body:not(.elementor-page-31) .elementor-element.elementor-element-e1b8d3f .elementor-button:hover {
	box-shadow: none !important;
}
/* The hover line is drawn here rather than as an inset shadow on the
   button. This button's white hover panel is a positioned ::after, which
   paints over anything the button itself draws - its square corners sat
   on top of a shadow line and broke it at all four rounded corners. On
   ::before at z-index 2 the line stays above the panel and follows the
   radius. Solid #dfa33e, so the hover shows one clean gold edge. */
body .elementor-element-e1b8d3f .elementor-button:hover::before {
	padding: 2px;
	background: #dfa33e;
}

/* ---------- Contact Us: the form's "submit" button (elementor-element-b7fb368) --
   Identical in build to Knowledge Hub's "Read More", so it takes the identical
   treatment: the 2px dark rim plus the 16deg ramp as a ring at rest, and one
   solid 2px gold line on hover.

   Its ::after is the white panel that scales up on hover, so the ring goes on
   ::before at z-index 2, above that panel. The hover line is drawn on the same
   ::before rather than as an inset shadow on the button - the panel is
   positioned and would paint its square corners over any shadow the button
   draws, breaking the line at the rounded corners. Nothing here changes the
   button's size, so hovering moves nothing.

   Selectors carry the same weight as the four-class rule that pins this
   button's rim with !important; the hover adds :hover on top so it wins. */
body:not(.elementor-page-31) .elementor-element.elementor-element-b7fb368 .elementor-button {
	--lm-btn-gold-rim: inset 0 0 0 2px rgba( 120, 86, 14, 0.6 );
}
body:not(.elementor-page-31) .elementor-element.elementor-element-b7fb368 .elementor-button::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) );
	-webkit-mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	        mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
	z-index: 2;
}
body:not(.elementor-page-31) .elementor-element.elementor-element-b7fb368 .elementor-button:hover {
	box-shadow: none !important;
}
body:not(.elementor-page-31) .elementor-element.elementor-element-b7fb368 .elementor-button:hover::before {
	padding: 2px;
	background: #dfa33e;
}

/* Job application form: the notice that follows a submission now sits under
   the "Submit application" button rather than above the first field - the
   same move the Contact and Workforce forms had.

   No colour is set: the card is light, so the default dark text reads.
   Only the spacing and the glyph are touched. The ::before asks for an icon
   from the eicons font, which this build does not load, so it drew an empty
   box in front of "Thank you". Dropped, as on the other two forms. */
.lm-job-apply .elementor-message {
	margin: 16px 0 0 !important;
	line-height: 1.5;
}
.lm-job-apply .elementor-message::before {
	content: none !important;
	margin-inline-end: 0 !important;
}

/* ---------- Workforce Solutions hero: laid out like the Knowledge Hub hero ----------
   (lm-ws-hero-matches-kh) The two heroes share a frame - left column, Poppins
   heading, DM Sans copy under it, a row of controls at the foot - and this
   brings the Workforce Solutions copy onto the Knowledge Hub measurements, from
   tablet up. Phones keep their own approved design in the max-width:767px
   block above; this block starts at 768px so it cannot reach it.

   - The heading starts as far down as "Insights That Drive Better": the
     Knowledge Hub hero pulls itself up under the header and pads 150px back, so
     the equivalent here is more top padding on the section.
   - The gold words take the heading's own size and tracking. The export gave
     them an inline 51px and +2px, which is why they read wider than the white
     line - and on tablet, larger than the 40px heading around them. Inline
     styles need !important to be reached.
   - "ACROSS GLOBAL INDUSTRIES" and "Powered by..." take the Knowledge Hub
     paragraph's 18px at line-height 1.4, 20px apart, with the -20px pull-up
     under the heading removed. "Powered by..." gets that paragraph's 490px
     measure, so it is not squeezed onto two short lines.
   - The buttons sit where "Popular Searches" does on Knowledge Hub, 98px below
     the copy. The gap is carried by the transparent divider already between
     the copy and the buttons, which only ever supplied spacing. */
@media (min-width: 768px) {
	.elementor-2000 .elementor-element.elementor-element-052f9eb .elementor-heading-title span {
		font-size: inherit !important;
		letter-spacing: inherit !important;
	}
	.elementor-2000 .elementor-element.elementor-element-6c67ce8 {
		margin-top: 0 !important;
	}
	.elementor-2000 .elementor-element.elementor-element-6c67ce8 .elementor-heading-title,
	.elementor-2000 .elementor-element.elementor-element-acec890 .elementor-heading-title {
		font-size: 18px !important;
		line-height: 1.4 !important;
	}
	.elementor-2000 .elementor-element.elementor-element-e87825f {
		margin: 0 0 76px 0 !important;
	}
}
@media (min-width: 1025px) {
	.elementor-2000 .elementor-element.elementor-element-78e5bd9 {
		padding-top: 116px !important;
	}
	.elementor-2000 .elementor-element.elementor-element-acec890 {
		width: 490px !important;
		max-width: 490px !important;
		--container-widget-width: 490px;
	}
}
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-2000 .elementor-element.elementor-element-78e5bd9 {
		padding-top: 107px !important;
	}
}

/* ---------- Workforce Solutions: client logo wall ----------
   The logos under "TRUSTED BY EMPLOYERS & RECRUITMENT PARTNERS ACROSS
   INDUSTRIES" sit as white rounded cards on a navy band, as in the approved
   reference: #03133d, sampled off that screenshot, a shade off the footer's
   #001535 so the two still read apart across the white gap between them.

   The band is the section's own background, and the cards wrap in rows with
   no fixed count, so every logo added later grows the band downward instead
   of spilling past it. The section keeps a white gap above, below the
   solution buttons, and a 3px sliver below, above the footer, so the two
   navies nearly touch. The kit loads after this
   file and sets the section's old padding at the same three classes, so the
   rule names .elementor-top-section as a fourth.

   Every card is one height and each logo is scaled to fill it, so a card is
   as wide as its logo - the varied widths of the reference - and the rows are
   centred, so a short last row sits in the middle. A very wide logo stops at
   a maximum width and is contained inside it. */
.elementor-2000 .elementor-element.elementor-element-a106e2e.elementor-top-section {
	margin: 50px 0 3px;
	padding: 60px 0 45px;
	background-color: #03133d;
}
.elementor-2000 .lm-client-logos {
	width: 100%;
}
.elementor-2000 .lm-client-logos__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.elementor-2000 .lm-client-logos__item {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 88px;
	margin: 0;
	padding: 6px 12px;
	background: #ffffff;
	border-radius: 8px;
	overflow: hidden;
}
.elementor-2000 .lm-client-logos__img {
	display: block;
	width: auto;
	height: 100%;
	max-width: 210px;
	object-fit: contain;
}

/* Hovering a logo outlines its card in the hero's "Explore Our Solutions"
   ring - 16deg gold ramp, drawn 4px wide so it reads on a white card against
   the navy (2px was too faint) - as a masked ring on ::after so the
   gradient can follow the card's 8px rounding - a border cannot hold a
   gradient. The ring sits inside the card and only fades in, so nothing
   moves or resizes. It is written against the card class rather than any one
   logo, so logos added later get it too. */
.elementor-2000 .lm-client-logos__item::after {
	content: "";
	position: absolute;
	inset: 0;
	padding: 4px;
	border-radius: 8px;
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) );
	-webkit-mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	        mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}
.elementor-2000 .lm-client-logos__item:hover::after {
	opacity: 1;
}

/* "OUR KEY OFFERINGS" takes the side rules of the eyebrow above it, "Why
   Global Employers & Recruitment Partners". Those are one 550px rule
   (896dae1) run behind the heading, whose white box and 20px padding hide
   the middle - measured as rendered: 2px of the accent red, centred on the
   19px line, about 42px showing each side with a 20px gap to the text.

   This heading has no divider behind it, and a 550px rule would show far
   longer ends around a shorter label, so the two ends are drawn directly as
   ::before and ::after at those measured sizes. A grid rather than a flex
   row: the label's column is sized to the whole label before the side
   columns get anything, so a narrow phone shortens the lines instead of
   wrapping the label, and a label too long for the row loses its lines -
   as the eyebrow's do on a phone - rather than pushing past the edge. */
.elementor-2000 .elementor-element.elementor-element-438bbae .elementor-heading-title {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto minmax( 0, 1fr );
	align-items: center;
	column-gap: 20px;
}
.elementor-2000 .elementor-element.elementor-element-438bbae .elementor-heading-title::before,
.elementor-2000 .elementor-element.elementor-element-438bbae .elementor-heading-title::after {
	content: "";
	width: 42px;
	max-width: 100%;
	height: 2px;
	background: var( --e-global-color-accent );
}
.elementor-2000 .elementor-element.elementor-element-438bbae .elementor-heading-title::before {
	justify-self: end;
}
.elementor-2000 .elementor-element.elementor-element-438bbae .elementor-heading-title::after {
	justify-self: start;
}

/* "INDUSTRIES WE SERVE" becomes the same eyebrow as "OUR KEY OFFERINGS":
   19px DM Sans at 600 on a 19px line in the accent red, in place of the
   24px bold navy it had, with the same 42px x 2px red side rules 20px off
   the text.

   The saved label carries its gold "SERVE" as a span, and a span inside the
   heading would become a grid item of its own and split the label, so the
   rules are drawn on the widget around the heading instead, which keeps the
   whole heading one item in the middle column. The gold word drops its
   clipped gradient and takes the heading's red, so the eyebrow reads in one
   colour as its model does.

   The heading rule names the widget's .elementor-widget-heading as well:
   the page kit loads after this file and sets the old 24px bold navy at
   the same three classes, so without the fourth it wins on order. */
.elementor-2000 .elementor-element.elementor-element-c9a37d3 {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto minmax( 0, 1fr );
	align-items: center;
	column-gap: 20px;
}
.elementor-2000 .elementor-element.elementor-element-c9a37d3::before,
.elementor-2000 .elementor-element.elementor-element-c9a37d3::after {
	content: "";
	width: 42px;
	max-width: 100%;
	height: 2px;
	background: var( --e-global-color-accent );
}
.elementor-2000 .elementor-element.elementor-element-c9a37d3::before {
	justify-self: end;
}
.elementor-2000 .elementor-element.elementor-element-c9a37d3::after {
	justify-self: start;
}
.elementor-2000 .elementor-element.elementor-element-c9a37d3.elementor-widget-heading .elementor-heading-title {
	font-size: 19px;
	font-weight: 600;
	line-height: 19px;
	color: var( --e-global-color-accent );
}
.elementor-2000 .elementor-element.elementor-element-c9a37d3 .elementor-heading-title .lm-gold-word {
	color: inherit;
	background: none;
	-webkit-text-fill-color: currentColor;
}

/* "TRUSTED BY EMPLOYERS & RECRUITMENT PARTNERS ACROSS INDUSTRIES" takes the
   section title treatment of "Comprehensive Workforce Solutions", measured
   off that heading as rendered: DM Sans 32px at 700 on a 32px line, in white
   to read on the logo band's navy, in place of the 24px bold red it had, and
   the same underline - a
   60 x 3px bar of the 16deg gold ramp, centred, 10px under the text and 20px
   on phones, where that title's divider loses its -10px pull.

   There is no divider widget here, so the bar is the heading widget's own
   ::after. Both rules name .elementor-widget-heading: the page kit loads
   after this file and sets the old size, colour and margins at the same
   three classes, so without the fourth it would win on order.

   The logos then start 40px under the bar (30px on phones) where they sat
   20px under the text, so the title has room to read as one. */
.elementor-2000 .elementor-element.elementor-element-a501f5d.elementor-widget-heading {
	margin-bottom: 40px;
}
.elementor-2000 .elementor-element.elementor-element-a501f5d.elementor-widget-heading::after {
	content: "";
	display: block;
	width: 60px;
	height: 3px;
	margin: 10px auto 0;
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) );
}
.elementor-2000 .elementor-element.elementor-element-a501f5d.elementor-widget-heading .elementor-heading-title {
	font-size: 32px;
	font-weight: 700;
	line-height: 32px;
	color: #ffffff;
}
@media (max-width: 767px) {
	.elementor-2000 .elementor-element.elementor-element-a501f5d.elementor-widget-heading {
		margin-bottom: 30px;
	}
	.elementor-2000 .elementor-element.elementor-element-a501f5d.elementor-widget-heading::after {
		margin-top: 20px;
	}
}
@media (max-width: 1024px) {
	.elementor-2000 .elementor-element.elementor-element-a106e2e.elementor-top-section {
		margin: 40px 0 3px;
		padding: 50px 0 40px;
	}
	.elementor-2000 .lm-client-logos__item {
		height: 76px;
	}
	.elementor-2000 .lm-client-logos__img {
		max-width: 180px;
	}
}
@media (max-width: 767px) {
	.elementor-2000 .elementor-element.elementor-element-a106e2e.elementor-top-section {
		margin: 30px 0 3px;
		padding: 40px 0 30px;
	}
	.elementor-2000 .lm-client-logos__grid {
		gap: 8px;
	}
	.elementor-2000 .lm-client-logos__item {
		height: 60px;
		padding: 4px 8px;
		border-radius: 6px;
	}
	.elementor-2000 .lm-client-logos__item::after {
		border-radius: 6px;
	}
	.elementor-2000 .lm-client-logos__img {
		max-width: 130px;
	}
}

/* ---------- Workforce Solutions: Advantage card icons as gold line art ----------
   The five line icons on "The Leo Marshell Advantage" cards are now SVG
   (lm_adv_icon() in inc/template-tags.php), stroked in the Find Jobs industry
   icons' gold at the same 2.3px weight. Their figures carry lm-adv-figure, which
   takes them out of the lighten-blend treatment above: that painted the gold
   behind the JPG artwork, and behind a transparent SVG it would fill the whole
   icon square. A card whose image has been replaced in the admin does not get
   the class, so a replacement image keeps the blend as before. */
body .elementor-2000 figure.elementor-image-box-img.lm-adv-figure {
	display: inline-block;
	width: auto;
	line-height: 0;
	background: none !important;
}
body .elementor-2000 figure.elementor-image-box-img.lm-adv-figure .lm-adv-icon {
	display: block;
	width: 80px;
	height: 80px;
	margin: 0 auto;
	overflow: visible;
}

/* ---------- Workforce Solutions: trust row icons as gold line art ----------
   The six icons in the row under the hero (RECRUITMENT EXCELLENCE to TRUSTED
   PARTNERSHIPS) are SVG from lm_adv_icon(), in the same gold and the same
   2.3px line as the Find Jobs industry icons and the Advantage cards.

   The original <img> stays in the figure, hidden, and the drawing is laid over
   it. The kit sizes these boxes unevenly - 55x50 on desktop, 63x50 on tablet,
   29x28 in the phone design - and each title starts where its box ends, so
   keeping the image as the placeholder leaves every title exactly where it was
   at every width. The SVG fills the box and centres its square drawing in it:
   50px tall on desktop and tablet gives the 2.3px line; at the phone size the
   drawing keeps its proportions (about 1.3px) rather than clogging a 29px
   icon with a full-weight stroke. */
body .elementor-2000 figure.elementor-image-box-img.lm-trust-figure {
	position: relative;
	line-height: 0;
	background: none !important;
}
body .elementor-2000 figure.elementor-image-box-img.lm-trust-figure img {
	visibility: hidden;
}
body .elementor-2000 figure.elementor-image-box-img.lm-trust-figure .lm-adv-icon {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* ---------- Knowledge Hub: "Explore by Category" icons as gold line art ----------
   The six category icons (Aviation to Shipbuilding) are SVG from
   lm_adv_icon(), in the same gold and the same 2.3px line as the Find Jobs
   industry icons. Each sits over its original image, which stays in place
   hidden inside .lm-cat-icon, so the kit's 44x40 icon box and the spacing to
   the heading under it are exactly what they were at every width. The drawing
   fills that box and centres in it: 40px tall, where a 2.1-unit stroke is a bolder
   3.5px line, in the brighter gold ramp. */
.elementor-2767 .lm-cat-icon {
	position: relative;
	display: inline-block;
	line-height: 0;
	vertical-align: middle;
}
.elementor-2767 .lm-cat-icon img {
	visibility: hidden;
}
.elementor-2767 .lm-cat-icon .lm-adv-icon {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* ---------- Contact: GET IN TOUCH icons in the footer's gold ----------
   The phone, email, website and address icons are Font Awesome's filled
   glyphs, painted exactly as the footer paints its contact icons: filled from
   the #lm-gold-icon gradient the footer declares on every page, 18px, and
   pinned to the first line of their text with the footer's 3px offset - so the
   three-number phone entry and the two addresses keep their icon beside the
   first line. The kit's flat navy fill is overridden.

   Slimmer and bolder than the footer's: that gradient's near-white highlights
   suit its navy but wash out on this white panel, so these take a deeper
   gold-to-bronze ramp (#lm-cnt-gold-bold, declared in the Contact template)
   and draw at 15px rather than 18px. */
.elementor-2142 .elementor-element.elementor-element-9f76e05 {
	--e-icon-list-icon-size: 15px !important;
	--icon-vertical-align: flex-start !important;
	--icon-vertical-offset: 4px !important;
}
.elementor-2142 .elementor-element.elementor-element-9f76e05 .elementor-icon-list-icon svg {
	fill: url( #lm-cnt-gold-bold ) !important;
	width: 15px !important;
	height: 15px !important;
}

/* ---------- Contact: INDIA / SINGAPORE / GLOBAL NETWORK labels in gold ----------
   These three card eyebrows were the kit's flat --e-global-color-accent red.
   Solid gold instead, on the same white cards as the icons above, and for the
   same reason - the hero ramp's near-white highlights would wash out here, so
   this stays a flat colour rather than the gradient/background-clip treatment
   those darker headers use. #b8851c matches the flat gold read elsewhere on
   white (e.g. the licence dialog's fee amounts). !important beats kit-contact's
   own colour declaration, which loads after this stylesheet. */
.elementor-2142 .elementor-element.elementor-element-e781bb6 .elementor-heading-title,
.elementor-2142 .elementor-element.elementor-element-062ec81 .elementor-heading-title,
.elementor-2142 .elementor-element.elementor-element-17cabc4 .elementor-heading-title {
	color: #b8851c !important;
}

/* ---------- Workforce Solutions: INDUSTRIES WE SERVE icons as gold line art ----------
   The six box icons are SVG from lm_adv_icon(), in the same gold and 2.3px
   line as the Find Jobs industry icons. Each sits over its original image,
   kept hidden in .lm-ind-icon, so the kit's 70x70 icon box and the gap to the
   title are unchanged at every width. The drawing is 56px square, centred in
   that box - about the size the old artwork painted (70 x 52) - where a
   1-unit stroke is the 2.3px line.

   They are drawn at 62px on a 1.1-unit stroke now, a 2.8px line, which is
   the size the About Us stat icons take and a heavier line than the 2.3px
   these carried. The kit's box is 70px, so the larger drawing still clears
   it. They also pass lm_adv_icon()'s $white, which swaps the default ramp
   for the white-safe one. The stat icons keep the default: it is drawn for
   the navy they sit on, where its #8a5a0a stop is the stroke's shadowed
   side, and on a white card that same stop only reads as olive.

   The gold panel and the lighten blend from the earlier treatment are switched
   off for these widgets. That panel was what drew the thin vertical line beside
   each icon: it was sized to the artwork, and its edge showed against the
   white ground where the JPG's own edge was a shade off white. */
body .elementor-2000 .elementor-widget-image:has(.lm-ind-icon) {
	background-image: none !important;
}
body .elementor-2000 .lm-ind-icon {
	position: relative;
	display: inline-block;
	line-height: 0;
	vertical-align: middle;
}
body .elementor-2000 .lm-ind-icon img {
	visibility: hidden;
	mix-blend-mode: normal !important;
}
body .elementor-2000 .lm-ind-icon .lm-adv-icon {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 62px;
	height: 62px;
	overflow: visible;
}

/* ---------- Workforce Solutions hero: clean between the phone and wide layouts ----------
   (lm-ws-hero-mid-widths) The hero photo, hh.jpg, has its MANUFACTURING /
   HEALTHCARE / CONSTRUCTION labels printed into a strip along its lower right.
   On desktop the photo is scaled to the hero's height and pinned right, so that
   strip starts about 907px in from the right edge of the screen, 493px down.
   From 1500px up it sits clear of the copy. Below that it slides under the
   buttons - touching at 1440px, over EXPLORE OUR SOLUTIONS by 1266px, and at
   1025px the heading also broke into four lines and the column was too narrow
   for the two buttons, which stacked across the labels.

   1025-1499px: the heading steps down to 44px so HIGH-PERFORMING keeps one
   line, the copy column widens from 50% to 56% so the buttons stay side by
   side, and the Knowledge Hub-style 98px gap above the buttons closes to about
   22px. The buttons then end near 482px, above the label strip, at every width
   in the band. The wide layout from 1500px keeps the full measurements.

   768-1024px: the photo was anchored away from the labels for the same reason.
   The photo that carried them has since been replaced by the team shot, which
   has no baked-in text, so the anchor here is simply the one that frames the
   group; the measurements above still hold, because they are what keeps the
   heading on one line and the buttons side by side. */
@media (min-width: 1025px) and (max-width: 1499px) {
	/* The section is sized by its content over a 300px floor, so tightening the
	   copy also shortened it, 614px to 508px - and the photo, scaled to that
	   height, shrank with it and lifted the label strip back into the buttons.
	   The labelled photo is gone, but the floor stays: it is what holds this
	   band of widths to the same hero height as the wide layout above it. */
	.elementor-2000 .elementor-element.elementor-element-78e5bd9 {
		min-height: 614px !important;
	}
	.elementor-2000 .elementor-element.elementor-element-052f9eb .elementor-heading-title {
		font-size: 44px !important;
	}
	.elementor-2000 .elementor-element.elementor-element-8825be4 {
		width: 56% !important;
	}
	.elementor-2000 .elementor-element.elementor-element-e87825f {
		margin: 0 !important;
	}
}
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-2000 .elementor-element.elementor-element-78e5bd9 {
		background-position: center 35% !important;
	}
}

/* ---------- Footer: INDUSTRIES WE SERVE as 3 rows x 2 columns on phones ----------
   (lm-footer-industries-phone) The six industries are already built as three
   rows of two half-width columns - that is how tablet and desktop show them.
   Below 768px Elementor sets every column to 100%, so on phones the six came
   out as one long centred list. Holding the columns at half width keeps the
   three-by-two grid; the kit's phone styling inside each cell (icon centred
   over the name, 22px under each row) is unchanged. */
@media (max-width: 767px) {
	.elementor-15 .elementor-element.elementor-element-1159d39,
	.elementor-15 .elementor-element.elementor-element-d5970f3,
	.elementor-15 .elementor-element.elementor-element-50bde83,
	.elementor-15 .elementor-element.elementor-element-381e1b6,
	.elementor-15 .elementor-element.elementor-element-c5fb93a,
	.elementor-15 .elementor-element.elementor-element-e8552bc {
		width: 50% !important;
	}
}

/* ---------- About Us: stat row icons as gold line art ----------
   The four stat icons beside 15,000+, 18+, GLOBAL and ETHICAL were solid gold
   artwork in navy JPGs (n-1..n-4). They are now SVG from lm_adv_icon() - the
   same gold and line weight as the other line icons on navy, the Workforce
   Solutions trust row among them. Each drawing sits over its original image,
   kept hidden in .lm-stat-icon, so every icon box and the figures beside it keep
   their place at every width. The drawing fills the image's width and centres
   in its height: 75px on desktop, where a 0.75-unit stroke is a 2.3px line; the
   line scales with the box where the kit draws these smaller. */
.elementor-1632 .lm-stat-icon {
	position: relative;
	display: inline-block;
	line-height: 0;
	vertical-align: top;
}
.elementor-1632 .lm-stat-icon img {
	visibility: hidden;
}
.elementor-1632 .lm-stat-icon .lm-adv-icon {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* ---------- About Us: the stat row centred on phones ----------
   (lm-about-stats-centre) On a phone the five boxes - the 30 YEARS emblem,
   15,000+, 18+, GLOBAL, ETHICAL - stack one above the other, each its icon
   over its figure and caption. The kit sets the four figure boxes to
   text-align:start (right for their beside-the-icon desktop layout) and
   that carried down to the stack, where every column hugged the left edge
   with the navy band empty on the right. Stacked, they read as a centred
   list. The titles are width:fit-content (so each takes the whole gold
   ramp, see above), which text-align cannot move - they centre by margin.
   Tablet and desktop keep the kit's own row. */
@media (max-width: 767px) {
	.elementor-1632 .elementor-element.elementor-element-bcc03a4 .elementor-image-box-wrapper,
	.elementor-1632 .elementor-element.elementor-element-8de2241 .elementor-image-box-wrapper,
	.elementor-1632 .elementor-element.elementor-element-fdc3b8b .elementor-image-box-wrapper,
	.elementor-1632 .elementor-element.elementor-element-c553d8c .elementor-image-box-wrapper,
	.elementor-1632 .elementor-element.elementor-element-b904e92 .elementor-image-box-wrapper {
		text-align: center !important;
	}
	.elementor-1632 .elementor-element.elementor-element-8de2241 .elementor-image-box-title,
	.elementor-1632 .elementor-element.elementor-element-fdc3b8b .elementor-image-box-title,
	.elementor-1632 .elementor-element.elementor-element-c553d8c .elementor-image-box-title,
	.elementor-1632 .elementor-element.elementor-element-b904e92 .elementor-image-box-title {
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.elementor-1632 .elementor-element.elementor-element-bcc03a4 .elementor-image-box-description,
	.elementor-1632 .elementor-element.elementor-element-8de2241 .elementor-image-box-description,
	.elementor-1632 .elementor-element.elementor-element-fdc3b8b .elementor-image-box-description,
	.elementor-1632 .elementor-element.elementor-element-c553d8c .elementor-image-box-description,
	.elementor-1632 .elementor-element.elementor-element-b904e92 .elementor-image-box-description {
		text-align: center !important;
	}
}

/* ---------- Footer: INDUSTRIES WE SERVE spacing and alignment, tablet and up ----------
   (lm-footer-industries-desktop) Beside-the-name layout from 768px. Each
   icon's centre sat about 5px above its name, only 7px separated icon from
   text, and the rows were 48px apart, so the list read as cramped and a little
   uneven. The name's line box is now the icon's height and both hang from the
   top, so a one-line name centres on its icon and the two-line Hospitality &
   Facility Management puts its first line level with the icon. Icon-to-text
   goes to 12px and the rows to 60px apart. Phones keep their own layout - the
   centred three-by-two grid - untouched. */
@media (min-width: 768px) {
	.elementor-15 .elementor-element.elementor-element-6578d94 .elementor-image-box-wrapper,
	.elementor-15 .elementor-element.elementor-element-10a7a38 .elementor-image-box-wrapper,
	.elementor-15 .elementor-element.elementor-element-93bc89a .elementor-image-box-wrapper,
	.elementor-15 .elementor-element.elementor-element-480d46b .elementor-image-box-wrapper,
	.elementor-15 .elementor-element.elementor-element-9a44048 .elementor-image-box-wrapper,
	.elementor-15 .elementor-element.elementor-element-98d7b61 .elementor-image-box-wrapper {
		display: flex !important;
		align-items: flex-start !important;
	}
	.elementor-15 .elementor-element.elementor-element-6578d94 .elementor-image-box-img,
	.elementor-15 .elementor-element.elementor-element-10a7a38 .elementor-image-box-img,
	.elementor-15 .elementor-element.elementor-element-93bc89a .elementor-image-box-img,
	.elementor-15 .elementor-element.elementor-element-480d46b .elementor-image-box-img,
	.elementor-15 .elementor-element.elementor-element-9a44048 .elementor-image-box-img,
	.elementor-15 .elementor-element.elementor-element-98d7b61 .elementor-image-box-img {
		flex: 0 0 24px;
		width: 24px !important;
		margin: 0 12px 0 0 !important;
		line-height: 0;
	}
	.elementor-15 .elementor-element.elementor-element-6578d94 .elementor-image-box-img img,
	.elementor-15 .elementor-element.elementor-element-10a7a38 .elementor-image-box-img img,
	.elementor-15 .elementor-element.elementor-element-93bc89a .elementor-image-box-img img,
	.elementor-15 .elementor-element.elementor-element-480d46b .elementor-image-box-img img,
	.elementor-15 .elementor-element.elementor-element-9a44048 .elementor-image-box-img img,
	.elementor-15 .elementor-element.elementor-element-98d7b61 .elementor-image-box-img img {
		display: block;
		width: 24px;
		height: 24px;
	}
	.elementor-15 .elementor-element.elementor-element-6578d94 .elementor-image-box-content,
	.elementor-15 .elementor-element.elementor-element-10a7a38 .elementor-image-box-content,
	.elementor-15 .elementor-element.elementor-element-93bc89a .elementor-image-box-content,
	.elementor-15 .elementor-element.elementor-element-480d46b .elementor-image-box-content,
	.elementor-15 .elementor-element.elementor-element-9a44048 .elementor-image-box-content,
	.elementor-15 .elementor-element.elementor-element-98d7b61 .elementor-image-box-content {
		flex: 1 1 auto;
		margin: 0 !important;
		padding: 0 !important;
	}
	.elementor-15 .elementor-element.elementor-element-6578d94 .elementor-image-box-title,
	.elementor-15 .elementor-element.elementor-element-10a7a38 .elementor-image-box-title,
	.elementor-15 .elementor-element.elementor-element-93bc89a .elementor-image-box-title,
	.elementor-15 .elementor-element.elementor-element-480d46b .elementor-image-box-title,
	.elementor-15 .elementor-element.elementor-element-9a44048 .elementor-image-box-title,
	.elementor-15 .elementor-element.elementor-element-98d7b61 .elementor-image-box-title {
		margin: 0 !important;
		line-height: 24px !important;
	}
	.elementor-15 .elementor-element.elementor-element-1159d39 > .elementor-element-populated,
	.elementor-15 .elementor-element.elementor-element-d5970f3 > .elementor-element-populated,
	.elementor-15 .elementor-element.elementor-element-50bde83 > .elementor-element-populated,
	.elementor-15 .elementor-element.elementor-element-381e1b6 > .elementor-element-populated,
	.elementor-15 .elementor-element.elementor-element-c5fb93a > .elementor-element-populated,
	.elementor-15 .elementor-element.elementor-element-e8552bc > .elementor-element-populated {
		margin-bottom: 34px !important;
	}
}

/* ---------- Licence dialog: the whole licence in one view on desktop ----------
   (lm-lic-single-view) At 820px wide the details ran about three screens tall
   and had to be scrolled. On desktop and laptop screens the dialog now opens
   nearly full width and the cards flow into columns - four on wide screens,
   three below 1500px - each card kept whole rather than split across a column
   break, so every section is readable without scrolling. The paired cards
   (the two addresses, PGE/POE, the two helplines) join the column flow on
   their own, and spacing and type step down a little so the set fits a normal
   screen height.

   Scrolling stays available only as a fallback, so an unusually short window
   can still reach everything instead of losing it off the bottom. Tablets and
   phones keep the scrolling layout - a full licence cannot fit a phone screen.
   No height condition: at 125-150% display scaling a laptop window is under
   600px tall, and it kept the old narrow dialog. Short windows get the
   compact spacing below, and the panel still scrolls if needed. */
@media (min-width: 1200px) {
	.lm-lic-overlay {
		padding: 2vh 2vw;
	}
	.lm-lic-panel {
		width: min( 1680px, 96vw );
		max-height: 96vh;
		border-radius: 12px;
	}
	.lm-lic-head {
		padding: 14px 72px 13px 28px;
	}
	.lm-lic-eyebrow {
		margin: 0 0 4px;
		font-size: 11px;
	}
	.lm-lic-title {
		font-size: 26px;
	}
	.lm-lic-close {
		right: 20px;
		width: 36px;
		height: 36px;
		margin-top: -18px;
	}
	.lm-lic-close::before,
	.lm-lic-close::after {
		width: 14px;
		margin-left: -7px;
	}
	/* Four explicit columns instead of a balanced multi-column flow. Multicol
	   keeps each card whole and in document order, so it could only break the
	   run where a card happened to end: the columns finished at 506, 562, 570
	   and 426 - a 178px ragged edge, with two columns hanging below the
	   Recruitment Delivery Center card. No balancing could fix that, the two
	   long blocks (Agency Details and Cost of Each Service) being unsplittable.

	   As a grid of four flex columns every column is the same height, and
	   space-between puts each column's slack into the gaps between its cards
	   rather than past its last one - so all four end on one line and nothing
	   runs below that card. */
	.lm-lic-body {
		padding: 14px 18px 20px;
		display: grid;
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
		align-items: stretch;
		gap: 12px;
	}
	.lm-lic-col {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 12px;
		min-width: 0;
	}
	.lm-lic-grid {
		display: contents;
	}
	.lm-lic-sec,
	.lm-lic-card,
	.lm-lic-grid .lm-lic-card {
		display: inline-block;
		width: 100%;
		margin: 0;
		padding: 12px 14px;
		border-radius: 8px;
		-webkit-column-break-inside: avoid;
		        break-inside: avoid;
	}
	.lm-lic-body .lm-lic-h {
		margin: 0 0 8px;
		font-size: 11.5px;
		gap: 8px;
	}
	.lm-lic-body .lm-lic-h::before {
		height: 13px;
	}
	.lm-lic-body p,
	.lm-lic-dl dd,
	.lm-lic-fees li,
	.lm-lic-ticks li {
		font-size: 13px;
		line-height: 1.45;
	}
	.lm-lic-body p + p {
		margin-top: 6px;
	}
	.lm-lic-dl > div {
		grid-template-columns: 118px minmax( 0, 1fr );
		gap: 8px;
		padding: 5px 0;
	}
	.lm-lic-dl dt {
		font-size: 11.5px;
		line-height: 1.45;
	}
	.lm-lic-badge {
		margin: 2px 0 0;
		font-size: 11px;
		padding: 1px 8px;
	}
	.lm-lic-body .lm-lic-callout {
		padding: 9px 12px;
	}
	.lm-lic-fees li {
		padding: 5px 0;
		gap: 0 10px;
	}
	.lm-lic-fees small {
		font-size: 11px;
	}
	.lm-lic-ticks li {
		padding: 2px 0 2px 24px;
	}
	.lm-lic-ticks li::before {
		top: 4px;
		width: 16px;
		height: 16px;
	}
	.lm-lic-ticks li::after {
		left: 5.5px;
		top: 6.5px;
		width: 4.5px;
		height: 8px;
	}
	.lm-lic-body .lm-lic-note {
		margin-top: 8px;
		padding: 6px 10px;
		font-size: 12.5px;
	}
	.lm-lic-body .lm-lic-card__foot {
		margin-top: 8px;
		padding-top: 6px;
	}
	.lm-lic-body .lm-lic-site {
		margin: 0;
		padding: 4px 0;
		font-size: 12.5px;
	}
}
/* (lm-lic-dl-stacked) Below 1700px a column is too narrow for a label beside
   its value: the RC numbers ("B-0976/TN/PER/1000Plus/5/4659/1996") broke in the
   middle of the code across three lines. Here each label sits above its value,
   so a value gets the full card width and the codes stay on one line. */
@media (min-width: 1200px) and (max-width: 1699px) {
	.lm-lic-dl > div {
		grid-template-columns: minmax( 0, 1fr ) !important;
		gap: 0 !important;
		padding: 4px 0 !important;
	}
	.lm-lic-dl dt {
		line-height: 1.3;
	}
	.lm-lic-dl dd {
		overflow-wrap: normal;
		word-break: normal;
	}
}
/* Below 1500px three columns ran 80-200px too tall for a laptop screen, so
   these widths keep four and tighten a little further instead: narrower labels,
   slightly smaller type and less padding inside each card. */
@media (min-width: 1200px) and (max-width: 1499px) {
	.lm-lic-body {
		padding: 12px 14px 18px;
		gap: 10px;
	}
	.lm-lic-col {
		gap: 10px;
	}
	.lm-lic-sec,
	.lm-lic-card,
	.lm-lic-grid .lm-lic-card {
		margin-bottom: 0;
		padding: 10px 11px;
	}
	.lm-lic-body p,
	.lm-lic-dl dd,
	.lm-lic-fees li,
	.lm-lic-ticks li {
		font-size: 12.5px;
		line-height: 1.4;
	}
	.lm-lic-dl > div {
		grid-template-columns: 96px minmax( 0, 1fr );
		gap: 6px;
		padding: 4px 0;
	}
	.lm-lic-dl dt {
		font-size: 11px;
	}
	.lm-lic-fees li {
		padding: 4px 0;
	}
}

/* (lm-lic-short-screens) Laptop windows under about 760px tall - a 1366x768 or
   1280x800 screen once the browser's own bars are taken off - came up 20-80px
   short with the labels stacked. On those heights everything inside the cards
   packs a little closer: less padding and gap between cards, a tighter line
   height, and a slimmer heading band. Type size and content are unchanged. */
@media (min-width: 1200px) and (max-height: 760px) {
	.lm-lic-head {
		padding-top: 10px;
		padding-bottom: 9px;
	}
	.lm-lic-eyebrow {
		margin-bottom: 2px;
	}
	.lm-lic-title {
		font-size: 22px;
	}
	.lm-lic-body {
		padding-top: 10px;
		padding-bottom: 14px;
	}
	.lm-lic-col {
		gap: 8px;
	}
	.lm-lic-sec,
	.lm-lic-card,
	.lm-lic-grid .lm-lic-card {
		margin-bottom: 0 !important;
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}
	.lm-lic-body .lm-lic-h {
		margin-bottom: 5px;
	}
	.lm-lic-body p,
	.lm-lic-dl dd,
	.lm-lic-fees li,
	.lm-lic-ticks li {
		line-height: 1.32 !important;
	}
	.lm-lic-dl > div,
	.lm-lic-fees li {
		padding-top: 3px !important;
		padding-bottom: 3px !important;
	}
	.lm-lic-ticks li {
		padding-top: 1px;
		padding-bottom: 1px;
	}
	.lm-lic-body .lm-lic-callout {
		padding-top: 7px;
		padding-bottom: 7px;
	}
	.lm-lic-body .lm-lic-note {
		margin-top: 6px;
		padding-top: 4px;
		padding-bottom: 4px;
	}
	.lm-lic-body .lm-lic-card__foot {
		margin-top: 6px;
		padding-top: 4px;
	}
}

/* ---------- Knowledge Hub: "18+ Countries Served" globe ----------
   (lm-kh-18-globe) The stat's icon is now the Home page's clean gold globe
   instead of the blocky g-2.jpg - as kh-globe-18.jpg, a copy of gg-3.jpg
   with its navy square shifted to this section's navy (gg-3 is a shade
   darker and showed as a box behind the globe; a blend mode cannot reach the
   section's colour from inside Elementor's transformed widget). The two files differ in size -
   69x73 against 61x59 - and these icons draw at their own pixel size, so the
   new one would have come out larger and pushed "18+" to the right. It is held
   to the old icon's 61x59 box and contained within it, so the stat row lines
   up exactly as it did; on phones it scales inside the design's 24px box. */
.elementor-2767 .elementor-element.elementor-element-4422acf .elementor-image-box-img img {
	aspect-ratio: 61 / 59;
	height: auto !important;
	object-fit: contain;
}
@media (min-width: 768px) {
	.elementor-2767 .elementor-element.elementor-element-4422acf .elementor-image-box-img img {
		width: 61px !important;
		max-width: 61px !important;
	}
}

/* ---------- About Us: stat icons and gold figures a little smaller ----------
   (lm-about-stats-smaller) The four stats beside the 30 Years emblem - 15,000+,
   18+, GLOBAL, ETHICAL - drew their icons 75px wide and their gold figures at
   32px, which read heavy next to the labels. Icons step down to 62px and the
   figures to 26px; the line drawings pass a 0.9-unit stroke for this size in
   the template, keeping the 2.3px line.

   The icon box is set to 62px on desktop and phones. Tablets (768-1024px) are
   left to the layout's own sizing: there each stat gets about 150px, and a fixed
   62px icon beside its text pushed the row past the screen edge. */
.elementor-1632 .elementor-element.elementor-element-8de2241 .elementor-image-box-title,
.elementor-1632 .elementor-element.elementor-element-fdc3b8b .elementor-image-box-title,
.elementor-1632 .elementor-element.elementor-element-c553d8c .elementor-image-box-title,
.elementor-1632 .elementor-element.elementor-element-b904e92 .elementor-image-box-title {
	font-size: 26px !important;
}
@media (max-width: 767px), (min-width: 1025px) {
	.elementor-1632 .elementor-element.elementor-element-8de2241 .elementor-image-box-img,
	.elementor-1632 .elementor-element.elementor-element-fdc3b8b .elementor-image-box-img,
	.elementor-1632 .elementor-element.elementor-element-c553d8c .elementor-image-box-img,
	.elementor-1632 .elementor-element.elementor-element-b904e92 .elementor-image-box-img {
		flex: 0 0 62px !important;
		width: 62px !important;
	}
	.elementor-1632 .elementor-element.elementor-element-8de2241 .elementor-image-box-img img,
	.elementor-1632 .elementor-element.elementor-element-fdc3b8b .elementor-image-box-img img,
	.elementor-1632 .elementor-element.elementor-element-c553d8c .elementor-image-box-img img,
	.elementor-1632 .elementor-element.elementor-element-b904e92 .elementor-image-box-img img {
		width: 62px !important;
		max-width: 62px !important;
		height: auto !important;
	}
}

/* ---------- Home hero: "Talent" at the heading's size on phones ----------
   (lm-home-talent-mobile) "Talent" carries an inline font-size of 54px from
   the content - the desktop heading's size. On phones the heading around it
   steps down, but the inline size did not, so the gold word stood out larger
   than "Global" beside it. Below 768px it now takes the heading's own size;
   desktop and tablet keep the inline 54px. */
@media (max-width: 767px) {
	.elementor-31 .elementor-element.elementor-element-9a64215 .elementor-heading-title span {
		font-size: inherit !important;
	}
}

/* ---------- Contact: phone "Submit Requirement" sized like Home's button ----------
   (lm-contact-cta-like-home) The phone-only CTA over the Contact banner was a
   small 187x37 pill with near-black text. On phones it now matches Home's
   "Build Your Team" button: the content width less 20px (Home's side gap is 20px, this row's is 10px), 48px tall with 12px/24px
   padding, 4px corners, 15px bold caps at 0.4px tracking, and the gold
   buttons' dark gold-brown label colour. The button only exists below 768px
   and this sits in a phone-only query, so tablet and desktop cannot change. */
@media (max-width: 767px) {
	body.elementor-page-2142 .lm-contact-cta-mobile a.elementor-button.elementor-button {
		width: calc( 100% - 20px ) !important;
		max-width: calc( 100% - 20px ) !important;
		min-height: 48px !important;
		padding: 12px 24px !important;
		border-radius: 4px !important;
		box-sizing: border-box;
	}
	.elementor-2142 .lm-contact-cta-mobile .elementor-button-text {
		font-size: 15px !important;
		line-height: 24px !important;
		letter-spacing: 0.4px !important;
		color: var( --lm-btn-gold-label ) !important;
	}
}

/* ---------- Build Your Team: form submit text sized for phones ----------
   (lm-byt-submit-mobile) On phones the Workforce Request form's "SUBMIT
   WORKFORCE REQUIREMENT" button kept its desktop 18px DM Sans on one line,
   which ran past the button edge ("...REQUIREME"). A submit input cannot wrap,
   so below 768px its label takes the page's other "Submit Workforce
   Requirement" button's type - 15px bold Inter - stepping down with the screen
   below about 375px so it always fits, with the side padding trimmed a little.
   The attribute is doubled only to outrank the site-wide gold submit rule.
   Desktop and tablet keep the 18px label. */
@media (max-width: 767px) {
	body:not(.elementor-page-31) .sd_wrkf_frm input[type="submit"][type="submit"] {
		font-family: "Inter", Sans-serif !important;
		font-size: min( 15px, 4vw ) !important;
		font-weight: 700 !important;
		letter-spacing: normal !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
}

/* ---------- Phone menu: "Submit Requirement" label in black ----------
   (lm-menu-cta-black) In the fold-out menu panel the gold "Submit
   Requirement" button's label is black - at rest, on hover and while tapped.
   The shared hover rule (body li.menu-item.cst-sm:hover > a) lightened it,
   which on a touch screen showed as a pale label on the gold. Scoped to the
   dropdown panel, which the desktop horizontal menu never uses, so the
   desktop button keeps its own label colour. */
body .elementor-element-69c27bb .elementor-nav-menu--dropdown li.menu-item.cst-sm a.elementor-item,
body .elementor-element-cc33759 .elementor-nav-menu--dropdown li.menu-item.cst-sm a.elementor-item,
body .elementor-element-69c27bb .elementor-nav-menu--dropdown li.menu-item.cst-sm:hover > a.elementor-item,
body .elementor-element-cc33759 .elementor-nav-menu--dropdown li.menu-item.cst-sm:hover > a.elementor-item,
body .elementor-element-69c27bb .elementor-nav-menu--dropdown li.menu-item.cst-sm a.elementor-item:focus,
body .elementor-element-cc33759 .elementor-nav-menu--dropdown li.menu-item.cst-sm a.elementor-item:focus {
	color: #000000 !important;
	fill: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
}

/* ---------- Workforce Solutions hero buttons sized like Home's on phones ----------
   (lm-ws-hero-btns-like-home) On phones "Request Talent" and "Explore Our
   Solutions" were 182x29 pills with 10px labels. Below 768px they now match
   Home's "Build Your Team" and "Find Jobs": the full content width, 12px/24px
   padding (48px tall filled, 50px outlined), 4px corners, 15px Inter at 0.4px
   tracking, 18px apart. Labels take Home's colours - dark gold-brown on the
   filled button, pale gold on the outlined one - arrows included. Their gold
   fill and border are unchanged. Tablet and desktop are untouched. */
@media (max-width: 767px) {
	body .elementor-2000 .elementor-element.elementor-element-dcf0987 .elementor-button,
	body .elementor-2000 .elementor-element.elementor-element-f8d2b74 .elementor-button {
		display: flex !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: 48px !important;
		padding: 12px 24px !important;
		font-size: 15px !important;
		line-height: 24px !important;
		letter-spacing: 0.4px !important;
		border-radius: 4px !important;
		box-sizing: border-box;
	}
	body .elementor-2000 .elementor-element.elementor-element-f8d2b74 {
		margin-top: 18px !important;
	}
	body .elementor-2000 .elementor-element.elementor-element-dcf0987 .elementor-button-text {
		font-weight: 700 !important;
	}
	body .elementor-2000 .elementor-element.elementor-element-f8d2b74 .elementor-button-text {
		font-weight: 600 !important;
	}
	body .elementor-2000 .elementor-element.elementor-element-dcf0987 .elementor-button-text,
	body .elementor-2000 .elementor-element.elementor-element-dcf0987 .elementor-button-icon svg {
		color: #6a4a09 !important;
		fill: #6a4a09 !important;
	}
	body .elementor-2000 .elementor-element.elementor-element-f8d2b74 .elementor-button-text,
	body .elementor-2000 .elementor-element.elementor-element-f8d2b74 .elementor-button-icon svg {
		color: #e2cc9c !important;
		fill: #e2cc9c !important;
	}
	body .elementor-2000 .elementor-element.elementor-element-dcf0987 .elementor-button-icon svg,
	body .elementor-2000 .elementor-element.elementor-element-f8d2b74 .elementor-button-icon svg {
		width: 15px !important;
		height: 15px !important;
	}
}

/* ---------- Workforce Solutions: step badges zoom on hover ----------
   (lm-ws-badge-zoom) Each "Comprehensive Workforce Solutions" card is one big
   link - an invisible full-card overlay (offer-card-link, z-index 5) sits over
   the icon too - so the badge cannot be hovered on its own. The zoom follows
   the card instead: pointing anywhere on a card, its badge scales up 1.12x
   over 0.3s, like a button reacting, and settles back when the pointer leaves;
   clicks still go to the card's page. Each card column names its own badge,
   so only the hovered card's icon moves. The badge is three layers - the
   image, the gold ring (::before) and the gold glyph (::after) - scaled
   together; the two pseudo-elements keep their -50% centring translate. At
   1.12x the 70px badge grows about 4px a side, which stays inside the card. */
body .elementor-element-7cff0a4 img,
body .elementor-element-507e6e6 img,
body .elementor-element-200cc89 img,
body .elementor-element-39c9d13 img,
body .elementor-element-2e725b6 img {
	transition: transform 0.3s ease;
}
body .elementor-element-7cff0a4::before,
body .elementor-element-7cff0a4::after,
body .elementor-element-507e6e6::before,
body .elementor-element-507e6e6::after,
body .elementor-element-200cc89::before,
body .elementor-element-200cc89::after,
body .elementor-element-39c9d13::before,
body .elementor-element-39c9d13::after,
body .elementor-element-2e725b6::before,
body .elementor-element-2e725b6::after {
	transition: transform 0.3s ease;
}
body .elementor-element-c7945d2:hover .elementor-element-7cff0a4 img,
body .elementor-element-cd193ce:hover .elementor-element-507e6e6 img,
body .elementor-element-40a364e:hover .elementor-element-200cc89 img,
body .elementor-element-6302e52:hover .elementor-element-39c9d13 img,
body .elementor-element-7f0155a:hover .elementor-element-2e725b6 img {
	transform: scale( 1.12 );
}
body .elementor-element-c7945d2:hover .elementor-element-7cff0a4::before,
body .elementor-element-c7945d2:hover .elementor-element-7cff0a4::after,
body .elementor-element-cd193ce:hover .elementor-element-507e6e6::before,
body .elementor-element-cd193ce:hover .elementor-element-507e6e6::after,
body .elementor-element-40a364e:hover .elementor-element-200cc89::before,
body .elementor-element-40a364e:hover .elementor-element-200cc89::after,
body .elementor-element-6302e52:hover .elementor-element-39c9d13::before,
body .elementor-element-6302e52:hover .elementor-element-39c9d13::after,
body .elementor-element-7f0155a:hover .elementor-element-2e725b6::before,
body .elementor-element-7f0155a:hover .elementor-element-2e725b6::after {
	transform: translateX( -50% ) scale( 1.12 );
}

/* ---------- Article grid pagination (Knowledge Hub - Most Read) ----------
   Sized to match the Find Jobs listing's pagination (.jobs-page in
   template-parts/pages/find-jobs/section-2.php) - min-width 38px, 9px/12px
   padding, 7px corners, 13.5px 600-weight type - instead of its own larger
   56px buttons at 17px. Previous/Next keep no width of their own, the same
   as .jobs-page: they simply run wider than the floor because their label is
   longer, so the row does not carry a second, bigger size rule.

   Previous and Next are always rendered, so every state is styled here:
   available (a link), unavailable (a span marked aria-disabled), hovered,
   pressed and keyboard-focused. State rules carry the .lm-loop-pagination
   prefix so they outrank the kit's generic link styles rather than tying
   with them. */
.lm-loop-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 28px 0 8px;
}

.lm-loop-pagination .lm-loop-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	padding: 9px 12px;
	box-sizing: border-box;
	background: #ffffff;
	border: 1px solid #e7e9ee;
	border-radius: 7px;
	color: #011735;
	font-family: "DM Sans", sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	opacity: 1;
	box-shadow: 0 1px 2px rgba( 1, 23, 53, 0.04 );
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

/* Available: a link that looks pressable. */
.lm-loop-pagination a.lm-loop-page:hover {
	background: #011735;
	border-color: #011735;
	color: #ffffff;
	box-shadow: 0 6px 16px rgba( 1, 23, 53, 0.18 );
}

.lm-loop-pagination a.lm-loop-page:active {
	transform: translateY( 1px );
	box-shadow: 0 2px 6px rgba( 1, 23, 53, 0.16 );
}

/* Keyboard focus only - a mouse click no longer leaves a lingering outline. */
.lm-loop-pagination a.lm-loop-page:focus {
	outline: none;
}

.lm-loop-pagination a.lm-loop-page:focus-visible {
	border-color: #011735;
	outline: 2px solid #dfa33e;
	outline-offset: 3px;
}

/* The page being shown. */
.lm-loop-pagination .lm-loop-page--current,
.lm-loop-pagination .lm-loop-page--current:hover {
	background: #011735;
	border-color: #011735;
	color: #ffffff;
	box-shadow: none;
	cursor: default;
}

/* Unavailable: same shape, type and spacing, clearly inert. Kept at full
   opacity with a quieter fill and text, rather than a faded copy that reads
   as broken. */
.lm-loop-pagination .lm-loop-page--disabled,
.lm-loop-pagination .lm-loop-page--disabled:hover {
	background: #f4f6f9;
	border-color: #e7e9ee;
	color: #8792a3;
	box-shadow: none;
	cursor: not-allowed;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.lm-loop-pagination .lm-loop-page { transition: none; }
	.lm-loop-pagination a.lm-loop-page:active { transform: none; }
}

/* No separate phone size: the base rule above is already .jobs-page's small
   38px/9px-12px control, which needed no phone-only reduction on Find Jobs
   either, and a 340px-wide row of these fits a 360px screen without one. */

/* ---------- All Posts sidebar pager (post opened from the Knowledge Hub) ----------
   The Most Read pager's buttons, Previous and Next only, closer to the list. */
.lm-loop-pagination.lm-loop-pagination--sidebar {
	margin: 24px 0 0;
}

/* Previous/Next land on the list; keep its ALL POSTS heading in view. */
#lm-all-posts {
	scroll-margin-top: 110px;
}

/* ---------- Home: partner logo carousel tiles ----------
   (lm-home-partner-tiles) The carousel used 218x113 JPG logos, which looked
   soft on scaled screens. It now shows the cleaned high-resolution logos, whose
   shapes differ (ST Engineering is nearly square, Kramski very wide). Every
   slide keeps the old 218:113 tile and the logo is contained inside it on
   white, as on the Workforce Solutions grid, so the row height stays even -
   also for logos an admin adds later under Home - Partner Logos. */
.elementor-31 .elementor-element.elementor-element-2c83783 .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 218 / 113;
	object-fit: contain;
	background: #ffffff;
}

/* ---------- Knowledge Hub: hero search field ----------
   (lm-kh-search-padding) The placeholder sat against the left edge. Elementor
   gives the input its inline padding only through the no-icon-label class its
   widget JS adds at runtime, and that JS is not part of this build, so the
   markup now carries the class and the gap comes from the widget's own
   variable - 24px, as in the approved design - rather than an override. The
   right side keeps the 70px that clears the submit button. */
.elementor-2767 .knhub_search.elementor-widget-search {
	--e-search-input-padding-inline-start: 24px;
}
/* ---------- Contact: breathing room between GET IN TOUCH entries ----------
   The kit spaced the list items 8px apart (4px below each item, 4px above the
   next), which is barely wider than the line spacing inside the two address
   entries and the three-line phone entry - so the five blocks read as one
   run of text. Doubled to 20px between blocks: comfortably more than the gap
   between lines within a block, so each contact detail reads as its own
   section, at every width. */
body .elementor-2142 .elementor-element.elementor-element-9f76e05 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child) {
	padding-block-end: 8px;
}
body .elementor-2142 .elementor-element.elementor-element-9f76e05 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child) {
	margin-block-start: 8px;
}

/* ---------- Contact: even gaps between the three Global Presence cards ----------
   (lm-cnt-presence-gaps) India sat flush against Singapore while Singapore and
   Global Network had a 4px gap between them. The kit does give the first card a
   margin-right and the third a margin-left, but each card is 100% of its own
   column, so those margins only shift the card sideways instead of insetting it:
   the third card slid right and opened its gap, while the first card's margin
   simply overhung its column and disappeared behind the second. Measured, the
   first pair was 0px apart and the second 4px.

   Insetting each card 2px on every side that faces a neighbour gives the same
   4px between both pairs, and keeps the three cards the same width as each
   other - shifting them would only move the problem along the row. The width
   calc is what makes the margin bite rather than overhang.

   Only from 768px up, where the three sit side by side; on phones they stack
   full width and need no gutter. */
@media (min-width: 768px) {
	.elementor-2142 .elementor-element.elementor-element-32bb5c7 > .elementor-element-populated {
		margin-right: 2px !important;
		margin-left: 0 !important;
		width: calc( 100% - 2px );
	}
	.elementor-2142 .elementor-element.elementor-element-7092c3e > .elementor-element-populated {
		margin-left: 2px !important;
		margin-right: 2px !important;
		width: calc( 100% - 4px );
	}
	.elementor-2142 .elementor-element.elementor-element-7c9917e > .elementor-element-populated {
		margin-left: 2px !important;
		margin-right: 0 !important;
		width: calc( 100% - 2px );
	}
}

/* ---------- Contact: the banner heading in white ----------
   (lm-cnt-title-white) "CONTACT US" was the kit's dark navy #011735, which it
   could carry while the banner still had its white wash behind the text. With
   that wash taken out of the photo the heading sits on open sky and water, so
   it takes the white that "Find Your Next Career Opportunity" uses on Find
   Jobs - measured off that heading as rgb( 255, 255, 255 ).

   Not scoped to a breakpoint: the heading sits over the same photo at every
   width. The mobile block earlier in this file only sets its size and margin,
   so nothing there competes. The two lines below it keep their navy. */
.elementor-2142 .elementor-element.elementor-element-b112fe0 .elementor-heading-title {
	color: #ffffff !important;
}

/* ---------- Contact: a larger banner sub-heading ----------
   (lm-cnt-sub-size) "Your Gateway to / Global Talent Solutions" ran at the
   kit's 20px, which sat small under the 44px title - more so now that it is
   gold rather than navy, since the ramp's pale highlights need a little more
   letter to read against the sky. 28px carries it clearly without starting to
   compete with the 44px title above it.

   From 768px up only. Phones have their own 17px for this heading earlier in
   this file, sized to the narrow column, and it keeps it. */
@media (min-width: 768px) {
	.elementor-2142 .elementor-element.elementor-element-8ab3ea1 .elementor-heading-title {
		font-size: 28px !important;
	}
}

/* ---------- Contact: the banner without its two rules ----------
   (lm-cnt-no-dividers) The hero carried two dividers - the red one under
   "CONTACT US" (aa2b12a) and the gold one under the sub-heading (2cf9d4f).
   Both are dropped, so the three lines of copy read as one block.

   display: none rather than a transparent colour, so neither keeps reserving
   its own height and leaving a gap where a rule used to be. Not scoped to a
   breakpoint: they go at every width. The phone rules that set their width and
   thickness earlier in this file simply have nothing left to style. */
.elementor-2142 .elementor-element.elementor-element-aa2b12a,
.elementor-2142 .elementor-element.elementor-element-2cf9d4f {
	display: none !important;
}

/* ---------- Contact: the banner tagline in the Knowledge Hub grey-white ----------
   (lm-cnt-tagline-colour) "Rooted in India. Connected to Singapore. Serving
   Employers Across 18 Countries." was the kit's near-black #000735, which it
   could carry while the banner still had its white wash behind the copy. It
   now takes the colour the Knowledge Hub hero gives its own sub-line
   ("Industry trends, career guidance, ..."), measured off that paragraph as
   rgb( 231, 231, 231 ) - a softened white rather than a pure one.

   No breakpoint: the tagline sits over the same photo at every width. The
   phone block earlier in this file sets only its width and size, and the rule
   at the top of this file only its widget spacing, so neither competes. */
.elementor-2142 .elementor-element.elementor-element-d67bfa0 .elementor-heading-title {
	color: #e7e7e7 !important;
}

/* ---------- Contact: the tagline's second sentence in silver ----------
   (lm-cnt-tagline-sub) The tagline is two statements: where the agency is,
   then who it serves. Run at one weight they read as one flat block, so the
   second drops to the silver the Home and Find Jobs heroes already give
   their own supporting line (#b6b6b6), under the softened white above it.

   The span is part of the field's saved value, not the template alone, so
   it survives an edit in the admin only if the editor keeps it; the colour
   simply does not apply if the span is dropped, and the line goes back to
   the #e7e7e7 above. */
.elementor-2142 .elementor-element.elementor-element-d67bfa0 .elementor-heading-title .lm-tagline-sub {
	color: #b6b6b6;
}

/* ---------- Contact: a larger banner tagline ----------
   (lm-cnt-tagline-size) The tagline ran at 16px, which sat small under the
   28px sub-heading, more so now that it is a soft grey-white on the photo.
   19px lifts it without reaching the sub-heading.

   The kit caps this widget at 360px wide, which is what holds the break after
   "Singapore." - at 19px it needs to widen, but only far enough to hold that
   first sentence: 460px was wide enough to pull "Serving" up onto line one,
   which moved the break. 430px sits between the two widths, measured. From 768px up only; phones keep
   their own 14px and 290px cap, set earlier in this file. */
@media (min-width: 768px) {
	.elementor-2142 .elementor-element.elementor-element-d67bfa0 {
		width: 100% !important;
		max-width: 430px !important;
	}
	.elementor-2142 .elementor-element.elementor-element-d67bfa0 .elementor-heading-title {
		font-size: 19px !important;
	}
}

/* ---------- Contact: the banner tagline in a silver gradient ----------
   (lm-cnt-tagline-silver) Both sentences take one metallic silver ramp,
   painted through the text with background-clip, in place of the two flat
   greys above - those stay as the fallback where clipping is unsupported.
   The span is made transparent too, or its own #b6b6b6 would cover the
   ramp on the second sentence.

   The photo behind is a pale sky, and silver on it all but disappears, so
   a tight dark drop-shadow holds the letter edges and a wider soft one lifts
   the words off the blue. filter rather than text-shadow: a text-shadow is
   drawn above clipped text and would muddy the ramp. */
.elementor-2142 .elementor-element.elementor-element-d67bfa0 .elementor-heading-title {
	/* The silver ramp read too close to the pale sky behind it (see
	   Image #221) - solid white, with a stronger shadow to hold its edges
	   against the brightest cloud, reads as far more colour on the photo. */
	background: none !important;
	-webkit-background-clip: initial !important;
	        background-clip: initial !important;
	-webkit-text-fill-color: #ffffff !important;
	color: #ffffff !important;
	filter: drop-shadow( 0 1px 2px rgba( 1, 17, 40, 0.95 ) ) drop-shadow( 0 0 10px rgba( 1, 17, 40, 0.75 ) );
}
.elementor-2142 .elementor-element.elementor-element-d67bfa0 .elementor-heading-title .lm-tagline-sub {
	-webkit-text-fill-color: #ffffff;
	color: #ffffff;
}

/* ---------- Knowledge Hub: the popular-search chips as buttons ----------
   (lm-kh-chip-links) Each chip now carries its own link, set per page in
   wp-admin ("List 1 - Url" and so on). The pill itself is drawn on the <li>
   in custom-3424.css - 1px #ffffff52, 5px 10px, 5px radius - so the anchor
   goes inside it and the chip looks exactly as it did.

   The anchor takes the li's own padding back as its own, through matching
   negative margins, so the whole pill is clickable rather than just the
   words. Colour is inherited from the kit's .elementor-icon-list-text rule
   and the underline suppressed, and the hover lifts the border and lays a
   faint wash behind the label, which is what tells a visitor these are
   buttons now. A chip with no link saved stays a plain span and gets none of
   this. */
.srh_bt_tags li.elementor-icon-list-item > a.lm-chip-link {
	/* The li is a flex container, so a block anchor here is sized shrink-to-fit
	   and came out narrower than its own label - "Aviation" broke across two
	   lines. As a stretching flex item with nowrap it takes the full pill, and
	   the negative margins carry its painted area back out over the li's own
	   padding so the whole chip is clickable, not just the words. */
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	align-self: stretch;
	white-space: nowrap;
	margin: -5px -10px;
	padding: 5px 10px;
	border-radius: 5px;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.3s, box-shadow 0.3s;
}
.srh_bt_tags li.elementor-icon-list-item:has( > a.lm-chip-link ):hover {
	border-color: #ffffffa6;
}
.srh_bt_tags li.elementor-icon-list-item > a.lm-chip-link:hover {
	background: rgba( 255, 255, 255, 0.10 );
}

/* ---------- Forms: the required mark ----------
   (lm-req-mark) The "*" on a required field is #ec3237 while its label keeps
   the placeholder's own colour. A placeholder cannot be part-coloured, so the
   label is drawn over the field by initRequiredMarks(), which copies that
   field's text metrics onto it - the two forms differ in size, inset and
   placeholder colour. Only position and the mark's colour live here. The label
   never takes a click: the field underneath stays reachable, dropdown
   included. */
.lm-req {
	color: #ec3237;
}

.lm-req-field {
	position: relative;
	display: block;
}

.lm-req-ph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	/* The label and the mark are flex items, and flex drops the white space
	   between them, so the space the design has before the "*" is set here -
	   in em, to stay a space's width at either form's text size. */
	column-gap: 0.27em;
	pointer-events: none;
}

.lm-req-ph[hidden] {
	display: none;
}

/* ---------- Knowledge Hub: a narrower hero search bar ----------
   (lm-kh-search-width) The field took its whole column - 687px at 1533px wide -
   which ran its right end up against the diagonal where the hero photo changes
   scene. Capping it pulls that edge back and leaves the bar comfortably clear.

   A cap rather than a margin: the bar is left-aligned in its column, so the
   width comes off the right, which is the side that was crowded. The cap only
   bites where the column is wider than it - narrower screens keep the full
   column width and are unchanged - and the Popular Searches chips below sit in
   the same column but are their own widget, so they keep their own width.

   The submit button is positioned against the right edge of the form, so it
   follows the new width by itself. */
@media (min-width: 768px) {
	.elementor-2767 .knhub_search.elementor-widget-search {
		max-width: 560px;
	}
}

/* ---------- Find Jobs: mirror the Attach Resume form's phone icon ----------
   (lm-fj-phone-mirror) The handset tilted with its earpiece top-right and
   mouthpiece bottom-left; asked to run the other way, earpiece top-left. A
   horizontal flip on the glyph does it without redrawing the path.

   Scoped to its own class, added only on this one svg in the template - the
   Full Name and Email icons beside it, and every other phone glyph on the
   site (footer, Contact, header), keep their own markup untouched. */
.resume-field__icon--phone {
	transform: scaleX( -1 );
}

/* ---------- Workforce Solutions: the trust row a little larger on phones ----------
   (lm-ws-trust-phone-size) RECRUITMENT EXCELLENCE through TRUSTED
   PARTNERSHIPS draws its icon at 29x28 and its title at 11.5px below 768px -
   noticeably smaller than the 55-66px icons and 14px titles the same row
   uses from tablet up. Both step up a little: the icon to 36x35, the title
   to 13px.

   !important and the widget's own id, inside this max-width:767px block,
   because the sizes being overridden are not fixed rules in this codebase -
   they come out of Elementor's own responsive icon-size handling for this
   widget, wherever that is computed. Scoped to these six ids and to phones
   only, so tablet and desktop (and every other image-box on the site) are
   untouched. */
@media (max-width: 767px) {
	.elementor-2000 .elementor-element.elementor-element-5bf4901 figure.elementor-image-box-img.lm-trust-figure,
	.elementor-2000 .elementor-element.elementor-element-017e048 figure.elementor-image-box-img.lm-trust-figure,
	.elementor-2000 .elementor-element.elementor-element-480970f figure.elementor-image-box-img.lm-trust-figure,
	.elementor-2000 .elementor-element.elementor-element-d03c47d figure.elementor-image-box-img.lm-trust-figure,
	.elementor-2000 .elementor-element.elementor-element-d2d38aa figure.elementor-image-box-img.lm-trust-figure,
	.elementor-2000 .elementor-element.elementor-element-fab8f1f figure.elementor-image-box-img.lm-trust-figure {
		/* flex-basis, not width, is what actually sizes this figure - it is a
		   flex item, and the kit's own rule for this row sets flex: 0 0 29px,
		   which fixes the main-axis size regardless of width. Restating flex
		   here is what makes the new size take. */
		flex: 0 0 36px !important;
		width: 36px !important;
		height: 35px !important;
	}
	.elementor-2000 .elementor-element.elementor-element-5bf4901 .elementor-image-box-title,
	.elementor-2000 .elementor-element.elementor-element-017e048 .elementor-image-box-title,
	.elementor-2000 .elementor-element.elementor-element-480970f .elementor-image-box-title,
	.elementor-2000 .elementor-element.elementor-element-d03c47d .elementor-image-box-title,
	.elementor-2000 .elementor-element.elementor-element-d2d38aa .elementor-image-box-title,
	.elementor-2000 .elementor-element.elementor-element-fab8f1f .elementor-image-box-title {
		font-size: 13px !important;
	}
}

/* ---------- Build Your Team: the hero stat block a little larger on phones ----------
   (lm-byt-stats-phone-size) The "30 Years" shield and the three stat icons
   (people, globe, handshake) are a flat max-width - 100px and 55px - at every
   screen size, and the two lines of copy beside each stat are the kit's own
   17px/13px phone sizes (22px/15px from tablet up). All step up a little on
   phones only:

   - shield: 100px -> 120px
   - stat icons: 55px -> 68px
   - the counted figure (15,000+ / 18+ / Global): 17px -> 19px
   - its caption: 13px -> 15px

   Scoped to max-width:767px and to these ids, so tablet and desktop, and
   every other image or heading on the site, are untouched. */
@media (max-width: 767px) {
	.elementor-2272 .elementor-element.elementor-element-979a166 img {
		max-width: 120px !important;
	}
	.elementor-2272 .elementor-element.elementor-element-0ef75d0 img,
	.elementor-2272 .elementor-element.elementor-element-177359a img,
	.elementor-2272 .elementor-element.elementor-element-2d83b89 img {
		max-width: 68px !important;
	}
	.elementor-2272 .elementor-element.elementor-element-09aaaac .elementor-heading-title,
	.elementor-2272 .elementor-element.elementor-element-caebc10 .elementor-heading-title,
	.elementor-2272 .elementor-element.elementor-element-01c94f5 .elementor-heading-title {
		font-size: 19px !important;
	}
	.elementor-2272 .elementor-element.elementor-element-c496e87 .elementor-heading-title,
	.elementor-2272 .elementor-element.elementor-element-c9e141f .elementor-heading-title,
	.elementor-2272 .elementor-element.elementor-element-7e71c8f .elementor-heading-title {
		font-size: 15px !important;
	}
}

/* ==========================================================================
   Narrow phones (under 360px)
   A sweep of every page at 320, 360, 768, 1024 and 1440 found the site
   clean at every width except 320 - a 4-inch phone - where two places ran
   past the screen and gave the page a sideways scroll. Both are held here
   rather than in the 767px block, so the layouts signed off at 360 and up
   are untouched.
   ========================================================================== */
@media (max-width: 359px) {

	/* (lm-licence-cta-narrow) The licence button is one unbreakable line -
	   "Click here to view license details" is 238px at 15px, and 34px of
	   padding either side takes the button to 306px inside a 245px column.
	   white-space: nowrap meant it could not give, so it simply hung 16px
	   off the edge. Allowed to wrap, and with the padding brought in, it
	   sets over two lines inside the column. */
	body section.lm-licence-cta .elementor-button {
		white-space: normal !important;
		max-width: 100% !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
		line-height: 1.35 !important;
	}

	/* (lm-kh-band-narrow) The Knowledge Hub band is a two-column grid on
	   phones. Its tracks were 1fr, which is minmax(auto, 1fr): the auto
	   floor is the content min-width, and the right-hand pair could not go
	   under 193.5px - a 32px icon that cannot shrink, plus captions that do
	   not break mid-word. The track held the row open and the band ran 33px
	   past the screen.
	   minmax(0, 1fr) lets the tracks take the width they are given. That
	   alone would only move the problem into the cell, so the icon and type
	   step back to the sizes they held before they were enlarged - which is
	   what fits a 320px screen - and a long word may break rather than
	   push out. Everything from 360px up keeps the larger setting. */
	.elementor-2767 .elementor-element.elementor-element-d94d329 > .elementor-container {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ) !important;
	}
	.elementor-2767 .elementor-element.elementor-element-d94d329 .elementor-image-box-img {
		flex: 0 0 24px !important;
		width: 24px !important;
	}
	.elementor-2767 .elementor-element.elementor-element-d94d329 .elementor-image-box-wrapper {
		gap: 9px !important;
	}
	.elementor-2767 .elementor-element.elementor-element-d94d329 .elementor-image-box-title {
		font-size: 17px !important;
	}
	.elementor-2767 .elementor-element.elementor-element-d94d329 .elementor-image-box-description {
		font-size: 12px !important;
	}
	.elementor-2767 .elementor-element.elementor-element-d94d329 .elementor-image-box-title,
	.elementor-2767 .elementor-element.elementor-element-d94d329 .elementor-image-box-description {
		overflow-wrap: break-word;
	}

}

/* ---------- Contact: the header off the photo ----------
   (lm-cnt-header-inflow) Contact takes the overlaid header near the top of
   this file - the header is lifted out of the flow so the hero photo runs
   up behind it. That suits a photo with sky where the nav sits. This one
   has not got it: the Pamban bridge towers stand at the left of the frame
   and the Merlion at the right, both at the very top, so the nav cut
   through the towers and took the lion's head with it.

   The photo cannot simply be dropped instead. It is 1920x481 and the hero
   shows rows 47-434 of it at cover, so there is only about 39px of sky
   above the towers to give - the nav is 120px. Nor can the strip behind
   the nav be filled with one flat colour: the sky runs #d0d9ea at the left
   edge to #1f98f1 at the right, and a single tone would read as a band
   pasted over the picture.

   So the header goes back into the flow for this page alone and the hero
   starts underneath it, whole. The header keeps the white it already has
   behind the logo plate - its links are the navy #011735 and Home is red,
   not the white labels the overlay pages use, so white reads correctly and
   matches About, the other page that carries no overlay.

   Workforce Solutions shares the rule above and is deliberately left on it:
   its hero is sky across the whole top. */
body.elementor-page-2142 .elementor-location-header {
	position: static;
}
body.elementor-page-2142 .only_hm_stl {
	background: #ffffff !important;
}

/* Workforce Solutions "Our Key Offerings": one image height across the five
   cards. Three of the pictures are 3:2 photographs and two are 16:9 designed
   posters, so each card was as tall as its own image and the numbers, titles
   and bullet lists drifted out of line along the row. Every image now fills a
   16:9 box and is cropped to it, centred. The ratio is the posters' because
   they carry text to their edges; the photographs give up a sliver top and
   bottom instead, where nothing sits. The icon badge overlaps the image by
   -55px measured from the image bottom, so it follows the new height on its
   own. Scoped to the shared image-widget class, so a sixth card would get it
   too. */
.elementor-2000 .elementor-widget-image.asp_rat_worr_crd img {
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
	object-position: center;
}

/* ---------- Contact: no Submit Requirement pill on phones ----------
   (lm-cnt-cta-mobile-off) The phone-only gold pill that closed the hero
   (.lm-contact-cta-mobile, template-parts/pages/contact/section-1.php) is
   taken out of the phone view. It is hidden rather than deleted, so its
   text and link fields stay in the admin and removing this rule brings it
   back as it was. Tablet and desktop never showed it. */
.elementor-2142 .lm-contact-cta-mobile {
	display: none !important;
}

/* ---------- Knowledge Hub: the hero photo on tablets ----------
   (lm-kh-collage-tablet) The kit lays a solid navy overlay over the hero's
   background photo from 768px to 1024px, and the phone tiles stop at 767px,
   so tablets saw no picture in the hero at all. The collage side of the same
   photo now sits under the search chips as an image of its own - centred,
   capped so it does not tower over the copy on a 1024px landscape tablet,
   and rounded like the phone tiles. */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-2767 .lm-kh-collage-tablet {
		width: 100% !important;
		max-width: 620px !important;
		margin: 28px auto 0 auto !important;
		line-height: 0;
	}
	.elementor-2767 .lm-kh-collage-tablet img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: 12px;
		border: 1px solid rgba( 255, 255, 255, 0.75 );
	}
}

/* ---------- Build Your Team: an editable hero photo, on desktop ----------
   (lm-byt-hero-editable) kit-build-your-team.css already carries a
   ≥1025px rule of its own for this element - two gradients over the photo,
   in one three-layer background-image - which is where the design's dark
   scrim actually comes from (the .elementor-background-overlay div is a
   red herring: the kit leaves that at opacity:0 here). Reading
   --lm-hero-background-desktop lets the "Hero Background Desktop" field in
   this page's Page Content box (see lm_bg_slot() / lm_bg_style_vars() in
   inc/fields/markup.php) change the photo, for tablet and desktop alike -
   the property is set inline on the section only when an editor has picked
   one, and the fallback here is the approved photo, so an untouched page's
   CSS is unchanged.

   This rule reproduces the kit's own three-layer background-image rather
   than just replacing it outright with the photo alone, which is what an
   earlier pass here did - and in doing so dropped the two gradients
   entirely, which is why a swapped-in photo came out washed pale next to
   the design instead of holding the same contrast. Same gradients, same
   position/size/repeat, right down to the photo's own "center 30%" crop;
   only the url() on the last layer is now the variable. */
@media (min-width: 1025px) {
	.elementor-2272 .elementor-element.elementor-element-59cf348:not(.elementor-motion-effects-element-type-background) {
		background-color: #040a1a !important;
		background-image:
			linear-gradient( 90deg, rgba( 4, 10, 26, 0.90 ) 0%, rgba( 4, 10, 26, 0.84 ) 26%, rgba( 4, 10, 26, 0.62 ) 48%, rgba( 4, 10, 26, 0.32 ) 62%, rgba( 4, 10, 26, 0.26 ) 100% ),
			linear-gradient( 180deg, rgba( 4, 10, 26, 0.40 ) 0%, rgba( 4, 10, 26, 0.12 ) 36%, rgba( 4, 10, 26, 0.30 ) 66%, rgba( 4, 10, 26, 0.60 ) 88%, rgba( 4, 10, 26, 0.74 ) 100% ),
			var( --lm-hero-background-desktop, url("/wp-content/uploads/2026/09/build-your-team-hero.jpg") ) !important;
		background-position: left top, left top, center 30% !important;
		background-size: cover, cover, cover !important;
		background-repeat: no-repeat, no-repeat, no-repeat !important;
	}
}

/* ---------- Build Your Team: the hero photo on tablets ----------
   (lm-byt-hero-tablet) Between 768px and 1024px the kit covers the hero's
   team photo with a solid navy overlay, so tablets - alone of the three
   views - showed no photo. They take the phone treatment instead, sized for
   the wider screen: the photo spans the section's width just under the
   header, under the same top-to-bottom scrim, which closes to solid navy at
   the photo's lower edge so the form below keeps its flat panel. The photo
   is 996 x 775, so at full width it stands 77.8vw tall; the scrim covers
   that plus the 100px offset, rounded up so it always closes over the
   photo's bottom edge. */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-2272 .elementor-element.elementor-element-59cf348:not(.elementor-motion-effects-element-type-background) {
		background-color: #060b1b !important;
		background-image:
			linear-gradient( 180deg, rgba( 6, 11, 27, 0.74 ) 0%, rgba( 6, 11, 27, 0.66 ) 40%, rgba( 6, 11, 27, 0.82 ) 72%, rgba( 6, 11, 27, 1 ) 100% ),
			var( --lm-hero-background-desktop, url("/wp-content/uploads/2026/09/build-your-team-hero.jpg") ) !important;
		background-size: 100% calc( 79vw + 100px ), 100% auto !important;
		background-position: left top, center 100px !important;
		background-repeat: no-repeat, no-repeat !important;
	}
	.elementor-2272 .elementor-element.elementor-element-59cf348 > .elementor-background-overlay {
		opacity: 0 !important;
	}
}

/* ---------- Contact hero: the whole photo, on tablet and desktop ----------
   cnt-bg-clear.jpg is 1672x941 (1.777:1). Full height (56.28vw) showed all
   of it, but the photo's own bottom ~12% is nothing but plain open water -
   no pier, no landmark, no copy over it - and at that full height the hero
   read as oversized, mostly empty water under the group of buildings. The
   box is cover, anchored to the photo's top instead of the kit's own
   centred position, and trimmed to 88% of the full-photo height: the crop
   comes only off that empty strip at the bottom, and the sun, the temple,
   the bridge, the skyline and the Merlion - everything down to the
   waterline - still show in full. */
@media (min-width: 768px) {
	.elementor-2142 .elementor-element.elementor-element-957f95c {
		/* 0.88 * 941/1672. A plain vw height rather than the aspect-ratio
		   property: this section is a flex item (the page stacks its
		   top-level sections in a flex column), and a flex item's auto
		   width is itself allowed to be resolved FROM aspect-ratio +
		   height - which, with the 323px floor below, was making the
		   section wider than the viewport at narrower tablet widths rather
		   than taller. A plain height has no such feedback into width. */
		height: 49.5vw !important;
		/* The kit's own 323px floor, kept as a safety net for very narrow
		   tablet widths, though 49.5vw already clears it above ~653px
		   wide, well below this rule's own 768px floor. */
		min-height: 323px !important;
		max-height: none !important;
	}
	.elementor-2142 .elementor-element.elementor-element-957f95c:not(.elementor-motion-effects-element-type-background) {
		background-position: center top !important;
	}
}

/* The design (see referance.png) sets "CONTACT US" as a small kicker line
   and moves the heading up to "Your Gateway to / Global Talent Solutions" -
   in the photo's open sky, centred, well clear of the bridge, the train and
   the skyline below. Font colours are the site's own (untouched, per the
   brief); only the sizes, the kicker's rule-flanked treatment and the
   vertical position change. */
@media (min-width: 768px) {
	/* The copy sat centred top-to-bottom in the box (the kit's own
	   justify-content:center on this column), which - now that the box is
	   tall enough to show the whole photo - left it hanging in the middle
	   of the frame, over the bridge. The design holds it near the top
	   instead, in the open sky, with the bridge, the train and the skyline
	   left clear underneath. */
	.elementor-2142 .elementor-element.elementor-element-c9668a2.elementor-column > .elementor-widget-wrap {
		justify-content: flex-start !important;
	}
	.elementor-2142 .elementor-element.elementor-element-c9668a2 > .elementor-element-populated {
		/* Replaces the kit's own 78px margin-top, which was sized to help
		   centre the column; the design's own top offset (below) takes over
		   instead. */
		margin-top: 0 !important;
		padding-top: 5.9vw !important;
	}

	/* "CONTACT US" drops from the main heading to a small rule-flanked
	   kicker line - the two dashes are drawn with ::before/::after rather
	   than the kit's own divider widget (aa2b12a, hidden below), since that
	   divider sits on its own line under the kicker, not beside it inline. */
	.elementor-2142 .elementor-element.elementor-element-b112fe0 .elementor-heading-title {
		font-size: 26px !important;
		font-weight: 700 !important;
		letter-spacing: 3px !important;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 18px;
	}
	.elementor-2142 .elementor-element.elementor-element-b112fe0 .elementor-heading-title::before,
	.elementor-2142 .elementor-element.elementor-element-b112fe0 .elementor-heading-title::after {
		content: "";
		width: 46px;
		height: 2px;
		background: linear-gradient( 90deg, #9c7c2b 0%, #d7b45f 30%, #f0de88 50%, #d4a72c 70%, #8a5a0a 100% );
	}
	.elementor-2142 .elementor-element.elementor-element-aa2b12a {
		display: none;
	}

	/* The gold two-line heading takes over the size the kit gave "CONTACT
	   US" - the colour is the page's own lm-gold-word gradient, untouched. */
	.elementor-2142 .elementor-element.elementor-element-8ab3ea1 {
		margin: 14px 0 0 0 !important;
	}
	.elementor-2142 .elementor-element.elementor-element-8ab3ea1 .elementor-heading-title {
		font-size: 46px !important;
		line-height: 1.2 !important;
	}

	/* The rule under the heading is the kit's own 2cf9d4f divider, already
	   gold; the design brings it back (an earlier pass had hidden both this
	   and aa2b12a with display:none, further up this file, so it wants
	   reversing here rather than just re-spacing) and re-spaces it now that
	   the heading above it is larger. */
	.elementor-2142 .elementor-element.elementor-element-2cf9d4f {
		display: block !important;
		margin: 16px 0 14px 0 !important;
	}

	/* The tagline's 360px cap (sized for it sitting under the old, narrower
	   "CONTACT US" heading) wraps it three ways; widened, it holds the
	   design's two lines instead. */
	.elementor-2142 .elementor-element.elementor-element-d67bfa0 {
		max-width: 640px !important;
	}
}

/* ======================================================================
   Editable hero backgrounds: Home, Find Jobs, Workforce Solutions,
   Knowledge Hub, Contact Us.

   Each page's "Hero Background Desktop" / "Hero Background Mobile" field
   (lm_bg_slot() calls in the page's own section-1.php, or section-hero.php
   for Home) prints CSS custom properties on the hero section, via
   lm_bg_style_vars() (inc/fields/markup.php) - only when an editor has
   actually picked a photo, so an untouched page carries no inline style
   and renders with byte-identical CSS to before. Every rule below reads
   its property with the page's own approved photo as the fallback.

   Wrapped in @media (min-width: 768px) throughout: a page's phone
   treatment is its own separate thing (already built, page by page,
   earlier this project) and must keep winning there regardless of where
   in this file these new rules happen to sit, so none of them are left
   unconditional. Where a page's phone view still shows a sliver of this
   same section background (Find Jobs), it is intentionally covered by the
   desktop property, since that sliver IS that same CSS layer, just
   repositioned - not a distinct thing "Hero Background Mobile" could
   separately reach without duplicating the rule. Where a page's photo has
   already been moved off the section background onto a phone-only block
   (Workforce Solutions, Knowledge Hub's tiles, Contact Us), the mobile
   property is wired into that block/tile rule instead, further down. */

/* ---- Home (element 9a9d12b): single-layer background, no scrim to
   preserve - the dark tone in the design comes from the photo itself, not
   a combined gradient. Tablet and phone each show their own separate real
   <img> (unaffected here); this is what desktop actually renders. */
@media (min-width: 768px) {
	.elementor-31 .elementor-element.elementor-element-9a9d12b:not(.elementor-motion-effects-element-type-background) {
		background-image: var( --lm-hero-background-desktop, url("/wp-content/uploads/2026/07/ggg.jpg") ) !important;
	}
}

/* ---- Find Jobs (element 6bf07ed): single-layer background; the dark
   scrim is the section's own .elementor-background-overlay div (untouched
   here, at every breakpoint) rather than anything baked into
   background-image, so a plain photo-layer swap is safe. Phone's own tint
   of this same layer (custom-customizer.css, ≤767px block) rides along
   with whatever photo this property resolves to - see the note above. */
@media (min-width: 768px) {
	.elementor-2235 .elementor-element.elementor-element-6bf07ed:not(.elementor-motion-effects-element-type-background) {
		background-image: var( --lm-hero-background-desktop, url("/wp-content/uploads/2026/08/fj.jpg") ) !important;
	}
}

/* ---- Workforce Solutions (element 78e5bd9): single-layer background; the
   dark scrim is the overlay div (two gradients on desktop, one on tablet,
   in kit-workforce-solutions.css - untouched here). Phone already runs its
   photo as a separate ::after block, reading --lm-hero-background-mobile,
   further down. */
@media (min-width: 768px) {
	.elementor-2000 .elementor-element.elementor-element-78e5bd9:not(.elementor-motion-effects-element-type-background) {
		background-image: var( --lm-hero-background-desktop, url("/wp-content/uploads/2026/09/workforce-solutions-hero.jpg") ) !important;
	}
}
.elementor-2000 .elementor-element.elementor-element-8825be4 > .elementor-widget-wrap::after {
	background-image: var( --lm-hero-background-mobile, url("/wp-content/uploads/2026/09/workforce-solutions-hero.jpg") ) !important;
}

/* ---- Knowledge Hub (element 103aeea): single-layer background (the kit's
   own unconditional background-position:right top override, set elsewhere
   in kit-knowledge-hub.css, is untouched - only background-image moves).
   Phone shows this same photo re-cropped into four tiles (.lm-kh-tile,
   ≤767px block) rather than a single block; --lm-hero-background-mobile is
   read from their shared base rule, so all four tiles pick up whichever
   photo is set together. A replacement photo will still be cut by the
   tiles' existing crop percentages, tuned for knldg.jpg's own composition
   - a photo framed similarly (subject filling the frame, no important
   detail at the very edges) will hold up best. */
@media (min-width: 768px) {
	.elementor-2767 .elementor-element.elementor-element-103aeea:not(.elementor-motion-effects-element-type-background) {
		background-image: var( --lm-hero-background-desktop, url("/wp-content/uploads/2026/08/knldg.jpg") ) !important;
	}
}
.elementor-2767 .lm-kh-tile {
	background-image: var( --lm-hero-background-mobile, url("/wp-content/uploads/2026/08/knldg.jpg") ) !important;
}

/* ---- Contact Us (element 957f95c): single-layer background at every
   breakpoint already (confirmed - this hero holds its contrast with text
   drop-shadows, not a photo scrim, unlike the others above). Phone runs
   the same photo as a separate ::after block after the CTA button, reading
   --lm-hero-background-mobile. */
@media (min-width: 768px) {
	.elementor-2142 .elementor-element.elementor-element-957f95c:not(.elementor-motion-effects-element-type-background) {
		background-image: var( --lm-hero-background-desktop, url("/wp-content/uploads/2026/09/cnt-bg-clear.jpg") ) !important;
	}
}
.elementor-2142 .elementor-element.elementor-element-c9668a2 > .elementor-element-populated::after {
	background-image: var( --lm-hero-background-mobile, url("/wp-content/uploads/2026/09/cnt-bg-clear.jpg") ) !important;
}

/* ---------- Contact: no white haze behind the banner heading ----------
   (lm-cnt-hero-deveil) The photo's sky is brightest exactly where "Your
   Gateway to / Global Talent Solutions" sits, so the gold read as pale on a
   white glow. A soft navy radial is layered over the photo, centred on the
   copy and faded out well before the edges, so the haze behind the words goes
   and the sunset, bridge and skyline are left as they were. It is a layer on
   top of --lm-hero-background-desktop, so it follows whatever photo an editor
   picks. From 768px up only: phones show the photo as its own block under
   the copy, not behind it. */
@media (min-width: 768px) {
	.elementor-2142 .elementor-element.elementor-element-957f95c:not(.elementor-motion-effects-element-type-background) {
		background-image:
			radial-gradient( ellipse 42% 30% at 50% 36%, rgba( 1, 17, 40, 0.24 ) 0%, rgba( 1, 17, 40, 0.14 ) 45%, rgba( 1, 17, 40, 0 ) 100% ),
			var( --lm-hero-background-desktop, url("/wp-content/uploads/2026/09/cnt-bg-clear.jpg") ) !important;
	}

	/* A richer, higher-contrast gold for the heading: a bright champagne
	   highlight running down into deep amber, with a crisp dark edge and a
	   warm glow so the letters stand off the darkened sky. */
	.elementor-2142 .elementor-element.elementor-element-8ab3ea1 .lm-gold-word.lm-gold-word--hero {
		color: #f3c94f;
		background: linear-gradient( 100deg, #a8620c 0%, #e9a92a 22%, #ffe9a0 42%, #f6c542 55%, #c47a10 78%, #f0b834 100% );
		-webkit-box-decoration-break: clone;
		        box-decoration-break: clone;
		-webkit-background-clip: text;
		        background-clip: text;
		-webkit-text-fill-color: transparent;
		filter: drop-shadow( 0 2px 1px rgba( 60, 30, 0, 0.8 ) ) drop-shadow( 0 0 8px rgba( 1, 17, 40, 0.25 ) );
	}
}

/* ---------- Knowledge Hub: the featured article's image uncropped ----------
   (lm-kh-feat-uncrop) The card frames its picture at 9/6 (custom-3424.css),
   but the featured article's artwork is 4:3 with a strip of industry names
   along its bottom edge - "Aviation", "Manufacturing" and the rest - which the
   wider frame cut through. This one card (39ccbe6) takes the 4:3 frame so the
   whole picture shows; the smaller cards in section 5 share the class and
   keep their 9/6. */
.elementor-element-39ccbe6.nblog_card_feat_img img {
	aspect-ratio: 4 / 3;
}

/* ---------- The "30+ Years of Excellence" emblem, larger site-wide ----------
   (lm-emblem-larger) The shield sits in the stat band on six pages, each
   sized by its own kit rule, and read small beside the figures next to it.
   Each is raised by roughly 35-50%, page by page, so the relative sizes the
   design gave them hold:

   - Home (021d958)                120px -> 165px (phone 120px -> 145px)
   - About (bcc03a4, navy JPG)     110px -> 160px wide
   - Build Your Team (979a166)     100px -> 140px (phone 120px -> 150px)
   - Contact (4cba958)              60px ->  88px (phone  38px ->  54px)
   - Knowledge Hub (e1df10f)       120px -> 165px (phone  68px ->  96px)
   - Workforce Solutions (0c4b96e) 120px -> 160px tall (phone 150px) */
.elementor-31 .elementor-element.elementor-element-021d958 img {
	max-width: 165px !important;
}
.elementor-1632 .elementor-element.elementor-element-bcc03a4 .elementor-image-box-wrapper .elementor-image-box-img {
	width: 160px !important;
}
.elementor-2272 .elementor-element.elementor-element-979a166 img {
	max-width: 140px !important;
}
.elementor-2142 .elementor-element.elementor-element-4cba958 img {
	max-width: 88px !important;
}
.elementor-2767 .elementor-element.elementor-element-e1df10f img {
	max-width: 165px !important;
}
.elementor-2000 .elementor-element.elementor-element-0c4b96e .elementor-image-box-img img {
	height: 160px !important;
}
@media (max-width: 767px) {
	.elementor-31 .elementor-element.elementor-element-021d958 img {
		max-width: 145px !important;
	}
	.elementor-1632 .elementor-element.elementor-element-bcc03a4 .elementor-image-box-wrapper .elementor-image-box-img {
		width: 150px !important;
	}
	.elementor-2272 .elementor-element.elementor-element-979a166 img {
		max-width: 150px !important;
	}
	.elementor-2142 .elementor-element.elementor-element-4cba958 {
		flex: 0 0 62px !important;
		width: 62px !important;
	}
	.elementor-2142 .elementor-element.elementor-element-4cba958 img {
		max-width: 54px !important;
	}
	.elementor-2767 .elementor-element.elementor-element-e1df10f img {
		max-width: 96px !important;
	}
	.elementor-2000 .elementor-element.elementor-element-0c4b96e .elementor-image-box-img img {
		height: 150px !important;
	}
}

/* ---------- Knowledge Hub: the stat band's emblem clear of its divider ----------
   (lm-kh-emblem-fit) At 165px the enlarged emblem filled its 15% column edge
   to edge from about 1366px down, running into the hairline beside it, and
   the band's top-aligned stats sat high against a shield twice their height.

   From 1025px up the emblem column is a fixed 200px with the shield set
   at its left edge at 150px (still up from the kit's 120px), leaving clear
   air between it and the rule at every desktop width. The four stat boxes take one shared
   height - the tallest of them at that width - and centre as a group against
   the shield, so they sit level with each other and with the emblem's middle
   instead of hanging from the top. Tablet and phone lay this band out
   differently and are untouched. */
@media (min-width: 1025px) {
	.elementor-2767 .elementor-element.elementor-element-0a8daf2 {
		flex: 0 0 200px !important;
		width: 200px !important;
		max-width: 200px !important;
	}
	/* The shield sits at the left of its column, so all of the column's
	   spare width lies between it and the divider on its right. */
	.elementor-2767 .elementor-element.elementor-element-0a8daf2 > .elementor-widget-wrap {
		justify-content: flex-start !important;
		align-content: center !important;
		align-items: center !important;
	}
	.elementor-2767 .elementor-element.elementor-element-e1df10f {
		text-align: left !important;
	}
	.elementor-2767 .elementor-element.elementor-element-e1df10f img {
		max-width: 150px !important;
	}
	.elementor-2767 .elementor-element.elementor-element-d94d329 > .elementor-container > .elementor-column:not(.elementor-element-0a8daf2) > .elementor-widget-wrap {
		align-content: center !important;
		align-items: center !important;
	}
	.elementor-2767 .elementor-element.elementor-element-d94d329 > .elementor-container > .elementor-column:not(.elementor-element-0a8daf2) .elementor-widget {
		min-height: 125px;
	}
	/* The stat columns share whatever the emblem leaves, equally. Left at
	   their kit percentages they did not add up beside a fixed column, and
	   below about 1100px the row ran past the band. */
	.elementor-2767 .elementor-element.elementor-element-d94d329 > .elementor-container > .elementor-column:not(.elementor-element-0a8daf2) {
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0 !important;
	}
	/* The icons hold their size: "Government" is one long word that
	   cannot wrap, and on a narrow desktop it was taking its width out of
	   the icon beside it rather than out of the caption. The kit's icon
	   boxes are 100px wide around 61px icons, so each box is fitted to its
	   icon first, which frees that width for the captions. */
	.elementor-2767 .elementor-element.elementor-element-d94d329 .elementor-column:not(.elementor-element-0a8daf2) .elementor-image-box-img {
		flex: 0 0 64px !important;
		width: 64px !important;
	}
	.elementor-2767 .elementor-element.elementor-element-d94d329 .elementor-column:not(.elementor-element-0a8daf2) .elementor-image-box-img img {
		width: 100% !important;
		height: auto !important;
	}
}
/* Narrow desktops: a slightly smaller shield and column leave the four stats
   their room, and the stat boxes take the taller shared height their wrapped
   captions need there. */
@media (min-width: 1025px) and (max-width: 1280px) {
	.elementor-2767 .elementor-element.elementor-element-0a8daf2 {
		flex: 0 0 170px !important;
		width: 170px !important;
		max-width: 170px !important;
	}
	.elementor-2767 .elementor-element.elementor-element-e1df10f img {
		max-width: 132px !important;
	}
	.elementor-2767 .elementor-element.elementor-element-d94d329 > .elementor-container > .elementor-column:not(.elementor-element-0a8daf2) .elementor-widget {
		min-height: 165px;
	}
	/* Smaller icon boxes and figures at 23px (21px under 1100px) keep
	   "Government" inside its column. */
	.elementor-2767 .elementor-element.elementor-element-d94d329 .elementor-column:not(.elementor-element-0a8daf2) .elementor-image-box-img {
		flex: 0 0 48px !important;
		width: 48px !important;
	}
	.elementor-2767 .elementor-element.elementor-element-d94d329 .elementor-column:not(.elementor-element-0a8daf2) .elementor-image-box-title {
		font-size: 23px !important;
	}
}
@media (min-width: 1025px) and (max-width: 1100px) {
	.elementor-2767 .elementor-element.elementor-element-d94d329 .elementor-column:not(.elementor-element-0a8daf2) .elementor-image-box-title {
		font-size: 21px !important;
	}
}

/* ---------- About: the tagline banner's second new photo ----------
   Same wording, a second replacement photo (30 Sep): Chennai still on the
   left, but the right side is now a 3D globe and an aircraft rather than a
   flat map, and the workforce photos reach noticeably higher into the
   frame. Shipped as assets/img/about-banner.jpg again (1600x533, a 3:1
   photo rather than the previous 4.14:1 - the aspect-ratio below is the
   photo's own, so it always shows whole and uncropped, whatever width the
   page renders it at.

   Measured the same way as the previous photo - column and row brightness
   variance across the sky, not eyeballed: this photo's clear gap between
   Chennai and the globe is only 30.0%-53.0% across (23% wide, against the
   old photo's 40%), because the globe sits closer to the middle than the
   flat map did. Vertically it is clear from the top down to about 52%,
   where the workforce photos start. The heading's box takes that whole
   clear rectangle; being this narrow, it wraps across more, shorter lines
   than the previous photo needed, which the box's generous height easily
   holds.

   The heading was dark navy and a dark gold, drawn for the old light
   centre; on this navy sky both vanish. It takes the white and the bright
   hero gold the site uses on its other dark banners. !important on the gold
   because the ramp is an inline style on the span. */
.elementor-element-75a32c5 {
	aspect-ratio: 1600 / 533;
	background-color: #0b1739 !important;
	background-image: url("../img/about-banner.jpg") !important;
	container-type: inline-size;
}
.elementor-element-75a32c5 .elementor-heading-title {
	color: #ffffff !important;
	text-shadow: 0 2px 10px rgba( 1, 12, 32, 0.7 );
}
.elementor-element-75a32c5 .elementor-heading-title span {
	background: linear-gradient( var( --lm-gold-text-angle ), var( --lm-gold-text-stops ) ) !important;
	-webkit-background-clip: text !important;
	        background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	text-shadow: none;
	filter: drop-shadow( 0 2px 1px rgba( 1, 12, 32, 0.8 ) );
}
@media (min-width: 768px) {
	.elementor-element-75a32c5 .elementor-heading-title {
		position: absolute;
		left: 30.0%;
		/* Left edge is Chennai's own arcs, a hard limit - clutter starts
		   rising the moment this moves left of 30%. Right edge is the
		   aircraft: cropped and inspected directly, its trailing light
		   streaks (not the solid fuselage, which is further right still, at
		   about 57%) start fading in around 55%, so the box runs to there
		   rather than the tighter 53% the column score alone suggested.
		   That puts the box's centre at 42.5% of the photo - as close to the
		   middle as Chennai on one side and the aircraft on the other allow;
		   true 50% would need to sit on one of them.

		   Vertically this column (30%-55%) is not blocked by the workforce
		   photos at all - they sit further right; plain sky continues to
		   about 65%, with the coastline's own lights fading in only faintly
		   before the gold wave graphic itself starts at 73%. Positioned to
		   match the approved reference exactly (measured from it directly:
		   the five lines span 27.5%-61.4% of the photo, centred at 44.5%)
		   rather than centred in the whole safe range, which sat higher. */
		top: 23%;
		width: 25.0%;
		height: 42%;
		max-width: none !important;
		margin: 0 !important;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		padding: 0 1%;
		box-sizing: border-box;
		font-size: min( 30px, 2.2cqw ) !important;
	}

	/* Tablet and desktop: the banner runs the full width of the screen. It
	   sat inside the page's 1360px boxed container with the column's 10px
	   padding, leaving white gutters either side of a photo that is itself a
	   full-bleed composition (Chennai at one edge, the workforce at the
	   other). The container cap and the column padding are the generic kit
	   rules for every boxed section, so this section alone opts out. The
	   heading's box is placed in percentages of the banner, so it keeps its
	   place on the photo at the wider size. Phones keep the boxed band: the
	   photo there is cropped to its centre strip, where the gutters read as
	   the page's own rhythm rather than as a gap. */
	.elementor-1632 .elementor-element.elementor-element-af2eaa2 > .elementor-container {
		max-width: none !important;
	}
	.elementor-1632 .elementor-element.elementor-element-7f421b6 > .elementor-element-populated {
		padding: 0 !important;
	}
	.elementor-1632 .elementor-element.elementor-element-75a32c5 {
		margin-bottom: 0 !important;
	}
}

/* Phones: the band is the only part of the photo the copy can sit on, and
   at phone width the whole photo is too short a strip for the heading
   anywhere else. So the box becomes the band itself: the band's own
   368:256 frame (its pixel size in this photo), the photo scaled up until
   the band spans the box (1600 / 368px band width = 434.78%) and placed so
   the band is what shows (band's own offset as a percentage of the photo's
   spare width/height once scaled). Recalculated for the 30 Sep photo; the
   band is narrower but taller than the previous photo's, so the box is
   closer to square than it was. */
@media (max-width: 767px) {
	.elementor-element-75a32c5 {
		aspect-ratio: 368 / 256;
		padding: 0 !important;
		background-size: 434.78% auto !important;
		background-position: 38.96% 3.85% !important;
	}
	/* Re-checked against the render rather than assumed: see how many lines
	   this narrower band actually holds before picking a size. */
	.elementor-element-75a32c5 .elementor-heading-title {
		font-size: min( 19px, 4.9cqw ) !important;
	}
}

/* Contact page: the country list under "WE SERVE EMPLOYERS & RECRUITMENT
   PARTNERS ACROSS 18 COUNTRIES" was set at the kit's plain default - 400
   weight, #000735, near-black rather than the site's own navy - so it read
   thin and flat next to the bold #011735 heading directly above it. Bold
   caps match that heading's register; the gold is the hero heading's ramp
   with its one near-white stop (#ffe9a0) pulled down to #f0cc5a - the
   brightest that still holds against a white card at 14px (any paler and
   the words under the highlight go ghostly), so the shine stays without
   the highlight punching holes through the letterforms. !important because
   the page's own kit (kit-contact.css) loads after this file and ties on
   specificity. */
.elementor-element-363ea0f .elementor-heading-title {
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	color: #d9a527 !important;
	background: linear-gradient( 100deg, #a8620c 0%, #e9a92a 20%, #f0cc5a 40%, #f6c542 52%, #b8760f 72%, #f0b834 100% ) !important;
	/* Tiled every 200px rather than stretched across the whole 587px line:
	   the ramp then runs three times over the text, so the bright band
	   becomes a repeating glint a word or two wide - the brushed-metal read -
	   instead of one long pale stretch swallowing a whole country name. */
	background-size: 200px 100% !important;
	-webkit-background-clip: text !important;
	        background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

/* Contact hero: "INDIA" and "SINGAPORE" corner tags on the photo, naming
   the two sides directly rather than leaving it to the skyline alone -
   Chennai's temple and lighthouse on the left, Marina Bay and the Merlion
   on the right. Pinned to the section itself (not the centred column), so
   they hold the corners at any width the middle copy runs to. Hidden by
   default and only shown from 768px up: the section carries no photo of
   its own on a phone (the same image appears lower, as its own block), so
   a corner tag here would float over nothing there.

   Each is a grey chip carrying a gold pin and the name in flat gold -
   #f3c94f, the solid the hero heading's ramp falls back to, so it is the
   same gold as "Your Gateway to Global Talent Solutions" without the
   gradient, which at 32px in a small chip read as banding rather than
   shine. The chip is a touch translucent so the sky shows through it
   rather than it sitting on the photo like a sticker. */
.lm-hero-tag {
	display: none;
}
@media ( min-width: 768px ) {
	.lm-hero-tag {
		position: absolute;
		bottom: 5px;
		display: flex;
		align-items: center;
		gap: 6px;
		z-index: 2;
		padding: 5px 10px 5px 8px;
		border-radius: 5px;
		background: rgba( 92, 92, 92, 0.82 );
		box-shadow: 0 3px 12px rgba( 1, 12, 32, 0.35 );
	}
	.lm-hero-tag--left {
		left: 24px;
	}
	.lm-hero-tag--right {
		right: 24px;
	}
	/* The pin is drawn at 28px in the template; sized here so the chips
	   can scale with the breakpoints without touching the markup. */
	.lm-hero-tag .lm-adv-icon {
		flex-shrink: 0;
		width: 14px;
		height: 14px;
	}
	.lm-hero-tag__label {
		font-family: "DM Sans", Sans-serif;
		font-size: 12px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.8px;
		text-transform: uppercase;
		color: #f3c94f;
	}
	.lm-hero-tag__text {
		display: flex;
		flex-direction: column;
	}
	/* The second line stays a caption to the name above it - 8px is as
	   small as caps in this weight still read on the grey. */
	.lm-hero-tag__sub {
		margin-top: 2px;
		font-family: "DM Sans", Sans-serif;
		font-size: 8px;
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: 0.4px;
		text-transform: uppercase;
		color: #ffffff;
	}
}
/* Tablet: the full-size chips take ~500px of a 768px section between them
   (they sat over "CONTACT US" when they were at the top; at the bottom
   they would crowd the photo's foreground the same way), so they come
   down to a size in keeping with the narrower banner. */
@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.lm-hero-tag {
		gap: 4px;
		padding: 4px 8px 4px 6px;
	}
	.lm-hero-tag .lm-adv-icon {
		width: 12px;
		height: 12px;
	}
	.lm-hero-tag__label {
		font-size: 10px;
		letter-spacing: 0.6px;
	}
	.lm-hero-tag__sub {
		margin-top: 2px;
		font-size: 7px;
		letter-spacing: 0.3px;
	}
}