.lsc-banner__container {
	width: 100%;
	min-height: 28.125rem;
	position: relative;
	display: grid;
	grid-template-columns: 50% 50%;
	overflow: hidden;
}

@media only screen and (max-width: 63.9375em) {
	.lsc-banner__container {
		grid-template-columns: 100%;
	}
}

.lsc-banner__background-image-wrapper {
	display: contents;
}

.lsc-banner__background-image {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.lsc-banner__text-container {
	z-index: 5;
	padding: 5vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media only screen and (max-width: 63.9375em) {
	.lsc-banner__text-container {
		transform: none !important;
		padding-left: 1.75rem;
		padding-right: 1.75rem;
	}
}

.lsc-banner__subtitle-container {
	margin-bottom: .625rem;
	font-family: BarlowMedium, Arial, Helvetica Neue, Helvetica, sans-serif;
	font-weight: 400;
	font-style: normal;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.lsc-banner__subtitle-image {
	height: 3.25rem;
}

@media only screen and (max-width: 63.9375em) {
	.lsc-banner__subtitle-image {
		height: 2.25rem;
	}
}

.lsc-banner__title {
	font-family: BarlowMedium, Arial, Helvetica Neue, Helvetica, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 3rem;
	line-height: 3.5rem;
}


@media only screen and (max-width: 63.9375em) {
	.lsc-banner__title {
		font-size: 2rem;
		line-height: 2.5rem;
	}
}

.lsc-banner__copy-text {
	font-family: BarlowRegular, Arial, Helvetica Neue, Helvetica, sans-serif;
	font-weight: 400;
	font-style: normal;
	margin-bottom: .5rem;
	font-size: 1.5rem;
	line-height: 2rem;
	margin-bottom: 1rem;
}


@media only screen and (max-width: 48em) {
	.lsc-banner__copy-text {
		font-size: 1.25rem;
		line-height: 1.625rem;
	}
}

.lsc-banner__media-container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: end;
	flex-grow: 1;
}

@media only screen and (max-width: 63.9375em) {
	.lsc-banner__media-container {
		overflow: hidden;
	}
}

.lsc-banner__media-wrapper {
	z-index: 3;
	margin-top: 3.125rem;
	margin-bottom: 3.125rem;
	width: 100%;
	clip-path: url("#lsc-banner__media-mask");
}

@media only screen and (max-width: 63.9375em) {
	.lsc-banner__media-wrapper {
		margin-top: 5%;
		margin-bottom: 5%;
	}
}

.lsc-banner__media-mask-wrapper {
	height: 0;
}

.lsc-banner__image {
	display: block;
	width: 100%;
	aspect-ratio: 2;
	object-fit: cover;
}

.lsc-banner__glasss-container {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.lsc-banner__glasss-container svg {
	position: absolute;
	z-index: 2;
}

.lsc-banner__glass-1 {
	top: 0;
	left: 5%;
}

.lsc-banner__glass-2 {
	bottom: -85%;
	left: -10%;
	height: 100%;
}

.lsc-banner__glass-3 {
	height: 100%;
	left: 10%;
}

.lsc-banner__glass-4 {
	height: 80%;
	bottom: -10%;
	left: -20%;
}

.lsc-banner__glass-5 {
	right: -10%;
	bottom: -10%;
}

.lsc-banner__glass-background {
	z-index: 1;
	position: absolute;
	width: 100%;
	height: 100%;
}

.lsc-banner__container[data-color="lsc-green"] .lsc-banner__glass-background {
	background: linear-gradient(101.93deg, rgba(119, 0, 86, 0) 52.06%, #C5DC2F 84.77%);
}

.lsc-banner__container[data-color="lsc-green"] .stop1 {
	stop-color: #327220;
}

.lsc-banner__container[data-color="lsc-green"] .stop2 {
	stop-color: #C5DC2F;
}

.lsc-banner__container[data-color="lsc-green"] .lsc-banner__glass-3 path {
	fill: #327220;
}

.lsc-banner__container[data-color="lsc-green"] .lsc-banner__glass-5 path {
	fill: #C5DC2F;
}



.lsc-banner__container {
	width: 100%;
	min-height: 28.125rem;
	position: relative;
	display: grid;
	grid-template-columns: 50% 50%;
	overflow: hidden;
	background: #f9f9f9;
}

@media only screen and (max-width: 63.9375em) {
	.lsc-banner__container {
		grid-template-columns: 100%;
	}
}

.lsc-banner__background-image-wrapper {
	display: contents;
}

.lsc-banner__background-image {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.lsc-banner__text-container {
	z-index: 5;
	padding: 5vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media only screen and (max-width: 63.9375em) {
	.lsc-banner__text-container {
		transform: none !important;
		padding-left: 1.75rem;
		padding-right: 1.75rem;
	}
}

.lsc-banner__subtitle-container {
	margin-bottom: .625rem;
	font-family: BarlowMedium, Arial, Helvetica Neue, Helvetica, sans-serif;
	font-weight: 400;
	font-style: normal;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 1.25rem;
}


.lsc-banner__subtitle-image {
	height: 3.25rem;
}

@media only screen and (max-width: 63.9375em) {
	.lsc-banner__subtitle-image {
		height: 2.25rem;
	}
}

.lsc-banner__title {
	font-family: BarlowMedium, Arial, Helvetica Neue, Helvetica, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 3rem;
	line-height: 3.5rem;
}


@media only screen and (max-width: 63.9375em) {
	.lsc-banner__title {
		font-size: 2rem;
		line-height: 2.5rem;
	}
}

.lsc-banner__copy-text {
	font-family: BarlowRegular, Arial, Helvetica Neue, Helvetica, sans-serif;
	font-weight: 400;
	font-style: normal;
	margin-bottom: .5rem;
	font-size: 1.5rem;
	line-height: 2rem;
	margin-bottom: 1rem;
}


@media only screen and (max-width: 48em) {
	.lsc-banner__copy-text {
		font-size: 1.25rem;
		line-height: 1.625rem;
	}
}

.lsc-banner__media-container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: end;
	flex-grow: 1;
}

@media only screen and (max-width: 63.9375em) {
	.lsc-banner__media-container {
		overflow: hidden;
	}
}

.lsc-banner__media-wrapper {
	z-index: 3;
	margin-top: 3.125rem;
	margin-bottom: 3.125rem;
	width: 100%;
	clip-path: url("#lsc-banner__media-mask");
}

@media only screen and (max-width: 63.9375em) {
	.lsc-banner__media-wrapper {
		margin-top: 5%;
		margin-bottom: 5%;
	}
}

.lsc-banner__media-mask-wrapper {
	height: 0;
}

.lsc-banner__image {
	display: block;

	width: 100%;
	aspect-ratio: 2;
	object-fit: cover;
}

.lsc-banner__glasss-container {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.lsc-banner__glasss-container svg {
	position: absolute;
	z-index: 2;
}

.lsc-banner__glass-1 {
	top: 0;
	left: 5%;
}

.lsc-banner__glass-2 {
	bottom: -85%;
	left: -10%;
	height: 100%;
}

.lsc-banner__glass-3 {
	height: 100%;
	left: 10%;
}

.lsc-banner__glass-4 {
	height: 80%;
	bottom: -10%;
	left: -20%;
}

.lsc-banner__glass-5 {
	right: -10%;
	bottom: -10%;
}

.lsc-banner__glass-background {
	z-index: 1;
	position: absolute;
	width: 100%;
	height: 100%;
}
.lsc-banner__container {
	width: 100%;
	min-height: 28.125rem;
	position: relative;
	display: grid;
	grid-template-columns: 50% 50%;
	overflow: hidden;
}

@media only screen and (max-width: 63.9375em) {
	.lsc-banner__container {
		grid-template-columns: 100%;
	}
}

.lsc-banner__background-image-wrapper {
	display: contents;
}

.lsc-banner__background-image {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.lsc-banner__text-container {
	z-index: 5;
	padding: 5vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media only screen and (max-width: 63.9375em) {
	.lsc-banner__text-container {
		transform: none !important;
		padding-left: 1.75rem;
		padding-right: 1.75rem;
	}
}

.lsc-banner__subtitle-container {
	margin-bottom: .625rem;
	font-family: BarlowMedium, Arial, Helvetica Neue, Helvetica, sans-serif;
	font-weight: 400;
	font-style: normal;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.lsc-banner__subtitle-image {
	height: 3.25rem;
}

@media only screen and (max-width: 63.9375em) {
	.lsc-banner__subtitle-image {
		height: 2.25rem;
	}
}

.lsc-banner__title {
	font-family: BarlowMedium, Arial, Helvetica Neue, Helvetica, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 3rem;
	line-height: 3.5rem;
}


@media only screen and (max-width: 63.9375em) {
	.lsc-banner__title {
		font-size: 2rem;
		line-height: 2.5rem;
	}
}

.lsc-banner__copy-text {
	font-family: BarlowRegular, Arial, Helvetica Neue, Helvetica, sans-serif;
	font-weight: 400;
	font-style: normal;
	margin-bottom: .5rem;
	font-size: 1.5rem;
	line-height: 2rem;
	margin-bottom: 1rem;
}


@media only screen and (max-width: 48em) {
	.lsc-banner__copy-text {
		font-size: 1.25rem;
		line-height: 1.625rem;
	}
}

.lsc-banner__media-container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: end;
	flex-grow: 1;
}

@media only screen and (max-width: 63.9375em) {
	.lsc-banner__media-container {
		overflow: hidden;
	}
}

.lsc-banner__media-wrapper {
	z-index: 3;
	margin-top: 3.125rem;
	margin-bottom: 3.125rem;
	width: 100%;
	clip-path: url("#lsc-banner__media-mask");
}

@media only screen and (max-width: 63.9375em) {
	.lsc-banner__media-wrapper {
		margin-top: 5%;
		margin-bottom: 5%;
	}
}

.lsc-banner__media-mask-wrapper {
	height: 0;
}

.lsc-banner__image {
	display: block;
	width: 100%;
	aspect-ratio: 2;
	object-fit: cover;
}

.lsc-banner__glasss-container {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.lsc-banner__glasss-container svg {
	position: absolute;
	z-index: 2;
}

.lsc-banner__glass-1 {
	top: 0;
	left: 5%;
}

.lsc-banner__glass-2 {
	bottom: -85%;
	left: -10%;
	height: 100%;
}

.lsc-banner__glass-3 {
	height: 100%;
	left: 10%;
}

.lsc-banner__glass-4 {
	height: 80%;
	bottom: -10%;
	left: -20%;
}

.lsc-banner__glass-5 {
	right: -10%;
	bottom: -10%;
}

.lsc-banner__glass-background {
	z-index: 1;
	position: absolute;
	width: 100%;
	height: 100%;
}

.lsc-banner__container[data-color="lsc-green"] .lsc-banner__glass-background {
	background: linear-gradient(101.93deg, rgba(119, 0, 86, 0) 52.06%, #C5DC2F 84.77%);
}

.lsc-banner__container[data-color="lsc-green"] .stop1 {
	stop-color: #327220;
}

.lsc-banner__container[data-color="lsc-green"] .stop2 {
	stop-color: #C5DC2F;
}

.lsc-banner__container[data-color="lsc-green"] .lsc-banner__glass-3 path {
	fill: #327220;
}

.lsc-banner__container[data-color="lsc-green"] .lsc-banner__glass-5 path {
	fill: #C5DC2F;
}



.lsc-banner__container {
	width: 100%;
	min-height: 28.125rem;
	position: relative;
	display: grid;
	grid-template-columns: 50% 50%;
	overflow: hidden;
	background: #f9f9f9;
}

@media only screen and (max-width: 63.9375em) {
	.lsc-banner__container {
		grid-template-columns: 100%;
	}
}

.lsc-banner__background-image-wrapper {
	display: contents;
}

.lsc-banner__background-image {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.lsc-banner__text-container {
	z-index: 5;
	padding: 5vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media only screen and (max-width: 63.9375em) {
	.lsc-banner__text-container {
		transform: none !important;
		padding-left: 1.75rem;
		padding-right: 1.75rem;
	}
}

.lsc-banner__subtitle-container {
	margin-bottom: .625rem;
	font-family: BarlowMedium, Arial, Helvetica Neue, Helvetica, sans-serif;
	font-weight: 400;
	font-style: normal;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 1.25rem;
}


.lsc-banner__subtitle-image {
	height: 3.25rem;
}

@media only screen and (max-width: 63.9375em) {
	.lsc-banner__subtitle-image {
		height: 2.25rem;
	}
}

.lsc-banner__title {
	font-family: BarlowMedium, Arial, Helvetica Neue, Helvetica, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 3rem;
	line-height: 3.5rem;
}


@media only screen and (max-width: 63.9375em) {
	.lsc-banner__title {
		font-size: 2rem;
		line-height: 2.5rem;
	}
}

.lsc-banner__copy-text {
	font-family: BarlowRegular, Arial, Helvetica Neue, Helvetica, sans-serif;
	font-weight: 400;
	font-style: normal;
	margin-bottom: .5rem;
	font-size: 1.5rem;
	line-height: 2rem;
	margin-bottom: 1rem;
}


@media only screen and (max-width: 48em) {
	.lsc-banner__copy-text {
		font-size: 1.25rem;
		line-height: 1.625rem;
	}
}

.lsc-banner__media-container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: end;
	flex-grow: 1;
}

@media only screen and (max-width: 63.9375em) {
	.lsc-banner__media-container {
		overflow: hidden;
	}
}

.lsc-banner__media-wrapper {
	z-index: 3;
	margin-top: 3.125rem;
	margin-bottom: 3.125rem;
	width: 100%;
	clip-path: url("#lsc-banner__media-mask");
}

@media only screen and (max-width: 63.9375em) {
	.lsc-banner__media-wrapper {
		margin-top: 5%;
		margin-bottom: 5%;
	}
}

.lsc-banner__media-mask-wrapper {
	height: 0;
}

.lsc-banner__image {
	display: block;

	width: 100%;
	aspect-ratio: 2;
	object-fit: cover;
}

.lsc-banner__glasss-container {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.lsc-banner__glasss-container svg {
	position: absolute;
	z-index: 2;
}

.lsc-banner__glass-1 {
	top: 0;
	left: 5%;
}

.lsc-banner__glass-2 {
	bottom: -85%;
	left: -10%;
	height: 100%;
}

.lsc-banner__glass-3 {
	height: 100%;
	left: 10%;
}

.lsc-banner__glass-4 {
	height: 80%;
	bottom: -10%;
	left: -20%;
}

.lsc-banner__glass-5 {
	right: -10%;
	bottom: -10%;
}

.lsc-banner__glass-background {
	z-index: 1;
	position: absolute;
	width: 100%;
	height: 100%;
}


/* ---------------------------------------------------------------------------
   Breadcrumbs inside the banner.

   The equipment pages previously styled .page-breadcrumbs under
   .lsc-equipment-hero in lsc-block-styles.css, tuned for white-on-dark. The
   banner sits on a light background and does not carry that class, so without
   these rules the list falls back to browser defaults: bullets, stacked,
   indented. Same layout as before, retuned for the light background.

   Templates that leave $banner_breadcrumbs unset render no list at all, which
   matches the industry pages.
   --------------------------------------------------------------------------- */
.lsc-banner .page-breadcrumbs {
	padding: 0;
	margin: 0 0 12px;
	list-style: none;
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.lsc-banner .page-breadcrumbs li {
	font-size: 0.85rem;
	line-height: 1.4;
	color: rgba(18, 21, 24, 0.55);
}

.lsc-banner .page-breadcrumbs li a {
	color: rgba(18, 21, 24, 0.75);
	text-decoration: none;
	transition: color 0.2s;
}

.lsc-banner .page-breadcrumbs li a:hover {
	color: #2A5C18;
	text-decoration: underline;
}

.lsc-banner .page-breadcrumbs li + li::before {
	content: '\203A';
	padding: 0 8px;
	color: rgba(18, 21, 24, 0.35);
	font-size: 1rem;
	line-height: 1;
}
/* Banner logo.
 *
 * CHANGED 2026-08-10 so this matches the product pages, which render their
 * logo with an inline style="width:75%;height:auto" plus .mx-auto inside
 * .lsc-banner__text-container.text-center (see products.php).
 *
 * What was wrong with the old rule, and it was NOT simply "too small":
 *
 *   .lsc-banner__text-container is display:flex; flex-direction:column, so
 *   its children stretch across the cross axis. width:auto therefore did not
 *   resolve to the image's intrinsic width, it stretched the box to 100% of
 *   the container. max-height:11rem then capped that box, and
 *   object-fit:contain letterboxed the artwork inside it.
 *
 *   Measured on the OPS Series banner at 1920px: a 660x200 logo rendered in
 *   a 768x176 box with the artwork painted at 581x176, leaving 94px of dead
 *   space on EACH side. That gap is why the logo read as small and adrift
 *   next to the same-width product page banners.
 *
 *   .lsc-banner__logo--center could not fix it either: auto margins have no
 *   free space to distribute while the box is stretched to full width.
 *
 * An explicit width stops the stretch, so the box is the artwork again and
 * the auto margins have something to centre. At 1440px the OPS logo now
 * renders at exactly the same 432x131 as an equivalent product page logo,
 * centred on the same axis as its tagline.
 *
 * max-height is kept, deliberately, as a guard rather than a sizing rule.
 * The product page has no cap at all, which means a portrait logo would
 * render 806px tall at 1920 and push the banner apart. vh rather than rem so
 * the guard scales with the screen instead of biting harder as it shrinks.
 * For any logo wider than roughly 2:1, which is every logo LSC uses, the
 * guard never engages and this behaves exactly like the product page.
 *
 * Blast radius: template/lsc-banner.php is the only consumer, and exactly
 * one row in the database carries a header_logo today (sub_categories 35,
 * OPS Series). Every other banner falls back to a text title and is
 * untouched by this.
 */
.lsc-banner__logo {
	display: block;
	width: 75%;
	height: auto;
	max-width: 75%;
	max-height: 40vh;
	margin: 0 auto 1rem;
	object-fit: contain;
}

@media only screen and (max-width: 63.9375em) {
	.lsc-banner__logo {
		max-height: 32vh;
	}
}

.lsc-banner__title-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.lsc-banner__logo--center {
	margin-left: auto;
	margin-right: auto;
}