/* ==========================================================================
   Blended hero background photo — shared by the Company pages (Our Team,
   Our Process, Certifications, Quality Policy, Careers).

   Any Image widget with the CSS class `cg-hero-photo` (Elementor → Advanced →
   CSS Classes) inside a hero's content box is pinned behind that hero's right
   half, toned to the navy with a luminosity blend and faded out towards the
   headline and bottom edge. Swap the photo in Elementor; the treatment
   applies to any image. On phones it sits behind the lower half (under the
   hero illustration) and fades upward.
   ========================================================================== */

/* The hero section is the positioning context; its content box must not be. */
.e-con:has(> .cg-hero-photo) { position: static !important; }
.e-con:has(> .cg-hero-photo) > .elementor-element:not(.cg-hero-photo) { position: relative; z-index: 1; }

.elementor-widget.cg-hero-photo {
	position: absolute !important;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	width: 58% !important;
	max-width: none;
	margin: 0 !important;
	pointer-events: none;
	-webkit-mask-image:
		linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 30%, #000 70%),
		linear-gradient(0deg, transparent 0%, #000 35%);
	-webkit-mask-composite: source-in;
	        mask-image:
		linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 30%, #000 70%),
		linear-gradient(0deg, transparent 0%, #000 35%);
	        mask-composite: intersect;
}
.cg-hero-photo :is(.elementor-widget-container, figure) { position: absolute; inset: 0; margin: 0; }
.cg-hero-photo img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: 75% 50%;
	border-radius: 0 !important;
	opacity: .42;
	filter: grayscale(1) contrast(1.15);
	mix-blend-mode: luminosity;
}
/* Soft navy wash so the illustration's line art stays crisp on top. */
.elementor-widget.cg-hero-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(420px 320px at 62% 50%, rgba(7, 17, 31, .55), rgba(7, 17, 31, 0) 75%);
}

@media (max-width: 767px) {
	.elementor-widget.cg-hero-photo {
		top: auto;
		height: 55%;
		width: 100% !important;
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
		        mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
	}
	.cg-hero-photo img { object-position: 70% 50%; opacity: .32; }
}