/*
 * Infinity Rise — Sustainability & Social Impact page.
 * Builds on design-system.css tokens. Responsive across all breakpoints.
 */

/* ---------- BANNER (matches the site standard banner — .ab-banner) ---------- */
.sus-banner { position: relative; background-size: cover; background-position: center; color: var(--color-white);
	display: flex; align-items: center; min-height: var(--bnr-h);
	padding: var(--bnr-pt) var(--bnr-pr) var(--bnr-pb) var(--bnr-pl); }
.sus-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%); }
.sus-banner__inner { position: relative; z-index: 1; }
.sus-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); }
@media (min-width: 1025px) { .sus-banner { padding-top: 60px; padding-bottom: 60px; } }
@media (min-width: 1537px) { .sus-banner { min-height: 600px; } }
@media (min-width: 1281px) and (max-width: 1536px) { .sus-banner { min-height: 480px; } }
@media (min-width: 1025px) and (max-width: 1280px) { .sus-banner { min-height: 400px; } }
@media (max-width: 768px)  { .sus-banner { align-items: center; padding-left: 40px; padding-right: 20px; } }
@media (max-width: 425px)  { .sus-banner { align-items: center; min-height: 260px; } }
/* Mobile: title vertically centred (middle of the banner) but LEFT-aligned — matches the Categories banner. */
@media (max-width: 600px)  { .sus-banner { align-items: center; justify-content: flex-start; text-align: left; padding: 40px 20px; } }

/* Shared heading */
.sus-heading { font-family: var(--font-primary, inherit); font-size: var(--fs-h2, 42px); font-weight: 500; color: var(--color-black, #1a1a1a); margin: 0 0 40px; }

/* ---------- OVERVIEW QUOTE ---------- */
.sus-quote .container { display: flex; gap: 28px; align-items: flex-start; }
.sus-quote__mark { flex: 0 0 auto; width: 130px; height: auto; }
@media (max-width: 1536px) { .sus-quote__mark { width: 110px; } }
@media (max-width: 1280px) { .sus-quote__mark { width: 100px; } }
@media (max-width: 1024px) { .sus-quote__mark { width: 100px; } }
/* Text starts around the quote mark's vertical centre (mark sits higher), per design. */
.sus-quote__text { font-size: 30px; font-weight: 400; line-height: 1.6; color: #2a2a2a; margin: 96px 0 0; }
.sus-quote__text p { margin: 0; font: inherit; color: inherit; }
.sus-quote__text p + p { margin-top: 0.6em; }
.sus-quote__text strong, .sus-quote__text b { font-weight: 600; }
/* Responsive quote text (37px base) — declared AFTER the base rule so each override wins. */
@media (max-width: 1536px) { .sus-quote__text { font-size: 28px; margin-top: 76px; } }
@media (max-width: 1440px) { .sus-quote__text { font-size: 29px; } }
@media (max-width: 1280px) { .sus-quote__text { font-size: 24px; margin-top: 60px; } }
@media (max-width: 1024px) { .sus-quote__text { font-size: 22px; margin-top: 46px; } }
/* Fixed quote width at the 1920 screen only (per request). */
@media (min-width: 1900px) { .sus-quote__text { width: 1306px; } section.section.sus-quote { padding-bottom: 0; } .sus-heading { margin: 0 0 78px; } }
@media (max-width: 600px) { .sus-quote .container { gap: 18px; flex-direction: column; } .sus-quote__mark { width: 64px; } .sus-quote__text { margin-top: 0; font-size: 20px; } }
@media (max-width: 425px) { .sus-quote__mark { width: 52px; } .sus-quote__text { font-size: 18px; } }

/* ---------- OUR SUSTAINABILITY JOURNEY ---------- */
section.section.sus-journey { padding-bottom: 0; }
/* Mobile: tighten the gap between the quote and "Our Sustainability Journey". */
@media (max-width: 600px) {
	section.section.sus-quote { padding-bottom: 22px; }
	section.section.sus-journey { padding-top: 22px; }
}
.sus-journey__years, .sus-journey__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.sus-jitem { position: relative; }
.sus-jitem__year { display: block; font-family: var(--font-primary, inherit); font-size: 64px; font-weight: 600; line-height: 1; margin: 0;
	background: linear-gradient(90deg, #e2c58d 10%, #a97f2d 28%, #a97f2d 145%, #a97f2d 100%);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--color-secondary, #a97f2d); }
@media (max-width: 1536px) { .sus-jitem__year { font-size: 50px; } }
@media (max-width: 1280px) { .sus-jitem__year { font-size: 40px; } }
@media (max-width: 600px)  { .sus-jitem__year { font-size: 30px; } }
/* Timeline rail: dashed connector with a dot under each year (desktop layout). */
.sus-journey__rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; margin: 22px 0 26px; }
.sus-journey__rail::before { content: ""; position: absolute; top: 50%; left: 7px; right: calc((100% - 96px) / 4 - 7px); transform: translateY(-50%); border-top: 1px dashed var(--color-secondary, #a97f2d); }
.sus-journey__dot { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--color-secondary, #a97f2d); }
.sus-jitem__year--inline { display: none; }
.sus-jitem__title { font-size: var(--fs-h6); font-weight: 500; color: var(--color-black, #1a1a1a); margin: 0 0 18px; line-height: 1.3; }
.sus-jitem__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sus-jitem__list li { position: relative; padding-left: 30px; font-size: var(--fs-p); font-weight: 500; color: #000; }
.sus-jitem__list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Crect x='.75' y='.75' width='14.5' height='14.5' rx='3' stroke='%23a97f2d' stroke-width='1.2'/%3E%3Cpath d='M4.3 8.2l2.5 2.5L11.8 5.2' stroke='%23a97f2d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 1024px) {
	.sus-journey__years, .sus-journey__rail { display: none; }
	.sus-journey__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
	.sus-jitem__year--inline { display: block; margin: 0 0 14px; }
}
@media (max-width: 560px)  {
	.sus-journey__grid { grid-template-columns: 1fr; gap: 32px; position: relative; padding-left: 34px; }
	/* Mobile vertical timeline: a dot at each year, with a dashed connector from each
	   dot down to the next. The last year has no connector, so the line stops at it. */
	.sus-jitem { position: relative; }
	.sus-jitem::before { content: ""; position: absolute; left: -34px; top: 10px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-secondary, #a97f2d); }
	.sus-jitem:not(:last-child)::after { content: ""; position: absolute; left: -28px; top: 10px; height: calc(100% + 32px); border-left: 2px dotted var(--color-secondary, #a97f2d); }
}
/* 1920-only spacing (placed after the base rules so it wins on source order). */
@media (min-width: 1900px) { .sus-journey__rail { margin: 28px 0 28px; } .sus-jitem__title { margin: 0 0 28px; } .sus-jitem__list li::before { width: 24px; height: 24px; } .sus-jitem__list li { padding-left: 48px; color: #000; } }

/* ---------- COMMUNITY IMPACT DISTRIBUTION ---------- */
.sus-impact__card { background: var(--color-bg-1, #efe9df); padding: 48px 56px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.sus-impact__title { font-size: var(--fs-h2, 42px); font-weight: 500; margin: 0 0 8px; color: var(--color-black, #1a1a1a); }
.sus-impact__intro { font-size: var(--fs-h6, 20px); font-weight: 500; color: #1A1A1A; margin: 0 0 28px; }
.sus-impact__legend { list-style: none; margin: 0; padding: 0; max-width: 380px; }
.sus-impact__legend li { display: flex; align-items: center; gap: 18px; padding: 12px 0; }
.sus-impact__dot { flex: 0 0 auto; width: 17px; height: 32px; }
.sus-impact__name { flex: 1; font-size: var(--fs-h6, 20px); font-weight: 400; color: #2a2a2a; }
.sus-impact__val { font-size: var(--fs-h6, 20px); font-weight: 600; color: var(--color-black, #1a1a1a); }
/* Colour dots pop in AFTER the text has faded in, one after another. */
@media (prefers-reduced-motion: no-preference) {
	.lp-reveal-on .sus-impact__dot { transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .55s; }
	.lp-reveal-on .sus-impact__info.lp-reveal--in .sus-impact__dot { transform: scale(1); }
	.lp-reveal-on .sus-impact__info.lp-reveal--in .sus-impact__legend li:nth-child(2) .sus-impact__dot { transition-delay: .68s; }
	.lp-reveal-on .sus-impact__info.lp-reveal--in .sus-impact__legend li:nth-child(3) .sus-impact__dot { transition-delay: .81s; }
	.lp-reveal-on .sus-impact__info.lp-reveal--in .sus-impact__legend li:nth-child(4) .sus-impact__dot { transition-delay: .94s; }
	/* Legend rows cascade in (fade + slide up), one after another. */
	.lp-reveal-on .sus-impact__legend li { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .55s cubic-bezier(.22, .61, .36, 1); }
	.lp-reveal-on .sus-impact__info.lp-reveal--in .sus-impact__legend li { opacity: 1; transform: none; }
	.lp-reveal-on .sus-impact__info.lp-reveal--in .sus-impact__legend li:nth-child(1) { transition-delay: .1s; }
	.lp-reveal-on .sus-impact__info.lp-reveal--in .sus-impact__legend li:nth-child(2) { transition-delay: .22s; }
	.lp-reveal-on .sus-impact__info.lp-reveal--in .sus-impact__legend li:nth-child(3) { transition-delay: .34s; }
	.lp-reveal-on .sus-impact__info.lp-reveal--in .sus-impact__legend li:nth-child(4) { transition-delay: .46s; }
}
.sus-donut { position: relative; width: 480px; height: 480px; margin: 0 auto; justify-self: center; }
.sus-donut__ring { position: absolute; inset: 0; border-radius: 50%; -webkit-mask: radial-gradient(farthest-side, transparent 56%, #000 57%); mask: radial-gradient(farthest-side, transparent 56%, #000 57%); }
.sus-donut__labels { position: absolute; inset: 0; }
.sus-donut__labels span { position: absolute; transform: translate(-50%, -50%); font-size: 36px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
@media (max-width: 1536px) { .sus-donut { width: 420px; height: 420px; } .sus-donut__labels span { font-size: 32px; } }
@media (max-width: 1280px) { .sus-donut { width: 360px; height: 360px; } .sus-donut__labels span { font-size: 28px; } }
@media (max-width: 900px) { .sus-impact__card { grid-template-columns: 1fr; gap: 32px; padding: 36px 28px; } .sus-donut { width: 340px; height: 340px; } .sus-donut__labels span { font-size: 26px; } }
@media (max-width: 425px) { .sus-impact__card { padding: 28px 18px; } .sus-donut { width: 240px; height: 240px; } .sus-donut__labels span { font-size: 20px; } }

/* ---------- OUR SUSTAINABILITY FRAMEWORK ---------- */
.sus-framework { position: relative; background: var(--color-primary, #06402a) center / cover no-repeat; padding: 80px 100px; }
.sus-framework .container { display: flex; }
.sus-framework__card { background: #fff; padding: 48px 44px; max-width: 820px; width: 100%; }
.sus-framework__title { font-size: var(--fs-h2, 42px); font-weight: 500; margin: 0 0 28px; color: var(--color-black, #1a1a1a); }
.sus-acc { border-bottom: 1px dashed rgba(0,0,0,.2); }
.sus-acc__head { width: 100%; display: flex; align-items: center; gap: 16px; padding: 18px 0; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; }
.sus-acc__num { font-family: var(--font-primary, inherit); font-size: 28px; font-weight: 500; color: var(--color-black, #1a1a1a); transition: color .2s; }
.sus-acc__label { font-size: 28px; font-weight: 500; color: var(--color-black, #1a1a1a); transition: color .2s; }
.sus-acc__head:hover .sus-acc__num, .sus-acc__head:hover .sus-acc__label,
.sus-acc.is-open .sus-acc__num, .sus-acc.is-open .sus-acc__label { color: var(--color-secondary, #a97f2d); }
.sus-acc__body { display: none; padding: 0 0 24px 52px; }
.sus-acc.is-open .sus-acc__body { display: block; }
.sus-acc__points { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; }
.sus-acc__point { position: relative; padding-left: 30px; font-size: var(--fs-p); font-weight: 500; color: #2a2a2a; }
.sus-acc__point::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Crect x='.75' y='.75' width='14.5' height='14.5' rx='3' stroke='%23a97f2d' stroke-width='1.2'/%3E%3Cpath d='M4.3 8.2l2.5 2.5L11.8 5.2' stroke='%23a97f2d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 1024px) { .sus-framework { padding: 60px 40px; } }
@media (max-width: 768px)  { .sus-framework { padding: 48px 20px; } .sus-framework__card { max-width: none; padding: 32px 22px; } .sus-acc__points { grid-template-columns: 1fr; } }
/* 1920-only framework padding (after base rule so it wins on source order). */
@media (min-width: 1900px) { .sus-framework { padding: 100px 100px; } .sus-framework__card { padding: 100px 80px; max-width: 890px; } .sus-acc__head { padding: 32px 0; } }

/* ---------- RESPONSIBLE SUPPLY CHAIN MODEL ---------- */
section.section.sus-supply { padding-bottom: 0; }
.sus-supply__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.sus-supply__item { position: relative; padding: 0 40px; }
.sus-supply__item:first-child { padding-left: 0; }
.sus-supply__item:last-child { padding-right: 0; }
.sus-supply__item + .sus-supply__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 28px; transform: translateX(-50%); background: url('../images/landing/s8/divider.svg') center / auto 100% no-repeat; }
.sus-supply__icon { display: block; width: 48px; height: 48px; margin: 0 0 20px; }
.sus-supply__title { font-size: 28px; font-weight: 500; margin: 0 0 12px; color: var(--color-black, #1a1a1a); }
.sus-supply__text { font-size: var(--fs-p); font-weight: 400; color: #5a5a5a; line-height: 1.6; margin: 0; }
@media (max-width: 1024px) { .sus-supply__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; } .sus-supply__item { padding: 0; } .sus-supply__item + .sus-supply__item::before { display: none; } }
@media (max-width: 560px)  { .sus-supply__grid { grid-template-columns: 1fr; gap: 32px; } }
/* 1920-only: wider supply divider (after base rule so it wins on source order). */
@media (min-width: 1900px) { .sus-supply__item + .sus-supply__item::before { width: 44px; } .sus-supply__icon { margin: 0 0 24px; } .sus-supply__title { margin: 0 0 24px; } }
/* 1536 & 1440 bands: quote flush to the next section + wider (44px) supply divider. */
@media (min-width: 1281px) and (max-width: 1536px) {
	section.section.sus-quote { padding-bottom: 0px; }
	.sus-supply__item + .sus-supply__item::before { width: 44px; }
}
/* 1280 band: quote flush to the next section + 33px supply divider. */
@media (min-width: 1025px) and (max-width: 1280px) {
	section.section.sus-quote { padding-bottom: 0px; }
	.sus-supply__item + .sus-supply__item::before { width: 33px; }
}

/* ---------- SUSTAINABILITY AT A GLANCE ---------- */
section.section.sus-glance-wrap { padding-bottom: 0; }
.sus-glance { background: var(--color-bg-1, #efe9df); padding: 48px 40px; }
.sus-glance__title { text-align: center; font-size: var(--fs-h2, 42px); font-weight: 500; margin: 0 0 40px; color: var(--color-black, #1a1a1a); }
.sus-glance__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.sus-glance__item { text-align: center; position: relative; }
.sus-glance__item + .sus-glance__item::before { content: ""; position: absolute; left: -12px; top: 4px; bottom: 4px; border-left: 2px dotted rgba(169,127,45,.45); }
.sus-glance__num { display: block; font-family: var(--font-primary, inherit); font-size: var(--fs-h2, 42px); font-weight: 400; color: var(--color-secondary, #a97f2d); line-height: 1; margin: 0 0 12px; }
.sus-glance__label { display: block; font-size: var(--fs-h6, 20px); font-weight: 500; color: var(--color-black, #1a1a1a); }
@media (max-width: 900px) { .sus-glance__grid { grid-template-columns: repeat(3, 1fr); gap: 32px 20px; } .sus-glance__item + .sus-glance__item::before { display: none; } }
@media (max-width: 480px) { .sus-glance__grid { grid-template-columns: repeat(2, 1fr); } .sus-glance { padding: 32px 20px; } }
/* Mobile 2-col: centre the lone last stat (5th) across both columns. */
@media (max-width: 480px) { .sus-glance__grid > .sus-glance__item:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* 1920-only glance spacing (after base rules so it wins on source order). */
@media (min-width: 1900px) { .sus-glance { padding: 83px 10px; } .sus-glance__title { margin: 0 0 72px; } .sus-glance__num { margin: 0 0 28px; } .sus-glance__item + .sus-glance__item::before { top: -26px; bottom: -26px; } }

/* ---------- SOCIAL IMPACT ---------- */
.sus-social__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.sus-social__card { background: var(--color-bg-1, #efe9df); padding: 32px 28px; transition: background .25s ease; }
.sus-social__icon { display: block; width: 44px; height: 44px; margin: 0 0 20px; background-color: #a97f2d;
	-webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
	transition: background-color .25s ease; }
.sus-social__card:hover .sus-social__icon { background-color: #e2c58d; }
.sus-social__title { font-size: 28px; font-weight: 500; margin: 0 0 14px; color: var(--color-black, #1a1a1a); transition: color .25s ease; }
.sus-social__text { font-size: var(--fs-p); font-weight: 400; line-height: 1.65; color: #5a5a5a; margin: 0; transition: color .25s ease; }
/* Hover: card turns green (default is the beige "second box" colour). */
.sus-social__card:hover { background: var(--color-primary, #06402a); }
.sus-social__card:hover .sus-social__title { color: var(--color-ancient, #e2c58d); }
.sus-social__card:hover .sus-social__text { color: rgba(255,255,255,.82); }
@media (max-width: 1024px) { .sus-social__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
/* Mobile: Social Impact is a manual horizontal swipe strip — one card in view,
   the next peeking. No auto-scroll. */
@media (max-width: 560px)  {
	.sus-social__grid {
		display: flex;
		flex-wrap: nowrap;
		gap: 16px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
	}
	.sus-social__grid::-webkit-scrollbar { display: none; }
	.sus-social__grid > .sus-social__card { flex: 0 0 85%; }
}
/* 1920-only: fixed social card height (409px width comes from the 4-col grid). */
@media (min-width: 1900px) { .sus-social__card { min-height: 474px; display: flex; flex-direction: column; justify-content: space-evenly; } .sus-social__icon { width: 72px; height: 72px; } }
/* 1536px & 1280px screens: 28px headings/titles reduce to 20px. */
@media (max-width: 1536px) { .sus-acc__num, .sus-acc__label, .sus-supply__title, .sus-social__title { font-size: 20px; } }
/* Mobile: the Responsible Supply Chain Model is a horizontal, manually-swipeable
   scroll strip (one card in view, the next peeking). The JS marquee auto-scrolls
   and pauses on manual swipe. */
@media (max-width: 560px) {
	.sus-supply__grid {
		display: flex;
		flex-wrap: nowrap;
		gap: 20px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
	}
	.sus-supply__grid::-webkit-scrollbar { display: none; }
	.sus-supply__grid > .sus-supply__item {
		flex: 0 0 72%;
		padding: 0;
		text-align: center;
	}
	.sus-supply__icon { margin-left: auto; margin-right: auto; }
}

/* Mobile: normalize the section rhythm to match the rest of the site (~24px top &
   bottom → even ~48px gaps), and align the banner title + section headings to the
   site scale (banner 26, headings 22). Targeted overrides — inner layouts untouched. */
@media (max-width: 600px) {
	.section { padding-top: 24px !important; padding-bottom: 24px !important; }
	/* Show the background image around the card (like the home "Global Network"
	   section): a tall top band, a small bottom, and a narrower centred card. */
	.sus-framework { padding-top: 110px !important; padding-bottom: 24px !important; }
	.sus-framework__card { max-width: 90%; margin: 0 auto; }
	.sus-banner__title { font-size: 26px; }
	.sus-heading,
	.sus-impact__title,
	.sus-framework__title,
	.sus-glance__title { font-size: 22px; }
}

/* Mobile: Community Impact — smaller colour swatches, smaller legend text (incl.
   the capitalised labels), and tighter rows. */
@media (max-width: 600px) {
	.sus-impact__dot { width: 12px; height: 12px; }
	.sus-impact__name,
	.sus-impact__val { font-size: 13px; }
	.sus-impact__intro { font-size: 14px; }
	.sus-impact__legend li { gap: 10px; padding: 6px 0; }
}