/* Variables */
:root {
	--site-pad: 2.5rem;
	--container: 1220px;

	/* colors */
	--navy: #172154;
	--yellow: #ffb50d;
	--yellow-burnt: #d67600;
	--gray: #959595;
	--gray-light: #e3e3e3;
	--tan: #ffc674;
	--tan-light: #f6f3f0;
	--tan-light-g: linear-gradient(
		0deg,
		rgb(255, 255, 255) 0%,
		rgba(246, 243, 240, 100%) 100%
	);

	/* fonts */
	--font-primary: poppins, sans-serif;
	--font-secondary: avenir-lt-pro, sans-serif;
}

/* Reset */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	background: var(--gray-light);
}

body {
	min-height: 100vh;
	line-height: 1.5;
	max-width: 1440px;
	margin: 0 auto;
	background: #fff;
	font-family: var(--font-primary);
}

img,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

button,
input,
textarea,
select {
	font: inherit;
	border: none;
	background: none;
}

button {
	cursor: pointer;
}

input,
textarea,
select {
	width: 100%;
	min-width: 0;
}

html {
	scroll-behavior: smooth;
}

/* Utility */
.container {
	width: 100%;
	max-width: calc(var(--container) + var(--site-pad) + var(--site-pad));
	margin: 0 auto;
	padding: 0 var(--site-pad);
}
.hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* universal */
.btn1 {
	border-radius: 4px;
	background: linear-gradient(
		-103deg,
		#ffc674 -4.84%,
		#ffb50d 24.98%,
		#d67600 95.73%
	);
	color: #fff;
	font-family: var(--font-primary);
	font-size: 1rem;
	line-height: 1.5;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.48px;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
	text-decoration: none;
	align-self: center;
	padding: 11px 22px 9px 22px;
	white-space: nowrap;
	position: relative;
	z-index: 2;
	display: inline-block;

	&::after {
		content: "";
		position: absolute;
		inset: 1px;
		border-radius: 3px;
		background: linear-gradient(
			103deg,
			#ffc674 -4.84%,
			#ffb50d 24.98%,
			#d67600 95.73%
		);
		z-index: -1;
		transition: opacity 0.15s ease;
	}

	&:hover::after,
	&:focus-visible::after {
		opacity: 0;
	}
}
.nav {
	.secondary {
		background: var(--navy);
		padding: 0 50px;

		@media (width < 1341px) {
			padding: 0 var(--site-pad);
		}

		nav {
			margin: 0 -10px 0 0;
			display: flex;
			justify-content: flex-end;
		}

		a {
			font-family: var(--font-primary);
			font-size: 14px;
			font-weight: 500;
			color: var(--tan);
			text-decoration: none;
			padding: 14px 10px;

			&:hover,
			&:focus-visible {
				color: var(--tan-light);
			}
		}
	}

	.primary {
		padding: 30px 50px;
		background: #fff;
		z-index: 2;

		@media (width < 1341px) {
			padding: 30px var(--site-pad);
		}

		.group {
			display: flex;
			gap: 2rem;
			justify-content: space-between;
			align-items: center;
		}

		nav {
			display: flex;

			a:not(:last-child) {
				font-family: var(--font-primary);
				color: var(--navy);
				padding: 1rem;
				text-decoration: none;
				font-size: 16px;
				font-weight: 500;
				position: relative;

				&::after {
					content: "";
					position: absolute;
					inset: auto auto 0.8rem 50%;
					translate: -50% 0;
					height: 2px;
					width: 0%;
					border-radius: 10px;
					background: var(--yellow);
					transition: width 0.1s ease-in-out;
				}

				&:hover::after,
				&:focus-visible::after {
					width: 75%;
				}
			}

			a:last-child {
				border-radius: 4px;
				background: linear-gradient(
					-103deg,
					#ffc674 -4.84%,
					#ffb50d 24.98%,
					#d67600 95.73%
				);
				color: #fff;
				font-family: var(--font-primary);
				font-size: 1rem;
				line-height: 1.5;
				font-style: normal;
				font-weight: 700;
				letter-spacing: 0.48px;
				text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
				text-decoration: none;
				align-self: center;
				padding: 11px 22px 9px 22px;
				white-space: nowrap;
				position: relative;
				z-index: 2;
				display: inline-block;
				margin: 0 0 0 1rem;

				&::after {
					content: "";
					position: absolute;
					inset: 1px;
					border-radius: 3px;
					background: linear-gradient(
						103deg,
						#ffc674 -4.84%,
						#ffb50d 24.98%,
						#d67600 95.73%
					);
					z-index: -1;
					transition: opacity 0.15s ease;
				}

				&:hover::after,
				&:focus-visible::after {
					opacity: 0;
				}
			}
		}
	}

	.toggle,
	[data-mobile],
	.close {
		display: none;
	}

	.toggle {
		width: 40px;
		height: 40px;
		text-align: center;
	}

	@media (width < 820px) {
		.secondary {
			display: none;
		}
		.primary {
			position: relative;

			&::after {
				content: "";
				position: absolute;
				inset: 0;
				background: #fff;
				z-index: -1;
				transition: opacity 0.3s ease;
			}

			.logo {
				width: clamp(132px, 10vw, 206px);
			}

			nav {
				position: absolute;
				inset: 0 0 auto 0;
				flex-direction: column;
				align-items: center;
				padding: 10rem 0 5rem 0;
				background: #fff;
				z-index: -1;
				transform: translateY(-100%);
				transition: translate 0.3s ease;

				.btn1 {
					margin: 1rem 0 0 0;
				}
			}
		}

		.toggle,
		[data-mobile],
		.close {
			display: unset;
		}
	}

	[data-opened="false"] {
		.toggle {
			img:first-child {
				display: inline-block;
			}

			img:last-child {
				display: none;
			}
		}
	}

	[data-opened="true"] {
		.toggle {
			img:first-child {
				display: none;
			}

			img:last-child {
				display: inline-block;
			}
		}
		nav {
			translate: 0 100%;
		}
	}
}

.hero {
	padding: 50px 0;

	&.wide {
		.group {
			max-width: calc(1340px + var(--site-pad) + var(--site-pad));

			padding: 0 var(--site-pad);
		}
	}

	&.edge {
		.group {
			max-width: calc(1360px + var(--site-pad) + var(--site-pad));
			padding: 0 0 0 var(--site-pad);

			.img {
				border-radius: 2.5rem 0 0 2.5rem;
				img {
					max-width: 696px;
					max-width: unset;
				}
			}

			@media (width < 650px) {
				padding: 0 var(--site-pad);

				.img img {
					object-position: center center;
					width: 100%;
					border-radius: 2.5rem;
				}
			}
		}
	}

	background: var(--tan-light-g);

	.group {
		width: 100%;

		margin: 0 auto;
		display: flex;
		gap: 3rem;

		.txt {
			flex: 1;
			align-self: center;

			.wrapper {
				max-width: 36.5625rem;
				margin: 0 0 0 auto;
			}

			@media (width < 1341px) {
				padding: 30px 30px 30px 0;
			}

			.headline-lg {
				margin: 0 0 1.25rem 0;
			}
		}

		.img {
			flex: 1;
			border-radius: 2.5rem;
			overflow: hidden;

			img {
				object-fit: cover;
				height: 100%;
				width: 100%;
			}
		}
	}
	@media (width < 850px) {
		gap: 2rem;
	}
	@media (width < 650px) {
		padding: var(--site-pad) 0;
		gap: 3rem;

		.group {
			flex-direction: column-reverse;
			text-align: center;
			gap: var(--site-pad);

			.txt {
				padding: 0;
			}
		}
	}
}

.tag {
	display: inline-block;
	padding: 8px 15px 5px 15px;
	color: #000;
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 500;
	border-radius: 100px;
	border: 1px solid var(--yellow);

	&:hover,
	&:focus-visible {
		background: var(--yellow);
	}

	&.active {
		pointer-events: none;
		background: var(--yellow);
	}
}

.tag-sq {
	position: absolute;
	inset: 1.2rem auto auto 1.2rem;
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	padding: 10px 10px 8px 10px;
	background: #fff;
	border: 1px solid var(--yellow);
}

.arrow1 {
	position: relative;
	align-self: flex-start;

	&::before {
		content: "";
		position: absolute;
		inset: 50% -12px 0 auto;
		translate: 0 -50%;
		width: 10px;
		height: 10px;
		background: url("./images/arrow1.svg") center center / contain no-repeat;
	}
}

.insights {
	padding: 6.25rem 0 4rem 0;
	background: #fff;

	.headline-lg {
		text-align: center;
		margin: 0 0 2.1875rem 0;
	}

	.filter {
		margin: 0 0 2.1875rem 0;
		display: flex;
		align-items: center;
		gap: 1rem;

		.group {
			display: flex;
			align-items: center;
			gap: 0.5rem;
			flex-wrap: wrap;
		}

		p {
			color: #000;
			font-size: 18px;
			font-weight: 800;
		}

		@media (width < 650px) {
			flex-direction: column;
			align-items: flex-start;
			gap: 0.5rem;
		}
	}

	@media (width < 650px) {
		padding: var(--site-pad) 0;
	}
}

.lazy-load {
	padding: 3rem 0;
	text-align: center;

	@media (width < 650px) {
		padding: var(--site-pad) 0 0 0;
	}
}

/* Typography */
.headline-lg {
	color: var(--navy);
	font-family: var(--font-primary);
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1.2em;
}

.headline-md {
	font-family: var(--font-primary);
	font-size: 1.875rem;
	font-weight: 500;
	line-height: 1.1em;
	text-wrap: pretty;
}

.headline-sm {
	color: var(--yellow);
	font-family: var(--font-secondary);
	font-size: 1rem;
	font-weight: 600;
}

p {
	color: var(--navy);
	font-family: var(--font-primary);
	font-size: 1rem;
	font-weight: 500;
	text-wrap: pretty;
}

.feed {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	flex-wrap: wrap;

	.card {
		flex: 1;
		border: 1px solid var(--gray);
		display: flex;
		flex-direction: column;
		min-width: 300px;
		min-height: 400px;
		box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
		max-width: 33%;
		/* max-width: 390px; */

		.img {
			background-image: url("./images/article_default.webp");
			background-size: cover;
			background-position: center top;
			background-repeat: no-repeat;
			min-height: 9.375rem;

			overflow: hidden;
			position: relative;

			img {
				object-fit: cover;
				object-position: center;
				transform-origin: center top;
				position: absolute;
				inset: 0;
			}
		}

		.txt {
			padding: 1.5625rem;
			display: flex;
			flex-direction: column;
			height: 100%;

			.title {
				font-family: var(--font-primary);
				font-size: 1.25rem;
				font-style: normal;
				font-weight: 600;
				line-height: 1.3em;
				color: var(--navy);
				margin: 0 0 0.625rem 0;
				text-wrap: pretty;
			}

			.date {
				color: #000;
				font-family: var(--font-primary);
				font-size: 11px;
				font-weight: 400;
				line-height: normal;
				margin: 0 0 1.5625rem 0;
			}

			.wrapper {
				display: flex;
				flex-direction: column;
				height: 100%;
				gap: 1rem;
			}

			.excerpt {
				position: relative;
				height: 100%;
				min-height: 50px;

				p {
					position: absolute;
					inset: 0;
					font-size: 0.875rem;
					font-weight: 300;
					overflow: hidden;
				}

				p {
					mask: linear-gradient(
						to bottom,
						black 0%,
						black calc(100% - 4rem),
						transparent 100%
					);
					-webkit-mask: linear-gradient(
						to bottom,
						black 0%,
						black calc(100% - 4rem),
						transparent 100%
					);
				}
			}

			a {
				font-family: var(--font-secondary);
				font-size: 0.875rem;
				font-weight: 350;
				color: var(--navy);
				font-style: italic;
				text-decoration: underline;
				text-underline-offset: 3px;
				text-decoration-color: var(--yellow);

				&:hover,
				&:focus-visible {
					text-decoration-color: var(--navy);
				}
			}
		}
		@media (width < 700px) {
			min-height: 70vw;
		}
	}

	@media (width < 1043px) {
		.card {
			max-width: 1044px;
		}
	}

	@media (width < 780px) {
		.card {
			max-width: 390px;
		}
	}
}

.cta {
	background: url("./images/cta_bg.webp") center center / cover no-repeat;
	padding: 2rem 0;

	.group {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 2rem;
	}

	h2 {
		color: #fff;
		font-family: var(--font-primary);
		font-size: 1.25rem;
		font-weight: 500;
		line-height: 1.2em;
		margin: 0 0 0.5rem 0;
	}

	p {
		color: #fff;
		font-size: 0.9375rem;
		line-height: 1.2em;
		margin: 0 0 -0.5rem 0;
	}
	@media (width < 650px) {
		.group {
			flex-direction: column;
			gap: 1rem;
			align-items: flex-start;

			p {
				text-wrap: pretty;
				margin: 0;
			}
		}
	}
}

footer.main {
	background: var(--navy);
	padding: 100px 0 50px 0;

	h2 {
		color: #fff;
		font-family: var(--font-primary);
		font-size: 1rem;
		font-weight: 500;
		line-height: 1.2em;
	}

	p {
		color: #fff;
		font-weight: 400;
	}

	.group {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 2rem;
		margin: 0 0 3.875rem 0;

		.signup {
			grid-column: span 2;

			display: flex;
			flex-direction: column;
			gap: 0.6rem;

			form {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				gap: 0.9375rem;

				input {
					background: #fff;
					padding: 8px 12px 6px 12px;
					border-radius: 4px;
					color: #000;
					font-family: var(--font-primary);
					font-size: 0.75rem;
					max-width: 300px;
				}
				.btn1 {
					align-self: flex-start;
				}
			}
		}

		.links {
			grid-column: span 2;
			columns: 2;
			column-gap: 2rem;
			padding-top: 50px; /* Delete this when the subscribe form is back */

			nav {
				display: flex;
				flex-direction: column;
				gap: 0.8rem;

				a {
					color: #fff;
					text-decoration: none;
					font-family: var(--font-primary);
					font-size: 1rem;
					font-weight: 500;
					line-height: 1.2em;

					&:hover,
					&:focus-visible {
						color: var(--yellow);
					}
				}
				h3 {
					color: #fff;
					text-decoration: none;
					font-family: var(--font-primary);
					font-size: 1rem;
					font-weight: 700;
					line-height: 1.2em;
					margin: 1rem 0 -0.5rem 0;
				}
			}
		}

		.info {
			display: flex;
			flex-direction: column;

			.logo {
				margin: 0 0 1.25rem 0;
			}

			p,
			a {
				color: #fff;
				font-size: 0.875rem;
				font-weight: 400;
				line-height: 1.3em;
				text-decoration: none;
			}

			a:hover,
			a:focus-visible {
				color: var(--yellow);
			}
		}

		@media (width < 800px) {
			grid-template-columns: repeat(4, 1fr);
			.links {
				columns: 1;
				grid-column: span 1;
			}
		}
	}

	@media (width < 700px) {
		padding: var(--site-pad) 0;

		.group {
			grid-template-columns: repeat(1, 1fr);

			.signup {
				grid-column: span 1;
			}

			.logo {
				max-width: 13.125rem;
			}
		}
	}

	.copyright {
		p {
			font-family: var(--font-primary);
			font-size: 0.75rem;
			line-height: 1.2em;
			font-weight: 500;
			display: inline;
		}

		a {
			color: #fff;
			text-decoration: none;
			font-family: var(--font-primary);
			font-size: 0.75rem;
			line-height: 1.2em;
			font-weight: 500;

			&:hover,
			&:focus-visible {
				text-decoration: underline;
			}
		}
	}
}

.carousel {
	flex: 3;
	position: relative;
	overflow: hidden;

	.arrows {
		position: absolute;
		inset: 50% 2px auto 2px;
		translate: 0 -50%;
		display: flex;
		justify-content: space-between;

		button {
			transition: scale 0.1s ease;

			&:hover,
			&:focus-visible {
				scale: 1.1;
			}

			&:active {
				scale: 0.9;
			}
			&:last-of-type {
				rotate: 180deg;
			}
		}
	}
	.slides {
		max-width: 80%;
		margin: 0 auto;

		.slide {
			text-align: center;
			margin: 0 auto;
		}

		q {
			color: #000;
			font-family: var(--font-secondary);
			font-size: 1rem;
			font-weight: 400;
			line-height: 1.5em;
			margin: 0 0 1.2rem 0;
			display: inline-block;
		}

		p strong {
			font-style: italic;
		}
	}
	@media (width < 750px) {
		padding: 0 0 5rem 0;
		width: 100%;

		.slides {
			max-width: 100%;
		}

		.arrows {
			inset: auto 0 0 0;
			justify-content: center;
			gap: 1rem;
		}
	}
}

.blue-bg {
	background: linear-gradient(114deg, #172154 34.54%, #091347 100.22%);
	position: relative;
	color: #fff;
	z-index: 2;
	padding: 6.25rem 0;

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		background: url("./images/triangles.png") center right / cover no-repeat;
		z-index: -1;
		opacity: 0.2;
	}
}

.featured {
	.group {
		display: flex;
		gap: clamp(2rem, 6vw, 4.5rem);
	}
	.card {
		flex: 2;
		align-self: flex-start;
		background: #fff;
		border-radius: 0.375rem;
		overflow: hidden;

		.wrapper {
			position: relative;
			overflow: hidden;

			.img {
				min-height: 250px;
				background: url(./images/article_default.webp) center center / cover
					no-repeat;
			}

			.img img {
				object-fit: cover;
				object-position: center center;
				transform-origin: center top;
				transform: scale(1.2);
				height: 100%;
				width: 100%;
			}

			.logo {
				position: absolute;
				inset: auto auto 0 1.5rem;
				background: #fff;
				max-width: 7.5rem;
				padding: 0.625rem;
				border-radius: 6px 6px 0 0;
				img {
					object-fit: contain;
				}
			}
		}

		.details {
			padding: 1.5rem;

			.title {
				color: var(--navy);
				font-family: var(--font-primary);
				font-size: 1.5rem;
				font-weight: 600;
				line-height: 1.3em;
				margin: 0 0 0.625rem 0;
				text-wrap: pretty;
			}

			.date {
				color: #000;
				font-family: var(--font-primary);
				font-size: 11px;
				font-weight: 400;
				line-height: normal;
			}
		}
	}
	.txt {
		flex: 3;
		align-self: center;

		.headline-sm {
			margin: 0 0 8px 0;
		}

		.headline-md {
			margin: 0 0 1.25rem 0;
		}

		p {
			color: #fff;
			font-weight: 400;
			margin: 0 0 0.8em 0;
		}
		p:last-of-type {
			margin: 0 0 1.8rem 0;
		}

		.quote {
			margin: 2rem 0 0 0;

			p {
				font-weight: 600;
			}

			p:last-of-type {
				font-weight: 400;
				margin: 0;
			}
		}
	}

	@media (width < 750px) {
		.group {
			flex-direction: column;
		}
	}

	@media (width < 650px) {
		padding: var(--site-pad) 0;
	}
}
@keyframes popup {
	from {
		scale: 0;
	}
	to {
		scale: 1;
	}
}
.popup {
	max-width: 600px;
	width: calc(100vw - 2rem);
	height: auto;
	margin: auto;
	border: none;
	height: fit-content;
	position: fixed;
	border-radius: 0.375rem;
	scale: 0;
	animation: popup 0.3s ease forwards;

	&::backdrop {
		background: rgba(0, 0, 0, 0.7);
	}

	.close {
		position: absolute;
		inset: 0 auto auto 0;
		background: #fff;
		padding: 0.5rem;
		font-family: var(--font-primary);
		font-size: 0.8125rem;
		line-height: 1;
		font-weight: 400;
		color: var(--navy);

		&:hover,
		&:focus-visible {
			background: var(--yellow);
		}
	}

	.popup-content {
		.group {
			display: flex;
			max-height: 75vh;
			overflow: hidden;

			.img {
				flex: 1;

				img {
					object-fit: cover;
					object-position: center top;
					height: 100%;
					width: 100%;
				}
			}

			.txt {
				flex: 1;
				padding: 5rem 2rem;
				overflow-y: scroll;

				.position {
					font-family: var(--font-primary);
					font-size: 1rem;
					font-weight: 600;
					line-height: 1.2em;
					margin: 0 0 0.5rem 0;
					color: var(--navy);
				}
				.phone,
				.email {
					display: block;
					position: relative;
					padding: 0 0 0 2rem;

					&:not(:last-child) {
						margin: 0 0 0.5rem 0;
					}

					&:hover,
					&:focus-visible {
						text-decoration: underline;
					}
				}
				.phone::after,
				.email::after {
					content: "";
					position: absolute;
					inset: 0 auto auto 0;
					width: 20px;
					height: 20px;
				}
				.phone::after {
					background: url("./images/icon_phone_b.svg") center center / contain
						no-repeat;
				}
				.email::after {
					background: url("./images/icon_mail_b.svg") center center / contain
						no-repeat;
				}
			}

			h3 {
				font-family: var(--font-primary);
				font-size: 1.875rem;
				font-weight: 500;
				line-height: 1.2em;
				color: var(--navy);
			}

			p {
				color: #000;
				font-family: var(--font-secondary);
				font-size: 1rem;
				font-weight: 400;
				line-height: 1.5em;
				margin: 0 0 1rem 0;
			}
			a {
				color: #000;
				font-family: var(--font-secondary);
				font-size: 1rem;
				font-weight: 400;
				text-decoration: none;
			}

			@media (width < 700px) {
				flex-direction: column;

				.img {
					height: 400px;
					overflow: hidden;
					flex: unset;

					img {
						object-position: center 15%;
					}
				}

				.txt {
					padding: 2rem 1rem;
				}
			}
		}
	}
}

.our-people {
	background-position: center 30%;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 6.25rem 0;

	.headline-sm {
		color: var(--navy);
	}

	.group {
		display: flex;

		div {
			flex: 1;
		}

		.img {
			background-position: center 30%;
			background-size: cover;
			background-repeat: no-repeat;
			opacity: 0;
		}

		.card {
			background: #fff;
			padding: 2rem;
			border-radius: 0.625rem;
			border: 1px solid var(--gray);

			.headline-md {
				color: var(--navy);
				margin: 0 0 1.25rem 0;
			}

			p {
				margin: 0 0 1.25rem 0;
			}
		}
	}

	@media (width < 650px) {
		background: linear-gradient(0deg, #f6f3f0 0%, #f6f3f0 100%), #fff;
		padding: 0 0 var(--site-pad) 0;
		overflow: hidden;

		.group {
			flex-direction: column;
			gap: var(--site-pad);
			position: relative;

			div {
				flex: unset;
			}

			.img {
				opacity: 1;
				height: 300px;
				margin: 0 0 0 calc(var(--site-pad) * -1);
				width: 100vw;
				z-index: 2;
			}

			.card {
				z-index: 2;
			}

			&:before {
				content: "";
				position: absolute;
				inset: calc(var(--site-pad) * -1);
				background: linear-gradient(0deg, #f6f3f0 0%, #f6f3f0 100%), #fff;
				z-index: 1;
			}
		}
	}
}

.message-bar {
	padding: 0.4rem 0 0.2rem 0;
	background: var(--yellow);
	color: #fff;
	text-align: center;
	position: relative;
	z-index: 99;
	p {
		font-size: 0.8rem;
		font-weight: 800;
		position: relative;
		display: inline-block;

		&::before {
			content: " ! ";
			color: white;
			position: absolute;
			inset: 0px auto auto -20px;
			font-size: 0.66rem;
			border: 1px solid white;
			border-radius: 50%;
			width: 15px;
			height: 15px;
		}
	}
}

.form {
	border-radius: 1.25rem;
	padding: 2.8125rem 1.875rem;
	flex: 1;
	border: 1px solid var(--Gray, #959595);
	background: #fffefe;
	box-shadow: 1px 4px 4px 0 rgba(0, 0, 0, 0.15);

	[data-hsfc-id="Renderer"] .hsfc-RichText p {
		font-weight: 600 !important;
		font-size: 1.2rem !important;
		color: var(--navy) !important;
		text-align: center;
		text-wrap: balance;
	}

	label,
	[data-hsfc-id="Renderer"] .hsfc-FieldLabel {
		color: #000;
		font-family: var(--font-primary);
		color: var(--navy);
		font-size: 1.125rem;
		font-weight: 600;
		line-height: 1.2em;
		margin: 0 0 0.6rem 0;
	}
	input,
	.btn1 {
		outline: none;
		&:focus,
		&:focus-visible {
			outline: 2px solid var(--yellow);
		}
	}

	.wrapper {
		display: flex;
		flex-direction: column;
		gap: 1.75rem;
	}

	.interest-buttons {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
		margin: 0.6rem 0 0 0;

		button {
			display: inline-block;
			padding: 11px 22px 9px 22px;
			border: 1px solid #d3d3d3;
			border-radius: 0.25rem;
			background: #fff;
			color: var(--navy);
			border-color: var(--navy);
			font-family: var(--font-primary);
			font-size: 0.9375rem;
			font-weight: 400;
			cursor: pointer;
			margin: 0;

			&.active {
				background: var(--navy);
				color: #fff;
			}

			&:hover {
				background: var(--yellow);
				border-color: var(--yellow);
				color: var(--navy);
			}
		}
	}

	input:not([type="checkbox"]) {
		height: 3rem;
		padding: 0.5rem 0.5rem 0 0.5rem;
		border: unset;
		border-bottom: 2px solid var(--navy);
		font-family: var(--font-primary);
		background-color: unset;
		border-radius: unset;
		font-size: 1.1rem;
		font-weight: 400;
		line-height: 1.2em;
		outline: none;
		margin: 0 0 1.75rem 0;

		&:focus,
		&:focus-visible {
			outline: 2px solid var(--yellow);
			/* outline-offset: 2px; */
		}
	}

	[data-hsfc-id="Renderer"] .hsfc-TextareaInput {
		border: 2px solid var(--navy);
		background-color: unset;
	}

	& > div:has(input[type="checkbox"]) {
		display: flex;
		justify-content: flex-start;
		gap: 0.5rem;
		margin: 0 0 1.75rem 0;

		input {
			width: unset;
			align-self: flex-start;
		}

		label {
			font-size: 0.875rem;
			font-weight: 500;
		}
	}

	[data-hsfc-id="Renderer"] .hsfc-Step .hsfc-Step__Content {
		padding: 0;
	}

	@media (width < 650px) {
		[data-hsfc-id="Renderer"] .hsfc-Row {
			grid-template-columns: 1fr;
		}
	}

	[data-hsfc-id="Renderer"] .hsfc-Button {
		border-radius: 4px;
		background: linear-gradient(
			-103deg,
			#ffc674 -4.84%,
			#ffb50d 24.98%,
			#d67600 95.73%
		);
		color: #fff;
		font-family: var(--font-primary);
		font-size: 1rem;
		line-height: 1.5;
		font-style: normal;
		font-weight: 700;
		letter-spacing: 0.48px;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
		text-decoration: none;
		align-self: center;
		padding: 11px 22px 9px 22px;
		white-space: nowrap;
		position: relative;
		z-index: 2;
		display: inline-block;

		&::after {
			content: "";
			position: absolute;
			inset: 1px;
			border-radius: 3px;
			background: linear-gradient(
				103deg,
				#ffc674 -4.84%,
				#ffb50d 24.98%,
				#d67600 95.73%
			);
			z-index: -1;
			transition: opacity 0.15s ease;
		}

		&:hover,
		&:focus-visible {
			transform: unset !important;
		}

		&:hover::after,
		&:focus-visible::after {
			opacity: 0;
		}
	}

	.hsfc-DataPrivacyField {
		font-size: 0.75rem;
	}
}

/* pages */

#home {
	.hero {
		padding: 0;

		.group {
			.txt {
				padding: clamp(1rem, 10vw, 9.0625rem) 0;

				p {
					margin: 0 0 1.2rem 0;
				}
			}

			.img {
				position: relative;
				overflow: unset;

				img {
					position: absolute;
					inset: 0 auto 0 0;
					width: calc(50vw - 2rem);
					max-width: 696px;
					object-fit: cover;
					object-position: 40%;
				}
			}
		}

		@media (width < 900px) {
			.group {
				flex-direction: column-reverse;
				overflow: hidden;
				gap: 0;

				.txt {
					flex: unset;

					text-align: center;

					.wrapper {
						max-width: unset;
					}
				}

				.img {
					height: 300px;
					width: 100%;
					flex: unset;

					img {
						width: 100vw;
						max-width: unset;
						position: unset;
						margin: 0 0 0 calc(var(--site-pad) * -1);
					}
				}
			}
		}

		@media (width < 650px) {
			.group .txt {
				padding: var(--site-pad) 0;
			}
		}
	}

	.hs {
		background: var(--tan-light);
		padding: 6.25rem 0;
		text-align: center;

		.headline-md {
			color: var(--navy);
			margin: 0 0 1.2rem 0;
		}

		.headline-sm {
			color: var(--navy);
			font-size: 1.1875rem;
			margin: 2rem 0 1.2rem 0;
		}

		p {
			color: var(--navy);
			font-weight: 400;
			line-height: 1.5em;
			margin: 0 auto 1.2rem auto;
			max-width: 60rem;
		}

		ul {
			list-style: none;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 auto;
			gap: 2rem;

			li {
				font-family: var(--font-secondary);
				font-size: 1rem;
				font-weight: 800;
				line-height: 1.2em;
				justify-content: space-between;
				text-align: center;

				&:nth-child(even) {
					position: relative;

					&::before {
						content: "";
						position: absolute;
						inset: 0 -1rem auto auto;
						width: 1px;
						height: 20px;
						background: var(--navy);
					}
					&::after {
						content: "";
						position: absolute;
						inset: 0 auto auto -1rem;
						width: 1px;
						height: 20px;
						background: var(--navy);
					}
				}
			}

			@media (width < 700px) {
				flex-direction: column;

				li {
					&:nth-child(even) {
						&::before {
							inset: auto auto -1rem 50%;
							translate: -50% 0;
							width: 20px;
							height: 1px;
						}
						&::after {
							inset: -1rem auto auto 50%;
							translate: -50% 0;
							width: 20px;
							height: 1px;
						}
					}
				}
			}
		}
		@media (width < 650px) {
			padding: var(--site-pad) 0;
		}
	}

	.integrations {
		text-align: center;

		.headline-md {
			color: #fff;
			margin: 0 0 2rem 0;
		}

		p {
			font-weight: 400;
			line-height: 1.5em;
			color: #fff;
		}

		.group {
			display: flex;
			justify-content: space-evenly;
			gap: 2.5rem;

			.item {
				flex: 1;
				text-align: center;
				max-width: 20rem;

				.headline-sm {
					margin: 0 0 0.5rem 0;
				}

				.icon {
					max-height: 4.4375rem;
					margin: 0 auto 1.5rem auto;
					height: 100%;

					img {
						display: inline-block;
						object-fit: contain;
						height: 100%;
					}
				}
			}

			@media (width < 820px) {
				flex-direction: column;
				align-items: center;

				.item .icon {
					max-height: unset;
				}
			}
		}
	}

	.about {
		padding: 6.25rem 0;

		.header {
			text-align: center;
			margin: 0 0 2rem 0;

			.headline-lg {
				margin: 0 0 1.2rem 0;
			}

			p {
				font-weight: 400;
				line-height: 1.5em;
				margin: 0 auto 1rem auto;
			}
		}

		.item {
			display: flex;
			justify-content: space-between;
			gap: 2rem;
			margin: 0 0 3rem 0;

			.video,
			.img {
				flex: 1;
				border-radius: 0.4375rem;
				overflow: hidden;
				border: 1px solid #aeaeae;
				align-self: stretch;
				max-width: 36.25rem;

				img {
					object-fit: cover;
					height: 100%;
					width: 100%;
				}
			}

			.video {
				align-self: flex-start;
				aspect-ratio: 16/9;
				position: relative;

				iframe,
				video {
					width: 100%;
					height: 100%;
				}

				video {
					object-fit: cover;
				}

				/* Make videos with custom controls clickable */
				&.has-custom-controls:not(.playing) {
					cursor: pointer;
				}

				/* Hide WordPress MediaElement.js play button overlay */
				&.has-custom-controls .mejs-overlay-play {
					display: none !important;
				}

				/* Hide controls until playing */
				&.has-custom-controls:not(.playing) .mejs-controls {
					display: none !important;
				}

				/* MediaElement.js scrubber bar customization */
				&.has-custom-controls .mejs-controls {
					/* Current progress (filled portion) */
					.mejs-time-rail .mejs-time-current {
						background: var(--yellow);
					}

					/* Scrubber handle */
					.mejs-time-rail .mejs-time-handle-content {
						background: var(--yellow-burnt);
						border: 2px solid #fff;
					}
				}

				/* Custom play button overlay */
				&.has-custom-controls::after {
					content: "";
					position: absolute;
					inset: 50% auto auto 50%;
					translate: -50% -50%;
					background: url("./images/play-btn.svg") center center / contain
						no-repeat;
					z-index: 1;
					width: 3.125rem;
					height: 3.125rem;
					transition: scale 0.1s ease;
					pointer-events: none;
				}

				&.has-custom-controls:hover::after,
				&.has-custom-controls:focus-visible::after {
					scale: 1.1;
				}

				&.has-custom-controls:active::after {
					scale: 1;
				}

				/* Hide play button when video is playing */
				&.playing::after {
					display: none;
				}
			}

			.txt {
				flex: 1;
				align-self: center;
				max-width: 36.25rem;

				.headline-sm {
					margin: 0;
					color: var(--navy);
					font-weight: 600;
				}

				.headline-md {
					margin: 0 0 1rem 0;
					color: var(--navy);
				}

				p {
					margin: 0 0 1.2rem 0;
					font-weight: 400;
				}
			}
		}

		.stats {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 4rem 2rem;
			margin: 5rem 0 0 0;

			li {
				list-style: none;
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
				flex: 1;
				width: 100%;
				max-width: 230px;
				margin: 0 auto;

				span:first-of-type {
					font-size: 2.5rem;
					color: var(--yellow-burnt);
					font-weight: 600;
					line-height: 1.2em;
					padding: 0 0 1rem 0;
					position: relative;
					width: 100%;

					&::after {
						content: "";
						position: absolute;
						inset: auto 2rem 0.5rem 2rem;
						height: 2px;
						background: linear-gradient(
							to right,
							var(--yellow),
							var(--yellow-burnt)
						);
					}
				}

				span:last-of-type {
					font-size: 1rem;
					font-weight: 400;
					line-height: 1.2em;
					padding: 0.5rem 0 0 0;
					font-size: 1rem;
					font-weight: 600;
					color: var(--navy);
				}
			}

			@media (width < 650px) {
				grid-template-columns: repeat(2, 1fr);
			}

			@media (width < 450px) {
				grid-template-columns: repeat(1, 1fr);
			}
		}

		@media (width < 750px) {
			.item {
				flex-direction: column;

				.video {
					align-self: center;
					width: 100%;
				}
			}
		}

		@media (width < 650px) {
			padding: var(--site-pad) 0;
		}
	}

	.insights {
		background: var(--tan-light);

		.headline-md {
			color: var(--navy);
			text-align: center;
			margin: 0 0 2rem 0;
		}

		p:not(.feed p) {
			margin: 0 0 2rem 0;
			color: #000;
			text-align: center;
		}
		.feed {
			margin: 0 0 2rem 0;
		}
	}
}

#resources {
	.hero {
		p {
			font-size: 1.125rem;
		}
		.img img {
			object-position: 70%;
		}
	}
}

#post {
	.hero {
		.group {
			gap: 1rem;
		}

		.arrow1 {
			padding: 0 0 0 12px;
			font-family: var(--font-secondary);
			font-size: 0.875rem;
			font-weight: 350;
			color: var(--navy);
			font-style: italic;
			text-decoration: underline;
			text-underline-offset: 3px;
			text-decoration-color: var(--yellow);
			margin: 0 0 3rem 0;
			display: inline-block;

			&::before {
				inset: 50% auto 0 0;
				rotate: 180deg;
			}

			&:hover,
			&:focus-visible {
				text-decoration-color: var(--navy);
			}
		}
		.headline-lg {
			text-wrap: pretty;
		}
		.logo {
			width: 100%;
			max-width: 13.4375rem;
			margin: 0 0 2rem 0;
		}

		@media (width < 800px) {
			padding: var(--site-pad) 0;
			gap: 3rem;

			.arrow1 {
				margin: 0 0 2rem 0;
			}

			.group {
				flex-direction: column-reverse;
				text-align: left;
				gap: var(--site-pad);

				.txt {
					padding: 0;
				}

				.img {
					margin: calc(var(--site-pad) * -1) calc(var(--site-pad) * -1) 0
						calc(var(--site-pad) * -1);
					border-radius: 0;
					max-height: 15.625rem;
				}
			}
		}
	}

	.content {
		padding: 0 0 2rem 0;
		background: #fff;

		h2 {
			font-family: var(--font-primary);
			font-size: 1.875rem;
			font-weight: 500;
			line-height: 1.2em;
			margin: 0 0 1.2rem 0;
			color: var(--navy);
			text-box-trim: trim-start;
		}
		p {
			font-weight: 400;
			line-height: 1.5em;
			margin: 0 0 1.2rem 0;
			color: #000;
		}
		a {
			font-weight: 500;
			color: var(--yellow-burnt);
			text-decoration: none;
		}

		ul,
		ol {
			font-family: var(--font-secondary);
			background: var(--tan-light);
			padding: 1.875rem 2.5rem 1.875rem 3.5rem;
			margin: 0 0 1.2rem 0;

			li {
				font-size: 1rem;
				font-weight: 400;
				line-height: 1.5em;
				margin: 0;

				&:not(:last-child) {
					margin: 0 0 0.6rem 0;
				}
			}
		}

		blockquote {
			padding: 3rem 2rem;
			background: var(--tan-light);
			margin: 0 1rem 1.2rem 1rem;
			text-align: center;
			border-radius: 0.625rem;
			max-width: 50%;
			float: right;
			clear: right;
			position: relative;

			p {
				font-family: var(--font-primary);
				font-size: 1.3125rem;
				font-weight: 400;
				line-height: 1.5em;
				margin: 0 0 1rem 0;
			}

			cite {
				font-family: var(--font-secondary);
				font-size: 1rem;
				font-weight: 800;
				line-height: 1.2em;
				display: block;
				font-style: normal;
			}

			@media screen and (width < 800px) {
				max-width: 100%;
				float: none;
				clear: none;
			}
		}
	}

	.about {
		background: #fff;

		.border {
			border-top: 1px solid var(--yellow);
			margin: 0 0 3.2rem 0;
		}

		h2 {
			font-family: var(--font-secondary);
			font-size: 1rem;
			font-weight: 800;
			line-height: 1.2em;
			margin: 0 0 1rem 0;
			color: var(--navy);
		}

		p {
			font-weight: 400;
			line-height: 1.5em;
			margin: 0 0 1.2rem 0;
			color: #000;
		}

		.share {
			display: flex;
			align-items: center;
			gap: 1rem;
			margin: 3.2rem 0 6rem 0;

			h2 {
				font-size: 1.375rem;
				font-weight: 500;
				line-height: 1.2em;
				margin: 0;
				color: var(--navy);
			}
		}
	}

	.form {
		max-width: 700px;
		margin: 3rem auto 0 auto;
	}
}

#contact {
	.hero {
		z-index: 3;
		padding: 3rem 0;

		p {
			font-size: 1.125rem;
			font-weight: 400;
		}

		.group {
			padding: unset;
		}

		.txt {
			font-family: var(--font-primary);
			padding: unset;

			h1 {
				color: #fff;
			}

			p {
				color: #fff;
				margin: 0 0 2rem 0;

				a {
					color: #fff;

					&:hover,
					&:focus-visible {
						color: var(--yellow);
					}
				}
			}

			.info {
				display: flex;
				flex-direction: column;
				gap: 1.25rem;
				justify-self: flex-start;

				a {
					color: #fff;
					text-decoration: none;
					font-size: 1rem;
					position: relative;
					padding: 0 0 0 2rem;
					display: inline-block;

					&:hover,
					&:focus-visible {
						color: var(--yellow);
					}

					&::after {
						content: "";
						position: absolute;
						inset: 0 auto auto 0;
						width: 20px;
						height: 20px;
					}
				}

				.phone::after {
					background: url("./images/icon_phone.svg") center top / contain
						no-repeat;
				}
				.email::after {
					background: url("./images/icon_mail.svg") center top / contain
						no-repeat;
				}
				.address::after {
					background: url("./images/icon_waypoint.svg") center top / contain
						no-repeat;
				}
			}
		}

		.form {
			margin-bottom: -13rem;
		}
	}

	@media (width < 900px) {
		.hero {
			.group {
				flex-direction: column;
				text-align: left;
			}
		}

		.group {
			.form {
				margin-bottom: -35rem;
			}
		}
	}

	.testimonials {
		padding: 15rem 0 6.25rem 0;
		background: var(--tan-light);

		.group {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 3rem;

			.txt {
				flex: 2;

				h2 {
					color: var(--navy);
					font-family: var(--font-primary);
					font-size: 1.875rem;
					font-weight: 500;
					line-height: 1.2em;
					margin: 0 0 1.2rem 0;
					max-width: 20rem;
				}
			}

			@media (width < 750px) {
				text-align: center;
				flex-direction: column;
				gap: 1rem;
			}
		}
		@media (width < 900px) {
			padding: 35rem 0 var(--site-pad) 0;
		}
	}
}

#careers {
	.about {
		background: #fff;
		padding: 6.25rem 0;
		text-align: center;

		.headline-lg {
			margin: 0 0 2rem 0;
		}

		.opening {
			p {
				text-wrap: pretty;
				margin: 0 0 2rem 0;
			}
		}

		.group {
			display: flex;
			align-items: center;
			gap: 3rem;
			margin: 0 0 2rem 0;

			.img {
				flex: 1;
				border-radius: 2.5rem;
				overflow: hidden;
				max-height: 25rem;

				img {
					object-fit: cover;
					object-position: center center;
					height: 100%;
					width: 100%;
				}
			}

			.txt {
				flex: 1;
				text-align: left;

				p {
					font-family: var(--font-secondary);
					font-size: 1rem;
					font-weight: 400;
					line-height: 1.2em;
					color: #000;
					margin: 0 0 1.2rem 0;
				}

				.headline-sm {
					color: var(--navy);
					margin: 0 0 0.4em 0;
				}
				.headline-md {
					color: var(--navy);
					margin: 0 0 1.5rem 0;
				}

				ul {
					padding: 0 0 0 1.5rem;

					li {
						font-family: var(--font-secondary);
						font-size: 1rem;
						font-weight: 400;
						line-height: 1.2em;
						margin: 0 0 0.6rem 0;
					}
				}
			}

			@media (width < 700px) {
				flex-direction: column;
				gap: 2rem;
			}
		}

		@media (width < 650px) {
			padding: var(--site-pad) 0;
		}
	}

	.carousel {
		background: var(--tan-light);
		padding: var(--site-pad);
		border-radius: 0.625rem;

		.arrows {
			inset: 50% var(--site-pad) auto var(--site-pad);
		}

		@media (width < 750px) {
			padding: var(--site-pad) var(--site-pad) 5rem var(--site-pad);

			.arrows {
				inset: auto var(--site-pad) 1rem var(--site-pad);
			}
		}
	}

	.openings {
		background: var(--tan-light);
		padding: 6.25rem 0;
		.dontsee {
			display: none;
		}

		.group {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 3rem;

			.txt {
				flex: 1;
				max-width: 35rem;

				.headline-md {
					margin: 0 0 0.8rem 0;
				}

				p {
					margin: 0 0 0.8rem 0;
				}

				.dontsee {
					display: block;
					margin: 3rem 0 0 0;
				}
			}

			.list {
				flex: 1;
				padding: 0 1rem 0 0;
				max-width: 34rem;

				div {
					display: flex;
					justify-content: space-between;
					gap: 1rem;
				}

				p {
					line-height: 1.2em;
					margin: 0 0 0.8rem 0;
				}

				a {
					font-family: var(--font-secondary);
					font-size: 0.875rem;
					font-weight: 350;
					color: var(--navy);
					font-style: italic;
					text-decoration: underline;
					text-underline-offset: 3px;
					text-decoration-color: var(--yellow);
					margin: 0 0 1rem 0;
					white-space: nowrap;

					&:hover,
					&:focus-visible {
						text-decoration-color: var(--navy);
					}
				}
			}
		}

		@media (width < 720px) {
			padding: var(--site-pad) 0;

			.group {
				flex-direction: column;
				gap: 2rem;

				.txt {
					.dontsee {
						display: none;
					}
				}

				.txt {
					max-width: 100%;
				}

				.list {
					width: 100%;
					max-width: 100%;
				}
			}
			.dontsee {
				display: block;
				margin: 2rem 0 0 0;

				p {
					margin: 0 0 0.8rem 0;
				}
			}
		}
	}
}

#about {
	.hero .group {
		.img {
			img {
				object-position: 70%;
			}
		}
	}
	.history {
		padding: 5rem 0;
		text-align: center;

		.headline-md {
			color: var(--navy);
			margin: 0 0 1rem 0;
		}

		p {
			font-weight: 400;
		}

		@media (width < 650px) {
			padding: var(--site-pad) 0;
		}
	}

	.timeline-wrapper {
		--circle: 64px;
		position: relative;

		.timeline {
			display: flex;
			gap: 2rem;
			margin: 5rem 0 0 0;
			position: relative;
			z-index: 1;

			&::before {
				content: "";
				position: absolute;
				inset: calc(var(--circle) / 2) 8% auto 8%;
				height: 1px;
				background: var(--tan);
				z-index: -1;
			}

			.item {
				flex: 1;
				display: flex;
				align-items: center;
				flex-direction: column;
				gap: 1rem;
				min-width: 0;
				padding: 0 1rem;
			}

			.circle {
				width: var(--circle);
				height: var(--circle);
				border-radius: 50%;
				border: 1px solid var(--tan);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background: #fff;

				h3 {
					color: #d67600;
					font-family: var(--font-primary);
					font-size: 19px;
					font-weight: 600;
				}
			}

			p {
				font-size: 0.75rem;
				color: #000;
			}
		}

		.arrows {
			position: absolute;
			inset: calc(var(--circle) / 2) auto auto 0;
			translate: 0 calc(-50% + 1px);
			display: flex;
			justify-content: space-between;
			gap: 1rem;
			z-index: 3;
			width: 100%;
			display: none;

			button {
				width: 60px;
				transition: opacity 0.2s ease, scale 0.2s ease;

				img {
					width: 100%;
				}

				&:first-of-type {
					rotate: 180deg;
				}

				&:disabled {
					opacity: 0.3;
					cursor: not-allowed;
				}

				&:hover:not(:disabled),
				&:focus-visible:not(:disabled) {
					scale: 1.1;
				}

				&:active:not(:disabled) {
					scale: 1;
				}
			}
		}

		@media (width < 1000px) {
			padding: 0 70px;

			.arrows {
				display: flex;
			}

			.timeline {
				width: 100%;
				overflow: hidden;

				.items-wrapper {
					display: flex;
					width: 100%;
				}

				.item {
					flex: 0 0 25%;
				}
			}
		}

		@media (width < 880px) {
			.timeline {
				.item {
					flex: 0 0 33.333%;
				}

				&::before {
					inset: calc(var(--circle) / 2) 20% auto 20%;
				}
			}
		}

		@media (width < 700px) {
			.timeline .item {
				flex: 0 0 50%;
			}
		}

		@media (width < 600px) {
			.timeline .item {
				flex: 0 0 100%;
			}
		}
	}

	.team {
		background: var(--tan-light);
		padding: 6.25rem 0;

		.bottom {
			text-align: center;
			p {
				color: #000;
				font-weight: 800;
			}
		}

		.headline-md {
			color: var(--navy);
			margin: 0 0 1rem 0;
			text-align: center;
			margin: 0 0 3rem 0;
		}

		.people {
			display: flex;
			margin: 0 0 3rem 0;

			.group {
				width: 100%;
				display: flex;
				gap: 2rem 3rem;
				justify-content: center;
				flex-wrap: wrap;
			}

			.group.swiper {
				overflow: hidden;
				display: block;
				gap: 0;
				justify-content: initial;
				flex-wrap: nowrap;
				width: 100%;
				max-width: 100%;

				.swiper-wrapper {
					display: flex;
					width: 100%;
					height: auto;
				}

				.swiper-slide {
					width: 50%;
					height: auto;
					flex-shrink: 0;

					.item {
						width: 100%;
						max-width: none;
						min-width: auto;
						margin: 0;
					}
				}
			}

			.group {
				.item {
					border-radius: 0.375rem;
					background: #fff;
					box-shadow: 1px 3px 4px 0 rgba(0, 0, 0, 0.15);
					overflow: hidden;
					width: 21%;

					.img {
						position: relative;
						height: 275px;

						img {
							width: 100%;
							height: 100%;
							object-fit: cover;
							object-position: center top;
							pointer-events: none;
						}

						button {
							position: absolute;
							inset: auto 0 0 auto;
							width: 36px;
							height: 36px;
							background: #fff;
							border-radius: 8px 0 0 0;
							font-size: 1.375rem;
							font-weight: 400;
							font-family: var(--font-primary);
							color: var(--navy);
							line-height: 0;
							padding: 8px 0 0 2px;
							transform-origin: bottom right;
							transition: scale 0.08s ease;

							&:hover,
							&:focus-visible {
								background: var(--yellow);
								scale: 1.2;
							}

							&:active {
								scale: 1.1;
							}
						}
					}

					.info {
						padding: 0.9375rem 1.25rem;

						h3 {
							font-family: var(--font-primary);
							font-size: 1rem;
							font-weight: 600;
							line-height: 1.2em;
						}
						p {
							font-family: var(--font-secondary);
							font-size: 0.75rem;
							font-weight: 400;
							line-height: 1.2em;
							color: #000;
						}
					}
				}

				@media (width < 995px) {
					.item {
						width: 24%;
					}
				}
			}
			@media (width < 700px) {
				margin: 0 calc(var(--site-pad) * -1) 0 calc(var(--site-pad) * -1);
				overflow: hidden;

				.group {
					padding: 0 0 1rem 0;
				}
			}
		}
		@media (width < 650px) {
			padding: var(--site-pad) 0;

			.bottom {
				flex-direction: column;
				margin: 2rem 0 0 0;
			}
		}

		@media (width < 580px) {
			.people .group.swiper .swiper-slide {
				width: 80%;
			}
		}

		.bottom {
			display: flex;
			gap: 1rem;
			justify-content: center;
			align-items: center;
		}
	}

	.partners {
		padding: 6.25rem 0;

		.headline-md {
			color: var(--navy);
			margin: 0 0 1rem 0;
			text-align: center;
		}

		p {
			font-weight: 400;
			line-height: 1.5em;
			margin: 0 0 1.2rem 0;
			text-align: center;
		}

		.group {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			gap: 2rem;
		}

		.group.swiper {
			overflow: hidden;
			display: block;
			flex-wrap: nowrap;
			margin: 0 calc(var(--site-pad) * -1) 0 calc(var(--site-pad) * -1);
			padding: 0 0 1rem 0;

			.swiper-wrapper {
				display: flex;
				align-items: center;
				width: 100%;
				height: auto;
			}

			.swiper-slide {
				height: auto;
				flex-shrink: 0;
				height: 100px;
			}
		}

		.group {
			.logo {
				flex: 1;
				max-width: 12.5rem;
				min-width: 10rem;

				img {
					width: 100%;
					height: 100%;
					object-fit: contain;
					pointer-events: none;
				}
			}
		}

		@media (width < 650px) {
			padding: var(--site-pad) 0;

			.group .logo {
				min-width: 8.5rem;
			}
		}
	}

	.keeping {
		.group {
			display: flex;
			gap: 3rem;
			justify-content: space-between;
			align-items: center;

			.headline-md {
				color: #fff;
			}

			p {
				color: #fff;

				&:not(:last-child) {
					margin: 0 0 1.2rem 0;
				}
			}

			.headline-sm {
				color: #fff;
				margin: 0 0 1.2rem 0;
			}

			div:nth-child(1) {
				flex: 4;
			}

			div:nth-child(2) {
				flex: 6;
			}

			@media (width < 750px) {
				flex-direction: column;
				gap: 2rem;

				div:nth-child(1),
				div:nth-child(2) {
					flex: unset;
				}
			}
		}

		@media (width < 650px) {
			padding: var(--site-pad) 0;
		}
	}

	.our-people {
		.img {
			img {
				display: none;
				height: 100%;
				width: 100%;
				object-fit: cover;
				object-position: center right;
			}
		}

		@media (width < 650px) {
			background: linear-gradient(0deg, #f6f3f0 0%, #f6f3f0 100%), #fff;

			.group {
				flex-direction: column-reverse;

				.img {
					img {
						display: unset;
					}
				}
			}
		}
	}
}

#solutions {
	.hero .group {
		.img {
			img {
				object-position: 80%;
			}
		}
	}

	.faq {
		padding: 3.125rem 0 6.25rem 0;

		.group {
			display: flex;
			gap: 2rem;
			perspective: 1500px;
			flex-wrap: wrap;
			justify-content: center;
			position: relative;

			.item {
				flex: 1;
				padding: 2rem;
				position: relative;
				border-radius: 10px;
				background: #fdfcfb;
				box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.25);
				transition: scale 0.2s ease, rotate 0.3s ease, box-shadow 0.2s ease;
				display: flex;
				align-items: center;
				min-height: 400px;
				min-width: 300px;
				max-width: 33%;
				transform-style: preserve-3d;
				cursor: pointer;

				.icon {
					position: absolute;
					inset: 1rem 1rem auto auto;
					width: 42px;
					height: 48px;
					transition: opacity 0.3s ease;
				}

				.question {
					position: absolute;
					inset: 0;
					padding: 2rem;
					display: flex;
					flex-direction: column;
					justify-content: center;
					backface-visibility: hidden;
					rotate: y 0deg;
				}

				.answer {
					position: absolute;
					inset: 0;
					padding: 2rem;
					display: flex;
					flex-direction: column;
					justify-content: center;
					backface-visibility: hidden;
					rotate: y 180deg;
					background: var(--navy);
					border-radius: 10px;
				}

				h3 {
					font-family: var(--font-primary);
					font-size: 1.1875rem;
					font-weight: 600;
					line-height: 1.2em;
					margin: 0 0 0.7rem 0;
					color: var(--navy);
					letter-spacing: 0.95px;
					text-transform: uppercase;
					text-decoration: underline;
					text-decoration-color: var(--yellow);
					text-underline-offset: 4px;
					text-decoration-thickness: 2px;
				}
				p {
					font-family: var(--font-primary);
					font-size: 1.2rem;
					font-weight: 500;
					line-height: 1.2em;
					margin: 0 0 1.2rem 0;
					color: var(--navy);
				}

				.logo {
					position: absolute;
					inset: auto 1rem 1rem auto;
					width: 56px;
					height: 56px;
				}

				.answer {
					h3 {
						color: #fff;
						text-decoration-color: var(--yellow);
					}

					p {
						font-family: var(--font-secondary);
						font-size: 1rem;
						line-height: 1.3em;
						color: #fff;
					}
				}

				&:hover,
				&:focus-visible {
					box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.15);
					scale: 1.05;
				}
				&:active {
					scale: 1.02;
				}

				&.active {
					rotate: y 180deg;

					.icon {
						opacity: 0;
					}
				}
			}

			.arrows {
				position: absolute;
				inset: 50% auto auto 0;
				translate: 0 -50%;
				display: none;
				justify-content: space-between;
				gap: 1rem;
				z-index: 3;
				width: 100%;
				padding: 0 var(--site-pad);
				button {
					width: 30px;
					transition: opacity 0.2s ease, scale 0.2s ease;

					img {
						width: 100%;
					}

					&:first-of-type {
						rotate: 180deg;
					}

					&:disabled {
						opacity: 0.3;
						cursor: not-allowed;
					}

					&:hover:not(:disabled),
					&:focus-visible:not(:disabled) {
						scale: 1.1;
					}

					&:active:not(:disabled) {
						scale: 1;
					}
				}
			}

			&.swiper {
				overflow: hidden;
				display: block;
				gap: 0;
				justify-content: initial;
				flex-wrap: nowrap;
				width: 100%;
				max-width: 100%;

				.swiper-wrapper {
					display: flex;
					width: 100%;
					height: auto;
				}

				.swiper-slide {
					width: 100%;
					height: auto;
					flex-shrink: 0;

					.item {
						width: 100%;
						max-width: 24.0625rem;
						min-width: unset;
						margin: 0 auto;
					}
				}
			}

			@media (width < 730px) {
				flex-direction: column;
				gap: 2rem;
				align-items: center;

				&.swiper {
					.swiper-slide {
						padding: 2rem 2.5rem;
						.item {
							width: 100%;
							max-width: 55vw;
						}
					}
				}

				.arrows {
					display: flex;
				}
			}

			@media (width < 650px) {
				padding: 0 0 3rem 0;
				.arrows {
					inset: auto auto 2rem 0;
				}

				&.swiper {
					.swiper-slide {
						padding: 2rem;
						.item {
							max-width: 75vw;
						}
					}
				}
			}
		}
		@media (width < 650px) {
			padding: var(--site-pad) 0;
		}

		@media (width < 730px) {
			.container {
				padding: 0;
			}
		}
	}

	.ss {
		padding: 0 0 6.25rem 0;

		.headline-lg {
			margin: 0 0 2rem 0;
		}
		.headline-md {
			color: var(--navy);
			margin: 0 0 1rem 0;
		}
		.headline-sm {
			color: var(--navy);
		}

		.software {
			display: flex;
			align-items: center;
			gap: 3rem;
			margin: 0 0 2rem 0;

			.img {
				flex: 1;
				border-radius: 0.4375rem;
				overflow: hidden;
				align-self: stretch;

				img {
					object-fit: cover;
					height: 100%;
					width: 100%;
				}
			}
			.txt {
				flex: 1;

				p {
					font-weight: 400;
				}
			}
		}

		.services {
			background: url("./images/services_bg.jpg") center left / cover no-repeat;
			border-radius: 0.625rem;
			padding: 3.75rem;
			display: flex;

			.img {
				flex: 9;

				img {
					display: none;
					border-radius: 0.625rem;
					overflow: hidden;
					height: 100%;
					width: 100%;
					object-fit: cover;
					object-position: center center;
				}
			}

			.txt {
				flex: 7;
				background: #fff;
				padding: 2.5rem;
				border-radius: 0.625rem;
				border: 1px solid var(--gray);
				min-width: 25rem;

				p {
					margin: 0 0 1.2rem 0;
					font-weight: 400;
				}
			}
		}

		@media (width < 650px) {
			padding: var(--site-pad) 0;

			.software {
				flex-direction: column;
				gap: var(--site-pad);

				.img {
					flex: unset;
					height: 300px;
				}
				margin: 0 0 var(--site-pad) 0;
			}
			.services {
				flex-direction: column-reverse;
				background: unset;
				padding: 0;
				gap: var(--site-pad);

				.img {
					flex: unset;
					height: 300px;
					width: 100%;

					img {
						display: unset;
					}
				}
				.txt {
					padding: 0;
					border: unset;
				}
			}
		}
	}

	.portal {
		text-align: center;
		padding: 6.25rem 0;
		background: var(--tan-light);

		.headline-lg {
			margin: 0 0 1.5rem 0;
		}

		p {
			margin: 0 0 1.2rem 0;
			max-width: 60rem;
			margin: 0 auto 1.9rem auto;
			font-weight: 400;
			color: #000;
		}

		.group {
			display: flex;
			gap: 2rem;

			.item {
				flex: 1;

				.img {
					border-radius: 0.625rem;
					overflow: hidden;
					max-width: 400px;
					height: 188px;
					margin: 0 auto 1rem auto;

					img {
						height: 100%;
						width: 100%;
						object-fit: cover;
						object-position: center center;
					}
				}

				.txt {
					.headline-sm {
						font-size: 1.2rem;
						color: #000;
						margin: 0 0 1rem 0;
					}

					p {
						color: #000;
					}
				}
			}

			@media (width < 780px) {
				flex-direction: column;
			}
		}

		@media (width < 650px) {
			padding: var(--site-pad) 0;
		}
	}

	.implementation {
		padding: 6.25rem 0;
		text-align: center;

		.group {
			display: flex;
			justify-content: space-between;
			gap: 1rem;
			margin: 0 0 2.8125rem 0;

			.item {
				flex: 1;
				border-radius: 0.625rem;
				overflow: hidden;
				border: 1px solid #aeaeae;

				img {
					object-fit: contain;
				}
			}
		}

		.headline-md {
			color: var(--navy);
			margin: 0 0 1rem 0;
		}
		p {
			color: #000;
			font-weight: 400;
		}

		@media (width < 650px) {
			padding: var(--site-pad) 0;

			.group {
				flex-direction: column;

				.item {
					flex: unset;
					max-width: 350px;
					margin: 0 auto;
				}
			}
		}
	}

	.integrations {
		.container {
			max-width: 1100px;
		}
		.group {
			display: flex;
			gap: 3rem;
		}

		.headline-md {
			color: #fff;
			margin: 0 0 2.5rem 0;
		}
		p {
			color: #fff;
			font-weight: 400;
		}
		ul {
			padding: 0 0 0 1.5rem;
		}
		li {
			font-family: var(--font-secondary);
			color: #fff;
			margin: 0 0 0.5rem 0;

			&::marker {
				color: var(--yellow);
			}
		}

		.txt {
			flex: 3;
		}
		.list {
			flex: 1;
		}

		@media (width < 750px) {
			.group {
				flex-direction: column;
				gap: 1rem;
			}
		}

		@media (width < 650px) {
			padding: var(--site-pad) 0;
		}
	}

	.pillars {
		padding: 6.25rem 0;
		text-align: center;

		.headline-md {
			margin: 0 0 1rem 0;
			color: var(--navy);
		}
		p {
			margin: 0 0 2rem 0;
			color: #000;
			font-weight: 400;
		}
		.group {
			display: flex;
			gap: 2rem;

			.item {
				flex: 1;

				.headline-sm {
					color: var(--navy);
					margin: 0 0 1rem 0;
					line-height: 1.2em;
				}
			}
			.icon {
				height: 4.4375rem;
				margin: 0 auto 1.2rem auto;

				img {
					display: inline-block;
					object-fit: contain;
					height: 100%;
				}
			}

			@media (width < 800px) {
				flex-direction: column;
				gap: 1rem;
			}
		}
		@media (width < 650px) {
			padding: var(--site-pad) 0;
		}
	}
	.process {
		background: var(--tan-light);
		padding: 6.25rem 0;
		text-align: center;

		.headline-md {
			color: var(--navy);
			margin: 0 0 1rem 0;
		}
		p {
			color: #000;
			font-weight: 400;
			margin: 0 0 1rem 0;
		}

		@media (width < 650px) {
			padding: var(--site-pad) 0;
		}
	}
}

#default {
	.content {
		padding: 6.25rem 0;

		p {
			margin: 0 0 1.2rem 0;
			color: #000;
			font-weight: 500;

			+ *:not(p) {
				margin-top: 2rem;
			}
		}
		h2 {
			font-family: var(--font-primary);
			font-weight: 500;
			color: var(--navy);
			font-size: 1.875rem;
			line-height: 1.2em;
			margin: 0 0 1rem 0;
		}
		h3 {
			font-family: var(--font-primary);
			font-weight: 500;
			color: var(--navy);
			font-size: 1.3125rem;
			line-height: 1.2em;
			margin: 0 0 1rem 0;
		}
		h4 {
			font-family: var(--font-primary);
			font-weight: 500;
			color: var(--navy);
			font-size: 1.125rem;
			line-height: 1.2em;
			margin: 0 0 1rem 0;
		}
	}
}