/* Inner-page hero (replaces the old 1469x241 banner strip + grey title bar).
   Same visual language as the homepage hero: navy gradient, orange eyebrow, headline, value statement, CTA.
   Variants: default (photo / product UI on the right), --plain (navy band, no image: bios, policies, news). */

.cpx-header-lower .cpx-hero {
	clear: both;
	position: relative;
	margin-bottom: 36px;
	display: flex;
	align-items: center;
	min-height: 400px;
	background: #0B2538;
	color: #fff;
	overflow: hidden;
	font-family: 'Open Sans', sans-serif;
	text-align: left;
}
.cpx-hero__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 66%;
	margin: 0;
}
.cpx-hero__media img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover;
	object-position: center;
}
.cpx-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #0B2538 0%, rgba(11,37,56,.88) 18%, rgba(11,37,56,.45) 48%, rgba(11,37,56,.08) 100%);
}
.cpx-hero__in {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: 100%;
	max-width: 1230px;
	margin: 0 auto;
	padding: 60px 30px;
}
.cpx-hero__copy { max-width: 620px; }

.cpx-header-lower .cpx-hero p.cpx-hero__eyebrow {
	margin: 0 0 14px;
	padding: 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #FFB012;
}
.cpx-header-lower .cpx-hero p.cpx-hero__eyebrow a,
.cpx-header-lower .cpx-hero p.cpx-hero__eyebrow span { color: #FFB012; font: inherit; letter-spacing: inherit; text-decoration: none; padding: 0; }
.cpx-header-lower .cpx-hero p.cpx-hero__eyebrow a:hover { color: #fff; }

.cpx-header-lower .cpx-hero h1.cpx-hero__title,
.cpx-header-lower .cpx-hero h1.cpx-hero__title span {
	float: none;
	margin: 0;
	padding: 0;
	background: none;
	font-family: 'Open Sans', sans-serif;
	font-size: 44px;
	font-weight: 700;
	font-style: normal;
	line-height: 1.14;
	letter-spacing: -.02em;
	text-align: left;
	text-transform: none;
	color: #fff;
}
.cpx-header-lower .cpx-hero h1.cpx-hero__title sup { font-size: .5em; line-height: 0; }

.cpx-header-lower .cpx-hero p.cpx-hero__sub {
	margin: 18px 0 0;
	padding: 0;
	max-width: 560px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.55;
	color: #D5E0E8;
}
.cpx-header-lower .cpx-hero p.cpx-hero__sub a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.cpx-header-lower .cpx-hero p.cpx-hero__sub a:hover { color: #FFB012; }
.cpx-header-lower .cpx-hero p.cpx-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 28px 0 0;
	padding: 0;
}
.cpx-header-lower .cpx-hero a.cpx-hero__btn {
	display: inline-block;
	padding: 13px 26px;
	border-radius: 30px;
	background: #FFB012;
	color: #0E2E45;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.cpx-header-lower .cpx-hero a.cpx-hero__btn:hover { background: #F5A300; color: #0E2E45; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.cpx-header-lower .cpx-hero a.cpx-hero__btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.65); }
.cpx-header-lower .cpx-hero a.cpx-hero__btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.cpx-header-lower .cpx-hero a:focus-visible { outline: 3px solid #FFB012; outline-offset: 3px; }

/* Plain navy band (no photo) */
.cpx-header-lower .cpx-hero--plain {
	min-height: 0;
	background: radial-gradient(ellipse at 88% 40%, rgba(1,112,172,.38) 0%, rgba(1,112,172,0) 55%), #0B2538;
}
.cpx-hero--plain::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 9%;
	width: 210px;
	height: 210px;
	margin-top: -105px;
	border: 12px solid rgba(255,255,255,.07);
	border-radius: 50%;
}
.cpx-hero--plain .cpx-hero__in { padding-top: 46px; padding-bottom: 46px; }
.cpx-header-lower .cpx-hero--plain h1.cpx-hero__title,
.cpx-header-lower .cpx-hero--plain h1.cpx-hero__title span { font-size: 36px; }

/* News templates carry two heading spans ("Company News" / "Article"); the band always shows "Company News" — the article title sits directly below */
.cpx-header-lower .cpx-hero h1.cpx-hero__title span.blog-article { display: none; }

@media (max-width: 1023px) {
	.cpx-header-lower .cpx-hero { min-height: 340px; }
	.cpx-hero__media { width: 62%; }
	.cpx-hero__copy { max-width: 520px; }
	.cpx-header-lower .cpx-hero h1.cpx-hero__title,
	.cpx-header-lower .cpx-hero h1.cpx-hero__title span { font-size: 36px; }
	.cpx-header-lower .cpx-hero p.cpx-hero__sub { font-size: 17px; }
}
@media (max-width: 767px) {
	.cpx-header-lower .cpx-hero { display: block; min-height: 0; margin-bottom: 24px; }
	.cpx-hero__media { position: relative; width: 100%; height: 210px; }
	.cpx-hero__media::after { background: linear-gradient(180deg, rgba(11,37,56,0) 45%, rgba(11,37,56,.75) 85%, #0B2538 100%); }
	.cpx-hero__in { padding: 22px 20px 32px; }
	.cpx-hero--plain .cpx-hero__in { padding-top: 30px; padding-bottom: 30px; }
	.cpx-hero--plain::after { width: 140px; height: 140px; margin-top: -70px; right: -30px; border-width: 10px; }
	.cpx-header-lower .cpx-hero p.cpx-hero__eyebrow { font-size: 11px; margin-bottom: 10px; }
	.cpx-header-lower .cpx-hero h1.cpx-hero__title,
	.cpx-header-lower .cpx-hero h1.cpx-hero__title span { font-size: 28px; line-height: 1.18; }
	.cpx-header-lower .cpx-hero--plain h1.cpx-hero__title,
	.cpx-header-lower .cpx-hero--plain h1.cpx-hero__title span { font-size: 26px; }
	.cpx-header-lower .cpx-hero p.cpx-hero__sub { margin-top: 12px; font-size: 15px; }
	.cpx-header-lower .cpx-hero p.cpx-hero__ctas { margin-top: 20px; }
}