/* =========================================================================
   Sustainability — page-sustainability.php.
   Scoped to .su — mobile-first, min-width media queries only.
   Tokens mirror specify-page.css / sector-page.css / home.css (Billi Brand
   Book 2026): 32px Demi section headings, 16px Regular body, 2px buttons,
   4px cards (sharper-corner direction, Aug 2026).
   ========================================================================= */

.su {
	/* Billi Brand Book 2026 palette */
	--su-navy: #181d46;      /* Billi Blue — signature colour */
	--su-lightblue: #90cdeb;
	--su-cta-blue: #90cdeb;  /* button on dark media, as on the homepage cards */
	--su-grey: #eaeaea;      /* primary grey — borders, rules */
	--su-band-grey: #f5f5f5;
	--su-band-blue: #f1f5f5; /* Green Grey */
	--su-text: #000;
	--su-muted: #75757b;
	--su-gutter: 20px;

	font-family: 'FFDINStd', sans-serif;
	color: var(--su-text);
	line-height: 1.5;
}

@media (min-width: 900px) {
	.su { --su-gutter: 40px; }
}

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

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

.su-container {
	width: 100%;
	max-width: 1436px; /* 1356px content + 2 × 40px */
	margin: 0 auto;
	padding-left: var(--su-gutter);
	padding-right: var(--su-gutter);
}

/* WYSIWYG output: neutralise whatever tags the admin used so headings /
   paragraphs inherit the wrapper's type styles. */
.su [class*='__heading'] :is(h1, h2, h3, h4, h5, h6, p),
.su [class*='__title'] :is(h1, h2, h3, h4, h5, h6, p),
.su .su-section-heading :is(h1, h2, h3, h4, h5, h6, p),
.su .su-section-intro :is(h1, h2, h3, h4, h5, h6, p) {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

.su [class*='__text'] p,
.su [class*='__intro'] p { margin: 0 0 0.6em; }

.su [class*='__text'] p:last-child,
.su [class*='__intro'] p:last-child { margin-bottom: 0; }

.su a:focus-visible {
	outline: 2px solid var(--su-navy);
	outline-offset: 2px;
}

/* Body-copy links: the theme sets a global `a { font-weight: 600 }` and fades
   links on hover, which makes inline links shout inside a paragraph. */
.su [class*='__text'] a,
.su [class*='__intro'] a {
	color: var(--su-navy);
	font-weight: 600;
	text-decoration: underline;
}

.su [class*='__text'] a:hover,
.su [class*='__intro'] a:hover { opacity: 1; color: #3d4a8a; }

/* ---- Buttons ------------------------------------------------------------ */

/* Brand buttons: 2px corners (sharper-corner direction, Aug 2026), 16px Regular. */
.su .su-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Opt out of the theme's global `a:hover { opacity: 0.7 }` (desktop.css),
   which otherwise fades the whole button on hover. */
.su .su-btn:hover { opacity: 1; }

.su .su-btn--blue { background: var(--su-navy); color: #fff; }
.su .su-btn--blue:hover { background: #fff; color: var(--su-navy); box-shadow: inset 0 0 0 1px var(--su-navy); }

.su .su-btn--ghost {
	background: transparent;
	color: var(--su-navy);
	box-shadow: inset 0 0 0 1px var(--su-navy);
}

.su .su-btn--ghost:hover { background: var(--su-navy); color: #fff; }

/* ---- Shared section scaffolding -----------------------------------------
   The section headings and card titles are real h2/h3 elements so the page
   keeps a document outline — the old layout had h2s and h4s, and rendering
   them as divs would have left the rebuilt page with a lone h1.

   Prefixed with .su throughout: the theme's stylesheets carry descendant
   heading rules such as `.single-case_studies h2` at (0,1,1), which beat a
   bare class, so the reset needs the extra specificity to be safe. */

.su :is(h2, h3) {
	margin-top: 0;
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
}

.su .su-section-heading {
	color: var(--su-navy);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 16px;
}

.su-section-intro {
	font-size: 16px;
	line-height: 1.5;
	max-width: 720px;
	margin-bottom: 28px;
}

/* When no intro follows, the heading owns the gap to the grid below. */
.su .su-section-heading:last-child { margin-bottom: 28px; }

@media (min-width: 900px) {
	.su .su-section-heading { font-size: 32px; margin-bottom: 18px; }
	.su .su-section-heading:last-child { margin-bottom: 40px; }
	.su-section-intro { font-size: 17px; margin-bottom: 40px; }
}

/* ---- Hero ----------------------------------------------------------------
   Content is centred in the band with the copy inside left-aligned: the
   overlay is solid at the left edge, so indenting the text would drop it onto
   the exposed image. Mirrors .sp-hero and .sn-hero. */

.su-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: 380px;
	background: var(--su-navy);
	overflow: hidden;
}

.su-hero__media,
.su-hero__media img,
.su-hero__media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.su-hero__media { z-index: -2; }

.su-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(24, 29, 70, 0.35) 0%, rgba(24, 29, 70, 0.85) 100%),
		linear-gradient(90deg, rgba(24, 29, 70, 0.9) 0%, rgba(24, 29, 70, 0.55) 55%, rgba(24, 29, 70, 0.3) 100%);
}

.su-hero__inner {
	width: 100%;
	padding-top: 48px;
	padding-bottom: 48px;
}

.su-hero__content { max-width: 720px; color: #fff; }

.su-hero__eyebrow {
	margin: 0 0 12px;
	color: var(--su-lightblue);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* The title is an h1, so typography.css sets it in DM Serif Display at 400.
   No font-weight here: the serif has no bold cut, and the 700 this rule
   carried from the DIN era made browsers synthesise one. */
.su-hero__heading {
	margin: 0;
	color: #fff;
	font-size: 34px;
	line-height: 1.1;
}

.su-hero__intro {
	margin-top: 16px;
	font-size: 17px;
	line-height: 1.5;
}

@media (min-width: 768px) {
	.su-hero { min-height: 440px; }
	.su-hero__inner { padding-top: 64px; padding-bottom: 64px; }
	.su-hero__heading { font-size: 46px; }
}

@media (min-width: 1100px) {
	.su-hero { min-height: 480px; }
	.su-hero__heading { font-size: 56px; }
	.su-hero__intro { font-size: 18px; max-width: 620px; }
}

/* ---- Credentials ----------------------------------------------------------
   The certification marks, collected. Deliberately typographic rather than
   iconographic: these are marks, and hand-authored icon paths have shipped
   broken on this site twice. */

.su-creds {
	background: var(--su-band-blue);
	padding: 48px 0;
}

.su-creds__grid > * { min-width: 0; }

.su-creds__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.su-creds__item {
	background: #fff;
	border: 1px solid var(--su-grey);
	border-radius: 4px;
	padding: 20px 22px;
}

/* The rule is the mark: a short navy bar above each credential, standing in
   for the badge we deliberately are not drawing. */
.su-creds__item::before {
	content: '';
	display: block;
	width: 32px;
	height: 3px;
	margin-bottom: 14px;
	background: var(--su-lightblue);
}

.su .su-creds__name {
	color: var(--su-navy);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: 6px;
}

.su-creds__text {
	font-size: 15px;
	line-height: 1.5;
	color: var(--su-muted);
}

@media (min-width: 600px) {
	.su-creds__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	.su-creds { padding: 64px 0; }
	.su-creds__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* ---- UN Sustainable Development Goals ------------------------------------- */

.su-sdg { padding: 48px 0; }

.su-sdg__text {
	font-size: 16px;
	line-height: 1.5;
	max-width: 720px;
}

/* Contained, not cropped: the strip is artwork with seven legible tiles, so
   cover-fitting it would cut goals off the ends. */
.su-sdg__media {
	margin-top: 32px;
	padding: 24px;
	background: var(--su-band-grey);
	border-radius: 4px;
}

/* The strip is 1530px natively, so let it fill the panel rather than sitting
   in the middle of it. srcset serves the full file above 1024. */
.su .su-sdg__img {
	width: 100%;
	height: auto;
	margin: 0 auto;
}

@media (min-width: 900px) {
	.su-sdg { padding: 80px 0; }
	.su-sdg__text { font-size: 17px; }
	.su-sdg__media { margin-top: 40px; padding: 32px; }
}

/* ---- Shared split band (process, technology) -------------------------------
   Image one side, copy the other. `--su-split-order` flips which side the
   media sits on at desktop without duplicating the grid rules. */

.su-split { padding: 48px 0; }

.su-split--band { background: var(--su-band-blue); }

.su-split__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: center;
}

/* A grid item's automatic minimum size is its min-content, so an image or a
   long word inside one can push the track wider than the container. */
.su-split__row > * { min-width: 0; }

/* Every image on this page is artwork on white — a roundel, a logo and a line
   diagram — so all of them sit in a padded panel rather than a photo well. */
.su-split__media {
	background: #fff;
	border: 1px solid var(--su-grey);
	border-radius: 4px;
	padding: 24px;
}

.su-split--band .su-split__media { background: #fff; }

/* The technology diagram is only 496px wide and there is no larger original,
   so stretching it to the column softened a line drawing. Each panel image now
   sits at its natural size, capped by the column.

   `width: auto` is doing the work: framework.css sets a global
   `img { width: 100% }`, and declaring only max-width here left that in force. */
.su .su-split__img {
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.su .su-split__title {
	color: var(--su-navy);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: 10px;
}

.su-split__text {
	font-size: 16px;
	line-height: 1.5;
}

.su-split__list {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.su-split__list li {
	position: relative;
	padding-left: 28px;
	font-size: 16px;
	line-height: 1.5;
}

.su-split__list li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 0.45em;
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--su-navy);
	border-bottom: 2px solid var(--su-navy);
	transform: rotate(-45deg);
}

@media (min-width: 900px) {
	.su-split { padding: 72px 0; }
	.su-split__row { grid-template-columns: 1fr 1fr; gap: 48px; }
	.su-split__media { order: var(--su-split-order, 0); padding: 32px; }
	.su .su-split__title { font-size: 22px; }
}

@media (min-width: 1200px) {
	.su-split__row { gap: 64px; }
}

/* The process roundel is square and would tower over its copy at half the
   container. Cap it so the two columns stay in proportion.

   min() rather than a bare 460px: this rule outranks the `max-width: 100%`
   above, so on a 375px screen a flat cap let the 949px roundel render at 460
   and drag the whole grid track past the viewport. */
.su .su-split--roundel .su-split__img { max-width: min(460px, 100%); }

/* The heading opens the first technology row, so it takes that row's band
   and the section's top padding. The row below carries its own top padding,
   so the heading only needs to clear its own line rather than open a second
   gap. */
.su-tech__head {
	background: var(--su-band-blue);
	padding-top: 48px;
}

@media (min-width: 900px) {
	.su-tech__head { padding-top: 72px; }
}

/* Has to outrank `.su .su-section-heading:last-child` (0,3,0), which this
   heading always is: it is the only child of its container. Nothing below it
   in .su-tech__head stops a margin collapsing, so any margin left here drops
   out of the band as a white strip above the first row. */
.su .su-tech__head .su-tech__heading:last-child { margin-bottom: 0; }

/* The gap under the heading lives here, on the same band, at the page's
   usual heading-to-content spacing (28px, 40px from 900px). */
.su-tech .su-split:first-of-type { padding-top: 28px; }

@media (min-width: 900px) {
	.su-tech .su-split:first-of-type { padding-top: 40px; }
}

/* ---- Impact pillars --------------------------------------------------------
   Six cards, two rows of three. The seventh heading in the legacy text wall
   ("Sustainability Impact") is the section intro, not a pillar. White band,
   off-white cards: from here down the sections alternate off-white and
   white (Tom, Sep 2026). */

.su-pillars {
	background: #fff;
	padding: 48px 0;
}

.su-pillars__grid > * { min-width: 0; }

.su-pillars__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.su-pillars__card {
	display: flex;
	flex-direction: column;
	background: var(--su-band-blue);
	border: 1px solid var(--su-grey);
	border-radius: 2px; /* round 5, item 12 */
	padding: 24px 22px;
}

.su .su-pillars__title {
	color: var(--su-navy);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: 10px;
}

.su-pillars__text {
	font-size: 16px;
	line-height: 1.5;
}

@media (min-width: 620px) {
	.su-pillars__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
	.su-pillars { padding: 80px 0; }
	.su-pillars__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
	.su-pillars__card { padding: 28px 26px; }
}

/* ---- Explore more ---------------------------------------------------------- */

.su-cta { padding: 48px 0; }

/* Set in the template when the section above it is white. */
.su-cta--band { background: var(--su-band-blue); }

.su-cta__row > * { min-width: 0; }

.su-cta__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: center;
}

/* A photograph, unlike everything above it — cropped to fill. */
.su-cta__media {
	border-radius: 4px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.su .su-cta__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.su-cta__text {
	font-size: 16px;
	line-height: 1.5;
}

.su-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

@media (min-width: 900px) {
	.su-cta { padding: 80px 0; }
	.su-cta__row { grid-template-columns: 1fr 1fr; gap: 48px; }
	.su-cta__media { order: -1; }
	.su-cta__text { font-size: 17px; }
}

@media (min-width: 1200px) {
	.su-cta__row { gap: 64px; }
}