/* PNG reference solutions: photographs remain assets; all copy is DOM text. */
.referenceSolutionsPage,
.referenceSolutionDetailPage {
	color: #0c192a;
	background: #fff;
}
.solutionListMain {
	max-width: 1920px;
	margin: auto;
}
.solutionListHero {
	height: 600px;
	position: relative;
	color: white;
	background: #073561;
	overflow: hidden;
}
.solutionListHero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			90deg,
			#063364 0%,
			rgba(3, 48, 88, 0.75) 40%,
			transparent 65%
		),
		var(--heroImage) center right 455px / auto 600px no-repeat;
}
.solutionHeroCopy {
	position: relative;
	padding: 84px 0 0 106px;
	z-index: 1;
}
.solutionEyebrow {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 3px;
	color: #6aafff;
}
.solutionHeroCopy > .solutionEyebrow {
	color: #16a3ef;
	font-size: 24px;
	letter-spacing: 5px;
}
.solutionHeroCopy h1 {
	font-size: 94px;
	font-weight: 700;
	line-height: 1.35;
	margin: 6px 0 16px;
}
.solutionHeroCopy h2 {
	font-size: 34px;
	line-height: 1.5;
}
.solutionHeroDescription {
	font-size: 29px;
	line-height: 1.6;
	white-space: pre-line;
	margin-top: 23px;
	color: #dae7f5;
}
.solutionBenefits {
	display: flex;
	gap: 38px;
	margin-top: 50px;
}
.solutionBenefits > div {
	display: flex;
	align-items: center;
	gap: 15px;
	font-size: 21px;
}
.solutionBenefits strong {
	display: block;
}
.solutionBenefits small {
	display: block;
	font-size: 19px;
	margin-top: 4px;
	color: #c3d6eb;
}
.solutionBenefitIcon {
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: #0d548f;
	border: 2px solid #246aa7;
	display: grid;
	place-items: center;
}
.solutionBenefitIcon svg {
	width: 40px;
	height: 40px;
}
.solutionHeroConsult {
	position: absolute;
	right: 54px;
	top: 128px;
	width: 436px;
	padding: 36px 34px 40px;
	border-radius: 8px;
	background: rgba(8, 40, 72, 0.87);
	border: 1px solid #375b7a;
	z-index: 2;
}
.solutionHeroConsult h2 {
	font-size: 34px;
	line-height: 1.45;
}
.solutionHeroConsult p {
	font-size: 26px;
	line-height: 1.55;
	margin: 23px 0 33px;
	color: #d5e0ec;
}
.solutionContact {
	background: #006cff;
	color: white;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 36px;
	border-radius: 6px;
	padding: 21px 36px;
	font-size: 25px;
	font-weight: 700;
	min-height: 78px;
}
.solutionHeroConsult .solutionContact {
	width: 100%;
	padding: 20px 16px;
	gap: 15px;
}
.solutionContact span {
	font-size: 30px;
}
.solutionListLayout {
	display: grid;
	grid-template-columns: 465px minmax(0, 1fr);
	gap: 42px;
	padding: 46px 62px 8px 64px;
	min-height: 2004px;
}
.solutionFilters {
	align-self: start;
	background: linear-gradient(100deg, #f4f9fc, #f0f6fa);
	padding: 40px 28px;
	width: 465px;
	height: auto;
	border-radius: 12px;
}
.solutionFilters h2 {
	font-size: 28px;
	margin-bottom: 16px;
}
.solutionCategoryButtons {
	display: flex;
	gap: 9px;
	align-items: center;
	flex-wrap: wrap;
}
.solutionCategoryButtons button {
	font-size: 21px;
	border: 1px solid #dce7f0;
	background: #edf5fb;
	border-radius: 8px;
	padding: 11px 17px;
	color: #45729b;
	font-weight: 700;
}
.solutionCategoryButtons .isActive {
	background: #0670ff;
	color: white;
}
.solutionFilters fieldset {
	border: 0;
	border-top: 2px solid #e0ebf3;
	padding: 24px 34px 23px;
	margin-top: 14px;
}
.solutionFilters legend {
	float: left;
	width: calc(100% + 68px);
	margin: 0 -34px 17px;
	display: flex;
	gap: 19px;
	align-items: center;
	font-size: 26px;
	font-weight: 700;
}
.solutionFilters legend svg {
	width: 34px;
	height: 34px;
	color: #0877dd;
}
.solutionFilters legend span {
	margin-left: auto;
	color: #416f9a;
}
.solutionFilters label {
	display: flex;
	align-items: center;
	gap: 16px;
	clear: both;
	font-size: 22px;
	line-height: 42px;
	color: #4b5e74;
}
.solutionFilters input {
	appearance: auto;
	width: 27px;
	height: 27px;
	accent-color: #0675ff;
}
.solutionSearchBar {
	height: 132px;
	background: #f4f8fb;
	display: flex;
	align-items: center;
	gap: 34px;
	padding: 24px 28px;
	border-radius: 10px;
	font-size: 23px;
	color: #49627f;
}
.solutionSearchBar > p {
	white-space: nowrap;
	font-weight: 700;
}
.solutionSearchBar strong {
	color: #006dff;
	font-size: 28px;
}
.solutionSearchBar label {
	border: 2px solid #d7e5f4;
	background: white;
	border-radius: 7px;
	height: 72px;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 0 20px;
	flex: 1;
}
.solutionSearchBar label span {
	font-size: 44px;
	line-height: 1;
	color: #3f6a92;
}
.solutionSearchBar input {
	width: 100%;
	font-size: 23px;
	min-width: 0;
}
.solutionSearchBar > div {
	width: 292px;
	height: 87px;
	background: white;
}
.solutionCards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	margin: 163px 0 0 6px;
}
.solutionCard {
	border: 2px solid #edf1f5;
	border-radius: 10px;
	overflow: hidden;
	min-width: 0;
	background: #fff;
}
.solutionCard > a {
	display: block;
	height: 100%;
}
.solutionCard img {
	width: 100%;
	height: 340px;
	object-fit: cover;
}
.solutionCardBody {
	padding: 23px 29px 20px;
	position: relative;
	height: 477px;
}
.solutionCardCategory {
	color: #2988ef;
	font-size: 23px;
	font-weight: 700;
}
.solutionCard h2 {
	font-size: 36px;
	line-height: 1.4;
	margin: 10px 0 16px;
	letter-spacing: -1.2px;
	white-space: nowrap;
}
.solutionCardDescription {
	font-size: 22px;
	line-height: 1.75;
	color: #7a8794;
	min-height: 91px;
}
.solutionCard dl {
	margin-top: 23px;
	font-size: 20px;
	color: #40617e;
}
.solutionCard dl > div {
	display: grid;
	grid-template-columns: 168px 1fr;
	gap: 3px;
	margin: 15px 0;
	white-space: nowrap;
}
.solutionCard dt {
	display: flex;
	gap: 18px;
	align-items: center;
}
.solutionCard dt svg {
	width: 29px;
	height: 29px;
	color: #087bff;
}
.solutionCard dd {
	color: #47617d;
	letter-spacing: -0.6px;
}
.solutionCardArrow {
	position: absolute;
	right: 23px;
	bottom: 19px;
	border: 2px solid #d7e7f7;
	width: 59px;
	height: 59px;
	border-radius: 50%;
	color: #137bff;
	display: grid;
	place-items: center;
	font-size: 39px;
	line-height: 1;
}
.solutionCard[hidden] {
	display: none;
}
.solutionNoResults {
	padding: 100px;
	font-size: 26px;
	text-align: center;
}
.solutionCta {
	height: 315px;
	position: relative;
	background:
		linear-gradient(90deg, #122b41 0%, #142d43 45%, transparent 72%),
		var(--ctaImage) right center / auto 100% no-repeat;
	color: white;
	overflow: hidden;
	border: 1px solid #7b8f9b;
}
.solutionCta > div {
	position: relative;
	padding: 30px 84px;
}
.solutionCta .solutionEyebrow {
	font-size: 15px;
	letter-spacing: 3px;
	color: #c9d7e4;
	margin-bottom: 20px;
}
.solutionCta h2 {
	font-size: 42px;
	line-height: 1.4;
	white-space: pre-line;
}
.solutionCta > div > p:not(.solutionEyebrow) {
	font-size: 22px;
	line-height: 1.6;
	margin: 9px 0 21px;
	color: #d0deeb;
	white-space: pre-line;
}
.solutionCta .solutionContact {
	font-size: 20px;
	min-height: 68px;
	padding: 17px 38px;
}
@media (max-width: 1400px) {
	.solutionListHero {
		height: 440px;
	}
	.solutionHeroCopy {
		padding: 45px 0 0 5%;
	}
	.solutionHeroCopy h1 {
		font-size: 62px;
	}
	.solutionHeroCopy h2 {
		font-size: 24px;
	}
	.solutionHeroDescription {
		font-size: 21px;
	}
	.solutionBenefits {
		gap: 20px;
		margin-top: 30px;
	}
	.solutionBenefits > div {
		font-size: 15px;
	}
	.solutionBenefits small {
		font-size: 14px;
	}
	.solutionBenefitIcon {
		width: 50px;
		height: 50px;
	}
	.solutionHeroConsult {
		right: 3%;
		top: 85px;
		width: 300px;
		padding: 25px;
	}
	.solutionHeroConsult h2 {
		font-size: 23px;
	}
	.solutionHeroConsult p {
		font-size: 18px;
	}
	.solutionContact {
		font-size: 18px;
		min-height: 58px;
		padding: 15px 20px;
		gap: 20px;
	}
	.solutionListLayout {
		grid-template-columns: 300px minmax(0, 1fr);
		padding: 32px;
		gap: 24px;
		min-height: auto;
	}
	.solutionFilters {
		width: 300px;
		height: auto;
		padding: 24px 18px;
	}
	.solutionFilters h2 {
		font-size: 23px;
	}
	.solutionCategoryButtons button {
		font-size: 16px;
		padding: 8px 12px;
	}
	.solutionFilters legend {
		font-size: 21px;
	}
	.solutionFilters label {
		font-size: 17px;
	}
	.solutionSearchBar {
		gap: 18px;
		font-size: 16px;
		padding: 18px;
		height: 96px;
	}
	.solutionSearchBar input {
		font-size: 16px;
	}
	.solutionSearchBar > div {
		display: none;
	}
	.solutionSearchBar label {
		height: 52px;
	}
	.solutionCards {
		margin-top: 100px;
		gap: 20px;
	}
	.solutionCard img {
		height: auto;
		aspect-ratio: 405/340;
	}
	.solutionCardBody {
		padding: 18px;
		height: 360px;
	}
	.solutionCard h2 {
		font-size: 22px;
		white-space: normal;
	}
	.solutionCardCategory,
	.solutionCardDescription {
		font-size: 16px;
	}
	.solutionCard dl {
		font-size: 13px;
	}
	.solutionCard dl > div {
		grid-template-columns: 100px 1fr;
	}
	.solutionCard dt {
		gap: 8px;
	}
	.solutionCard dt svg {
		width: 20px;
		height: 20px;
	}
	.solutionCta h2 {
		font-size: 30px;
	}
}
@media (max-width: 900px) {
	.solutionHeroConsult {
		display: none;
	}
	.solutionListHero::before {
		background-position: right -100px center;
		background-size: auto 100%;
		opacity: 0.7;
	}
	.solutionHeroCopy h2 {
		font-size: 20px;
	}
	.solutionBenefits {
		flex-wrap: wrap;
	}
	.solutionListLayout {
		display: block;
		padding: 20px;
	}
	.solutionFilters {
		width: 100%;
		height: auto;
		display: flex;
		flex-wrap: wrap;
		gap: 15px;
	}
	.solutionFilters fieldset {
		flex: 1;
		min-width: 220px;
	}
	.solutionSearchBar {
		margin-top: 20px;
	}
	.solutionSearchBar > p {
		font-size: 14px;
	}
	.solutionCards {
		margin: 35px 0;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.solutionCardBody {
		height: 380px;
	}
	.solutionCta > div {
		padding: 25px;
	}
	.solutionCta h2 {
		font-size: 26px;
	}
	.solutionCta > div > p:not(.solutionEyebrow) {
		font-size: 17px;
	}
}
@media (max-width: 520px) {
	.solutionHeroCopy {
		padding-top: 30px;
	}
	.solutionHeroCopy h1 {
		font-size: 45px;
	}
	.solutionHeroCopy h2 {
		font-size: 16px;
	}
	.solutionHeroDescription {
		font-size: 16px;
	}
	.solutionBenefits {
		gap: 12px;
	}
	.solutionBenefits > div {
		font-size: 12px;
	}
	.solutionBenefits small {
		font-size: 11px;
	}
	.solutionBenefitIcon {
		width: 35px;
		height: 35px;
	}
	.solutionBenefitIcon svg {
		width: 22px;
		height: 22px;
	}
	.solutionCards {
		grid-template-columns: 1fr;
	}
	.solutionCardBody {
		height: 360px;
	}
	.solutionSearchBar {
		display: block;
		height: auto;
	}
	.solutionSearchBar label {
		margin-top: 12px;
	}
	.solutionCta h2 {
		font-size: 23px;
	}
}
@media (min-width: 1401px) {
	.solutionCard:nth-child(n + 4) .solutionCardBody {
		height: 457px;
	}
}

/* Inline image URLs resolve relative to the document, rather than this CSS file. */
.solutionListHero {
	background-repeat: no-repeat;
	background-size: auto 600px;
	background-position: right 455px center;
}
.solutionListHero::before {
	background: linear-gradient(
		90deg,
		#063364 0%,
		rgba(3, 48, 88, 0.75) 40%,
		transparent 65%
	);
}
.solutionCta {
	background-color: #142d43;
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 920px 100%;
}
.solutionCta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		#122b41 0%,
		rgba(20, 45, 67, 0.9) 43%,
		transparent 70%
	);
}
.solutionCtaDetail {
	background-size: 945px 100%;
}
@media (max-width: 1400px) {
	.solutionListHero {
		background-size: auto 440px;
		background-position: right 300px center;
	}
}
@media (max-width: 900px) {
	.solutionListHero {
		background-position: right center;
	}
	.solutionCta {
		background-size: auto 100%;
	}
}
.solutionHeroConsult h2,
.solutionHeroConsult p {
	white-space: pre-line;
}
/* Tablet and phone: keep filters in reading order and text above photography. */
@media (max-width: 900px) {
	.solutionListHero::before {
		background: linear-gradient(
			90deg,
			rgba(4, 42, 77, 0.98),
			rgba(4, 42, 77, 0.5)
		);
		opacity: 1;
	}
	.solutionCta::before {
		background: linear-gradient(
			90deg,
			rgba(12, 34, 53, 0.95),
			rgba(12, 34, 53, 0.72)
		);
	}
	.solutionFilters {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 20px;
	}
	.solutionFilters h2,
	.solutionCategoryButtons {
		grid-column: 1/-1;
	}
	.solutionFilters h2 {
		margin: 0;
	}
	.solutionCategoryButtons {
		height: auto;
		min-height: 44px;
	}
	.solutionCategoryButtons button {
		min-height: 44px;
	}
	.solutionFilters fieldset {
		min-width: 0;
		width: 100%;
		padding: 20px 12px;
		margin-top: 0;
	}
	.solutionFilters legend {
		width: calc(100% + 24px);
		margin-left: -12px;
		margin-right: -12px;
		gap: 9px;
	}
	.solutionFilters label {
		min-height: 44px;
		line-height: 1.4;
		gap: 12px;
	}
	.solutionFilters input {
		flex: 0 0 27px;
	}
	.solutionSearchBar input {
		min-height: 44px;
	}
	.solutionCardArrow {
		min-width: 44px;
		min-height: 44px;
	}
}
@media (max-width: 520px) {
	.solutionFilters {
		grid-template-columns: 1fr;
	}
	.solutionHeroCopy h2 {
		max-width: 94%;
		line-height: 1.6;
	}
	.solutionHeroDescription {
		max-width: 94%;
	}
	.solutionBenefits {
		gap: 16px;
		max-width: 94%;
	}
	.solutionListHero::before {
		background: rgba(4, 42, 77, 0.77);
	}
	.solutionCta h2 {
		max-width: 100%;
		overflow-wrap: break-word;
	}
}

/* Apply the desktop rail dimensions to the component, independently of viewport width. */
@container (min-width: 901px) and (max-width: 1600px) {
	.solutionListHero {
		height: 440px;
	}
	.solutionHeroCopy {
		padding: 45px 0 0 5%;
	}
	.solutionHeroCopy h1 {
		font-size: 62px;
	}
	.solutionHeroCopy h2 {
		font-size: 24px;
	}
	.solutionHeroDescription {
		font-size: 21px;
	}
	.solutionBenefits {
		gap: 20px;
		margin-top: 30px;
	}
	.solutionBenefits > div {
		font-size: 15px;
	}
	.solutionBenefits small {
		font-size: 14px;
	}
	.solutionBenefitIcon {
		width: 50px;
		height: 50px;
	}
	.solutionHeroConsult {
		right: 3%;
		top: 85px;
		width: 300px;
		padding: 25px;
	}
	.solutionHeroConsult h2 {
		font-size: 23px;
	}
	.solutionHeroConsult p {
		font-size: 18px;
	}
	.solutionContact {
		font-size: 18px;
		min-height: 58px;
		padding: 15px 20px;
		gap: 20px;
	}
	.solutionListLayout {
		grid-template-columns: 300px minmax(0, 1fr);
		padding: 32px;
		gap: 24px;
		min-height: auto;
	}
	.solutionFilters {
		width: 300px;
		height: auto;
		padding: 24px 18px;
	}
	.solutionFilters h2 {
		font-size: 23px;
	}
	.solutionCategoryButtons button {
		font-size: 16px;
		padding: 8px 12px;
	}
	.solutionFilters legend {
		font-size: 21px;
	}
	.solutionFilters label {
		font-size: 17px;
	}
	.solutionSearchBar {
		gap: 18px;
		font-size: 16px;
		padding: 18px;
		height: 96px;
	}
	.solutionSearchBar input {
		font-size: 16px;
	}
	.solutionSearchBar > div {
		display: none;
	}
	.solutionSearchBar label {
		height: 52px;
	}
	.solutionCards {
		margin-top: 100px;
		gap: 20px;
	}
	.solutionCard img {
		height: auto;
		aspect-ratio: 405/340;
	}
	.solutionCardBody {
		padding: 18px;
		height: 360px;
	}
	.solutionCard h2 {
		font-size: 22px;
		white-space: normal;
	}
	.solutionCardCategory,
	.solutionCardDescription {
		font-size: 16px;
	}
	.solutionCard dl {
		font-size: 13px;
	}
	.solutionCard dl > div {
		grid-template-columns: 100px 1fr;
	}
	.solutionCard dt {
		gap: 8px;
	}
	.solutionCard dt svg {
		width: 20px;
		height: 20px;
	}
	.solutionCta h2 {
		font-size: 30px;
	}
}

@container (min-width:901px) and (max-width:1600px) {
	.solutionListHero {
		background-size: auto 440px;
		background-position: right 300px center;
	}
}

/* Formatter newlines are source whitespace, not visual paragraph breaks. */
.solutionHeroDescription,
.solutionHeroCopy h2,
.solutionHeroConsult h2,
.solutionHeroConsult p,
.solutionCard h2,
.solutionCardDescription,
.solutionCta h2,
.solutionCta > div > p:not(.solutionEyebrow) {
	white-space: normal;
	word-break: keep-all;
	overflow-wrap: break-word;
}
.solutionContact {
	white-space: nowrap;
}
.solutionContact > span {
	flex-shrink: 0;
}
.solutionHeroConsult .solutionContact {
	padding: 16px 12px;
	gap: 10px;
	font-size: 18px;
}
.solutionHeroConsult .solutionContactIcon {
	font-size: 22px;
}
.solutionHeroConsult .solutionContactLabel {
	font-size: inherit;
	min-width: 0;
	flex-shrink: 0;
}
.solutionCta > div > h2,
.solutionCta > div > p:not(.solutionEyebrow) {
	max-width: 70%;
}
.solutionCta::before {
	background: linear-gradient(
		90deg,
		#122b41 0%,
		rgba(20, 45, 67, 0.94) 48%,
		rgba(20, 45, 67, 0.5) 70%,
		transparent 100%
	);
}
@container (min-width:901px) and (max-width:1200px) {
	.solutionCards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 900px) {
	.solutionCta > div > h2,
	.solutionCta > div > p:not(.solutionEyebrow) {
		max-width: 100%;
	}
	.solutionCta::before {
		background: linear-gradient(
			90deg,
			rgba(12, 34, 53, 0.97),
			rgba(12, 34, 53, 0.78)
		);
	}
}
@container (min-width:901px) and (max-width:1600px) {
	.solutionHeroCopy {
		max-width: calc(100% - 370px);
	}
	.solutionBenefits {
		flex-wrap: wrap;
	}
}
@media (max-width: 900px) {
	.solutionHeroCopy {
		max-width: 100%;
	}
}
.solutionCardDescription {
	color: #647386;
}
@container (min-width:901px) and (max-width:1200px) {
	.solutionListHero {
		height: auto;
		min-height: 440px;
		background-size: auto 100%;
	}
	.solutionHeroCopy {
		padding-bottom: 32px;
	}
}

/* The list photograph fills the hero height; copy and consultation use a
   centered rail with reserved space for the supplied narrow photo crop. */
.referenceSolutionsPage .solutionListMain {
	max-width: none;
}
.referenceSolutionsPage .solutionListHero {
	height: auto;
	min-height: 600px;
	background-size: auto 100%;
	background-position: calc(50% + 240px) center;
}
.referenceSolutionsPage .solutionListHero::before {
	background: linear-gradient(
		90deg,
		#063364 0%,
		rgba(3, 48, 88, 0.92) 34%,
		rgba(3, 48, 88, 0.12) 60%,
		transparent 76%
	);
	opacity: 1;
}
.solutionHeroInner {
	position: relative;
	z-index: 1;
	width: min(1600px, calc(100% - 64px));
	min-height: 600px;
	margin: auto;
	padding-block: 60px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	align-items: center;
	gap: 32px;
}
.solutionHeroInner .solutionHeroCopy {
	padding: 0;
	max-width: min(760px, calc(50vw - 180px));
}
.solutionHeroInner .solutionHeroCopy > .solutionEyebrow {
	font-size: 22px;
}
.solutionHeroInner .solutionHeroCopy h1 {
	font-size: clamp(54px, 4.8vw, 82px);
	line-height: 1.25;
	margin: 12px 0 24px;
}
.solutionHeroInner .solutionHeroCopy h2 {
	font-size: clamp(22px, 1.6vw, 28px);
	line-height: 1.5;
}
.solutionHeroInner .solutionHeroDescription {
	font-size: 22px;
	line-height: 1.6;
	margin-top: 20px;
}
.solutionHeroInner .solutionBenefits {
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 36px;
	max-width: 100%;
}
.solutionHeroInner .solutionBenefits > div {
	font-size: 15px;
	gap: 12px;
}
.solutionHeroInner .solutionBenefits small {
	font-size: 13px;
}
.solutionHeroInner .solutionBenefitIcon {
	width: 52px;
	height: 52px;
	flex: 0 0 52px;
}
.solutionHeroInner .solutionBenefitIcon svg {
	width: 30px;
	height: 30px;
}
.solutionHeroInner .solutionHeroConsult {
	position: relative;
	top: auto;
	right: auto;
	width: 100%;
	padding: 28px 24px;
	background: rgba(8, 40, 72, 0.95);
}
.solutionHeroInner .solutionHeroConsult h2 {
	font-size: 25px;
}
.solutionHeroInner .solutionHeroConsult p {
	font-size: 18px;
	margin: 20px 0 26px;
}
.referenceSolutionsPage .solutionListLayout {
	width: min(1600px, calc(100% - 64px));
	margin: auto;
	padding: 48px 0 56px;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 32px;
	min-height: 0;
}
.referenceSolutionsPage .solutionFilters {
	width: 100%;
	padding: 28px 20px;
}
.referenceSolutionsPage .solutionFilters h2 {
	font-size: 24px;
}
.referenceSolutionsPage .solutionCategoryButtons button {
	min-height: 44px;
	font-size: 17px;
	padding: 9px 15px;
}
.solutionCategoryButtons button:focus-visible {
	outline: 3px solid #063364;
	outline-offset: 3px;
}
.referenceSolutionsPage .solutionFilters fieldset {
	padding-inline: 14px;
}
.referenceSolutionsPage .solutionFilters legend {
	width: calc(100% + 28px);
	margin-inline: -14px;
	font-size: 21px;
	gap: 12px;
}
.referenceSolutionsPage .solutionFilters label {
	font-size: 16px;
	gap: 12px;
}
.referenceSolutionsPage .solutionSearchBar {
	height: auto;
	min-height: 96px;
	padding: 20px 24px;
	gap: 24px;
	font-size: 18px;
}
.referenceSolutionsPage .solutionSearchBar input {
	font-size: 17px;
}
.referenceSolutionsPage .solutionSearchBar label {
	height: 56px;
	min-width: 0;
}
.referenceSolutionsPage .solutionCards {
	margin: 40px 0 0;
	gap: 24px;
}
.referenceSolutionsPage .solutionCard img {
	height: auto;
	aspect-ratio: 405 / 340;
}
.referenceSolutionsPage .solutionCardBody {
	height: auto;
	min-height: 370px;
	padding: 24px 24px 82px;
}
.referenceSolutionsPage .solutionCard h2 {
	font-size: 28px;
}
.referenceSolutionsPage .solutionCardCategory,
.referenceSolutionsPage .solutionCardDescription {
	font-size: 17px;
}
.referenceSolutionsPage .solutionCardDescription {
	min-height: 90px;
}
.referenceSolutionsPage .solutionCard dl {
	font-size: 15px;
}
.referenceSolutionsPage .solutionCard dl > div {
	grid-template-columns: 110px minmax(0, 1fr);
	white-space: normal;
	line-height: 1.5;
}
.referenceSolutionsPage .solutionCard dt {
	gap: 9px;
}
.referenceSolutionsPage .solutionCard dt svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}
.referenceSolutionsPage .solutionNoResults {
	padding: 60px 20px;
	font-size: 20px;
}
.solutionListMain > .solutionCta > div {
	width: min(1600px, calc(100% - 64px));
	margin: auto;
	padding: 30px 0;
}
@media (max-width: 1200px) {
	.referenceSolutionsPage .solutionListHero {
		background-position: calc(50% + 190px) center;
	}
	.solutionHeroInner {
		grid-template-columns: minmax(0, 1fr) 280px;
		gap: 24px;
	}
	.solutionHeroInner .solutionHeroCopy {
		max-width: calc(50vw - 140px);
	}
	.solutionHeroInner .solutionHeroConsult h2 {
		font-size: 22px;
	}
	.solutionHeroInner .solutionHeroConsult p {
		font-size: 16px;
	}
	.referenceSolutionsPage .solutionListLayout {
		grid-template-columns: 260px minmax(0, 1fr);
		gap: 24px;
	}
	.referenceSolutionsPage .solutionCards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 900px) {
	.referenceSolutionsPage .solutionListHero {
		min-height: 0;
		background-size: auto 280px;
		background-position: right bottom;
	}
	.referenceSolutionsPage .solutionListHero::before {
		background: linear-gradient(
			180deg,
			#063364 0%,
			rgba(3, 48, 88, 0.9) 45%,
			rgba(3, 48, 88, 0.08) 80%
		);
	}
	.solutionHeroInner {
		width: min(1600px, calc(100% - 40px));
		min-height: 0;
		display: block;
		padding: 40px 0 310px;
	}
	.solutionHeroInner .solutionHeroCopy {
		max-width: 100%;
	}
	.solutionHeroInner .solutionHeroCopy h1 {
		font-size: 52px;
	}
	.solutionHeroInner .solutionHeroDescription {
		font-size: 19px;
	}
	.solutionHeroInner .solutionHeroConsult {
		display: none;
	}
	.referenceSolutionsPage .solutionListLayout {
		display: block;
		width: calc(100% - 40px);
		padding: 28px 0 40px;
	}
	.referenceSolutionsPage .solutionFilters h2,
	.referenceSolutionsPage .solutionCategoryButtons {
		grid-column: 1 / -1;
	}
	.referenceSolutionsPage .solutionSearchBar {
		margin-top: 24px;
	}
	.solutionListMain > .solutionCta > div {
		width: calc(100% - 40px);
	}
}
@media (max-width: 520px) {
	.solutionHeroInner .solutionHeroCopy h1 {
		font-size: 44px;
	}
	.solutionHeroInner .solutionHeroCopy h2,
	.solutionHeroInner .solutionHeroDescription {
		max-width: 100%;
		font-size: 17px;
	}
	.solutionHeroInner .solutionBenefits {
		gap: 16px;
		margin-top: 28px;
	}
	.referenceSolutionsPage .solutionCards {
		grid-template-columns: 1fr;
	}
	.referenceSolutionsPage .solutionCardBody {
		min-height: 0;
	}
	.referenceSolutionsPage .solutionSearchBar {
		display: block;
	}
	.referenceSolutionsPage .solutionSearchBar label {
		margin-top: 12px;
	}
}