/* Kevin 2026-09-24b: English Sustainability (post 1233). Scoped to
   body.vm-k24b-sustainability; depends on kevin-20260924.css (handle vm-k24)
   for .vm-k24 / .vm-k24-wrap / .vm-k24-hero / .vm-k24-band / .vm-k24-facts /
   .vm-k24-route / .vm-k24-cta / .vm-k24-faq base styles, which this page also
   uses. Adding the shared "vm-k24-page" body class (see the PHP file) already
   hides the old .entry-header banner and resets .entry-content for us. */

html:not(#vm-kx) body.vm-cvi.vm-k24b-sustainability article.ast-article-single > .entry-header,
html:not(#vm-kx) body.vm-cvi.vm-k24b-sustainability .ast-single-entry-banner {
	display: none !important;
}

html:not(#vm-kx) body.vm-cvi.vm-k24b-sustainability .ast-container,
html:not(#vm-kx) body.vm-cvi.vm-k24b-sustainability .entry-content {
	max-width: none;
	padding: 0;
	background: #000;
}

html:not(#vm-kx) #vm-k24b-sus-approach,
html:not(#vm-kx) #vm-k24b-sus-cta {
	scroll-margin-top: 96px;
}

html:not(#vm-kx) .vm-k24b-sus-hero .vm-k24-hero__photo {
	object-position: 82% center;
}

/* Responsible-manufacturing: 4 bordered white cards. */
html:not(#vm-kx) .vm-k24b-sus-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 32px;
	text-align: center;
}

html:not(#vm-kx) .vm-k24b-sus-card {
	background: #fff;
	border: 1px solid #d9e2e0;
	border-radius: 8px;
	padding: 28px 20px 24px;
}

html:not(#vm-kx) .vm-k24b-sus-card__ico {
	display: inline-grid;
	place-items: center;
	width: 126px;
	height: 126px;
	color: #3ecdbf;
	margin-bottom: 8px;
}

html:not(#vm-kx) .vm-k24b-sus-card__ico svg {
	width: 120px;
	height: 120px;
	/* Measured drawn (getBBox) content fills ~71% of the svg box for this
	   icon set; stroke-width is compensated so the visual line stays ~2px
	   at the larger render size (2 * 24 / 120 = 0.4). */
	stroke-width: 0.4;
}

html:not(#vm-kx) .vm-k24b-sus-card h3 {
	color: #0b4d4a;
	font-size: 18px;
	margin-bottom: 8px;
}

html:not(#vm-kx) body.vm-cvi.vm-k24b-sustainability .vm-k24b-sus-card p {
	margin: 0;
	color: #4a4f55;
	font-size: 15px;
	line-height: 1.45;
}

/* Smarter materials: option rows + framed biocomposite photo. */
html:not(#vm-kx) .vm-k24b-sus-paper2 {
	background: #fff;
}

html:not(#vm-kx) .vm-k24b-sus-materials {
	grid-template-columns: 1.05fr 0.95fr;
	align-items: start;
}

html:not(#vm-kx) .vm-k24b-sus-materials > div > p {
	margin: 0 0 20px;
}

html:not(#vm-kx) .vm-k24b-sus-rows {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

html:not(#vm-kx) body.vm-cvi.vm-k24b-sustainability .vm-k24b-sus-rows li {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #fff;
	border: 1px solid #d9e2e0;
	border-radius: 6px;
	min-height: 66px;
	padding: 10px 18px;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.03em;
	color: #0b4d4a;
}

html:not(#vm-kx) .vm-k24b-sus-rows__ico {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	color: #3ecdbf;
	flex: none;
}

html:not(#vm-kx) .vm-k24b-sus-rows__ico svg {
	width: 46px;
	height: 46px;
	/* drawn ~65% of box for these icons: 2 * 24 / 46 ≈ 1.04 */
	stroke-width: 1.04;
}

html:not(#vm-kx) body.vm-cvi.vm-k24b-sustainability .vm-k24b-sus-note {
	margin: 16px 0 0;
	color: #5b6167;
	font-size: 14px;
	font-style: italic;
	line-height: 1.5;
}

html:not(#vm-kx) .vm-k24b-sus-frame {
	position: relative;
	margin: 0;
	background: #0b4d4a;
	padding: 12px;
	border-radius: 4px;
	align-self: center;
}

html:not(#vm-kx) .vm-k24b-sus-frame img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
}

html:not(#vm-kx) .vm-k24b-sus-frame__cover {
	/* biocomposiit.jpg is 600x480; the old brown title tile is the top-left
	   cell only (~0-210px of 600 wide, ~0-100px of 480 tall) — size the cover
	   to that cell precisely so it does not clip the real mug photo below it. */
	position: absolute;
	left: 12px;
	top: 12px;
	width: calc(35% - 12px);
	height: calc(20.8% - 12px);
	background: #0b4d4a;
	z-index: 1;
}

/* Deep-teal full-width bands (Biocomposite experience, Environmental management). */
html:not(#vm-kx) .vm-k24b-sus-teal {
	background: #0b4d4a;
	color: #fff;
	padding-block: 72px;
}

html:not(#vm-kx) body.vm-cvi.vm-k24b-sustainability .vm-k24b-sus-teal .vm-k24-eye {
	color: #3ecdbf;
}

html:not(#vm-kx) .vm-k24b-sus-teal h2 {
	color: #fff;
}

html:not(#vm-kx) body.vm-cvi.vm-k24b-sustainability .vm-k24b-sus-teal > .vm-k24-wrap > p {
	max-width: 62rem;
	color: #dfeceb;
	margin: 0 0 36px;
}

/* site.css's ".entry-content a:not(.vm-button):not(.vm-btn)" (dark-teal link,
   turquoise underline) otherwise wins by specificity and makes this orange
   "more" link invisible against the deep-teal band. */
html:not(#vm-kx) body.vm-cvi.vm-k24b-sustainability .vm-k24b-sus-teal .vm-k24-more {
	color: #ff6a00 !important;
	text-decoration: none !important;
}

html:not(#vm-kx) .vm-k24b-sus-tri {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin-bottom: 28px;
}

html:not(#vm-kx) .vm-k24b-sus-tri__item {
	padding: 0 28px;
	border-left: 1px solid rgba(255, 255, 255, 0.22);
}

html:not(#vm-kx) .vm-k24b-sus-tri__item:first-child {
	padding-left: 0;
	border-left: 0;
}

html:not(#vm-kx) .vm-k24b-sus-tri__ico {
	display: block;
	width: 92px;
	height: 92px;
	color: #3ecdbf;
	margin-bottom: 14px;
}

html:not(#vm-kx) .vm-k24b-sus-tri__ico svg {
	width: 100%;
	height: 100%;
}

html:not(#vm-kx) .vm-k24b-sus-tri__item h3 {
	color: #fff;
	font-size: 15px;
	margin-bottom: 6px;
}

html:not(#vm-kx) body.vm-cvi.vm-k24b-sustainability .vm-k24b-sus-tri__item p {
	margin: 0;
	color: #dfeceb;
	font-size: 15px;
	line-height: 1.4;
}

/* Life-cycle route: reuse .vm-k24-route, but at the concept's larger circle
   size (~107px vs the shared 68px default) with the orange step number
   line below, everything left-set within its own centred column so the
   multi-line descriptions read as a left block rather than ragged-centre. */
html:not(#vm-kx) .vm-k24b-sus-route .vm-k24-route__node {
	width: 107px;
	height: 107px;
}

html:not(#vm-kx) .vm-k24b-sus-route .vm-k24-route__node svg {
	width: 50px;
	height: 50px;
}

html:not(#vm-kx) .vm-k24b-sus-route .vm-k24-route__join {
	top: 52px;
	left: calc(50% + 56px);
	width: calc(100% - 112px);
}

html:not(#vm-kx) .vm-k24b-sus-route .vm-k24-route__join::after {
	width: 9px;
	height: 9px;
	top: -5px;
}

html:not(#vm-kx) .vm-k24b-sus-route__num {
	display: block;
	color: #ff6a00;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.03em;
	margin-top: 16px;
	text-align: left;
}

html:not(#vm-kx) .vm-k24b-sus-route .vm-k24-route__label,
html:not(#vm-kx) .vm-k24b-sus-route .vm-k24-route__sub {
	margin-top: 2px;
	text-align: left;
}

/* Efficient production: wide 2x2 cards + orange accent note. */
html:not(#vm-kx) .vm-k24b-sus-wide {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin: 32px 0 24px;
}

html:not(#vm-kx) .vm-k24b-sus-wide-card {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	background: #fff;
	border: 1px solid #d9e2e0;
	border-radius: 8px;
	padding: 22px;
}

html:not(#vm-kx) .vm-k24b-sus-wide-card__ico {
	flex: none;
	display: grid;
	place-items: center;
	width: 96px;
	height: 96px;
	border: 1.5px solid #3ecdbf;
	border-radius: 8px;
	color: #3ecdbf;
}

html:not(#vm-kx) .vm-k24b-sus-wide-card__ico svg {
	width: 80px;
	height: 80px;
	/* drawn ~70% of box for these icons: 2 * 24 / 80 = 0.6 */
	stroke-width: 0.6;
}

html:not(#vm-kx) .vm-k24b-sus-wide-card h3 {
	color: #0b4d4a;
	font-size: 18px;
	margin-bottom: 6px;
}

html:not(#vm-kx) body.vm-cvi.vm-k24b-sustainability .vm-k24b-sus-wide-card p {
	margin: 0;
	color: #4a4f55;
	font-size: 15px;
	line-height: 1.45;
}

html:not(#vm-kx) body.vm-cvi.vm-k24b-sustainability .vm-k24b-sus-flag {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	background: #fff1e6;
	border: 1px solid #ffcda3;
	border-radius: 6px;
	padding: 16px 20px;
	color: #b5450a;
	font-weight: 700;
	font-size: 15px;
}

html:not(#vm-kx) .vm-k24b-sus-flag svg {
	flex: none;
	width: 24px;
	height: 24px;
	color: #ff6a00;
}

/* Environmental management: header row + certificate card + pillars.
   Exactly two flex children now (heading-block, button) so the eyebrow
   stacks above the heading instead of sitting beside it. */
html:not(#vm-kx) .vm-k24b-sus-env__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}

html:not(#vm-kx) .vm-k24b-sus-env__head > div {
	max-width: 40rem;
}

html:not(#vm-kx) .vm-k24b-sus-env__head h2 {
	margin-bottom: 0;
}

html:not(#vm-kx) .vm-k24b-sus-env {
	display: flex;
	align-items: stretch;
	gap: 32px;
	flex-wrap: wrap;
}

html:not(#vm-kx) .vm-k24b-sus-env__cert {
	flex: 1 1 320px;
	display: flex;
	align-items: center;
	gap: 18px;
	border: 1.5px solid #3ecdbf;
	border-radius: 10px;
	padding: 20px 24px;
}

html:not(#vm-kx) .vm-k24b-sus-env__cert .vm-k24-ico {
	width: 90px;
	height: 90px;
	flex: none;
}

html:not(#vm-kx) .vm-k24b-sus-env__cert .vm-k24-ico svg {
	width: 84px;
	height: 84px;
	/* drawn ~71% of box: 2 * 24 / 84 ≈ 0.57 */
	stroke-width: 0.57;
}

html:not(#vm-kx) .vm-k24b-sus-env__pillars .vm-k24-ico {
	width: 64px;
	height: 64px;
	flex: none;
}

html:not(#vm-kx) .vm-k24b-sus-env__pillars .vm-k24-ico svg {
	width: 60px;
	height: 60px;
	/* drawn ~74% of box: 2 * 24 / 60 = 0.8 */
	stroke-width: 0.8;
}

html:not(#vm-kx) .vm-k24b-sus-env__cert h3 {
	color: #fff;
	font-size: 25px;
	margin-bottom: 6px;
}

html:not(#vm-kx) body.vm-cvi.vm-k24b-sustainability .vm-k24b-sus-env__cert p {
	margin: 0;
	color: #dfeceb;
	font-size: 15px;
}

html:not(#vm-kx) .vm-k24b-sus-env__pillars {
	flex: 1 1 480px;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

html:not(#vm-kx) .vm-k24b-sus-env__pillars li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 0 18px;
	border-left: 1px solid rgba(255, 255, 255, 0.22);
}

html:not(#vm-kx) .vm-k24b-sus-env__pillars li:first-child {
	padding-left: 0;
	border-left: 0;
}

html:not(#vm-kx) .vm-k24b-sus-env__pillars h3 {
	color: #fff;
	font-size: 14px;
	margin-bottom: 4px;
}

html:not(#vm-kx) body.vm-cvi.vm-k24b-sustainability .vm-k24b-sus-env__pillars p {
	margin: 0;
	color: #dfeceb;
	font-size: 14px;
	line-height: 1.4;
}

/* EU-funded development projects. */
html:not(#vm-kx) .vm-k24b-sus-eu-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 28px;
}

html:not(#vm-kx) .vm-k24b-sus-eu-card {
	background: #fff;
	border: 1px solid #d9e2e0;
	border-radius: 8px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

html:not(#vm-kx) .vm-k24b-sus-eu-card__top {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

html:not(#vm-kx) .vm-k24b-sus-eu-card__logo {
	flex: 0 0 35%;
	width: 35%;
	margin: 0;
}

html:not(#vm-kx) .vm-k24b-sus-eu-card__logo img {
	display: block;
	width: 100%;
	height: auto;
}

html:not(#vm-kx) .vm-k24b-sus-eu-card__top h3 {
	color: #0b4d4a;
	font-size: 16px;
	margin-bottom: 4px;
}

html:not(#vm-kx) body.vm-cvi.vm-k24b-sustainability .vm-k24b-sus-eu-card__programme {
	margin: 0;
	color: #1c6fb0;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.03em;
}

html:not(#vm-kx) body.vm-cvi.vm-k24b-sustainability .vm-k24b-sus-eu-card > p {
	margin: 0;
	color: #4a4f55;
	font-size: 15px;
	line-height: 1.45;
}

html:not(#vm-kx) .vm-k24b-sus-eu-card__funding {
	font-weight: 800 !important;
	color: #0b4d4a !important;
}

html:not(#vm-kx) .vm-k24b-sus-eu-card__toggle {
	align-self: flex-start;
	gap: 10px;
}

html:not(#vm-kx) .vm-k24b-sus-chevron {
	width: 16px;
	height: 16px;
	transition: transform 0.15s ease;
}

html:not(#vm-kx) .vm-k24b-sus-eu-card__toggle[aria-expanded="true"] .vm-k24b-sus-chevron {
	transform: rotate(180deg);
}

html:not(#vm-kx) .vm-k24b-sus-eu-card__details {
	border-top: 1px solid #d9e2e0;
	padding-top: 14px;
	display: grid;
	gap: 10px;
}

html:not(#vm-kx) .vm-k24b-sus-eu-card__details[hidden] {
	display: none;
}

html:not(#vm-kx) .vm-k24b-sus-eu-card__details h4 {
	margin: 4px 0 0;
	color: #0b4d4a;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

html:not(#vm-kx) body.vm-cvi.vm-k24b-sustainability .vm-k24b-sus-eu-card__details p {
	margin: 0;
	color: #4a4f55;
	font-size: 14px;
	line-height: 1.5;
}

/* FAQ heading (base accordion styles come from .vm-k24-faq in kevin-20260924.css).
   Eyebrow + h2 share one grid cell so they stack instead of splitting across
   the faq's two explicit columns. */
html:not(#vm-kx) .vm-k24b-sus-faq-head .vm-k24-eye {
	margin-bottom: 10px;
}

html:not(#vm-kx) .vm-k24b-sus-faq__icon {
	flex: none;
	color: #0b4d4a;
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	html:not(#vm-kx) .vm-k24b-sus-chevron {
		transition: none;
	}
}

@media (max-width: 1199px) {
	html:not(#vm-kx) .vm-k24b-sus-cards {
		grid-template-columns: 1fr 1fr;
	}

	html:not(#vm-kx) .vm-k24b-sus-materials {
		/* Source order is already text, then the framed photo — keep that
		   order (do not reverse it) so mobile/tablet shows the text before
		   the biocomposite image, as the brief requires. */
		grid-template-columns: 1fr;
	}

	html:not(#vm-kx) .vm-k24b-sus-wide {
		grid-template-columns: 1fr;
	}

	html:not(#vm-kx) .vm-k24b-sus-eu-grid {
		grid-template-columns: 1fr;
	}

	html:not(#vm-kx) .vm-k24b-sus-env {
		flex-direction: column;
	}

	html:not(#vm-kx) .vm-k24b-sus-env__cert,
	html:not(#vm-kx) .vm-k24b-sus-env__pillars {
		/* In column flow the flex-basis set for the row layout (320px /
		   480px) applies to height instead of width, stretching the cards
		   with empty space — cancel it so each sizes to its own content. */
		flex: none;
	}

	html:not(#vm-kx) .vm-k24b-sus-env__pillars {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media (max-width: 900px) {
	html:not(#vm-kx) .vm-k24b-sus-tri {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	html:not(#vm-kx) .vm-k24b-sus-tri__item {
		padding: 0;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.22);
		padding-top: 20px;
	}

	html:not(#vm-kx) .vm-k24b-sus-tri__item:first-child {
		border-top: 0;
		padding-top: 0;
	}
}

@media (max-width: 767px) {
	html:not(#vm-kx) .vm-k24b-sus-cards {
		grid-template-columns: 1fr;
	}

	html:not(#vm-kx) .vm-k24b-sus-env__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	html:not(#vm-kx) .vm-k24b-sus-env__pillars {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	html:not(#vm-kx) .vm-k24b-sus-env__pillars li {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.22);
		padding: 14px 0 0;
	}

	html:not(#vm-kx) .vm-k24b-sus-env__pillars li:first-child {
		border-top: 0;
		padding-top: 0;
	}

	html:not(#vm-kx) .vm-k24b-sus-eu-card__top {
		flex-direction: column;
		align-items: flex-start;
	}

	html:not(#vm-kx) .vm-k24b-sus-eu-card__logo {
		flex-basis: auto;
		width: 55%;
		max-width: 220px;
	}

	html:not(#vm-kx) .vm-k24b-sus-route .vm-k24-route__join {
		display: none;
	}

	html:not(#vm-kx) .vm-k24b-sus-hero .vm-k24-hero__photo {
		object-position: 88% center;
	}
}