/* ==========================================================================
   Biogroup 2026
   Values come from the Figma file (frames 1440 desktop / 390 mobile).
   Fluid values interpolate between the mobile and desktop design sizes.
   ========================================================================== */

/* Tokens ------------------------------------------------------------------ */
:root {
	/* Colour styles */
	--c-yellow: #f8e14e;
	--c-orange: #c05303;
	--c-red: #c01e03;
	--c-deep-red: #841503;
	--c-grey: #f0f0f0;
	--c-black: #000;
	--c-white: #fff;

	/* Typography: Roboto. Web / Mobile text styles. */
	--font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
	--fw-thin: 100;
	--fw-light: 300;
	--fw-regular: 400;

	--fs-display: clamp(40px, 17.71px + 5.7143vw, 100px);  --lh-display: clamp(48px, 27.2px + 5.3333vw, 104px);
	--fs-h1: clamp(40px, 31.09px + 2.2857vw, 64px);        --lh-h1: clamp(48px, 39.09px + 2.2857vw, 72px);
	--fs-h2: clamp(36px, 28.57px + 1.9048vw, 56px);        --lh-h2: clamp(44px, 36.57px + 1.9048vw, 64px);
	--fs-h3: clamp(28px, 24.29px + 0.9524vw, 38px);        --lh-h3: clamp(36px, 31.54px + 1.1429vw, 48px);
	--fs-h4: clamp(24px, 21.03px + 0.7619vw, 32px);        --lh-h4: clamp(32px, 30.51px + 0.381vw, 36px);
	--fs-large: clamp(18px, 17.26px + 0.1905vw, 20px);     --lh-large: clamp(28px, 27.26px + 0.1905vw, 30px);
	--fs-body: 16px;  --lh-body: 24px;
	--fs-small: 14px; --lh-small: 20px;

	/* Layout */
	--container: 1440px;
	--gutter: clamp(24px, 6.91px + 4.381vw, 70px);
	--section-gap: clamp(64px, 50.63px + 3.4286vw, 100px);
	--col-gap: 31px;
	--card-gap: 15px;
	--radius: 15px;
	--radius-pill: 106px;
	--header-h: 82px;

	--ease: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 1023px) {
	:root { --header-h: 88px; }
}

/* Reset ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 0px) + 24px); }
body {
	margin: 0;
	font-family: var(--font);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	font-weight: var(--fw-light);
	color: var(--c-black);
	background: var(--c-white);
	-webkit-font-smoothing: antialiased;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, address { margin: 0; }
h1, h2, h3, h4 { font-weight: inherit; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; }
address { font-style: normal; }
button { font: inherit; color: inherit; cursor: pointer; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--c-black); color: var(--c-white); padding: .75rem 1rem; }
.skip-link:focus { left: 1rem; }
:focus-visible { outline: 2px solid var(--c-deep-red); outline-offset: 3px; }

/* Layout ------------------------------------------------------------------ */
.site-main { display: flex; flex-direction: column; gap: var(--section-gap); padding-bottom: var(--section-gap); }
.site-main:has(> .closing:last-child) { padding-bottom: 0; }

.section,
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section__head { display: flex; flex-direction: column; gap: 15px; margin-bottom: 35px; }
.section__head .section__title { margin-bottom: 0; }
.section__title {
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	font-weight: var(--fw-thin);
	margin-bottom: 35px;
}
.section__title--narrow { max-width: 580px; }
.section__lead { font-size: var(--fs-large); line-height: var(--lh-large); max-width: 804px; }
.section__intro { max-width: 944px; }
.section__intro p + p { margin-top: 1em; }
@media (max-width: 767px) {
	/* Figma mobile: heading → lead 20, intro block → first card/image 24 */
	.section__head { gap: 20px; margin-bottom: 24px; }
	.spotlight .section__lead { font-size: var(--fs-body); line-height: var(--lh-body); } /* Figma mobile In focus lead: Body 16/24 */
}

.rich-text > * + * { margin-top: var(--lh-body); }

/* Buttons ----------------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .3em;
	padding: 8px 24px 6px; /* 1px lower: Roboto sits slightly high in its line box */
	border-radius: var(--radius-pill);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	font-weight: var(--fw-light);
	text-decoration: none;
	background: var(--c-grey);
	color: var(--c-black);
	border: 0;
	transition: transform .2s var(--ease), box-shadow .2s;
}
.btn:hover { box-shadow: 0 6px 16px rgb(0 0 0 / .12); }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn--down:hover .btn__arrow { transform: translateY(3px); }
.btn__arrow { transition: transform .2s var(--ease); }
.btn--yellow { background: var(--c-yellow); }
.btn--white { background: var(--c-white); }
.btn--large { padding-block: 6px 8px; font-size: 20px; line-height: 30px; } /* 20px Roboto sits low: lift 1px */
@media (max-width: 767px) {
	.btn--large { padding-block: 8px 6px; font-size: var(--fs-body); line-height: var(--lh-body); }
	.btn--small { font-size: var(--fs-small); line-height: var(--lh-small); }
}

/* Tags -------------------------------------------------------------------- */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 35px; }
.tag {
	padding: 8px 14px 6px;
	border-radius: 100px;
	background: var(--c-grey);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}
@media (max-width: 767px) {
	.tags { margin-top: 20px; }
	.tag { padding: 7px 12px 5px; }
}

/* Header ------------------------------------------------------------------ */
.site-header {
	position: sticky; top: 0; z-index: 50;
	height: var(--header-h);
	background: var(--c-white);
}
.admin-bar .site-header { top: 32px; }
.site-header__inner {
	display: flex; align-items: center; gap: 39px;
	height: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding: 0 70px 0 74px;
}
.site-logo { display: block; margin-right: auto; }
.site-logo img { width: 143px; height: 50px; }

.site-nav__list { display: flex; align-items: center; gap: 39px; position: relative; top: 2px; } /* optically level with the LT/EN drop body */
.site-nav__list a {
	display: block; text-decoration: none; font-size: var(--fs-body); line-height: var(--lh-body);
	/* yellow pill (Figma) on hover and on the current page; negative margins keep the text positions */
	padding: 3px 17px 1px; margin-inline: -17px; border-radius: 69px;
	transition: background-color .2s var(--ease);
}
.site-nav__list a:hover,
.site-nav__list a:focus-visible,
.site-nav__list .menu-item-type-post_type.current-menu-item > a { background: var(--c-yellow); } /* current page; not the #anchor links to the homepage */

.lang-switch { display: flex; gap: 8px; }
.site-nav__lang { display: none; }
.lang-switch__link {
	display: grid; place-items: center;
	width: 35px; height: 40px; padding-top: 6px;
	background: url("../img/lang-drop.svg?v=2") center / contain no-repeat;
	font-size: var(--fs-body); text-decoration: none;
}

.nav-toggle { display: none; position: relative; width: 50px; height: 50px; border: 0; border-radius: 50%; background: var(--c-yellow); }
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after {
	position: absolute; left: 15px; width: 20px; height: 1.5px; background: var(--c-black);
	content: ""; transition: transform .25s var(--ease), opacity .2s;
}
.nav-toggle__bar { top: 24px; }
.nav-toggle__bar::before { left: 0; top: -6px; }
.nav-toggle__bar::after { left: 0; top: 6px; }
.nav-open .nav-toggle__bar { background: transparent; }
.nav-open .nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle__bar::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1023px) {
	/* The menu slides out from under the header bar: bar background is a layer above the menu */
	.site-header__inner { position: relative; z-index: 1; isolation: isolate; padding: 0 19px 0 14px; gap: 16px; }
	.site-header__inner::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--c-white); }
	.site-logo, .nav-toggle { position: relative; z-index: 1; }
	.nav-toggle { display: block; }
	.site-nav {
		position: absolute; top: 100%; left: 0; right: 0; z-index: -1;
		padding: 24px 24px 32px;
		background: var(--c-white);
		box-shadow: 0 12px 24px rgb(0 0 0 / .08);
		transform: translateY(-120%); visibility: hidden;
		transition: transform .3s var(--ease), visibility .3s;
	}
	.nav-open .site-nav { transform: none; visibility: visible; }
	.site-nav__list { flex-direction: column; align-items: flex-start; gap: 16px; top: 0; } /* 16 + 4px pill padding = Figma 20 */
	.site-nav__list a { font-size: var(--fs-large); line-height: var(--lh-large); }
	/* Figma mobile header: logo + yellow circle with a chevron; language moves into the menu */
	.site-header__inner > .lang-switch { display: none; }
	.site-nav__lang { display: block; margin-top: 24px; }
	.nav-toggle__bar {
		left: 15.8px; top: 10.8px; width: 18.4px; height: 18.4px;
		background: none; border: solid var(--c-black); border-width: 0 1.3px 1.3px 0;
		transform: rotate(45deg); transition: transform .3s var(--ease);
	}
	.nav-toggle__bar::before, .nav-toggle__bar::after { display: none; }
	.nav-open .nav-toggle__bar { background: none; transform: translateY(13px) rotate(225deg); }
}
@media (max-width: 782px) {
	.admin-bar .site-header { top: 0; }
}

/* Homepage hero (shaped) -------------------------------------------------- */
/* The text is in the normal flow, so the banner grows when the text is longer than the design.
   --hd = design height, --hh = real height (set by main.js); the curved right part of the shape
   and the drop are sized by the real height, so they keep their Figma proportions. */
.hero {
	--hd: min(52.222vw, 800px);
	--h: var(--hh, var(--hd));
	position: relative;
	width: 100%;
	max-width: 2800px;
	min-height: var(--hd);
	margin: calc(var(--header-h) * -1) auto 0;
	padding: calc(var(--hd) * 300 / 752) 0 60px; /* Figma: text block from y300 of the 752 hero */
	display: flex; align-items: flex-start;
	color: var(--c-white);
}
.hero__media {
	position: absolute; inset: 0 calc(var(--h) * 43 / 752) 0 0;
	overflow: hidden;
	background: #4a5560;
	-webkit-mask: url("../img/hero-mask-right.svg") right top / auto 100% no-repeat, linear-gradient(#000, #000) left top / calc(100% - var(--h) * 537 / 752 * .9) 100% no-repeat;
	mask: url("../img/hero-mask-right.svg") right top / auto 100% no-repeat, linear-gradient(#000, #000) left top / calc(100% - var(--h) * 537 / 752 * .9) 100% no-repeat;
}
.hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__drop { position: absolute; right: calc(var(--h) * 43 / 752); top: calc(var(--h) * 422 / 752); width: calc(var(--h) * 286 / 752); height: calc(var(--h) * 330 / 752); }
.hero__content {
	position: relative; z-index: 1;
	/* % margins/widths are relative to the hero: text on the 1440 container line */
	margin-left: max(6.389%, calc((100% - var(--container)) / 2 + 92px));
	width: min(714px, 55%);
	display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px;
}
.hero__title { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-light); }
.hero__text { font-size: var(--fs-large); line-height: var(--lh-large); }
.hero__text p { margin: 0; }

@media (max-width: 1023px) {
	.hero {
		--hd: 660px;
		margin-top: 0;
		padding: 89px 24px 180px; /* keeps the text clear of the drop (bottom-right) */
	}
	/* Figma mobile shape: the curved bottom-right part and the drop keep their Figma size and stay at the
	   bottom; when the text is longer the banner grows upwards (straight parts fill the rest) */
	.hero__media {
		inset: 0;
		-webkit-mask: url("../img/hero-mask-m.svg") right bottom / auto 660px no-repeat, linear-gradient(#000, #000) left top / calc(100% - 243px) 100% no-repeat, linear-gradient(#000, #000) right top / 243px calc(100% - 650px) no-repeat;
		mask: url("../img/hero-mask-m.svg") right bottom / auto 660px no-repeat, linear-gradient(#000, #000) left top / calc(100% - 243px) 100% no-repeat, linear-gradient(#000, #000) right top / 243px calc(100% - 650px) no-repeat;
	}
	.hero__media::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / .2); }
	.hero__drop { top: auto; right: 9px; bottom: 4px; width: 143px; height: 165px; }
	.hero__content { margin-left: 0; width: 100%; }
}

/* Inner page hero --------------------------------------------------------- */
.page-hero {
	position: relative;
	width: 100%;
	max-width: 2800px; /* background up to 2800px; text stays on the 1440 container line */
	margin: calc(var(--header-h) * -1) auto 0;
	min-height: 534px;
	display: flex; align-items: flex-start;
	padding: 228px 0 60px;
	color: var(--c-white);
	overflow: hidden;
	background: #4a5560;
	isolation: isolate;
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(0 0 0 / .45), rgb(0 0 0 / 0) 70%), rgb(0 0 0 / .15); }
.page-hero__content {
	display: flex; flex-direction: column; gap: 20px; max-width: 897px;
	/* % margins are relative to the hero itself (padding % was relative to the page and squeezed the text when the page is wider than the hero) */
	margin-inline: max(86px, calc((100% - var(--container)) / 2 + 86px)) 86px;
}
.page-hero__title { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-light); }
.page-hero__text { max-width: 731px; }
.page-template-in-focus .page-hero__text { max-width: 501px; } /* Figma: 3 lines */
@media (min-width: 1024px) {
	.page-template-sustainability .page-hero { padding-top: 264px; }
	.page-template-foundation .page-hero { min-height: 486px; padding-top: 256px; }
	/* Figma: first section starts at y≈600 on every inner page */
	.page-template-sustainability .page-hero + .section { margin-top: calc(67px - var(--section-gap)); }
	.page-template-foundation .page-hero + .section { margin-top: calc(114px - var(--section-gap)); }
	.page-template-foundation .cards-grid + .contacts { margin-top: calc(131px - var(--section-gap)); } /* Figma: What we support → Contacts */
}
.page-hero__text p { margin: 0; }
@media (max-width: 1023px) {
	/* Figma mobile: plain 530px block, text centred vertically */
	.page-hero { margin-top: 0; min-height: 530px; align-items: flex-start; padding: 170px 24px 40px; } /* Figma mobile: text from 170px */
	.page-hero__content { margin-inline: 0; }
}

/* Split: text + image ------------------------------------------------------ */
.split {
	display: grid;
	grid-template-columns: minmax(0, 580fr) minmax(0, 689fr); /* = 580px + 689px at 1440; fluid below (no horizontal scroll) */
	align-items: start;
	column-gap: var(--col-gap);
}
.split__text { min-width: 0; }
.split__body { max-width: 529px; }
.split__media { position: relative; aspect-ratio: 689 / 304; }
.split__image { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.split__image--contain { object-fit: contain; border-radius: 0; }
.split__media--drop .split__image,
.split__media--drop .contacts__logo {
	border-radius: 0;
	-webkit-mask: url("../img/about-mask.svg?v=2") 0 0 / 100% 100% no-repeat;
	mask: url("../img/about-mask.svg?v=2") 0 0 / 100% 100% no-repeat;
}
.split__drop { position: absolute; left: 0; bottom: 0; width: 10.595%; height: auto; }
.split__drop--m { display: none; }

@media (max-width: 1023px) {
	.split { grid-template-columns: 1fr; row-gap: 20px; }
	.split__body { max-width: none; }
	.split__media { aspect-ratio: 342 / 200; }
	.split__image { border-radius: 16px; }
	/* About: Figma mobile shape (cut-out + drop bottom-right) */
	.split__media--drop { aspect-ratio: 342 / 206; }
	.split__media--drop .split__image {
		border-radius: 15px;
		-webkit-mask: url("../img/about-mask-m.svg") right top / auto 100% no-repeat, linear-gradient(#000, #000) left top / 67.9% 100% no-repeat;
		mask: url("../img/about-mask-m.svg") right top / auto 100% no-repeat, linear-gradient(#000, #000) left top / 67.9% 100% no-repeat;
	}
	.split__media--drop .split__drop { display: none; }
	.split__media--drop .split__drop--m { display: block; left: auto; right: 0; width: 15.79%; }
	/* Contacts: plain grey box on mobile */
	.contacts .split__media--drop { aspect-ratio: 342 / 200; }
	.split__media--drop .contacts__logo { border-radius: 16px; -webkit-mask: none; mask: none; }
	.contacts .split__drop--m { display: none; }
	.split .section__title { margin-bottom: 20px; }
	.contacts .section__title { margin-bottom: 24px; }
	.contacts.split { row-gap: 24px; }
}
@media (min-width: 1024px) {
	#about .section__title { margin-bottom: 20px; } /* Figma: text 84px below the heading top */
}

/* Structure --------------------------------------------------------------- */
.structure__map { position: relative; width: 100%; }
.structure__map--m { display: none; max-width: 342px; margin-inline: auto; }
.structure__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.structure__node {
	position: absolute;
	display: grid; place-items: center;
	border: .5px solid var(--c-black);
	border-radius: 999px;
	background: var(--c-white);
	text-decoration: none;
	transition: background-color .2s var(--ease);
}
.structure__node img { width: var(--logo-w); max-height: var(--logo-h); height: auto; object-fit: contain; }
.structure__node--center { background: #f5e269; }
a.structure__node:hover,
a.structure__node:focus-visible { background: #f5e269; }
.structure__name { font-size: var(--fs-small); line-height: var(--lh-small); text-align: center; padding-inline: 8px; }
@media (max-width: 767px) {
	.structure__map--d { display: none; }
	.structure__map--m { display: block; }
}
@media (max-width: 767px) {
	.structure .section__title { margin-bottom: 24px; }
}

/* Stats ------------------------------------------------------------------- */
.stats__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); }
.stat {
	display: flex; flex-direction: column; gap: 35px;
	padding: 20px 30px;
	border-radius: var(--radius);
	background: var(--c-yellow);
}
.stat__value { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-thin); }
@media (max-width: 767px) {
	.stats__list { grid-template-columns: 1fr; gap: 24px; }
	.stat { padding: 24px; gap: 24px; }
}

/* Company cards (desktop) / accordion (mobile) ----------------------------- */
.companies__intro .section__title { margin-bottom: 15px; }
@media (max-width: 767px) { .companies__intro .section__title { margin-bottom: 20px; } }
.companies__list { display: grid; gap: 35px; margin-top: 15px; }

.company-card {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; justify-content: space-between;
	min-height: 380px;
	padding: 35px 28px;
	border-radius: var(--radius);
	background: #3a3a3a;
	color: var(--c-white);
	isolation: isolate;
}
.company-card__head { display: block; list-style: none; pointer-events: none; }
.company-card__head::-webkit-details-marker { display: none; }
.company-card__image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.company-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(0 0 0 / .75) 0%, rgb(0 0 0 / .45) 40%, rgb(0 0 0 / 0) 75%); }
.company-card__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-light); }
.company-card__toggle { display: none; }
.company-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; max-width: 680px; padding-top: 80px; } /* Figma texts up to 675px */
.company-card__tagline { font-weight: var(--fw-regular); }
.company-card__text p { margin: 0; }
.company-card__tagline + .company-card__text { margin-top: -15px; }

@media (max-width: 767px) {
	.companies__list { gap: 16px; }
	.company-card { display: block; min-height: 0; padding: 0; overflow: visible; background: none; color: var(--c-black); }
	.company-card::before { display: none; }
	.company-card__head {
		position: relative; overflow: hidden; isolation: isolate;
		display: flex; align-items: flex-end; gap: 16px;
		height: 180px; padding: 24px;
		border-radius: 16px;
		background: #3a3a3a;
		color: var(--c-white);
		cursor: pointer; pointer-events: auto;
	}
	.company-card__head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(0 0 0 / 0) 35%, rgb(0 0 0 / .65) 100%); }
	.company-card__title { flex: 1; font-size: 38px; line-height: 48px; } /* Figma mobile accordion: 38/48 */
	.company-card__toggle { display: block; position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--c-yellow); }
	.company-card__toggle::before, .company-card__toggle::after { content: ""; position: absolute; left: 13px; top: 19.2px; width: 14px; height: 1.6px; background: var(--c-black); transition: transform .2s; }
	.company-card__toggle::after { transform: rotate(90deg); }
	.company-card[open] .company-card__toggle::after { transform: rotate(0); }
	.company-card__body { padding: 20px 4px 12px; gap: 14px; max-width: none; }
	.company-card .btn { background: var(--c-yellow); }
	.company-card__tagline { line-height: 18px; }
	.company-card__tagline + .company-card__text { margin-top: 0; }
}

/* We care ----------------------------------------------------------------- */
.care__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.care-card { display: flex; flex-direction: column; gap: 20px; }
.care-card__media {
	position: relative; overflow: hidden; isolation: isolate;
	aspect-ratio: 642 / 345;
	padding: 34px;
	display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
	border-radius: 16px;
	background: #555; color: var(--c-white);
}
.care-card__image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.care-card__media::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(0 0 0 / .45) 0%, rgb(0 0 0 / .25) 45%, rgb(0 0 0 / 0) 85%); }
.care-card__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-light); }
.care-card__text { padding-inline: 14px; }
@media (max-width: 767px) {
	.care__grid { grid-template-columns: 1fr; }
	.care-card__media { aspect-ratio: 342 / 200; padding: 14px 20px 19px; }
	.care-card__title { font-size: 28px; line-height: 36px; }
	.care-card__text { padding-inline: 0; }
}

/* Story cards (In focus) --------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px var(--card-gap); }
.story-card { display: flex; flex-direction: column; gap: 20px; }
.story-card[hidden] { display: none; }
.story-card__media { position: relative; overflow: hidden; aspect-ratio: 423 / 270; margin-bottom: 5px; border-radius: var(--radius); }
.story-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.story-card:hover .story-card__image { transform: scale(1.03); }
.story-card__play { position: absolute; inset: 0; border: 0; background: transparent; }
.story-card__play::before {
	content: ""; position: absolute; left: 50%; top: 50%;
	width: 64px; height: 64px; translate: -50% -50%;
	border-radius: 50%; background: var(--c-yellow);
}
.story-card__play::after {
	content: ""; position: absolute; left: 50%; top: 50%; translate: -35% -50%;
	border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--c-black);
}
.story-card > :not(.story-card__media) { margin-inline: 16px; }
.story-card__label { font-weight: var(--fw-regular); line-height: 20px; margin-bottom: -6px; } /* Figma label box is 14px high */
.story-card__title { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-thin); max-width: 358px; }
.story-card__title a { text-decoration: none; }
.story-card__title a:hover { text-decoration: underline; text-underline-offset: .15em; }
.story-card__text { margin-top: -4px; }
.spotlight__more { display: flex; justify-content: flex-end; margin-top: 35px; }
.stories__more { display: flex; justify-content: center; margin-top: 35px; }
.report-card__files { display: flex; gap: 8px; }

@media (max-width: 1023px) {
	.card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.card-grid { grid-template-columns: 1fr; gap: 24px; }
	.card-grid--home .story-card:nth-child(n+4) { display: none; }
	/* Figma mobile: homepage excerpts 3 lines, smaller label gap; support-area images 218px */
	.card-grid--home .story-card__label { margin-top: 2px; }
	.card-grid--home .story-card__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
	.cards-grid .story-card__media { height: 218px; }
	.page-template-foundation .split__media { aspect-ratio: 342 / 218; }
	.story-card { gap: 14px; }
	.cards-grid .story-card { gap: 20px; } /* What we support: image → title → text 20 */
	.cards-grid .story-card > :not(.story-card__media) { margin-inline: 0; } /* mobile text as wide as the image */
	.stories .story-card__title, .spotlight .story-card__title { font-size: 32px; line-height: 36px; } /* Figma mobile story title 32/36 */
	.story-card__media { aspect-ratio: auto; height: 270px; margin-bottom: 0; border-radius: 16px; }
	.story-card__label { margin-top: 10px; margin-bottom: 0; }
	.story-card__text { margin-top: 0; }
	.spotlight__more { justify-content: flex-start; margin-top: 24px; }
	.stories__more { justify-content: flex-start; margin-top: 24px; } /* Figma mobile: Load more on the left */
	.spotlight__more .btn--large, .stories__more .btn--large { padding-block: 8px 6px; font-size: var(--fs-small); line-height: var(--lh-small); } /* Figma mobile: 14/20, 34px high */
	.page-template-foundation .contacts .split__media { aspect-ratio: 342 / 200; }
}

/* Info cards (principles, baseline) --------------------------------------- */
.info-cards .section__head { margin-bottom: 20px; }
.info-cards .section__head .section__intro { margin-bottom: 20px; } /* Figma: 2-line intro in a 68px box → 40px to the cards */
@media (max-width: 767px) {
	.info-cards .section__head .section__intro { margin-bottom: 0; }
	.info-cards .section__head:not(:has(.section__intro)) { margin-bottom: 24px; }
}
@media (min-width: 1024px) {
	/* Figma Sustainability: baseline → reports 121, reports → footer 54 */
	.page-template-sustainability .info-cards + .reports { margin-top: calc(121px - var(--section-gap)); }
	.page-template-sustainability .site-main { padding-bottom: 54px; }
}
.info-cards__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); }
.info-card {
	position: relative; overflow: hidden; isolation: isolate;
	display: flex; flex-direction: column; justify-content: space-between; gap: 80px;
	min-height: 300px;
	padding: 35px 28px;
	border-radius: var(--radius);
	background: var(--c-grey);
}
.info-card__image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.info-card--image { color: var(--c-white); background: #555; }
.info-card--image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(0 0 0 / .2); }
.info-card__title { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-thin); }
#baseline .info-card { min-height: 350px; }
@media (max-width: 1023px) {
	.info-cards__grid { grid-template-columns: 1fr; gap: 24px; }
	.info-card, #baseline .info-card { min-height: 270px; gap: 22px; padding: 24px; }
}

/* Cards grid (What we support) -------------------------------------------- */
.cards-grid .section__title { margin-bottom: 20px; }
@media (max-width: 767px) { .cards-grid .section__title { margin-bottom: 24px; } }

/* Contacts ---------------------------------------------------------------- */
.contacts__details { display: flex; flex-direction: column; gap: 15px; }
@media (max-width: 767px) { .contacts__details { gap: 14px; } }
.contacts__details p { margin: 0; }
.contacts__details a { text-decoration: none; }
.contacts__details a:hover { text-decoration: underline; }
.contacts__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #d9d9d9; }
.contacts__logo img { width: 80%; height: 63%; object-fit: contain; }

/* Reports ----------------------------------------------------------------- */
.reports__list { display: flex; flex-direction: column; gap: 10px; margin-top: 35px; }
.reports__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.reports__title { font-size: var(--fs-body); line-height: var(--lh-body); }
.reports__file { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.reports__file:hover { text-decoration: underline; }
.reports__row.is-featured .tag { background: var(--c-yellow); }
@media (max-width: 767px) {
	.reports__list { margin-top: 20px; gap: 20px; }
	.reports__title { font-size: var(--fs-small); line-height: var(--lh-small); }
}

/* Stories (In Focus page) -------------------------------------------------- */
@media (min-width: 1024px) {
	.page-hero + .stories { margin-top: calc(68px - var(--section-gap)); }
}

/* Closing banner ---------------------------------------------------------- */
/* Same idea as the hero: text in the flow (banner grows with long text), shape sized by the real height --ch. */
.closing {
	--cd: min(26.042vw, 400px);
	--c: var(--ch, var(--cd));
	position: relative;
	width: 100%;
	max-width: 2800px; /* background up to 2800px; text stays on the 1440 container line */
	min-height: var(--cd);
	margin-inline: auto;
	padding: calc(var(--cd) * 119 / 375) 0 40px; /* Figma home: title at y119 of 375 */
	display: flex; align-items: flex-start;
	color: var(--c-white);
}
.closing__media {
	position: absolute; inset: 0;
	overflow: hidden;
	background: #555;
	-webkit-mask: url("../img/closing-mask-right.svg?v=2") right top / auto 100% no-repeat, linear-gradient(#000, #000) left top / calc(100% - var(--c) * 400 / 375 * .9) 100% no-repeat;
	mask: url("../img/closing-mask-right.svg?v=2") right top / auto 100% no-repeat, linear-gradient(#000, #000) left top / calc(100% - var(--c) * 400 / 375 * .9) 100% no-repeat;
}
.closing__image { width: 100%; height: 100%; object-fit: cover; }
.closing__drop { position: absolute; right: calc(var(--c) * 24 / 375); top: 0; width: calc(var(--c) * 179 / 375); height: calc(var(--c) * 206 / 375); }
.closing__content {
	position: relative; z-index: 1;
	margin-left: max(4.861%, calc((100% - var(--container)) / 2 + 70px));
	width: min(885px, 64%);
}
.home .closing__content { width: min(595px, 45%); }
@media (min-width: 1024px) { .home .closing { margin-top: 15px; } } /* Figma: 115px after the last section */
/* Foundation (Figma: block 885 wide at x63 / y97 of 375, gap 15): centred vertically, 21px lower = Figma at 1440 */
.page-template-foundation .closing { align-items: center; padding: 21px 0 0; }
.page-template-foundation .closing__content {
	margin-left: max(4.375%, calc((100% - var(--container)) / 2 + 63px));
	display: flex; flex-direction: column; gap: 15px;
	padding-block: 20px;
}
.closing__drop--m { display: none; }
.closing picture { display: contents; }
.closing__title { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-thin); white-space: nowrap; }
.closing__text { font-size: var(--fs-large); line-height: var(--lh-large); }
.closing__text p { margin: 0; }
@media (max-width: 1023px) {
	.closing { --cd: 425px; align-items: flex-end; padding: 0; }
	.page-template-foundation .closing { align-items: flex-end; padding: 0; }
	/* curved top-right part + drop keep their Figma size; a longer text makes the banner grow downwards */
	.closing__media {
		-webkit-mask: url("../img/closing-mask-m.svg") right top / auto 425px no-repeat, linear-gradient(#000, #000) left top / calc(100% - 144px) 100% no-repeat, linear-gradient(#000, #000) right bottom / 144px calc(100% - 415px) no-repeat;
		mask: url("../img/closing-mask-m.svg") right top / auto 425px no-repeat, linear-gradient(#000, #000) left top / calc(100% - 144px) 100% no-repeat, linear-gradient(#000, #000) right bottom / 144px calc(100% - 415px) no-repeat;
	}
	.closing__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(0 0 0 / .45), rgb(0 0 0 / 0) 70%); }
	.closing__image { object-position: left center; }
	.closing__drop { display: none; }
	.closing__drop--m { display: block; right: 0; top: 4px; width: 91px; height: 74px; }
	.home .closing__image { object-position: 52% center; }
	.page-template-foundation .closing__image { object-position: 85% center; }
	.closing--has-m .closing__media::after { display: none; } /* Figma mobile image already has its overlay */
	.closing--has-m .closing__image { object-position: center; }
	.closing__content, .home .closing__content, .page-template-foundation .closing__content { margin: 0; width: 100%; padding: 24px 24px 51px; display: flex; flex-direction: column; gap: 20px; }
	.page-template-foundation .closing__content { padding-bottom: 38px; } /* Figma mobile: 51 home, 38 foundation */
	.closing__title { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-light); white-space: normal; }
}

/* Footer ------------------------------------------------------------------ */
.site-footer { background: var(--c-white); overflow: hidden; }
.site-footer__main,
.site-footer__bottom {
	display: grid;
	grid-template-columns: 326px 364px 314px 1fr;
	max-width: var(--container);
	margin-inline: auto;
	padding-left: 72px;
}
.site-footer__main {
	align-items: end;
	min-height: 242px;
	padding-top: 84px; padding-bottom: 49px;
	background: var(--c-yellow);
	box-shadow: 0 0 0 100vmax var(--c-yellow);
	clip-path: inset(0 -100vmax);
}
.site-footer__logo { align-self: end; margin-bottom: 4px; }
.site-footer__logo img { width: 243px; height: 89px; }
.site-footer__col { display: flex; flex-direction: column; gap: 6px; }
.site-footer__company { font-weight: var(--fw-light); } /* Figma: Light like the other lines */
.site-footer__col a { text-decoration: none; }
.site-footer__col a:hover { text-decoration: underline; }
.site-footer__menu { display: flex; flex-direction: column; gap: 6px; }
.site-footer__bottom { padding-block: 9px; }
.site-footer__bottom span { grid-column: 4; }

@media (max-width: 1279px) {
	.site-footer__main, .site-footer__bottom { grid-template-columns: 1.1fr 1.2fr 1fr .9fr; padding-inline: var(--gutter); column-gap: 24px; }
}
@media (max-width: 767px) {
	.site-footer__main, .site-footer__bottom { display: flex; flex-direction: column; align-items: flex-start; padding-inline: 24px; }
	.site-footer__main { gap: 24px; padding-top: 40px; padding-bottom: 32px; }
	.site-footer__logo { align-self: flex-start; margin: 0 0 13px; }
	.site-footer__bottom { padding-block: 16px; }
}

/* Video dialog ------------------------------------------------------------ */
.video-dialog { width: min(1100px, 92vw); padding: 0; border: 0; background: #000; overflow: visible; }
.video-dialog::backdrop { background: rgb(0 0 0 / .8); }
.video-dialog__frame { aspect-ratio: 16 / 9; }
.video-dialog__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-dialog__close {
	position: absolute; top: -48px; right: 0;
	width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
	background: var(--c-yellow); font-size: 0; color: transparent;
}
.video-dialog__close::before,
.video-dialog__close::after {
	content: ""; position: absolute; left: 50%; top: 50%;
	width: 16px; height: 1.6px; background: var(--c-black);
	transform: translate(-50%, -50%) rotate(45deg);
}
.video-dialog__close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* Default page ------------------------------------------------------------ */
.entry { padding-block: var(--section-gap); }
.entry__title { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-thin); margin-bottom: 35px; }
.entry .rich-text { max-width: 900px; }

/* Motion ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}