.about-page {
	--about-body: rgba(17, 32, 27, 0.7);
	--about-divider: #d6e1dc;
	color: #0e3a2f;
	background: #fff;
}

.about-page *,
.about-page *::before,
.about-page *::after {
	box-sizing: border-box;
}

.about-page :is(h1, h2, h3, p, ul, blockquote) {
	margin: 0;
}

.about-container {
	width: min(var(--airnav-content-max), calc(100% - (2 * var(--airnav-gutter))));
	margin-inline: auto;
}

.about-hero {
	position: relative;
	height: 620px;
	overflow: hidden;
	background: #f4f4f4;
}

.about-hero__media,
.about-hero__media::before,
.about-hero__media::after {
	position: absolute;
	inset: 0;
}

.about-hero__media::before {
	z-index: 1;
	content: "";
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.78) 27%, rgba(255, 255, 255, 0) 58%);
}

.about-hero__media::after {
	z-index: 1;
	inset: auto;
	top: 50%;
	left: -160px;
	width: 887px;
	height: auto;
	aspect-ratio: 887 / 832;
	content: "";
	background: url("../images/about-us/about-hero-text-backdrop.svg") center / 100% 100% no-repeat;
	transform: translateY(-50%);
}

@media (min-width: 1441px) {
	.about-hero__media::after {
		left: clamp(-224px, -11.11vw, -160px);
		width: clamp(887px, 61.6vw, 1242px);
	}
}

.about-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 51%;
}

.about-hero__container {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	width: min(var(--airnav-content-max), calc(100% - (2 * var(--airnav-gutter))));
	height: 100%;
	margin-inline: auto;
}

.about-hero__content {
	display: flex;
	width: 606px;
	max-width: 100%;
	flex-direction: column;
	gap: 20px;
}

.about-hero__title-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.about-hero__eyebrow,
.about-hero__subtitle {
	font-family: var(--airnav-font-body);
	font-size: 20px;
	line-height: normal;
}

.about-hero__eyebrow {
	color: #007944;
	font-weight: 700;
	line-height: 27px;
	letter-spacing: 0;
	text-transform: uppercase;
}

.about-hero h1 {
	color: #0e3a2f;
	font: 400 80px/1.1 var(--airnav-font-display);
	letter-spacing: -1.6px;
}

.about-hero__subtitle {
	color: var(--about-body);
	font-weight: 400;
}

.about-intro {
	min-height: 1000px;
	padding: 140px 0;
}

.about-intro__layout {
	display: grid;
	grid-template-columns: 522px 630px;
	gap: 127px;
}

.about-intro__copy h2,
.about-ceo__heading h2,
.about-clientele__header h2 {
	color: #0e3a2f;
	font: 400 64px/1.1 var(--airnav-font-display);
	letter-spacing: -1.28px;
}

.about-intro__copy h2 span,
.about-ceo__heading h2 span,
.about-clientele__header h2 span {
	display: block;
	color: #007944;
}

.about-divider {
	display: block;
	width: 80px;
	height: 1px;
	margin-top: 32px;
	background: var(--about-divider);
}

.about-richtext {
	margin-top: 31px;
	color: var(--about-body);
	font: 400 16px/1.5 var(--airnav-font-body);
}

.about-richtext p + p {
	margin-top: 16px;
}

.about-principles {
	display: flex;
	flex-direction: column;
	overflow: visible;
}

.about-principle {
	position: relative;
	min-height: 0;
	padding: 32px;
	overflow: hidden;
	border-radius: 20px;
	transition: padding 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.about-principle + .about-principle {
	margin-top: -14px;
}

.about-principle:nth-child(1) {
	z-index: 1;
}

.about-principle:nth-child(2) {
	z-index: 2;
}

.about-principle:nth-child(3) {
	z-index: 3;
}

.about-principle.is-active {
	padding-block: 32px;
}

.about-principle--vision {
	color: #007944;
	background: #d9e9e1;
	border-radius: 20px 20px 0 0;
}

.about-principle--mission {
	color: #fff;
	background: #3da39a;
	border-radius: 20px 20px 0 0;
}

.about-principle--values {
	color: #fff;
	background: #0e3a2f;
}

.about-principle__trigger {
	display: flex;
	width: 100%;
	min-height: 48px;
	align-items: center;
	justify-content: space-between;
	padding: 0;
	color: inherit;
	font: 400 52px/48px var(--airnav-font-display);
	letter-spacing: -1.04px;
	text-align: left;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.about-principle__trigger img {
	display: block;
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	opacity: 0.72;
	transition: opacity 350ms ease, filter 350ms ease, transform 350ms ease;
}

.about-principle.is-active .about-principle__trigger img {
	opacity: 1;
	filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.38));
	transform: translateY(-1px);
}

.about-principle--vision.is-active .about-principle__trigger img {
	filter: drop-shadow(0 0 4px rgba(0, 121, 68, 0.32));
}

.about-principle__trigger:focus-visible {
	outline: 3px solid #00a49a;
	outline-offset: 5px;
}

.about-principle__panel {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 400ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms ease;
}

.about-principle.is-active .about-principle__panel {
	grid-template-rows: 1fr;
	opacity: 1;
	transition-delay: 0ms, 140ms;
}

.about-principle__panel-inner {
	min-height: 0;
	overflow: hidden;
	color: var(--about-body);
	font: 400 18px/normal var(--airnav-font-body);
}

.about-principle--mission .about-principle__panel-inner,
.about-principle--values .about-principle__panel-inner {
	color: rgba(255, 255, 255, 0.8);
}

.about-principle--vision .about-principle__panel-inner,
.about-principle--mission .about-principle__panel-inner {
	padding-bottom: 16px;
}

.about-principle--values .about-principle__panel-inner {
	font: 400 18px/normal var(--airnav-font-body);
}

.about-principle__divider {
	display: block;
	width: 80px;
	height: 1px;
	margin: 32px 0;
	background: currentColor;
	opacity: 0;
	transform: scaleX(0);
	transform-origin: left center;
	transition: opacity 250ms ease 80ms, transform 400ms cubic-bezier(0.4, 0, 0.2, 1) 80ms;
}

.about-principle.is-active .about-principle__divider {
	opacity: 0.3;
	transform: scaleX(1);
}

.about-principle__values {
	padding-left: 18px;
	list-style: disc;
}

.about-principle__values li + li {
	margin-top: 16px;
}

.about-principle__values li::marker {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.72em;
}

.about-principle__values strong {
	color: inherit;
	font-weight: 700;
}

.about-ceo {
	height: 1099px;
	background: #f3f6f6;
}

.about-ceo__inner {
	position: relative;
	height: 100%;
}

.about-ceo__heading {
	position: absolute;
	top: 74px;
	left: 0;
	width: 521px;
}

.about-stats {
	position: absolute;
	top: 393px;
	left: 0;
	display: grid;
	width: 376px;
	gap: 20px;
}

.about-stat {
	display: flex;
	height: 140px;
	flex-direction: column;
	justify-content: center;
	padding: 32px;
	color: #fff;
	background: #3da39a;
	border-radius: 16px;
}

.about-stat:nth-child(2) {
	background: #11544e;
}

.about-stat:nth-child(3),
.about-stat:nth-child(4) {
	height: 146px;
}

.about-stat:nth-child(3) {
	color: #11544e;
	background: #d9e9e1;
}

.about-stat:nth-child(4) {
	background: #11201b;
}

.about-stat strong {
	font: 400 44px/1.1 var(--airnav-font-display);
	letter-spacing: -0.88px;
}

.about-stat span {
	margin-top: 8px;
	font: 400 22px/1.25 var(--airnav-font-body);
}

.about-ceo-card {
	position: absolute;
	top: 74px;
	right: 0;
	width: 628px;
	height: 951px;
}

.about-ceo-card__photo {
	position: relative;
	height: 433px;
	overflow: hidden;
	background: #e9eaeb;
	border-radius: 16px 16px 0 0;
}

.about-ceo-card__photo::after {
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 5;
	width: 276px;
	content: "";
	background: linear-gradient(90deg, #e9eaeb 0%, #e9eaeb 72%, rgba(233, 234, 235, 0) 100%);
}

.about-ceo-card__photo > img {
	position: absolute;
	z-index: 4;
	top: 0;
	right: 0;
	display: block;
	width: 428px;
	height: 433px;
	object-fit: cover;
	object-position: right center;
}

.about-ceo-card__identity {
	position: absolute;
	z-index: 6;
	top: 48px;
	left: 32px;
	width: 230px;
}

.about-ceo-card__identity h3 {
	color: #007944;
	font: 400 26px/1.1 var(--airnav-font-display);
}

.about-ceo-card__identity p {
	margin-top: 8px;
	color: #11201b;
	font: 600 16px/1.4 var(--airnav-font-body);
}

.about-ceo-card__message {
	position: absolute;
	z-index: 3;
	top: 252px;
	left: 0;
	width: 100%;
	height: 699px;
	padding: 231px 32px 24px;
	background: #fff;
	border-radius: 16px;
}

.about-ceo-card__quote {
	position: absolute;
	z-index: 7;
	top: 406px;
	left: 33px;
	display: block;
	width: 56px;
	height: 49px;
}

.about-ceo-card blockquote {
	color: var(--about-body);
	font: 400 16px/1.5 var(--airnav-font-body);
}

.about-ceo-card blockquote p + p {
	margin-top: 16px;
}

.about-ceo-card__signoff {
	position: absolute;
	right: 32px;
	bottom: 24px;
	left: 17px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

.about-ceo-card__signoff > img {
	display: block;
	width: 192px;
	height: 75px;
	object-fit: contain;
}

.about-ceo-card__signoff p {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	color: var(--about-body);
	font-family: var(--airnav-font-body);
}

.about-ceo-card__signoff strong {
	color: rgba(0, 121, 68, 0.7);
	font-size: 16px;
	line-height: 1.4;
}

.about-ceo-card__signoff span {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
}

.about-clientele {
	height: 767px;
	padding: 140px 0;
}

.about-clientele__header {
	display: grid;
	/* The heading's own width, so "Our Customers" stays on one line. */
	grid-template-columns: max-content 358px 1fr;
	gap: 40px;
	align-items: start;
}

.about-clientele__header h2 span {
	display: inline;
}

.about-clientele__header p {
	padding-top: 10px;
	color: var(--about-body);
	font: 400 18px/1.4 var(--airnav-font-body);
}

.about-clientele__header > span {
	height: 1px;
	margin-top: 54px;
	background: var(--about-divider);
}

.about-page .about-clientele__logos {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 283px));
	justify-content: space-between;
	gap: 35px 0;
	padding: 0;
	margin: 64px 0 0;
	list-style: none;
}

.about-clientele__logos li {
	display: flex;
	height: 94px;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.about-clientele__logos img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (min-width: 1101px) and (max-width: 1439px) {
	.about-intro__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		gap: 40px;
	}
}

@media (min-width: 1101px) and (max-width: 1129px) {
	.about-stats {
		width: calc(100% - 628px);
	}

	.about-stat {
		padding-inline: 24px;
	}
}

@media (max-width: 1100px) {
	.about-intro {
		min-height: 0;
		padding: 96px 0;
	}

	.about-intro__layout {
		grid-template-columns: 1fr;
		gap: 64px;
	}

	.about-intro__copy {
		max-width: 720px;
	}

	.about-principles {
		width: min(630px, 100%);
	}

	.about-ceo {
		height: auto;
		padding: 96px 0;
	}

	.about-ceo__inner {
		display: grid;
		height: auto;
		grid-template-columns: 1fr;
		gap: 64px 40px;
	}

	.about-ceo__heading,
	.about-stats {
		position: static;
	}

	.about-ceo__heading {
		width: auto;
		grid-column: 1 / -1;
	}

	.about-stats {
		width: auto;
	}

	.about-ceo-card {
		position: relative;
		width: 100%;
		max-width: 628px;
		height: auto;
		justify-self: center;
	}

	.about-ceo-card__message {
		position: relative;
		top: auto;
		height: auto;
		padding-bottom: 130px;
		margin-top: -181px;
	}

	.about-clientele {
		height: auto;
		padding: 96px 0;
	}

	.about-clientele__header {
		grid-template-columns: auto 1fr;
	}

	.about-clientele__header > span {
		display: none;
	}

	.about-page .about-clientele__logos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 32px;
	}
}

@media (max-width: 800px) {
	.about-hero {
		height: 560px;
	}

	.about-hero__media::before {
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.76) 55%, rgba(255, 255, 255, 0.1) 100%);
	}

	.about-hero__image {
		object-position: 63% center;
	}

	.about-hero h1 {
		font-size: clamp(52px, 12vw, 72px);
	}

	.about-intro__copy h2,
	.about-ceo__heading h2,
	.about-clientele__header h2 {
		font-size: clamp(42px, 9vw, 56px);
	}

	.about-principle {
		padding: 22px 24px;
	}

	.about-principle.is-active {
		padding-block: 28px;
	}

	.about-principle__trigger {
		font-size: 42px;
	}

	.about-principle__panel-inner {
		font-size: 18px;
	}

	.about-principle--values .about-principle__panel-inner {
		font-size: 18px;
	}

	.about-clientele__header {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.about-clientele__header p {
		max-width: 460px;
		padding: 0;
	}

	.about-page .about-clientele__logos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	/* The photo in full under the text, as in the design, instead of washed out behind it. */
	.about-hero {
		display: flex;
		height: auto;
		flex-direction: column;
		background: #fff;
	}

	.about-hero__container {
		order: -1;
		height: auto;
		padding-top: 40px;
	}

	.about-hero__content {
		gap: 12px;
	}

	.about-hero__title-group {
		gap: 8px;
	}

	.about-hero__eyebrow,
	.about-hero__subtitle {
		font-size: 18px;
	}

	.about-hero__eyebrow {
		line-height: normal;
	}

	.about-hero h1 {
		font-size: 40px;
		letter-spacing: -0.8px;
	}

	/* The design's crop: the photo enlarged and anchored to the bottom of the frame, with a 52px fade at the top. */
	.about-hero__media {
		position: relative;
		inset: auto;
		overflow: hidden;
		margin-top: 15px;
		aspect-ratio: 390 / 328;
		-webkit-mask-image: linear-gradient(transparent, #000 52px);
		mask-image: linear-gradient(transparent, #000 52px);
	}

	.about-hero__media::before,
	.about-hero__media::after {
		content: none;
	}

	.about-hero__image {
		position: absolute;
		bottom: 0;
		left: -72.3%;
		width: 180.5%;
		max-width: none;
		height: auto;
	}

	.about-intro,
	.about-ceo,
	.about-clientele {
		padding-block: 72px;
	}

	.about-intro__copy h2,
	.about-ceo__heading h2,
	.about-clientele__header h2 {
		font-size: 40px;
		letter-spacing: -0.8px;
	}

	.about-principle {
		padding: 20px;
	}

	.about-principle.is-active {
		padding-block: 24px;
	}

	.about-principle__trigger {
		min-height: 44px;
		font-size: 30px;
		line-height: 44px;
		letter-spacing: -0.6px;
	}

	.about-principle__trigger img {
		width: 42px;
		height: 42px;
		flex-basis: 42px;
	}

	.about-principle__divider {
		margin: 24px 0;
	}

	.about-principle__values li + li {
		margin-top: 10px;
	}

	/* The CEO letter before the stats, as in the design. */
	.about-ceo__inner {
		gap: 24px;
	}

	.about-stats {
		order: 1;
	}

	.about-stat {
		height: auto !important;
		min-height: 128px;
		padding: 24px;
	}

	.about-stat strong {
		font-size: 38px;
	}

	.about-stat span {
		font-size: 19px;
	}

	/* The design's card: the whole photo at the card's width, man on the right, name on the left over the
	   photo's plain background. The photo overlaps the message by its corner radius and the quote mark sits
	   on that edge; card and quote share a grid so the mark follows the photo's height at any width. */
	.about-ceo-card {
		top: auto;
		display: grid;
	}

	.about-ceo-card__photo {
		height: auto;
		aspect-ratio: 1508 / 1043;
		border-radius: 16px;
	}

	.about-ceo-card__photo > img {
		width: 100%;
		height: 100%;
	}

	.about-ceo-card__photo::after {
		width: 45%;
	}

	.about-ceo-card__identity {
		top: 24px;
		left: 24px;
		width: 180px;
	}

	.about-ceo-card__identity h3 {
		font-size: 20px;
		letter-spacing: -0.4px;
	}

	.about-ceo-card__identity p {
		margin-top: 3px;
		font-size: 14px;
	}

	.about-ceo-card__message {
		grid-area: 2 / 1;
		min-height: 0;
		padding: 44px 24px 96px;
		margin-top: -16px;
	}

	.about-ceo-card__quote {
		position: relative;
		top: auto;
		left: auto;
		grid-area: 2 / 1;
		align-self: start;
		width: 36px;
		height: 32px;
		margin: -16px 0 0 24px;
	}

	.about-ceo-card__signoff {
		right: 24px;
		bottom: 24px;
		left: 16px;
	}

	.about-ceo-card__signoff > img {
		width: 138px;
		height: auto;
	}

	/* Logo cells the shape of the 3:1 logo images, 18px apart: the design's ~72px row pitch. */
	.about-page .about-clientele__logos {
		gap: 18px 20px;
		margin-top: 48px;
	}

	.about-clientele__logos li {
		height: auto;
		aspect-ratio: 3 / 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.about-principle,
	.about-principle__panel,
	.about-principle__trigger img,
	.about-principle__divider {
		transition-duration: 0.01ms;
		transition-delay: 0ms;
	}
}

/* Phones: "Building the Future of Air Surveillance" runs the green part inline, as in the design, so "of" isn't left on a line of its own. */
@media (max-width: 560px) {
	.about-intro__copy h2 span {
		display: inline;
	}
}