/* Full-width bands: the hero, stats and closing sections run edge to edge */
.mh--page-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.page-about {
	color: #1B2228;
	font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-size: 16px;
	line-height: 1.65;
}

.page-about h1,
.page-about h2,
.page-about h3,
.page-about .about-eyebrow,
.page-about .about-button,
.page-about .about-link,
.page-about .about-stats {
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

.page-about h1,
.page-about h2,
.page-about h3 {
	color: inherit;
	font-weight: 700;
	text-transform: none;
	text-wrap: balance;
}

.page-about h2 {
	font-size: clamp(28px, 3.2vw, 40px);
	letter-spacing: -.025em;
	line-height: 1.15;
	margin: 0;
}

.page-about h3 {
	font-size: 17px;
	letter-spacing: -.01em;
	line-height: 1.25;
	margin: 0 0 10px;
}

.page-about p {
	margin: 0;
	text-wrap: pretty;
}

.page-about ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.page-about img {
	display: block;
	max-width: 100%;
}

.page-about a {
	color: #0083D9;
}

.page-about a:hover {
	color: #009BFF;
}

.page-about .about-wrap {
	margin: 0 auto;
	max-width: 1200px;
	padding: 0 24px;
}

.page-about .about-section {
	padding-top: clamp(64px, 8vw, 104px);
}

.page-about .about-eyebrow {
	color: #0083D9;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	margin: 0 0 14px;
	text-transform: uppercase;
}

/* Buttons and text links */
.page-about .about-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

.page-about a.about-button {
	align-items: center;
	border: 2px solid rgba(255, 255, 255, .3);
	border-radius: 4px;
	color: #fff;
	display: inline-flex;
	font-size: 13px;
	font-weight: 700;
	gap: 10px;
	letter-spacing: .1em;
	padding: 13px 22px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 160ms, border-color 160ms, color 160ms;
}

.page-about a.about-button:hover {
	border-color: #fff;
	color: #fff;
}

.page-about a.about-link {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-decoration: none;
}

.page-about a.about-link:hover {
	color: #13191F;
}

/* Hero */
.page-about .about-hero {
	background: #009BFF;
	color: #fff;
}

.page-about .about-hero-grid {
	align-items: center;
	display: grid;
	gap: 48px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	padding-bottom: clamp(56px, 7vw, 96px);
	padding-top: clamp(48px, 7vw, 88px);
}

.page-about .about-hero .about-eyebrow {
	color: #fff;
}

.page-about .about-hero h1 {
	font-size: clamp(34px, 4.4vw, 56px);
	letter-spacing: -.03em;
	line-height: 1.08;
	margin: 0;
	overflow-wrap: break-word;
}

.page-about .about-hero h1 span {
	color: #0B2B45;
	display: block;
}

.page-about .about-hero-intro {
	font-size: 17px;
	line-height: 1.6;
	margin-top: 26px;
	max-width: 54ch;
}

.page-about .about-hero a.about-button {
	border-color: rgba(255, 255, 255, .85);
}

.page-about .about-hero a.about-button-primary {
	background: #fff;
	border-color: #fff;
	color: #0077C8;
}

.page-about .about-hero a.about-button-primary:hover {
	background: #0B2B45;
	border-color: #0B2B45;
	color: #fff;
}

.page-about .about-hero lite-youtube {
	border-radius: 6px;
	box-shadow: 0 24px 60px -20px rgba(5, 40, 70, .55);
	max-width: none;
	overflow: hidden;
}

/* Stats */
.page-about .about-stats {
	background: #13191F;
	color: #fff;
}

.page-about .about-stats ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.page-about .about-stats li {
	padding: 30px 24px 30px 0;
}

.page-about .about-stats strong {
	color: #009BFF;
	display: block;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1;
}

@media only screen and (min-width: 1000px) {
	.page-about .about-stats ul {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media only screen and (max-width: 599px) {
	.page-about .about-stats strong {
		font-size: 24px;
	}
}

.page-about .about-stats span {
	color: #C9D4DD;
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-top: 10px;
}

/* Who we serve */
.page-about .about-audiences {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
	margin-top: 44px;
}

@media only screen and (min-width: 600px) {
	.page-about .about-audiences {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (min-width: 1100px) {
	.page-about .about-audiences {
		grid-template-columns: repeat(4, 1fr);
	}
}

.page-about .about-audiences li {
	background: #F2F6F9;
	border-radius: 6px;
	border-top: 4px solid #009BFF;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.page-about .about-audiences img {
	aspect-ratio: 16 / 10;
	background: #DDE6ED;
	object-fit: cover;
	width: 100%;
}

.page-about .about-audiences li > div {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 22px 22px 24px;
}

.page-about .about-audiences p,
.page-about .about-promises p {
	color: #4A5763;
	font-size: 14.5px;
	line-height: 1.62;
}

.page-about .about-audiences .about-link {
	align-self: flex-start;
	margin-top: auto;
	padding-top: 18px;
}

/* How we work */
.page-about .about-split {
	align-items: end;
	display: grid;
	gap: 24px 64px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}

.page-about .about-split > p {
	color: #4A5763;
}

.page-about .about-split > p a {
	font-weight: 700;
}

.page-about .about-brands {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
	margin-top: 40px;
}

.page-about .about-brands a {
	align-items: center;
	background: #fff;
	border: 1px solid #DCE4EA;
	border-radius: 6px;
	display: flex;
	height: 84px;
	justify-content: center;
	padding: 18px 16px;
	transition: border-color 160ms;
}

.page-about .about-brands a:hover {
	border-color: #009BFF;
}

.page-about .about-brands img {
	height: 28px;
	object-fit: contain;
	width: 100%;
}

/* Team photo */
.page-about .about-team {
	margin: clamp(56px, 7vw, 88px) auto 0;
}

.page-about .about-team img {
	border-radius: 6px;
	height: auto;
	width: 100%;
}

/* What you can count on */
.page-about .about-promises {
	border-top: 2px solid #13191F;
	column-gap: 28px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	margin-top: 40px;
}

.page-about .about-promises li {
	border-bottom: 1px solid #DCE4EA;
	display: flex;
	flex-direction: column;
	padding: 28px 0 32px;
}

.page-about .about-promises h3 {
	font-size: 18px;
}

.page-about .about-promise-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin-top: auto;
	padding-top: 18px;
}

.page-about .about-callout {
	background: #009BFF;
	border-radius: 6px;
	color: #fff;
	margin-top: 48px;
	padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px);
}

.page-about .about-callout .about-eyebrow {
	color: #0B2B45;
}

.page-about .about-callout p:last-child {
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	font-size: clamp(18px, 2vw, 23px);
	font-weight: 700;
	line-height: 1.45;
	max-width: 60ch;
}

/* Origin */
.page-about .about-origin-grid {
	align-items: start;
	display: grid;
	gap: 40px 64px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
	margin-top: 36px;
}

.page-about .about-origin-copy {
	color: #4A5763;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.page-about .about-origin-copy strong {
	color: #1B2228;
}

.page-about .about-origin-copy .about-quote {
	border-left: 4px solid #009BFF;
	color: #13191F;
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.35;
	margin-top: 8px;
	padding: 4px 0 4px 22px;
	text-wrap: balance;
}

.page-about .about-origin-grid > img {
	border: 1px solid #DCE4EA;
	border-radius: 6px;
	height: auto;
	width: 100%;
}

.page-about .about-origin-close {
	color: #4A5763;
	margin-top: 48px;
	max-width: 72ch;
}

/* Closing call to action */
.page-about .about-cta {
	background: #13191F;
	color: #fff;
	margin-top: clamp(72px, 9vw, 120px);
	padding: clamp(56px, 7vw, 88px) 0;
}

.page-about .about-cta h2 {
	font-size: clamp(30px, 3.8vw, 48px);
	letter-spacing: -.03em;
	line-height: 1.1;
	max-width: 28ch;
}

.page-about .about-cta h2 span {
	color: #009BFF;
}

.page-about .about-cta p {
	color: #C9D4DD;
	font-size: 17px;
	margin-top: 22px;
	max-width: 62ch;
}

.page-about .about-cta p a {
	color: #4FB8FF;
	font-weight: 700;
	white-space: nowrap;
}

.page-about .about-cta .about-cta-note {
	color: #93A3B1;
	font-size: 14px;
	margin-top: 14px;
}

.page-about .about-cta a.about-button-primary {
	background: #009BFF;
	border-color: #009BFF;
}

.page-about .about-cta a.about-button-primary:hover {
	background: #0083D9;
	border-color: #0083D9;
}