/**
 * Standards FM — About intro and Why sections.
 *
 * Loaded only for the About template. The inner hero is styled by page-hero.css;
 * other About sections live in dedicated stylesheets. Brand values use the
 * theme tokens (--sfm-*) so the page stays aligned with the rest of the site.
 */

.ab-page {
	/* neutral body copy, matching the theme's .std-text */
	--ab-text: #6f6f6f;
	color: var(--ab-text);
	line-height: var(--sfm-leading-body);
	font-family: var(--sfm-font-sans);
}

.ab-page img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Header sub-menu jumps to these section ids; offset the fixed header so the
 * heading lands below it, and make the jump feel deliberate. */
html {
	scroll-behavior: smooth;
}

.ab-page #who-we-are,
.ab-page #why-standards,
.ab-page #vision-mission,
.ab-page #core-values,
.ab-page #ceo-message,
.ab-page #milestones,
.ab-page #iso-certification,
.ab-page #awards {
	scroll-margin-top: 112px;
}

@media (max-width: 700px) {
	.ab-page #who-we-are,
	.ab-page #why-standards,
	.ab-page #vision-mission,
	.ab-page #core-values,
	.ab-page #ceo-message,
	.ab-page #milestones,
	.ab-page #iso-certification,
	.ab-page #awards {
		scroll-margin-top: 88px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* About STANDARDS section - matches about-standards(1).html reference */
.about {
	/* 1 design unit = 1px on a 1840px-wide screen; the section scales with the viewport */
	--u: calc(100vw / 1840);
	/* left gutter shared with the page-hero content (--ph-container + its 24px pad)
	 * so the section content starts at the same point as the rest of the page */
	--gutter: max(24px, calc((100% - var(--ph-container, 1280px)) / 2 + 24px));
	--navy: var(--sfm-navy);
	--green: var(--sfm-green);
	--txt: var(--ab-text);
	--strong: var(--sfm-ink);
	--line: var(--sfm-line);
	font-family: var(--sfm-font-sans);
	/* body copy weight, matching the theme's .std-text */
	font-weight: var(--sfm-weight-medium);
	padding: calc(var(--u) * 96) 0 calc(var(--u) * 120) var(--gutter);
	position: relative;
	/* the full-bleed artwork can round past the viewport edge: clip it without
	 * creating a scroll container (which would break position:sticky elsewhere) */
	overflow-x: hidden;
	overflow-x: clip;
}

/* hairline separating the intro from the Why STANDARDS band below:
 * half the page width, centred */
.about::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 50%;
	height: 1px;
	background: var(--line);
}

/* title: green dot centered on both sides */
.about h2 {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--u) * 22);
	font-weight: var(--sfm-weight-bold);
	font-size: clamp(38px, 2.5vw, 46px);
	line-height: 1;
	letter-spacing: .005em;
	color: var(--navy);
	margin: 0 0 calc(var(--u) * 48);
}

.about h2::before,
.about h2::after {
	content: "";
	flex: none;
	width: calc(var(--u) * 13);
	height: calc(var(--u) * 13);
	border-radius: 50%;
	background: var(--green);
}

.about h2::after {
	margin-left: calc(var(--u) * 3);
}

.about__grid {
	display: grid;
	align-items: center;
	grid-template-columns: calc(var(--u) * 765) 1fr;
	column-gap: calc(var(--u) * 115);
}

/* bullet list with a thin connector line between dots */
.about ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.about li {
	position: relative;
	padding-left: calc(var(--u) * 33);
	margin-bottom: calc(var(--u) * 26);
	font-size: clamp(16px, 1.087vw, 20px);
	line-height: clamp(20px, 1.359vw, 25px);
	letter-spacing: .01em;
	color: var(--txt);
}

.about li:last-child {
	margin-bottom: 0;
}

.about li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(var(--u) * 7.5);
	width: calc(var(--u) * 11);
	height: calc(var(--u) * 11);
	border-radius: 50%;
	background: var(--green);
}

.about li::after {
	content: "";
	position: absolute;
	left: calc(var(--u) * 5);
	width: 1px;
	background: var(--line);
	top: calc(var(--u) * 26);
	bottom: calc(var(--u) * -18);
}

.about li:last-child::after {
	bottom: 0;
}

.about b {
	font-weight: var(--sfm-weight-bold);
	color: var(--strong);
}

/* image: flush against the right edge of the page */
.about__art {
	min-width: 0;
	margin-top: calc(var(--u) * -36);
}

.about__art img {
	display: block;
	width: 100%;
	height: auto;
	/* shifts the navy of the supplied image toward the brighter blue in the design */
	filter: hue-rotate(18deg) saturate(1.6);
}

/* tablet / mobile: stacked, fixed sizes */
@media (max-width: 1100px) {
	.about {
		--u: 1px;
		padding: 72px 6% 80px;
	}
	.about h2 {
		display: flex;
		justify-content: center;
		font-size: clamp(27px, 5.5vw, 40px);
		gap: 14px;
		margin-bottom: 40px;
	}
	.about h2::before,
	.about h2::after {
		width: 10px;
		height: 10px;
		margin-bottom: 8px;
	}
	.about__grid {
		grid-template-columns: 1fr;
		row-gap: 40px;
	}
	.about li {
		font-size: var(--sfm-text-base);
		line-height: 24px;
	}
	.about__art {
		margin: 0 auto;
	}
}

/* Why STANDARDS section - matches the Why STANDARDS.html reference:
 * a centred dotted title, a row of tabs, and a stage where the active tab's
 * copy sits on the left while its photo card carousels on the right. The
 * palette maps onto the brand tokens and the type onto the theme font. */
.why {
	/* same design unit as the intro section above */
	--u: calc(100vw / 1840);
	/* left rail aligned to the page-hero content gutter, like the intro section */
	--x0: max(24px, calc((100% - var(--ph-container, 1280px)) / 2 + 24px));
	--card-w: calc(var(--u) * 630);
	--gap: calc(var(--u) * 30);
	--h: calc(var(--u) * 440);
	--navy: var(--sfm-navy);
	--green: var(--sfm-green);
	--grey: #7b8794;
	position: relative;
	overflow: hidden;
	padding: calc(var(--u) * 50) 0 calc(var(--u) * 110);
	background: linear-gradient(#fff 0, #fff 78%, #e9f3e3 100%);
	min-height: calc(var(--u) * 893);
	font-family: var(--sfm-font-sans);
	color: var(--navy);
}

/* title: green dot centered on both sides */
.why__title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--u) * 22);
	margin: 0;
	font-family: inherit;
	font-weight: var(--sfm-weight-bold);
	font-size: clamp(38px, 2.5vw, 46px);
	line-height: 1;
	letter-spacing: .005em;
	color: var(--navy);
}

.why__title i {
	flex: none;
	width: calc(var(--u) * 13);
	height: calc(var(--u) * 13);
	border-radius: 50%;
	background: var(--green);
}

/* tabs ------------------------------------------------------------------ */

.why__tabs {
	display: flex;
	gap: calc(var(--u) * 76);
	padding-left: var(--x0);
	margin-top: calc(var(--u) * 68);
}

.why__tab {
	position: relative;
	margin: 0 calc(var(--u) * -10);
	padding: 4px calc(var(--u) * 10) calc(var(--u) * 22);
	background: none;
	border: 0;
	font-family: inherit;
	font-weight: var(--sfm-weight-medium);
	font-size: max(12px, calc(var(--u) * 22));
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--grey);
	white-space: nowrap;
	cursor: pointer;
	transition: color .3s;
}

.why__tab::after {
	content: "";
	position: absolute;
	/* match the label width exactly: the button carries 10u of horizontal
	 * padding for the tap target, so inset the underline by that much */
	left: calc(var(--u) * 10);
	right: calc(var(--u) * 10);
	bottom: 0;
	height: max(3px, calc(var(--u) * 4));
	background: var(--green);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s cubic-bezier(.65, 0, .35, 1);
}

.why__tab.is-on {
	color: var(--navy);
}

.why__tab.is-on::after {
	transform: scaleX(1);
}

.why__tab:hover {
	color: var(--navy);
}

.why__tab:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 4px;
	border-radius: 6px;
}

/* stage: copy on the left, card carousel behind it ---------------------- */

.why__stage {
	position: relative;
	margin-top: calc(var(--u) * 110);
	height: var(--h);
}

.why__texts {
	position: absolute;
	left: var(--x0);
	top: 0;
	width: calc(var(--u) * 480);
	height: 100%;
	z-index: 2;
}

.why__text {
	position: absolute;
	inset: 0 0 auto 0;
	opacity: 0;
	transform: translateY(14px);
	pointer-events: none;
	transition: opacity .2s ease, transform .3s ease;
}

.why__text.is-on {
	opacity: 1;
	transform: none;
	pointer-events: auto;
	transition: opacity .45s ease .5s, transform .6s cubic-bezier(.2, .7, .2, 1) .5s;
}

.why__text h3 {
	margin: 0;
	font-weight: var(--sfm-weight-medium);
	font-size: max(20px, calc(var(--u) * 42));
	line-height: 1.15;
	color: var(--navy);
}

.why__text h3 b {
	display: block;
	font-weight: var(--sfm-weight-medium);
}

.why__text p {
	margin: calc(var(--u) * 34) 0 0;
	font-weight: var(--sfm-weight-medium);
	font-size: max(13px, calc(var(--u) * 22));
	line-height: 1.36;
	color: var(--grey);
}

.why__arrows {
	position: absolute;
	left: var(--x0);
	bottom: 0;
	display: flex;
	gap: calc(var(--u) * 28);
	z-index: 3;
}

.why__arr {
	width: max(30px, calc(var(--u) * 42));
	height: max(19px, calc(var(--u) * 26));
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--navy);
	cursor: pointer;
	transition: opacity .3s, transform .25s;
}

.why__arr svg {
	display: block;
	width: 100%;
	height: 100%;
}

.why__arr:hover:not(:disabled) {
	transform: scale(1.12);
}

.why__arr:disabled {
	opacity: .3;
	cursor: default;
}

.why__arr:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 4px;
	border-radius: 6px;
}

.why__track {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	gap: var(--gap);
	transition: transform .8s cubic-bezier(.65, 0, .35, 1);
	will-change: transform;
}

.why__card {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	flex: 0 0 var(--card-w);
	width: var(--card-w);
	height: var(--h);
	border-radius: 8px;
	overflow: hidden;
	transition: transform .8s cubic-bezier(.65, 0, .35, 1);
}

.why__card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* mobile / tablet: copy flows above a native scroll strip ----------------- */
@media (max-width: 800px) {
	.why {
		--card-w: 62vw;
		--gap: 16px;
		--h: 300px;
		--x0: 20px;
		padding: 40px 0 60px;
		min-height: 0;
	}

	.why__tabs {
		gap: 30px;
		margin-top: 36px;
		padding-left: var(--x0);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.why__tab {
		padding: 4px 10px 14px;
		margin: 0 -10px;
	}

	.why__tab::after {
		left: 10px;
		right: 10px;
	}

	.why__stage {
		margin-top: 40px;
		height: auto;
	}

	.why__texts {
		position: relative;
		left: 0;
		width: 100%;
		height: 210px;
		padding: 0 var(--x0);
	}

	.why__text {
		inset: 0 var(--x0) auto var(--x0);
	}

	.why__text h3 {
		font-size: 30px;
	}

	.why__text p {
		margin-top: 18px;
		font-size: var(--sfm-text-base);
	}

	.why__track {
		position: relative;
		left: var(--x0);
		margin-top: 20px;
	}

	.why__card {
		position: relative;
		transform: none !important;
		transition: none;
	}

	.why__arrows {
		position: relative;
		left: var(--x0);
		bottom: auto;
		margin-top: 26px;
		gap: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.why__card,
	.why__track,
	.why__text {
		transition-duration: .01ms;
	}
}