/**
 * Airox Our History Page styles.
 * Section 01: management-message hero supplied by the client.
 */

@font-face {
	font-family: 'Ramus';
	src: url('../fonts/ramus-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Ramus';
	src: url('../fonts/ramus-medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Ramus';
	src: url('../fonts/ramus-semibold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Ramus';
	src: url('../fonts/ramus-bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

.airox-history,
.airox-history *,
.airox-history *::before,
.airox-history *::after {
	box-sizing: border-box;
}

.airox-history {
	--airox-history-lime: #82c316;
	--airox-history-button: #547c22;
	--airox-history-white: #ffffff;
	--airox-history-section-gap: 0px;
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	font-family: 'Ramus', 'Helvetica Neue', Arial, sans-serif;
	color: var(--airox-history-white);
	overflow: clip;
}

/*
 * The existing Airox Header main bar is intentionally transparent. Pull this
 * hero underneath that bar so the supplied image is visible behind the logo,
 * navigation and search exactly like the approved reference. The dark top bar
 * remains in normal flow and is not overlapped.
 */
.airox-history-hero {
	--airox-history-header-overlap: 74px;
	position: relative;
	isolation: isolate;
	width: 100%;
	/* Match the Home hero's desktop viewport instead of scaling the section
	 * indefinitely with the 2048:910 source-art aspect ratio. Because this
	 * hero is pulled 74px underneath the transparent main header, that overlap
	 * is included in the visible section depth. */
	height: clamp(544px, calc(28vw + 74px), 584px);
	min-height: 544px;
	margin-top: calc(-1 * var(--airox-history-header-overlap));
	background-image: var(--airox-history-bg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	overflow: hidden;
}

/*
 * Desktop measurements are deliberately fixed to the supplied 1223px
 * reference instead of growing with viewport width. The artwork can scale,
 * but the copy/button/stats retain the approved visual size on 1440/1920px
 * screens.
 */
.airox-history-hero__inner {
	position: relative;
	z-index: 1;
	width: 80.4%;
	max-width: 1646px;
	min-height: inherit;
	margin: 0 auto;
	padding-top: 120px;
	padding-bottom: 34px;
}

.airox-history-hero__content {
	width: 520px;
	max-width: 520px;
	min-width: 0;
}

.airox-history-hero__eyebrow {
	margin: 0 0 11px;
	color: var(--airox-history-lime);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -.01em;
}

.airox-history-hero__title {
	margin: 0;
	color: #fff;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.018em;
	text-transform: uppercase;
}

.airox-history-hero__title-line {
	display: block;
	white-space: nowrap;
}

.airox-history-hero__title-accent {
	color: var(--airox-history-lime);
}

.airox-history-hero__title-line:last-child .airox-history-hero__title-accent {
	margin-left: .16em;
}

.airox-history-hero__description {
	max-width: 100%;
	margin: 18px 0 0;
	color: rgba(255, 255, 255, .98);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.78;
	letter-spacing: -.012em;
}

.airox-history-hero__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 156px;
	height: 34px;
	margin-top: 28px;
	border: 0;
	border-radius: 999px;
	/* Reference button is a flat deep green pill with a 3px lime lower edge. */
	background: #466b1f;
	box-shadow: 0 3px 0 #91c71c;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.airox-history-hero__button:hover,
.airox-history-hero__button:focus-visible {
	background: #527d23;
	box-shadow: 0 3px 0 #91c71c, 0 8px 18px rgba(0, 0, 0, .16);
	color: #fff;
	transform: translateY(-1px);
}

.airox-history-hero__stats {
	display: flex;
	align-items: stretch;
	/* The approved reference intentionally lets the stats extend wider than the
	 * 520px copy column. Do not cap this flex row to the content width: doing so
	 * makes the browser shrink all three stat cells and shifts both separators. */
	width: max-content;
	max-width: none;
	margin-top: 28px;
}

.airox-history-hero__stat {
	min-height: 55px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-width: 0;
	flex: 0 0 auto;
}

.airox-history-hero__stat:nth-child(1) {
	width: 148px;
}

.airox-history-hero__stat:nth-child(2) {
	width: 229px;
	border-left: 1px solid rgba(255, 255, 255, .82);
	padding-left: 43px;
}

.airox-history-hero__stat:nth-child(3) {
	width: 292px;
	border-left: 1px solid rgba(255, 255, 255, .82);
	padding-left: 43px;
}

.airox-history-hero__stat-value {
	color: #fff;
	font-size: 27px;
	font-weight: 700;
	line-height: .96;
	letter-spacing: -.02em;
	white-space: nowrap;
}

.airox-history-hero__stat-label {
	margin-top: 4px;
	color: var(--airox-history-lime);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.02;
	text-transform: uppercase;
	white-space: nowrap;
}

.airox-history-hero__stat-note {
	margin-top: 4px;
	color: #fff;
	font-size: 9px;
	font-weight: 600;
	line-height: 1.05;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Wide desktop intentionally caps at the same visual depth as the Home hero.
 * The supplied 2048:910 artwork remains full-width and is cropped vertically
 * from the bottom rather than making the first screen excessively tall. */
@media (min-width: 1441px) {
	.airox-history-hero {
		height: 584px;
		min-height: 584px;
	}
}

/* Laptop / small desktop: retain the approved desktop text scale. */
@media (max-width: 1200px) and (min-width: 1025px) {
	.airox-history-hero__inner {
		width: 80.4%;
		padding-top: 120px;
	}

	.airox-history-hero__content {
		width: 520px;
		max-width: 520px;
	}
}

/* Tablet: existing Airox Header main bar becomes 64px high. */
@media (max-width: 1024px) {
	.airox-history-hero {
		--airox-history-header-overlap: 64px;
		height: auto;
		min-height: 660px;
		background-size: cover;
		background-position: 58% center;
	}

	.airox-history-hero::after {
		content: '';
		position: absolute;
		z-index: 0;
		inset: 0;
		background: linear-gradient(90deg, rgba(23, 57, 2, .32) 0%, rgba(23, 57, 2, .16) 54%, rgba(0, 0, 0, .03) 100%);
		pointer-events: none;
	}

	.airox-history-hero__inner {
		width: 88%;
		padding-top: 116px;
		padding-bottom: 44px;
	}

	.airox-history-hero__content {
		width: 64%;
		min-width: 0;
		max-width: 610px;
	}

	.airox-history-hero__eyebrow {
		font-size: 18px;
	}

	.airox-history-hero__title {
		font-size: clamp(32px, 4.2vw, 42px);
	}

	.airox-history-hero__description {
		font-size: 16px;
		line-height: 1.65;
	}

	.airox-history-hero__button {
		width: 158px;
		height: 36px;
		font-size: 13.5px;
	}

	.airox-history-hero__stats {
		width: 100%;
		margin-top: 34px;
	}

	.airox-history-hero__stat:nth-child(1),
	.airox-history-hero__stat:nth-child(2),
	.airox-history-hero__stat:nth-child(3) {
		width: auto;
		flex: 1 1 0;
	}

	.airox-history-hero__stat:nth-child(2),
	.airox-history-hero__stat:nth-child(3) {
		padding-left: 28px;
	}

	.airox-history-hero__stat-value {
		font-size: 27px;
	}

	.airox-history-hero__stat-label {
		font-size: 11px;
	}

	.airox-history-hero__stat-note {
		font-size: 8.5px;
	}
}

/* Mobile: existing Airox Header main bar becomes 58px high. */
@media (max-width: 600px) {
	.airox-history {
		overflow: hidden;
	}

	.airox-history-hero {
		--airox-history-header-overlap: 58px;
		height: auto;
		/* v1.5.00: let the phone hero end with its real content instead of
		 * forcing a tall fixed green canvas below the stats. This keeps the
		 * section responsive when copy wraps differently on narrow phones. */
		min-height: 0;
		background-position: 61% center;
	}

	.airox-history-hero::before {
		content: '';
		position: absolute;
		z-index: 0;
		inset: 0;
		background: linear-gradient(90deg, rgba(23, 56, 3, .68) 0%, rgba(23, 56, 3, .42) 67%, rgba(4, 26, 13, .18) 100%);
		pointer-events: none;
	}

	.airox-history-hero__inner {
		width: auto;
		margin: 0;
		padding: 94px 18px 24px;
	}

	.airox-history-hero__content {
		width: 100%;
		max-width: 520px;
		min-width: 0;
	}

	.airox-history-hero__eyebrow {
		margin-bottom: 10px;
		font-size: 16px;
	}

	.airox-history-hero__title {
		font-size: clamp(28px, 8vw, 34px);
		line-height: 1.08;
	}

	.airox-history-hero__title-line {
		white-space: normal;
	}

	.airox-history-hero__title-line:last-child .airox-history-hero__title-accent {
		margin-left: .11em;
	}

	.airox-history-hero__description {
		max-width: 95%;
		margin-top: 18px;
		font-size: 15px;
		line-height: 1.62;
	}

	.airox-history-hero__button {
		width: 150px;
		height: 35px;
		margin-top: 24px;
		font-size: 13px;
	}

	.airox-history-hero__stats {
		width: 100%;
		margin-top: 36px;
	}

	.airox-history-hero__stat {
		min-height: 86px;
		padding-right: 8px;
	}

	.airox-history-hero__stat:nth-child(1),
	.airox-history-hero__stat:nth-child(2),
	.airox-history-hero__stat:nth-child(3) {
		width: 33.333%;
		flex: 0 0 33.333%;
	}

	.airox-history-hero__stat:nth-child(2),
	.airox-history-hero__stat:nth-child(3) {
		padding-left: 11px;
	}

	.airox-history-hero__stat-value {
		font-size: clamp(18px, 5.9vw, 24px);
		white-space: normal;
	}

	.airox-history-hero__stat-label {
		font-size: clamp(8px, 2.4vw, 10px);
		line-height: 1.12;
		white-space: normal;
	}

	.airox-history-hero__stat-note {
		font-size: clamp(7px, 2vw, 8.5px);
		line-height: 1.2;
		white-space: normal;
	}
}

@media (max-width: 390px) {
	.airox-history-hero {
		min-height: 0;
		background-position: 63% center;
	}

	.airox-history-hero__inner {
		padding-left: 16px;
		padding-right: 16px;
	}

	.airox-history-hero__description {
		max-width: 100%;
	}

	.airox-history-hero__stat:nth-child(2),
	.airox-history-hero__stat:nth-child(3) {
		padding-left: 9px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.airox-history-hero__button {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * v1.4.83 — Responsive Header/hero overlap repair.
 *
 * On phones v1.4.82 changed .airox-history to overflow:hidden. That creates a
 * formatting/clipping context, so the hero's negative top margin can no longer
 * paint behind the transparent Header main bar. Pull the whole History widget
 * upward instead; this is not clipped by its own overflow and preserves the
 * dark top contact bar in normal flow.
 * ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.airox-history {
		margin-top: -64px;
	}

	.airox-history-hero {
		--airox-history-header-overlap: 0px;
		margin-top: 0;
	}
}

@media (max-width: 600px) {
	.airox-history {
		margin-top: -58px;
		overflow: clip;
	}

	.airox-history-hero {
		--airox-history-header-overlap: 0px;
		margin-top: 0;
	}
}

/* -------------------------------------------------------------------------
 * v1.4.88 — Section 02: exact 763×281 reference geometry.
 *
 * IMPORTANT: every desktop/tablet dimension below is derived directly from
 * the supplied 763×281 artwork.  Do not cap these values with fixed px
 * max-width/max-height/font-size values: browser zoom can make those caps
 * trigger early and shrink the composition relative to the viewport.
 * Horizontal guides from the approved reference:
 *   portrait left  = 85 / 763  = 11.14%
 *   portrait width = 229 / 763 = 30.01%
 *   copy left      = 352 / 763 = 46.13%
 *   inner width    = 593 / 763 = 77.72%
 * The result therefore scales as one coherent design at every width >700px.
 * ---------------------------------------------------------------------- */
.airox-history-management {
	position: relative;
	width: 100%;
	height: 36.8283vw; /* 281 / 763 */
	min-height: 0;
	margin: 0;
	border-top: 2px solid #244d12;
	background-color: #fcfff5;
	background-image: url('../images/history-management-waves-v1486.webp');
	background-repeat: no-repeat;
	background-position: left top;
	/* The wave artwork also belongs to the same reference canvas.  A fixed
	 * pixel cap was the reason it stopped too early on the live 1920px view. */
	background-size: 100% auto;
	color: #252b2a;
	overflow: hidden;
}

.airox-history-management__inner {
	position: relative;
	z-index: 1;
	width: 77.7195%; /* 593 / 763 */
	max-width: none;
	height: 100%;
	margin: 0 auto;
	padding-top: 6.6841vw; /* 51 / 763 */
	display: grid;
	/* 229px portrait + 38px gap + 326px copy = 593px inner grid. */
	grid-template-columns: 38.6172% 54.9747%;
	column-gap: 6.4081%;
	align-items: start;
}

.airox-history-management__portrait {
	position: relative;
	width: 100%;
	aspect-ratio: 229 / 205;
	height: auto;
	border: 1px solid #8bc53f;
	border-radius: 3.2765vw; /* 25 / 763 */
	background: #fcfff5;
	overflow: hidden;
	isolation: isolate;
	transform: translate3d(0, 0, 0);
	box-shadow: 0 0 0 0 rgba(145, 207, 34, 0);
	transition:
		transform .34s cubic-bezier(.22, 1, .36, 1),
		border-color .34s ease,
		box-shadow .34s cubic-bezier(.22, 1, .36, 1);
}

.airox-history-management__portrait img {
	position: absolute;
	top: 1%;
	left: 1.3%;
	display: block;
	width: 97.8%;
	max-width: none;
	height: auto;
	margin: 0;
	z-index: 1;
}

/* v1.4.96 — Match the supplied video hover: the portrait itself keeps its
 * original colour while a solid Airox-lime offset backing/shadow reveals on
 * the bottom/right.  A tiny up-left lift gives the same raised-card feel. */
@media (hover: hover) and (pointer: fine) {
	.airox-history-management__portrait:hover {
		border-color: #91cf22;
		transform: translate3d(-4px, -4px, 0);
		box-shadow: 10px 10px 0 0 #91cf22;
	}
}

@media (prefers-reduced-motion: reduce) {
	.airox-history-management__portrait {
		transition: none;
	}
}

.airox-history-management__copy {
	width: 100%;
	max-width: none;
	margin-top: 3.0144vw; /* 23 / 763 */
}

.airox-history-management__title {
	margin: 0;
	color: #252a29;
	font-size: 1.8349vw; /* 14 / 763 */
	font-weight: 700;
	line-height: 1.43;
	letter-spacing: -.018em;
	text-transform: uppercase;
}

.airox-history-management__title-line {
	display: block;
	white-space: nowrap;
}

.airox-history-management__accent {
	margin-left: .18em;
	color: #77bd0d;
}

.airox-history-management__description {
	margin: 1.8386vw 0 0; /* 12 / 763 */
	color: #3a403e;
	font-size: 1.3761vw; /* 10.5 / 763 */
	font-weight: 400;
	line-height: 1.88;
	letter-spacing: -.012em;
}

.airox-history-management__signature {
	margin-top: 2.0970vw; /* 16 / 763 */
}

.airox-history-management__name {
	margin: 0;
	color: #313735;
	font-size: 1.3106vw; /* 10 / 763 */
	font-weight: 600;
	line-height: 1.2;
}

.airox-history-management__designation {
	margin-top: .3932vw; /* 3 / 763 */
	color: #75be0a;
	font-size: 1.3106vw; /* 10 / 763 */
	font-weight: 500;
	line-height: 1.15;
}

/* Phone: the reference's two-column proportions become too narrow below
 * 700px, so switch to a deliberate stacked layout while retaining the same
 * artwork, portrait treatment and visual hierarchy. */
@media (max-width: 700px) {
	.airox-history-management {
		height: auto;
		min-height: 0;
		background-size: auto 390px;
		background-position: left top;
	}

	.airox-history-management__inner {
		width: auto;
		height: auto;
		margin: 0;
		padding: 48px 22px 54px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.airox-history-management__portrait {
		width: min(78vw, 300px);
		height: min(69.8vw, 269px);
		aspect-ratio: auto;
		border-radius: 28px;
		flex: 0 0 auto;
	}

	.airox-history-management__copy {
		width: 100%;
		max-width: 520px;
		margin-top: 30px;
		align-self: stretch;
	}

	.airox-history-management__title {
		font-size: clamp(21px, 6.2vw, 27px);
		line-height: 1.2;
	}

	.airox-history-management__description {
		margin-top: 17px;
		font-size: 14px;
		line-height: 1.65;
		letter-spacing: -.01em;
	}

	.airox-history-management__signature {
		margin-top: 22px;
	}

	.airox-history-management__name,
	.airox-history-management__designation {
		font-size: 13px;
	}

	.airox-history-management__designation {
		margin-top: 4px;
	}
}

@media (max-width: 420px) {
	.airox-history-management__inner {
		padding: 42px 18px 48px;
	}

	.airox-history-management__portrait {
		width: min(82vw, 286px);
		height: min(73.4vw, 256px);
		border-radius: 25px;
	}

	.airox-history-management__copy {
		margin-top: 27px;
	}

	.airox-history-management__title-line {
		white-space: normal;
	}
}

/* -------------------------------------------------------------------------
 * v1.4.89 — Section 03 opening display: "SINCE 1960".
 *
 * Desktop geometry is taken directly from the supplied 1356×490 reference.
 * The visible new strip begins at reference y=222 and runs to y=490:
 *   strip height       = 268 / 1356 = 19.7640vw
 *   display left       = 289 / 1356 = 21.3127%
 *   display width      = 774 / 1356 = 57.0796%
 *   display top        =  64 / 1356 =  4.7198vw (relative to this strip)
 *   dark word width    = 400px of the 774px display viewBox
 *   green year starts  = 435px of the 774px display viewBox
 *
 * The small left wave-tail asset is cropped only from the client's supplied
 * reference and prevents the artwork from abruptly disappearing between the
 * approved management block and this next History display.
 * ---------------------------------------------------------------------- */
.airox-history-since {
	position: relative;
	width: 100%;
	height: 19.7640vw;
	min-height: 0;
	margin: 0;
	background-color: #fcfff5;
	background-image: url('../images/history-since-wave-tail-v1489.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: auto 100%;
	color: #323436;
	overflow: hidden;
}

.airox-history-since__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	padding-top: 4.7198vw;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}

.airox-history-since__title {
	display: block;
	width: 57.0796%;
	max-width: none;
	margin: 0 0 0 21.3127%;
	padding: 0;
	border: 0;
	font-size: 0;
	line-height: 0;
}

.airox-history-since__display {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.airox-history-since__display text {
	font-family: 'Roboto Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
	font-size: 232px;
	font-weight: 700;
	font-style: normal;
	letter-spacing: 0;
	text-transform: uppercase;
}

.airox-history-since__display-dark {
	fill: #323436;
}

.airox-history-since__display-green {
	fill: #8cc11b;
}

/* Tablet keeps the same composition but prevents the display from becoming
 * too small to read when the viewport narrows. */
@media (max-width: 900px) and (min-width: 701px) {
	.airox-history-since {
		height: 21.5vw;
	}

	.airox-history-since__inner {
		padding-top: 5.1vw;
	}

	.airox-history-since__title {
		width: 62%;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Phone: retain the exact two-colour display hierarchy while enlarging it
 * relative to the viewport instead of keeping the desktop 57% width. */
@media (max-width: 700px) {
	.airox-history-since {
		height: auto;
		min-height: 176px;
		background-size: auto 100%;
	}

	.airox-history-since__inner {
		height: auto;
		min-height: inherit;
		padding: 42px 16px 36px;
		align-items: center;
	}

	.airox-history-since__title {
		width: min(92%, 560px);
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 420px) {
	.airox-history-since {
		min-height: 154px;
	}

	.airox-history-since__inner {
		padding: 38px 12px 32px;
	}

	.airox-history-since__title {
		width: 94%;
	}
}


/* -------------------------------------------------------------------------
 * v1.4.90 — Section 04: "Our Journey / Meet the People Behind the Work".
 *
 * Desktop/tablet geometry is measured directly from the client-supplied
 * 628×466 reference. The uploaded transparent 2048×1373 team image resolves
 * to an 85.03% wide box at x=46/628, y=108/628 of the reference canvas; this
 * reproduces the supplied people placement without cropping. The line-wave
 * A History-scoped derivative of the bundled line-wave SVG is used here.
 * v1.4.99 uses the original smooth line-wave geometry and, crucially,
 * registers it to the supplied 628×466 reference at 132% width with the
 * measured -71px/+49px reference-canvas offset. The previous centered-cover
 * placement made the right fan appear too far left/high on wide screens.
 * A History-scoped clone keeps Home's shared asset untouched.
 *
 * Inter-section spacing remains explicit and identical: all History sections
 * after the hero use the same --airox-history-section-gap value (currently 0)
 * so no arbitrary extra whitespace is introduced between approved sections.
 * ---------------------------------------------------------------------- */
.airox-history-management,
.airox-history-since,
.airox-history-journey,
.airox-history-legacy {
	margin-top: var(--airox-history-section-gap);
	margin-bottom: 0;
}

.airox-history-journey {
	position: relative;
	width: 100%;
	height: 74.2038vw; /* 466 / 628 */
	min-height: 0;
	background-color: #fcfff5;
	background-image: url('../images/history-journey-wave-lines-v1499.svg');
	background-repeat: no-repeat;
	/* Exact 628×466 reference registration: the source wave is intentionally
	 * enlarged to 132% of the section width, then shifted -71px / +49px on
	 * the 628px reference canvas. Using vw offsets preserves that geometry
	 * proportionally on wide desktop and tablet instead of centering/covering
	 * the SVG (which pulled the right fan too far left and too high). */
	background-size: 132.0064% auto; /* 829 / 628 */
	background-position: left -11.3057vw top 7.8025vw; /* -71 / 628, +49 / 628 */
	color: #323436;
	overflow: hidden;
}

.airox-history-journey__inner {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
}

.airox-history-journey__eyebrow {
	position: absolute;
	z-index: 5;
	top: 2.5478vw; /* line box starts just above the y=18 reference glyphs */
	left: 0;
	width: 100%;
	margin: 0;
	color: #323436;
	font-size: 1.7516vw; /* 11 / 628 */
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.015em;
	text-align: center;
}

.airox-history-journey__title {
	position: absolute;
	z-index: 5;
	top: 5.4140vw; /* 34 / 628 */
	left: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	color: #323436;
	font-size: 3.6624vw; /* 23 / 628 */
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.026em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

.airox-history-journey__title > span + span {
	margin-left: .12em;
}

.airox-history-journey__accent {
	color: #8cc11b;
}

.airox-history-journey__description {
	position: absolute;
	z-index: 5;
	top: 10.5096vw; /* 66 / 628 */
	left: 50%;
	width: 62.1019%; /* 390 / 628 */
	margin: 0;
	transform: translateX(-50%);
	color: #3a403e;
	font-size: 1.9108vw; /* 12 / 628 */
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -.018em;
	text-align: center;
}

.airox-history-journey__outline {
	position: absolute;
	z-index: 1;
	top: 15.2866vw; /* reference line box ~= 96 / 628 */
	left: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	color: transparent;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: .1274vw #8cc11b; /* .8 / 628 */
	font-size: 15.9236vw; /* 100 / 628 */
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.022em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

.airox-history-journey__people {
	position: absolute;
	z-index: 3;
	top: 17.1975vw; /* 108 / 628 */
	left: 7.3248%;  /* 46 / 628 */
	display: block;
	width: 85.0318%; /* 534 / 628 */
	max-width: none;
	height: auto;
	margin: 0;
}

/* The client-supplied transparent WebP already contains the exact soft alpha
 * fade along the bottom of the suits. Compositing that unmodified asset on
 * #fcfff5 recreates the white dissolve in the reference without a second
 * overlay that would over-fade the image. */

/* Tablet keeps the exact 628×466 reference composition and scales it as one
 * canvas, which preserves the title/outline/people registration. */
@media (max-width: 1024px) and (min-width: 601px) {
	.airox-history-journey {
		height: 74.2038vw;
	}
}

/* Phones need a deliberate reflow; a literal 628px reference downscale would
 * make the heading and people too small. The visual hierarchy is retained:
 * eyebrow -> two-colour heading -> description -> outlined PROUDLY -> people,
 * with the same bottom white dissolve. */
@media (max-width: 600px) {
	.airox-history-journey {
		height: clamp(468px, 124vw, 530px);
		min-height: 468px;
		background-position: center center;
		background-size: auto 100%;
	}

	.airox-history-journey__eyebrow {
		top: 20px;
		font-size: 12px;
		line-height: 1.15;
	}

	.airox-history-journey__title {
		top: 43px;
		left: 3%;
		width: 94%;
		font-size: clamp(17px, 4.8vw, 21px);
		line-height: 1.1;
		letter-spacing: -.025em;
		white-space: nowrap;
	}

	.airox-history-journey__description {
		top: 72px;
		width: 92%;
		font-size: 12px;
		line-height: 1.18;
		letter-spacing: -.01em;
	}

	.airox-history-journey__outline {
		top: 104px;
		font-size: clamp(72px, 21.5vw, 94px);
		-webkit-text-stroke-width: 1px;
		letter-spacing: -.025em;
	}

	.airox-history-journey__people {
		top: 135px;
		left: 50%;
		width: 120%;
		transform: translateX(-50%);
	}

}

@media (max-width: 390px) {
	.airox-history-journey {
		height: 478px;
	}

	.airox-history-journey__title {
		left: 2%;
		width: 96%;
		font-size: 17px;
	}

	.airox-history-journey__description {
		top: 70px;
		font-size: 11.5px;
	}

	.airox-history-journey__outline {
		top: 106px;
		font-size: 77px;
	}

	.airox-history-journey__people {
		top: 140px;
		left: 50%;
		width: 126%;
		transform: translateX(-50%);
	}
}


/* -------------------------------------------------------------------------
 * v1.4.92 — Section 05: "60 Years of Excellence".
 *
 * Desktop geometry is measured from the client-supplied 1115×482 crop. The
 * upper 127px of that crop belongs to the already-approved Journey people
 * image/fade, so this section begins at reference y=127 and uses a 355px
 * design canvas:
 *   section height     = 355 / 1115 = 31.8386vw
 *   copy left          = 119 / 1115 = 10.6726% (4px screenshot border excluded)
 *   heading top        =  38 / 1115 =  3.4081vw
 *   stat image box     = x=670, y=55, 289×219 after excluding the 4px screenshot border
 *
 * The top white dissolve is intentionally NOT recreated here. It remains the
 * alpha fade already present on the Section 04 team image. This section starts
 * flush after Section 04 on the same #fcfff5 background so the fade remains
 * visually continuous instead of becoming a double shadow.
 * ---------------------------------------------------------------------- */
.airox-history-legacy {
	position: relative;
	width: 100%;
	height: 31.8386vw;
	min-height: 0;
	margin-top: var(--airox-history-section-gap);
	margin-bottom: 0;
	background-color: #fcfff5;
	background-image: url('../images/history-60-wave-tail-v1492.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 10.3139vw 31.8386vw; /* 115×355 clean wave-only crop on the 1115px reference */
	color: #323436;
	font-family: Arial, 'Helvetica Neue', sans-serif;
	overflow: hidden;
}

.airox-history-legacy__inner {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
}

.airox-history-legacy__copy {
	position: absolute;
	z-index: 2;
	top: 3.4081vw; /* 38 / 1115 */
	left: 10.6726%; /* 119 / 1115; 4px reference-crop border excluded */
	width: 36.7713%; /* 410 / 1115; exact four-line reference wrap with Arial */
	max-width: none;
}

.airox-history-legacy__title {
	margin: 0;
	color: #252a29;
	font-size: 1.6861vw; /* ~= 18.8px at the 1115px reference */
	font-weight: 700;
	line-height: 1.43;
	letter-spacing: -.018em;
	text-transform: uppercase;
}

.airox-history-legacy__title-line {
	display: block;
	white-space: nowrap;
}

.airox-history-legacy__accent {
	margin-left: .18em;
	color: #8cc11b;
}

.airox-history-legacy__description {
	width: 100%;
	margin: 1.5727vw 0 0;
	color: #3a403e;
	font-size: 1.3761vw; /* ~= 15.34px at the reference width */
	font-weight: 400;
	line-height: 1.76;
	letter-spacing: -.012em;
}

.airox-history-legacy__signature {
	margin-top: 3.8386vw;
}

.airox-history-legacy__name {
	margin: 0;
	color: #313735;
	font-size: 1.1659vw;
	font-weight: 600;
	line-height: 1.2;
}

.airox-history-legacy__designation {
	margin-top: .3932vw;
	color: #75be0a;
	font-size: 1.1659vw;
	font-weight: 500;
	line-height: 1.15;
}

.airox-history-legacy__stat {
	position: absolute;
	z-index: 2;
	top: 4.9327vw; /* 55 / 1115 */
	left: 60.0897%; /* 670 / 1115; 4px reference-crop border excluded */
	display: block;
	width: 25.9193%; /* 289 / 1115 */
	max-width: none;
	height: auto;
	margin: 0;
}

/* Tablet: preserve the two-column relationship while keeping the message and
 * 60-year badge readable instead of allowing the desktop vw typography to
 * become too small. */
@media (max-width: 1024px) and (min-width: 701px) {
	.airox-history-legacy {
		height: 350px;
		background-size: auto 100%;
	}

	.airox-history-legacy__copy {
		top: 48px;
		left: 8%;
		width: 46%;
	}

	.airox-history-legacy__title {
		font-size: 18px;
		line-height: 1.35;
	}

	.airox-history-legacy__description {
		margin-top: 16px;
		font-size: 13.5px;
		line-height: 1.6;
	}

	.airox-history-legacy__signature {
		margin-top: 24px;
	}

	.airox-history-legacy__name,
	.airox-history-legacy__designation {
		font-size: 12.5px;
	}

	.airox-history-legacy__designation {
		margin-top: 4px;
	}

	.airox-history-legacy__stat {
		top: 58px;
		left: auto;
		right: 7%;
		width: 31%;
	}
}

/* Mobile: stack the copy and the exact extracted 60-year artwork. Section 04's
 * team-image dissolve remains untouched above this block. */
@media (max-width: 700px) {
	.airox-history-legacy {
		height: auto;
		min-height: 640px;
		background-size: auto 390px;
		background-position: left top;
		overflow: hidden;
	}

	.airox-history-legacy__inner {
		height: auto;
		min-height: inherit;
		padding: 50px 22px 54px;
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.airox-history-legacy__copy {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		max-width: 520px;
		margin: 0 auto;
	}

	.airox-history-legacy__title {
		font-size: clamp(21px, 6.1vw, 27px);
		line-height: 1.2;
	}

	.airox-history-legacy__title-line {
		white-space: normal;
	}

	.airox-history-legacy__description {
		margin-top: 18px;
		font-size: 14px;
		line-height: 1.65;
		letter-spacing: -.01em;
	}

	.airox-history-legacy__signature {
		margin-top: 23px;
	}

	.airox-history-legacy__name,
	.airox-history-legacy__designation {
		font-size: 13px;
	}

	.airox-history-legacy__designation {
		margin-top: 4px;
	}

	.airox-history-legacy__stat {
		position: relative;
		top: auto;
		left: auto;
		width: min(72vw, 310px);
		max-width: 310px;
		margin: 34px auto 0;
		align-self: center;
	}
}

@media (max-width: 420px) {
	.airox-history-legacy {
		min-height: 620px;
		background-size: auto 360px;
	}

	.airox-history-legacy__inner {
		padding: 46px 18px 48px;
	}

	.airox-history-legacy__stat {
		width: min(76vw, 290px);
		margin-top: 30px;
	}
}

/* -------------------------------------------------------------------------
 * v1.5.01 — Mobile section rhythm / excess inter-section whitespace.
 *
 * Keep phone section transitions visually consistent. Earlier mobile rules
 * used unrelated top/bottom padding values (42/48, 38/32, 46/48) and Section
 * 04 kept a fixed 478px canvas even after the team image had already faded.
 * The result was a visibly larger cream gap between Journey and Legacy.
 *
 * On phones, use one 24px edge-space token for normal-flow sections and size
 * the Journey canvas from the rendered people artwork/fade instead of the old
 * fixed minimum. Desktop/tablet reference geometry remains untouched.
 * ---------------------------------------------------------------------- */
@media (max-width: 600px) {
	.airox-history {
		--airox-history-mobile-edge-space: 24px;
	}

	.airox-history-management__inner {
		padding-top: var(--airox-history-mobile-edge-space);
		padding-bottom: var(--airox-history-mobile-edge-space);
	}

	.airox-history-since {
		min-height: 0;
	}

	.airox-history-since__inner {
		min-height: 0;
		padding-top: var(--airox-history-mobile-edge-space);
		padding-bottom: var(--airox-history-mobile-edge-space);
	}

	.airox-history-journey {
		/* Follows the visible team artwork/fade closely, leaving only the same
		 * compact transition rhythm before Section 05 instead of a blank slab. */
		height: clamp(440px, calc(159px + 72.6vw), 565px);
		min-height: 0;
	}

	.airox-history-legacy {
		height: auto;
		min-height: 0;
	}

	.airox-history-legacy__inner {
		min-height: 0;
		padding-top: var(--airox-history-mobile-edge-space);
		padding-bottom: var(--airox-history-mobile-edge-space);
	}
}

@media (max-width: 390px) {
	.airox-history-journey {
		/* Extra-small layout uses the 126%-wide people image, so use the matching
		 * artwork-derived curve rather than restoring the old 478px fixed height. */
		height: clamp(410px, calc(164px + 76.2vw), 462px);
	}
}