/* ===========================================================
 * Custom Molded Products Page Styles
 * Scope: all selectors under .cmp-page
 * =========================================================== */

.cmp-page {
	--cmp-blue: #145bff;
	--cmp-blue-strong: #0d48d8;
	--cmp-ink: #0d1117;
	--cmp-muted: #667085;
	--cmp-line: #dfe5ee;
	--cmp-soft: #f4f7fb;
	--cmp-navy: #07162b;
	color: var(--cmp-ink);
	font-family: Arial, Helvetica, sans-serif;
}

.cmp-page * {
	box-sizing: border-box;
}

.cmp-page a {
	color: inherit;
	text-decoration: none;
}

.cmp-page .wrap {
	width: min(1180px, calc(100% - 48px));
	margin: auto;
}


.cmp-page .hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(110deg, #fff 0%, #fff 46%, #eef4fc 100%);
}

.cmp-page .grid-bg {
	position: absolute;
	inset: 0;
	opacity: .36;
	background-image: linear-gradient(#d8e4f5 1px, transparent 1px), linear-gradient(90deg, #d8e4f5 1px, transparent 1px);
	background-size: 42px 42px;
	mask-image: linear-gradient(90deg, #000, transparent 44%, #000);
}

.cmp-page .hero-layout {
	position: relative;
	display: grid;
	grid-template-columns: 46% 54%;
	min-height: 590px;
	align-items: center;
}

.cmp-page .hero-copy {
	padding: 56px 30px 62px 0;
	z-index: 2;
}

.cmp-page .eyebrow {
	font-size: 12px;
	letter-spacing: .16em;
	color: var(--cmp-blue);
	font-weight: 800;
	margin: 0 0 18px;
}

.cmp-page .eyebrow.light {
	color: #75a1ff;
}

.cmp-page .hero h1 {
	font-size: 64px;
	line-height: .98;
	letter-spacing: -.055em;
	margin: 0;
}

.cmp-page .hero h1 span {
	color: var(--cmp-blue);
}

.cmp-page .lead {
	font-size: 17px;
	line-height: 1.72;
	color: #586170;
	max-width: 570px;
	margin: 28px 0;
}

.cmp-page .hero-actions {
	display: flex;
	align-items: center;
	gap: 30px;
}

.cmp-page .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 26px;
	font-weight: 800;
	padding: 16px 21px;
	min-height: 52px;
	transition: .2s;
}

.cmp-page .button:hover {
	transform: translateY(-2px);
}

.cmp-page .primary {
	background: var(--cmp-blue);
	color: #fff;
	box-shadow: 0 12px 30px rgba(20, 91, 255, .2);
}

.cmp-page .primary:hover {
	background: var(--cmp-blue-strong);
}

.cmp-page .text-link {
	color: var(--cmp-blue);
	font-size: 14px;
	font-weight: 800;
}

.cmp-page .hero-stage {
	align-self: stretch;
	position: relative;
}

.cmp-page .reference-banner {
	min-height: 500px;
	margin-right: calc((1180px - 100vw) / 2);
	overflow: hidden;
	background: #eef4fc;
}

.cmp-page .reference-banner > img {
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	object-fit: cover;
	object-position: right center;
}

.cmp-page .reference-banner:before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .7) 9%, transparent 30%);
	pointer-events: none;
}

.cmp-page .trustbar {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: #fff;
	border: 1px solid var(--cmp-line);
	box-shadow: 0 14px 38px rgba(18, 31, 53, .08);
}

.cmp-page .trustbar div {
	padding: 23px 25px;
	border-right: 1px solid var(--cmp-line);
}

.cmp-page .trustbar div:last-child {
	border-right: 0;
}

.cmp-page .trustbar b {
	display: block;
	font-size: 20px;
}

.cmp-page .trustbar span {
	display: block;
	color: #737d8b;
	font-size: 12px;
	margin-top: 6px;
}

.cmp-page .section,
.cmp-page .product-showcase,
.cmp-page .dark-section {
	padding: 105px 0;
}

.cmp-page .section-heading {
	max-width: 760px;
	margin-bottom: 48px;
}

.cmp-page .section-heading h2,
.cmp-page .faq-title h2,
.cmp-page .cta-layout h2 {
	font-size: 44px;
	line-height: 1.1;
	letter-spacing: -.045em;
	margin: 0;
}

.cmp-page .section-heading.split {
	max-width: none;
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	align-items: end;
	gap: 80px;
}

.cmp-page .section-heading.split p:last-child,
.cmp-page .intro,
.cmp-page .faq-title > p:last-child,
.cmp-page .cta-layout > div > p:last-child {
	font-size: 16px;
	line-height: 1.75;
	color: var(--cmp-muted);
	margin: 0;
}

.cmp-page .intro {
	margin-top: 22px;
	max-width: 660px;
}

.cmp-page #capabilities {
	padding-top: 48px;
	padding-bottom: 52px;
}

.cmp-page #capabilities .section-heading {
	margin-bottom: 22px;
}

.cmp-page #capabilities .section-heading h2 {
	font-size: 36px;
}

.cmp-page .capability-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--cmp-line);
	border-left: 1px solid var(--cmp-line);
}

.cmp-page .capability-grid article {
	padding: 18px 20px 20px;
	border-right: 1px solid var(--cmp-line);
	border-bottom: 1px solid var(--cmp-line);
	min-height: 164px;
}

.cmp-page .number {
	color: #a8b2c1;
	font-size: 11px;
}

.cmp-page .icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	background: #eef3ff;
	color: var(--cmp-blue);
	font-size: 18px;
	margin: 12px 0;
}

.cmp-page .capability-grid h3,
.cmp-page .material-copy h3,
.cmp-page .application-grid h3,
.cmp-page .steps h3 {
	font-size: 19px;
	margin: 0 0 12px;
}

.cmp-page .capability-grid p,
.cmp-page .material-copy p,
.cmp-page .application-grid p,
.cmp-page .steps p,
.cmp-page .showcase-grid p {
	font-size: 13px;
	line-height: 1.65;
	color: var(--cmp-muted);
	margin: 0;
}

.cmp-page .product-showcase {
	background: var(--cmp-soft);
}

.cmp-page .showcase-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}

.cmp-page .showcase-grid article {
	background: #fff;
	border: 1px solid var(--cmp-line);
}

.cmp-page .showcase-image {
	height: 360px;
	overflow: hidden;
	background: #e6ecf4;
}

.cmp-page .showcase-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: .4s;
}

.cmp-page .showcase-grid article:hover .showcase-image img {
	transform: scale(1.025);
}

.cmp-page .showcase-grid article > div:last-child {
	padding: 32px;
}

.cmp-page .showcase-grid article > div > span {
	font-size: 10px;
	color: var(--cmp-blue);
	font-weight: 800;
	letter-spacing: .13em;
}

.cmp-page .showcase-grid h3 {
	font-size: 25px;
	margin: 14px 0 12px;
}

.cmp-page .showcase-grid ul {
	list-style: none;
	padding: 18px 0 0;
	margin: 20px 0 0;
	border-top: 1px solid var(--cmp-line);
	display: grid;
	gap: 10px;
}

.cmp-page .showcase-grid li {
	font-size: 12px;
	color: #465162;
}

.cmp-page .showcase-grid li:before {
	content: "+";
	color: var(--cmp-blue);
	font-weight: 900;
	margin-right: 9px;
}

.cmp-page .scope-strip {
	display: flex;
	align-items: center;
	gap: 0;
	margin-top: 22px;
	background: var(--cmp-navy);
	color: #fff;
	overflow: auto;
}

.cmp-page .scope-strip > * {
	white-space: nowrap;
	padding: 18px 21px;
	border-right: 1px solid #27364d;
	font-size: 11px;
}

.cmp-page .scope-strip b {
	color: #75a1ff;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.cmp-page .dark-section {
	background: var(--cmp-navy);
	color: #fff;
}

.cmp-page .dark-section .section-heading p:last-child,
.cmp-page .process-map p,
.cmp-page .process-photo figcaption span,
.cmp-page .checks p {
	color: #b8c5d8;
}

.cmp-page .process-photo {
	height: 410px;
	margin: 0 0 45px;
	position: relative;
	overflow: hidden;
	border: 1px solid #2b3b52;
}

.cmp-page .process-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cmp-page .process-photo:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(7, 22, 43, .82));
}

.cmp-page .process-photo figcaption {
	position: absolute;
	z-index: 1;
	left: 28px;
	bottom: 24px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cmp-page .process-photo figcaption b {
	font-size: 15px;
	color: #fff;
}

.cmp-page .process-photo figcaption span {
	font-size: 11px;
	letter-spacing: .06em;
	font-style: normal;
}

.cmp-page .process-map {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid #25344b;
}

.cmp-page .process-map div {
	padding: 30px 28px 5px 0;
	border-right: 1px solid #25344b;
	min-height: 190px;
	margin-right: 26px;
}

.cmp-page .process-map div:last-child {
	border-right: 0;
}

.cmp-page .process-map span,
.cmp-page .steps span {
	color: #568aff;
	font-size: 11px;
}

.cmp-page .process-map b {
	display: block;
	font-size: 16px;
	margin: 28px 0 12px;
}

.cmp-page .material-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}

.cmp-page .material-grid article {
	border: 1px solid var(--cmp-line);
	display: grid;
	grid-template-columns: 42% 58%;
	min-height: 240px;
}

.cmp-page .material-photo {
	position: relative;
	overflow: hidden;
	min-height: 240px;
	background: #eef2f7;
}

.cmp-page .material-photo img {
	position: absolute;
	width: 205%;
	height: 150%;
	max-width: none;
	object-fit: cover;
}

.cmp-page .material-crop-1 img {
	left: -2%;
	top: -2%;
}

.cmp-page .material-crop-2 img {
	left: -42%;
	top: -3%;
}

.cmp-page .material-crop-3 img {
	left: -5%;
	top: -47%;
}

.cmp-page .material-crop-4 img {
	left: -91%;
	top: -47%;
}

.cmp-page .material-copy {
	padding: 30px;
}

.cmp-page .mini {
	font-size: 9px !important;
	letter-spacing: .14em;
	color: var(--cmp-blue) !important;
	font-weight: 800;
	margin-bottom: 16px;
}

.cmp-page .material-copy h3 {
	font-size: 23px;
	font-weight: 700;
	margin: 16px 0 9px;
}

.cmp-page .material-copy b {
	font-size: 12px;
	color: #3b4655;
	display: block;
	margin-bottom: 18px;
}

.cmp-page .soft-section {
	background: var(--cmp-soft);
}

.cmp-page .application-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--cmp-line);
	border: 1px solid var(--cmp-line);
}

.cmp-page .application-grid article {
	background: #fff;
	padding: 24px;
	min-height: 330px;
}

.cmp-page .application-grid article > span {
	font-size: 10px;
	color: #97a1af;
}

.cmp-page .application-photo {
	height: 155px;
	margin: 18px 0 24px;
	overflow: hidden;
	background: #eef2f7;
	position: relative;
}

.cmp-page .application-photo img {
	position: absolute;
	width: 300%;
	height: 200%;
	max-width: none;
	object-fit: cover;
}

.cmp-page .crop-1 img { left: 0; top: 0; }
.cmp-page .crop-2 img { left: -100%; top: 0; }
.cmp-page .crop-3 img { left: -200%; top: 0; }
.cmp-page .crop-4 img { left: 0; top: -100%; }
.cmp-page .crop-5 img { left: -100%; top: -100%; }
.cmp-page .crop-6 img { left: -200%; top: -100%; }

.cmp-page .steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.cmp-page .steps article {
	border-top: 2px solid #cbd4e0;
	padding: 28px 25px 0 0;
	position: relative;
}

.cmp-page .steps article:before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--cmp-blue);
	position: absolute;
	top: -5px;
}

.cmp-page .steps h3 {
	margin-top: 22px;
}

.cmp-page .quality-panel {
	margin-top: 85px;
	padding: 48px;
	background: var(--cmp-navy);
	color: #fff;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

.cmp-page .quality-panel h2 {
	font-size: 34px;
	line-height: 1.15;
}

.cmp-page .checks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.cmp-page .checks p {
	font-size: 13px;
	margin: 0;
}

.cmp-page .faq-section {
	padding: 20px 0 110px;
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 90px;
}

.cmp-page .brief-grid {
	border-top: 1px solid var(--cmp-line);
}

.cmp-page .brief-grid div {
	padding: 20px 0;
	border-bottom: 1px solid var(--cmp-line);
	display: grid;
	grid-template-columns: 50px 1fr;
	font-size: 14px;
}

.cmp-page .brief-grid b {
	color: var(--cmp-blue);
}

.cmp-page .cta-section {
	position: relative;
	overflow: hidden;
	background: #eef4fc;
	padding: 90px 0;
}

.cmp-page .cta-layout {
	position: relative;
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 90px;
	align-items: center;
}

.cmp-page .cta-layout h2 {
	font-size: 48px;
	line-height: 1.06;
	letter-spacing: -.05em;
	margin: 0 0 20px;
}

.cmp-page .contact-card {
	background: #fff;
	padding: 38px;
	border: 1px solid #d8e3f4;
	box-shadow: 0 20px 45px rgba(29, 62, 118, .12);
}

.cmp-page .contact-card h3 {
	font-size: 25px;
	margin: 14px 0 26px;
}

.cmp-page .contact-card .button {
	width: 100%;
}

.cmp-page .response {
	text-align: center;
	font-size: 11px;
	margin: 16px 0 0;
	color: var(--cmp-muted);
}

@media (max-width: 1200px) {
	.cmp-page .reference-banner {
		margin-right: -24px;
	}
}

@media (max-width: 900px) {
	.cmp-page .hero-layout,
	.cmp-page .section-heading.split,
	.cmp-page .cta-layout,
	.cmp-page .faq-section {
		grid-template-columns: 1fr;
		gap: 28px;
	}


	.cmp-page .hero-copy {
		padding: 60px 0 24px;
	}

	.cmp-page .reference-banner {
		margin-right: 0;
		min-height: 390px;
	}

	.cmp-page .reference-banner:before {
		background: linear-gradient(180deg, #fff 0%, transparent 24%);
	}

	.cmp-page .trustbar,
	.cmp-page .capability-grid,
	.cmp-page .process-map,
	.cmp-page .steps {
		grid-template-columns: repeat(2, 1fr);
	}

	.cmp-page .material-grid {
		grid-template-columns: 1fr;
	}

	.cmp-page .application-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.cmp-page .showcase-grid {
		grid-template-columns: 1fr;
	}

	.cmp-page .showcase-image {
		height: 420px;
	}
}

@media (max-width: 600px) {
	.cmp-page .wrap {
		width: min(100% - 30px, 1180px);
	}

	.cmp-page .hero h1 {
		font-size: 48px;
	}

	.cmp-page .hero-actions {
		align-items: flex-start;
		flex-direction: column;
		gap: 18px;
	}

	.cmp-page .reference-banner {
		min-height: 280px;
	}

	.cmp-page .reference-banner:before {
		display: none;
	}

	.cmp-page .section,
	.cmp-page .dark-section,
	.cmp-page .product-showcase {
		padding: 74px 0;
	}

	.cmp-page .section-heading h2,
	.cmp-page .faq-title h2 {
		font-size: 35px;
	}

	.cmp-page .capability-grid,
	.cmp-page .process-map,
	.cmp-page .steps,
	.cmp-page .application-grid {
		grid-template-columns: 1fr;
	}

	.cmp-page .material-grid article {
		grid-template-columns: 1fr;
	}

	.cmp-page .material-photo {
		min-height: 230px;
	}

	.cmp-page .process-photo {
		height: 290px;
	}

	.cmp-page .showcase-image {
		height: 300px;
	}

	.cmp-page .showcase-grid article > div:last-child {
		padding: 24px;
	}

	.cmp-page .quality-panel {
		padding: 30px;
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.cmp-page .checks {
		grid-template-columns: 1fr;
	}

	.cmp-page .cta-layout h2 {
		font-size: 38px;
	}

	.cmp-page .cta-section {
		padding: 70px 0;
	}

}