/**
 * Airox About Us Page styles — v1.5.21.
 * Section 01 deliberately inherits the approved Our History hero CSS.
 * Section 02 is fluidly calibrated to the supplied Vision / Mission desktop reference.
 */

.airox-about-us .airox-about-vm,
.airox-about-us .airox-about-vm *,
.airox-about-us .airox-about-vm *::before,
.airox-about-us .airox-about-vm *::after {
	box-sizing: border-box;
}

.airox-about-vm {
	position: relative;
	isolation: isolate;
	width: 100%;
	background: #fcfff5;
	color: #323436;
	overflow: hidden;
}

/* The same native Airox wave artwork visible in the client reference. */
.airox-about-vm::before {
	content: '';
	position: absolute;
	z-index: 0;
	left: 0;
	top: -7.746vw;
	width: 106.12vw;
	aspect-ratio: 1232 / 442;
	background: url('../images/history-management-waves-v1486.webp') no-repeat left top / 100% 100%;
	pointer-events: none;
}

/*
 * Supplied screenshot geometry:
 * Original canvas 1291 × 652; design group 1050 × 652 centered at x ≈ 120.5.
 * 1050 / 1291 = 81.33%, so the desktop stage now keeps that exact horizontal
 * registration instead of being capped at 1050px on wide screens. Child
 * geometry and typography scale from the same reference stage.
 */
.airox-about-vm__stage {
	position: relative;
	z-index: 1;
	width: 81.33%;
	max-width: 1646px;
	aspect-ratio: 1050 / 652;
	margin: 0 auto;
	container-type: inline-size;
}

.airox-about-vm__copy,
.airox-about-vm__half {
	position: absolute;
}

.airox-about-vm__copy {
	width: 49.285714%;
	height: 21.119632%;
	color: #323436;
}

.airox-about-vm__copy--vision {
	left: 0;
	top: 8.128834%;
}

.airox-about-vm__copy--mission {
	left: 50.571429%;
	top: 69.631902%;
}

.airox-about-vm__copy-bg,
.airox-about-vm__half-bg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
	pointer-events: none;
}

.airox-about-vm__copy-content {
	position: absolute;
	z-index: 1;
	inset: 0;
}

.airox-about-vm__copy--vision .airox-about-vm__copy-content {
	padding: 22px 5.5% 4%;
	padding: 2.09524cqw 5.5% 4%;
	text-align: center;
}

.airox-about-vm__copy--mission .airox-about-vm__copy-content {
	padding: 18px 1.5% 4% 12.1%;
	padding: 1.71429cqw 1.5% 4% 12.1%;
	text-align: left;
}

.airox-about-vm__title {
	margin: 0;
	color: #323436;
	font-family: 'Ramus', 'Helvetica Neue', Arial, sans-serif;
	font-size: 29px;
	font-size: 2.76190cqw;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.012em;
	text-transform: none;
}

.airox-about-vm__copy--vision .airox-about-vm__title {
	padding-right: 7.7%;
	text-align: right;
	transform: none;
}

.airox-about-vm__title span {
	color: #8cc11b;
}

.airox-about-vm__description {
	margin: 8px 0 0;
	margin: .76190cqw 0 0;
	color: #323436;
	font-family: 'Ramus', 'Helvetica Neue', Arial, sans-serif;
	font-size: 20px;
	font-size: 1.90476cqw;
	font-weight: 400;
	line-height: 1.38;
	letter-spacing: -.015em;
}

.airox-about-vm__copy--vision .airox-about-vm__description {
	margin-top: 7px;
	margin-top: .66667cqw;
}

.airox-about-vm__copy--mission .airox-about-vm__description {
	margin-top: 12px;
	margin-top: 1.14286cqw;
	/* The supplied artwork uses a slightly narrower body face than Ramus at the
	 * same nominal size. Reduce only the Mission body copy so the reference
	 * sentence stays on exactly two lines and remains fully inside the panel. */
	font-size: 18px;
	font-size: 1.71429cqw;
	line-height: 1.42;
	letter-spacing: -.02em;
}

.airox-about-vm__half {
	width: 18.480676%;
	height: 59.52454%;
}

.airox-about-vm__half--vision {
	left: 50.571429%;
	top: 8.128834%;
}

.airox-about-vm__half--mission {
	left: 30.761905%;
	top: 32.055215%;
}

.airox-about-vm__number {
	position: absolute;
	z-index: 2;
	color: #fff;
	font-family: 'Ramus', 'Helvetica Neue', Arial, sans-serif;
	font-size: 80px;
	font-size: 7.61905cqw;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.035em;
	transform: scaleX(.76);
	transform-origin: left center;
}

.airox-about-vm__half--vision .airox-about-vm__number {
	left: 31.96%;
	top: 22.16%;
}

.airox-about-vm__half--mission .airox-about-vm__number {
	left: 32.99%;
	top: 53.35%;
}

.airox-about-vm__icon {
	position: absolute;
	z-index: 4;
	display: block;
	width: 56.58%;
	height: auto;
}

.airox-about-vm__half--vision .airox-about-vm__icon {
	left: -31.96%;
	top: 19.84%;
}

.airox-about-vm__half--mission .airox-about-vm__icon {
	left: 75.25%;
	top: 48.71%;
}

/*
 * No phone reference has been supplied yet. Keep the exact client assets and
 * visual language, but restack into readable two-column rows instead of
 * shrinking the desktop artwork/text to illegible size.
 */
@media (max-width: 700px) {
	.airox-about-vm {
		padding: 44px 18px 52px;
	}

	.airox-about-vm::before {
		left: -36%;
		top: 0;
		width: 155%;
	}

	.airox-about-vm__stage {
		display: grid;
		grid-template-columns: minmax(76px, 26vw) minmax(0, 1fr);
		grid-template-areas:
			'vision-shape vision-copy'
			'mission-shape mission-copy';
		align-items: center;
		gap: 34px 20px;
		width: 100%;
		aspect-ratio: auto;
		margin: 0;
	}

	.airox-about-vm__copy,
	.airox-about-vm__half {
		position: relative;
		left: auto;
		top: auto;
		width: auto;
		height: auto;
	}

	.airox-about-vm__copy--vision {
		grid-area: vision-copy;
	}

	.airox-about-vm__copy--mission {
		grid-area: mission-copy;
	}

	.airox-about-vm__half--vision {
		grid-area: vision-shape;
		justify-self: end;
		transform: translateX(34%);
	}

	.airox-about-vm__half--mission {
		grid-area: mission-shape;
		justify-self: start;
	}

	.airox-about-vm__copy {
		min-height: 150px;
	}

	.airox-about-vm__copy-bg {
		object-fit: fill;
	}

	.airox-about-vm__copy--vision .airox-about-vm__copy-content,
	.airox-about-vm__copy--mission .airox-about-vm__copy-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 22px 18px;
		text-align: left;
	}

	.airox-about-vm__title {
		font-size: clamp(24px, 7vw, 30px);
	}

	.airox-about-vm__copy--vision .airox-about-vm__title {
		padding-right: 0;
		text-align: left;
		transform: none;
	}

	.airox-about-vm__description,
	.airox-about-vm__copy--mission .airox-about-vm__description {
		margin-top: 10px;
		font-size: clamp(14px, 4vw, 17px);
		line-height: 1.45;
	}

	.airox-about-vm__description br {
		display: none;
	}

	.airox-about-vm__half {
		width: min(100%, 112px);
		aspect-ratio: 215.608 / 431.217;
	}

	.airox-about-vm__half-bg {
		position: relative;
	}

	.airox-about-vm__number {
		font-size: clamp(38px, 12vw, 52px);
	}

	.airox-about-vm__half--vision .airox-about-vm__number {
		left: 28%;
		top: 25%;
	}

	.airox-about-vm__half--mission .airox-about-vm__number {
		left: 28%;
		top: 55%;
	}

	.airox-about-vm__icon {
		width: 62%;
	}

	.airox-about-vm__half--vision .airox-about-vm__icon {
		left: -34%;
		top: 20%;
	}

	.airox-about-vm__half--mission .airox-about-vm__icon {
		left: 72%;
		top: 49%;
	}
}

@media (max-width: 420px) {
	.airox-about-vm {
		padding-left: 14px;
		padding-right: 14px;
	}

	.airox-about-vm__stage {
		grid-template-columns: 104px minmax(0, 1fr);
		gap: 30px 18px;
	}

	.airox-about-vm__copy {
		min-height: 162px;
	}

	.airox-about-vm__copy--vision .airox-about-vm__copy-content,
	.airox-about-vm__copy--mission .airox-about-vm__copy-content {
		padding: 18px 14px;
	}

	.airox-about-vm__half {
		width: 82px;
	}
}