/*
 * Infinity Rise — About Us page.
 * Builds on design-system.css tokens; mirrors home.css section conventions.
 * Desktop-first, responsive across all breakpoints (1920 · 1536 · 1440 · 1280 · 1024 · 425 · 393).
 */

.ab-section { padding: var(--sec-pt) var(--sec-pr) var(--sec-pb) var(--sec-pl); }
.lp-center { text-align: center; }

/* ---------- BANNER ---------- */
.ab-banner { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--color-white);
	display: flex; align-items: center; min-height: var(--bnr-h); overflow: hidden;
	padding: var(--bnr-pt) var(--bnr-pr) var(--bnr-pb) var(--bnr-pl); }
.ab-banner__overlay { position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 42%, rgba(0,0,0,0) 72%); }
.ab-banner__inner { position: relative; z-index: 1; }
/* Banner title uses the H1 type scale (var(--fs-h1): 72/60/52/48/38/32/30 across
   1920·1536·1440·1280·1024·425·393) at weight 600 — applied responsively. */
.ab-banner__title { color: var(--color-white); font-size: var(--fs-h1); font-weight: 600; line-height: 1.08; margin: 0;
	text-shadow: 0 2px 14px rgba(0,0,0,.35); }
/* Compact banner on desktop: a shorter band with the title vertically centred
   (the overview heading peeks in below). Without this the banner inherits the
   tall hero height/padding and balloons — e.g. 700px at 1536, taller than 1920. */
@media (min-width: 1025px) { .ab-banner { padding-top: 60px; padding-bottom: 60px; } }
@media (min-width: 1537px) { .ab-banner { min-height: 600px; } }
@media (min-width: 1281px) and (max-width: 1536px) { .ab-banner { min-height: 480px; } }
@media (min-width: 1025px) and (max-width: 1280px) { .ab-banner { min-height: 400px; } }

/* ---------- OVERVIEW · Vision & Mission ---------- */
.ab-overview { background: var(--color-bg-2); }
.ab-overview__inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 80px; align-items: start; }
/* Heading: H2 type scale at weight 400; the emphasised words at weight 500. */
.ab-overview__heading { font-size: var(--fs-h2); font-weight: 400; line-height: 1.12; margin: 0 0 28px; }
.ab-overview__em, .ab-overview__heading strong { font-weight: 500; font-style: normal; }
/* Intro paragraphs: 24px (scaled down responsively). */
.ab-overview__intro p { color: #4a4a4a; font-size: 24px; line-height: 1.65; margin: 0 0 22px; }
.ab-overview__intro p:last-child { margin-bottom: 0; }
.ab-overview__cards { display: flex; flex-direction: column; gap: 40px; }
.ab-vm__icon { width: 56px; height: 56px; margin: 0 0 18px; }
/* Vision/Mission titles: H5 type scale at weight 400. */
.ab-vm__title { font-size: var(--fs-h5); font-weight: 400; margin: 0 0 12px; }
/* Vision/Mission body: standard paragraph style. */
.ab-vm__text { color: #4a4a4a; font-size: var(--fs-p); line-height: 1.6; margin: 0; }
/* Intro paragraph responsive scale (24 -> 393). */
@media (max-width: 1536px) { .ab-overview__intro p { font-size: 20px; } }
@media (max-width: 1440px) { .ab-overview__intro p { font-size: 18px; } }
@media (max-width: 1280px) { .ab-overview__intro p { font-size: 16px; } }
@media (max-width: 1024px) { .ab-overview__intro p { font-size: 16px; } }
@media (max-width: 425px)  { .ab-overview__intro p { font-size: 15px; } }
@media (max-width: 393px)  { .ab-overview__intro p { font-size: 15px; } }
/* 1536 band: Overview uses the larger 1920 sizing (matches the design at 1536). */
@media (min-width: 1441px) and (max-width: 1536px) {
	.ab-overview__heading { font-size: 46px; }
	.ab-overview__intro p { font-size: 20px; }
	.ab-vm__title { font-size: 24px; }
	.ab-vm__text { font-size: 16px; }
}
/* 1280 band: Overview uses the larger image-style sizing (heading kept to 2 lines). */
@media (min-width: 1025px) and (max-width: 1280px) {
	.ab-overview__heading { font-size: 42px; }
	.ab-overview__intro p { font-size: 16px; }
	.ab-vm__title { font-size: 24px; }
	.ab-vm__text { font-size: 14px; }
}

/* Tighten the gap between the Overview and Reliable Sourcing sections. */
.ab-overview { padding-bottom: 70px; }
.ab-reliable { padding-top: 70px; }
@media (max-width: 1536px) { .ab-overview { padding-bottom: 60px; } .ab-reliable { padding-top: 60px; } }
@media (max-width: 1280px) { .ab-overview { padding-bottom: 50px; } .ab-reliable { padding-top: 50px; } }
@media (max-width: 1024px) { .ab-overview { padding-bottom: 40px; } .ab-reliable { padding-top: 40px; } }
@media (max-width: 425px)  { .ab-overview { padding-bottom: 30px; } .ab-reliable { padding-top: 30px; } }
@media (max-width: 393px)  { .ab-overview { padding-bottom: 24px; } .ab-reliable { padding-top: 24px; } }

/* ---------- RELIABLE SOURCING ---------- */
.ab-reliable { background: var(--color-bg-2); }
.ab-reliable__card { display: grid; grid-template-columns: 1.55fr 1fr; align-items: stretch;
	background: var(--color-bg-1); overflow: hidden; }
.ab-reliable__body { padding: 120px 64px 120px 72px; align-self: center; }
/* Title: H2 type scale at weight 500. */
.ab-reliable__title { font-size: var(--fs-h2); font-weight: 500; line-height: 1.15; margin: 0 0 28px; }
.ab-reliable__tabs { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 0; margin: 0 0 28px; }
/* Tabs: H6 type scale at weight 500, black by default, gold on hover. */
.ab-reliable__tabs li { font-size: var(--fs-h6); font-weight: 500; color: var(--color-black); padding: 0 22px; line-height: 1.1; cursor: pointer; transition: color .2s ease; }
.ab-reliable__tabs li:first-child { padding-left: 0; }
.ab-reliable__tabs li + li { border-left: 1px solid #c4b896; }
.ab-reliable__tabs li:hover, .ab-reliable__tabs li.is-active { color: var(--color-secondary); }
/* Body: 24px at weight 400 (scaled down responsively). */
.ab-reliable__text { color: #4a4a4a; font-size: 24px; font-weight: 400; line-height: 1.7; margin: 0; }
/* Tabbed panels — only the active one shows, with a soft fade on switch. */
.ab-reliable__panels .ab-reliable__text { display: none; }
.ab-reliable__panels .ab-reliable__text.is-active { display: block; animation: ab-reliable-fade .35s ease; }
@keyframes ab-reliable-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 1536px) { .ab-reliable__text { font-size: 20px; } }
@media (max-width: 1440px) { .ab-reliable__text { font-size: 18px; } }
@media (max-width: 1280px) { .ab-reliable__text { font-size: 16px; } }
@media (max-width: 1024px) { .ab-reliable__text { font-size: 16px; } }
@media (max-width: 425px)  { .ab-reliable__text { font-size: 15px; } }
@media (max-width: 393px)  { .ab-reliable__text { font-size: 15px; } }
.ab-reliable__media { position: relative; min-height: 320px; }
.ab-reliable__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* 1920: widen the text column so the H2 title and the tabs each stay on one line. */
@media (min-width: 1537px) {
	.ab-reliable__card { grid-template-columns: 3fr 1fr; }
	.ab-reliable__title { white-space: nowrap; }
	.ab-reliable__tabs { flex-wrap: nowrap; white-space: nowrap; }
}
/* 1536 band: larger tabs/body + single-line title (matches the 1920 design). */
@media (min-width: 1441px) and (max-width: 1536px) {
	.ab-reliable__card { grid-template-columns: 3.2fr 1fr; }
	.ab-reliable__body { padding: 84px 64px 84px 72px; align-self: center; }
	.ab-reliable__title { white-space: nowrap; }
	.ab-reliable__tabs { flex-wrap: nowrap; white-space: nowrap; }
	.ab-reliable__tabs li { font-size: 20px; }
	.ab-reliable__text { font-size: 20px; }
}
/* 1280 band: single-line title + tabs; slightly larger image column. */
@media (min-width: 1025px) and (max-width: 1280px) {
	.ab-reliable__card { grid-template-columns: 2.5fr 1fr; }
	.ab-reliable__title { white-space: nowrap; }
	.ab-reliable__tabs { flex-wrap: nowrap; white-space: nowrap; }
}

/* Tighten the gap between the Reliable Sourcing and Our Values sections. */
.ab-reliable { padding-bottom: 70px; }
.ab-values { padding-top: 70px; }
@media (max-width: 1536px) { .ab-reliable { padding-bottom: 60px; } .ab-values { padding-top: 60px; } }
@media (max-width: 1280px) { .ab-reliable { padding-bottom: 50px; } .ab-values { padding-top: 50px; } }
@media (max-width: 1024px) { .ab-reliable { padding-bottom: 40px; } .ab-values { padding-top: 40px; } }
@media (max-width: 425px)  { .ab-reliable { padding-bottom: 30px; } .ab-values { padding-top: 30px; } }
@media (max-width: 393px)  { .ab-reliable { padding-bottom: 24px; } .ab-values { padding-top: 24px; } }

/* ---------- OUR VALUES ---------- */
.ab-values { background: var(--color-bg-2); }
/* Heading: H2 type scale at weight 500. */
.ab-values__heading { font-size: var(--fs-h2); font-weight: 500; margin: 0 0 20px; }
.ab-values__intro { max-width: 920px; margin: 0 auto 64px; text-align: center; color: #4a4a4a; font-size: var(--fs-p); line-height: 1.6; }
.ab-values__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
.ab-value { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; padding: 8px 4px; }
.ab-value + .ab-value { border-left: 1px solid #d8cfbb; }
.ab-value__icon { width: 72px; height: 72px; }
/* Labels: H6 type scale at weight 500. */
.ab-value__label { font-size: var(--fs-h6); font-weight: 500; line-height: 1.3; color: var(--color-black); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1280px) {
	.ab-overview__inner { gap: 56px; }
	.ab-reliable__body { padding: 90px 48px 90px 56px; }
}

@media (max-width: 1024px) {
	.ab-overview__inner { grid-template-columns: 1fr; gap: 48px; }
	.ab-overview__cards { flex-direction: row; gap: 40px; }
	.ab-overview__cards .ab-vm { flex: 1; }
	.ab-reliable__card { grid-template-columns: 1.3fr 1fr; }
	.ab-reliable__body { padding: 72px 40px; }
	.ab-values__grid { grid-template-columns: repeat(3, 1fr); gap: 48px 0; }
	/* On a 3-col grid only the 2nd & 3rd item of each row get a divider. */
	.ab-value + .ab-value { border-left: 1px solid #d8cfbb; }
	.ab-value:nth-child(3n+1) { border-left: 0; }
}

@media (max-width: 768px) {
	/* Wide panorama banner (image ~3.2:1): match the banner to the image aspect so
	   the FULL image shows (no side-cropping / "half image"), with the title overlaid
	   at the lower-left like desktop. */
	.ab-banner { align-items: center; min-height: 0; aspect-ratio: 1920 / 960; padding: 16px 24px; background-size: cover; background-position: center; }
	.ab-reliable__card { grid-template-columns: 1fr; }
	.ab-reliable__body { padding: 52px 28px; order: 2; }
	.ab-reliable__media { order: 1; min-height: 240px; height: 280px; }
	.ab-reliable__media img { position: static; height: 100%; }
}

@media (max-width: 600px) {
	.ab-overview__cards { flex-direction: column; gap: 32px; }
	.ab-values__intro { margin-bottom: 24px; }
	.ab-values__grid { grid-template-columns: repeat(3, 1fr); gap: 30px 0; }
	.ab-value { padding: 8px 10px; gap: 16px; }
	.ab-value__label { font-size: 14px; }
	.ab-value + .ab-value { border-left: 1px solid #d8cfbb; }
	.ab-value:nth-child(3n+1) { border-left: 0; }
}

@media (max-width: 425px) {
	.ab-reliable__tabs { gap: 10px 0; }
	.ab-reliable__tabs li { padding: 0 14px; }
	.ab-value__icon { width: 60px; height: 60px; }
	.ab-value { padding: 8px 8px; }
	/* <=425: banner uses the image aspect ratio (from the <=768 rule) so cover fills
	   it fully with no cropping and no letterbox bands; title lower-left. */
	.ab-banner { align-items: center; }
	.ab-vm__icon { width: 44px; height: 44px; }
}

@media (max-width: 393px) {
	.ab-values__grid { grid-template-columns: repeat(3, 1fr); gap: 26px 0; }
	.ab-value { padding: 8px 6px; gap: 12px; }
	.ab-value__icon { width: 46px; height: 46px; }
	.ab-value__label { font-size: 13px; }
	.ab-value + .ab-value { border-left: 1px solid #d8cfbb; }
	.ab-value:nth-child(3n+1) { border-left: 0; }
}

/* Mobile: the Reliable Sourcing tabs become a manual horizontal scroll strip —
   swipe through the labels in one row (tap to select), instead of a 2-col grid. */
@media (max-width: 600px) {
	/* Let the tabs strip scroll instead of stretching the card: the grid cell
	   must be allowed to shrink below its content width. */
	.ab-reliable__body { min-width: 0; }
	.ab-reliable__tabs {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		column-gap: 0;
		max-width: 100%;
		margin-bottom: 24px;
	}
	.ab-reliable__tabs::-webkit-scrollbar { display: none; }
	.ab-reliable__tabs li { flex: 0 0 auto; white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--color-black); padding: 0 22px; line-height: 1.1; cursor: pointer; transition: color .2s ease; }
	.ab-reliable__tabs li:first-child { padding-left: 0; }
	.ab-reliable__tabs li + li { border-left: 1px solid #c4b896; }
}

/* Mobile: consistent 24px top/bottom for the About content sections (even rhythm,
   matches the homepage). Banner keeps its own aspect-ratio treatment. */
@media (max-width: 768px) {
	.ab-overview.ab-section,
	.ab-reliable.ab-section,
	.ab-values.ab-section {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}
	/* Values section: a bit more bottom space on mobile. */
	section.ab-section.ab-values { padding-bottom: 40px !important; }
}

/* Mobile: align About headings to the homepage scale (banner 26, section H2s 22). */
@media (max-width: 600px) {
	.ab-banner__title { font-size: 26px; }
	.ab-overview__heading,
	.ab-reliable__title,
	.ab-values__heading { font-size: 22px; }
}