/**
 * Airox About Us Page styles — v1.5.23.
 * Section 01 deliberately inherits the approved Our History hero CSS.
 * Section 02 is calibrated to the supplied 1291 × 652 Vision / Mission 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: -100px;
	width: min(1370px, 110vw);
	aspect-ratio: 1232 / 442;
	background: url('../images/history-management-waves-v1486.webp') no-repeat left top / 100% 100%;
	pointer-events: none;
}

/*
 * Supplied screenshot geometry:
 * canvas 1291 × 652; design group 1050 × 652 centered at x ≈ 120.5.
 * Child dimensions are stored as percentages of that stage so the complete
 * composition scales proportionally down through laptop/tablet widths.
 */
.airox-about-vm__stage {
	position: relative;
	z-index: 1;
	width: min(1050px, calc(100vw - 32px));
	aspect-ratio: 1050 / 652;
	margin: 0 auto;
}

.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: 15.7% 5.5% 4%;
	text-align: center;
}

.airox-about-vm__copy--mission .airox-about-vm__copy-content {
	padding: 17.5% 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: 27px;
	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: translateY(6px);
}

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

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

.airox-about-vm__copy--vision .airox-about-vm__description {
	margin-top: 11px;
}

.airox-about-vm__copy--mission .airox-about-vm__description {
	margin-top: 13px;
}

.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: 78px;
	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: 32.1%;
	top: 22.5%;
}

.airox-about-vm__half--mission .airox-about-vm__number {
	left: 32.5%;
	top: 51.8%;
}

.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: 49.0%;
}

/* Proportional laptop/tablet typography while the reference composition scales. */
@media (max-width: 1120px) and (min-width: 701px) {
	.airox-about-vm__title {
		font-size: clamp(22px, 2.15vw, 27px);
	}

	.airox-about-vm__description {
		font-size: clamp(15px, 1.46vw, 18.5px);
	}

	.airox-about-vm__number {
		font-size: clamp(58px, 6.1vw, 78px);
	}
}

/*
 * Tablet / large-mobile fallback retained from v1.5.18. The exact <=480px
 * phone reference supplied for v1.5.19 overrides this block later in the file.
 */
@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;
	}
}

/*
 * v1.5.21 — mobile spacing/alignment refinement based on staging QA.
 * The XD mobile reference is a 1080-wide composition displayed proportionally.
 * These rules intentionally affect phone widths only; desktop/tablet remain v1.5.18.
 */
@media (max-width: 480px) {
	.airox-about-us .airox-about-vm {
		position: relative;
		height: 64vw !important;
		min-height: 0;
		padding: 0;
		background: #fcfff5;
		overflow: hidden;
	}

	/* In the supplied phone comp the faint Airox wave only enters at bottom-right. */
	.airox-about-vm::before {
		left: auto;
		right: -74%;
		top: auto;
		bottom: -11%;
		width: 132%;
		aspect-ratio: 1232 / 442;
		background: url('../images/history-management-waves-v1486.webp') no-repeat left top / 100% 100%;
		transform: rotate(180deg);
		transform-origin: center;
		opacity: .82;
	}

	.airox-about-us .airox-about-vm__stage {
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		margin: 0;
		aspect-ratio: auto;
	}

	.airox-about-vm__copy,
	.airox-about-vm__half {
		position: absolute;
		margin: 0;
		min-width: 0;
		min-height: 0;
		transform: none;
	}

	/* 575 × 153 panel scaled against the 1080px XD phone artboard. */
	.airox-about-vm__copy {
		width: 53.241vw;
		height: 14.167vw;
	}

	.airox-about-vm__copy--vision {
		left: 4.648vw;
		top: 10.5vw;
	}

	.airox-about-vm__copy--mission {
		left: 42.037vw;
		top: 31.5vw;
	}

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

	.airox-about-vm__copy-content {
		position: absolute;
		z-index: 3;
		inset: 0;
		display: block;
		padding: 0 !important;
		text-align: left;
	}

	/* 76.5 × 153 half-circle, preserving the supplied SVG's 1:2 ratio. */
	.airox-about-vm__half {
		width: 7.083vw;
		height: 14.167vw;
		aspect-ratio: auto;
	}

	.airox-about-vm__half--vision {
		left: 57.889vw;
		top: 10.5vw;
		justify-self: auto;
	}

	.airox-about-vm__half--mission {
		left: 34.954vw;
		top: 31.5vw;
		justify-self: auto;
	}

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

	/* 122px XD icon, scaled with the 1080-wide artwork. */
	.airox-about-vm__icon {
		position: absolute;
		z-index: 5;
		width: 11.296vw;
		height: 11.296vw;
		max-width: none;
		object-fit: contain;
	}

	.airox-about-vm__half--vision .airox-about-vm__icon {
		left: -79.739%;
		top: 10.131%;
	}

	.airox-about-vm__half--mission .airox-about-vm__icon {
		left: 20.261%;
		top: 10.131%;
	}

	/* Typography is deliberately small because the XD source is a 1080px phone artboard. */
	.airox-about-vm__title {
		position: absolute;
		z-index: 6;
		margin: 0;
		font-size: 2.963vw;
		font-weight: 700;
		line-height: 1;
		letter-spacing: -.018em;
		white-space: nowrap;
		transform: none !important;
	}

	.airox-about-vm__copy--vision .airox-about-vm__title {
		top: 15.5%;
		left: 49.5%;
		padding: 0;
		text-align: right;
	}

	.airox-about-vm__copy--mission .airox-about-vm__title {
		top: 15.5%;
		left: 25%;
		text-align: left;
	}

	.airox-about-vm__description,
	.airox-about-vm__copy--mission .airox-about-vm__description {
		position: absolute;
		z-index: 6;
		margin: 0;
		font-size: 1.741vw;
		font-weight: 400;
		line-height: 1.5;
		letter-spacing: -.01em;
		white-space: nowrap;
	}

	.airox-about-vm__copy--vision .airox-about-vm__description {
		left: 7%;
		top: 43.5%;
		width: 86%;
		text-align: center;
	}

	.airox-about-vm__copy--mission .airox-about-vm__description {
		left: 12.174%;
		top: 43.5%;
		width: 84.348%;
		text-align: left;
	}

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

	/* Mobile reference uses lime outlined 01 / 02, not the desktop white numerals. */
	.airox-about-vm__number {
		position: absolute;
		z-index: 7;
		margin: 0;
		color: transparent;
		-webkit-text-fill-color: #fff;
		-webkit-text-stroke: .18vw #8cc11b;
		font-size: 4.444vw;
		font-weight: 400;
		line-height: 1;
		letter-spacing: -.08em;
		transform: none;
		white-space: nowrap;
	}

	.airox-about-vm__half--vision .airox-about-vm__number {
		left: -162%;
		top: 10%;
	}

	.airox-about-vm__half--mission .airox-about-vm__number {
		left: 192%;
		top: 10%;
	}
}

/*
 * v1.5.22 — phone-only Vision / Mission geometry correction.
 * Calibrated against the supplied mobile design crop: compact two-row stack,
 * narrow inter-row gap, aligned headings/numerals, and no excess cream canvas.
 * Desktop/tablet are intentionally unchanged.
 */
@media (max-width: 480px) {
	.airox-about-us .airox-about-vm {
		height: 37.25vw !important;
		min-height: 0 !important;
		padding: 0 !important;
	}

	/* The tight supplied component crop does not show the lower wave field. */
	.airox-about-us .airox-about-vm::before {
		display: none !important;
	}

	/* Keep the already-correct left/right artwork geometry; correct Y only. */
	.airox-about-us .airox-about-vm__copy--vision,
	.airox-about-us .airox-about-vm__half--vision {
		top: 2.55vw !important;
	}

	.airox-about-us .airox-about-vm__copy--mission,
	.airox-about-us .airox-about-vm__half--mission {
		top: 19.35vw !important;
	}

	/* Reference places both title lines slightly lower than the number cap-height. */
	.airox-about-us .airox-about-vm__copy--vision .airox-about-vm__title,
	.airox-about-us .airox-about-vm__copy--mission .airox-about-vm__title {
		top: 18% !important;
	}

	.airox-about-us .airox-about-vm__half--vision .airox-about-vm__number,
	.airox-about-us .airox-about-vm__half--mission .airox-about-vm__number {
		top: 8% !important;
	}

	/* Pull body copy up into the same visual rhythm as the XD reference. */
	.airox-about-us .airox-about-vm__copy--vision .airox-about-vm__description,
	.airox-about-us .airox-about-vm__copy--mission .airox-about-vm__description {
		top: 28.5% !important;
	}
}

/*
 * v1.5.23 — final phone correction against the supplied XD crop.
 * Mobile only: restore the 24px inter-section rhythm used by Our History,
 * keep the two cards compact, and fix Mission text so it does not collide
 * with the 02/title row. Desktop/tablet remain unchanged.
 */
@media (max-width: 480px) {
	.airox-about-us .airox-about-vm {
		/* Card stack = 30.967vw high; add the same 24px breathing room on
		 * each outer edge that the Our History mobile sections use. */
		height: calc(30.967vw + 48px) !important;
		min-height: 0 !important;
		padding: 0 !important;
		background: #fcfff5;
		overflow: hidden;
	}

	.airox-about-us .airox-about-vm::before {
		display: none !important;
	}

	.airox-about-us .airox-about-vm__stage {
		position: relative;
		width: 100%;
		height: 100%;
		margin: 0;
	}

	/* First row begins 24px after Section 01, matching Our History's phone rhythm. */
	.airox-about-us .airox-about-vm__copy--vision,
	.airox-about-us .airox-about-vm__half--vision {
		top: 24px !important;
	}

	/* Preserve the XD row-to-row distance: 16.8vw from Vision top to Mission top. */
	.airox-about-us .airox-about-vm__copy--mission,
	.airox-about-us .airox-about-vm__half--mission {
		top: calc(24px + 16.8vw) !important;
	}

	/* Heading/number cap-height alignment from the supplied mobile artwork. */
	.airox-about-us .airox-about-vm__copy--vision .airox-about-vm__title,
	.airox-about-us .airox-about-vm__copy--mission .airox-about-vm__title {
		top: 16.5% !important;
	}

	.airox-about-us .airox-about-vm__half--vision .airox-about-vm__number,
	.airox-about-us .airox-about-vm__half--mission .airox-about-vm__number {
		top: 8.5% !important;
	}

	/* Critical fix: body copy starts below the title row, not through it. */
	.airox-about-us .airox-about-vm__copy--vision .airox-about-vm__description {
		top: 44% !important;
	}

	.airox-about-us .airox-about-vm__copy--mission .airox-about-vm__description {
		top: 45% !important;
	}
}

/* v1.5.23b — mobile XD uses a 980px content grid, not the 1080px artboard.
 * Rebase every component dimension to that 980px grid so the rows reach the
 * left/right guides exactly like the supplied design. */
@media (max-width: 480px) {
	.airox-about-us .airox-about-vm {
		height: calc(34.082vw + 48px) !important;
	}

	.airox-about-us .airox-about-vm__copy {
		width: 58.673vw !important;   /* 575 / 980 */
		height: 15.612vw !important;  /* 153 / 980 */
	}

	.airox-about-us .airox-about-vm__copy--vision {
		left: 0 !important;
		top: 24px !important;
	}

	.airox-about-us .airox-about-vm__copy--mission {
		left: 41.327vw !important;    /* 1 - 575/980 */
		top: calc(24px + 18.469vw) !important; /* 181 / 980 */
	}

	.airox-about-us .airox-about-vm__half {
		width: 7.806vw !important;    /* 76.5 / 980 */
		height: 15.612vw !important;
	}

	.airox-about-us .airox-about-vm__half--vision {
		left: 58.673vw !important;
		top: 24px !important;
	}

	.airox-about-us .airox-about-vm__half--mission {
		left: 33.520vw !important;    /* 41.327 - 7.806 */
		top: calc(24px + 18.469vw) !important;
	}

	.airox-about-us .airox-about-vm__icon {
		width: 12.449vw !important;   /* 122 / 980 */
		height: 12.449vw !important;
	}

	.airox-about-us .airox-about-vm__title {
		font-size: 3.265vw !important; /* 32 / 980 */
	}

	.airox-about-us .airox-about-vm__description,
	.airox-about-us .airox-about-vm__copy--mission .airox-about-vm__description {
		font-size: 1.918vw !important; /* 18.8 / 980 */
		line-height: 1.5 !important;
	}

	.airox-about-us .airox-about-vm__number {
		font-size: 4.898vw !important; /* 48 / 980 */
		-webkit-text-stroke-width: .198vw !important;
	}

	.airox-about-us .airox-about-vm__copy--vision .airox-about-vm__title,
	.airox-about-us .airox-about-vm__copy--mission .airox-about-vm__title {
		top: 16.5% !important;
	}

	.airox-about-us .airox-about-vm__copy--vision .airox-about-vm__description {
		top: 44% !important;
	}

	.airox-about-us .airox-about-vm__copy--mission .airox-about-vm__description {
		top: 45% !important;
	}
}
