/* Fonts */

@font-face {
	font-family: 'Sequel-Neue';
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/sequel-neue-tS7ysex.woff2") format('woff2');
}

/* Root */

:root {
	--color-green-light: #b6d237;
	--color-green: #008436;
	--color-yellow: #ffce18;
	--color-orange: #f49b25;
	--color-ecru: #fffcf3;
	--hamburger-bar-width: 24px;
	--hamburger-unit: calc(var(--hamburger-bar-width) / 19);
	--hamburger-bar-height: calc(var(--hamburger-unit) * 3);
	--hamburger-gap: calc(var(--hamburger-unit) * 5);
	--hamburger-foreground: #fff;
	--hamburger-background: var(--color-green);
	--hamburger-margin: 32px;
	--hamburger-animation-timing: 200ms ease-in-out;
	--hambuger-height: calc(var(--hamburger-bar-height) * 3 + var(--hamburger-gap) * 2);
	--padding: 2rem;
}

/* Base */

html {
	scroll-behavior: smooth;
}

body {
	font: 400 1rem/1.2 Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
	color: var(--color-green);
	overflow-x: hidden;
}

/* Layout */

.container {
	margin: 0 auto;
	padding: 0 var(--padding);
}

.flex-column {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	justify-content: center;
	align-items: center;
}

.section {
	overflow: hidden;
}

.subsection {
	padding: 5rem 0;
}

.subsection:first-child {
	padding-top: 6rem;
}

.subsection:last-child {
	padding-bottom: 8rem;
}

@media (min-width: 1024px) {

	.container-xl {
		max-width: 1140px;
	}
}

/* Headings */

.h1, .h2, .h3, .h4 {
	font-family: 'Sequel-Neue';
	font-weight: 400;
	text-transform: uppercase;
}

.h1 {
	font-size: clamp(50px, 6.25svw, 90px);
	letter-spacing: -0.055em;
}

.h2 {
	font-size: clamp(30px, 2.78svw, 40px);
}

.h3 {
	font-size: 1.875em; /* 30px */
}

.h4 {
	font-size: clamp(20px, 2svw, 30px);
}

.lead {
	font-weight: 700;
	font-size: clamp(18px, 2.36vw, 34px);
	line-height: 1;
}

/* Components */

.hamburger-menu {
	--x-width: calc(var(--hambuger-height) * 1.414213562373095);

	display: flex;
	flex-direction: column;
	gap: var(--hamburger-gap);
	width: max-content;
	position: absolute;
	top: var(--hamburger-margin);
	right: var(--hamburger-margin);
	z-index: 20;
	cursor: pointer;
}

.hamburger-menu:has(input:focus-visible)::before,
.hamburger-menu:has(input:focus-visible)::after,
.hamburger-menu input:focus-visible  {
	border: 1px solid var(--hamburger-background);
	box-shadow: 0 0 0 1px var(--hamburger-foreground);
}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
	content: "";
	width: var(--hamburger-bar-width);
	height: var(--hamburger-bar-height);
	background-color: var(--hamburger-foreground);
	border-radius: 9999px;
	transform-origin: right center;
	transition: opacity var(--hamburger-animation-timing), width var(--hamburger-animation-timing),
	rotate var(--hamburger-animation-timing), translate var(--hamburger-animation-timing),
	background-color var(--hamburger-animation-timing);
}

.hamburger-menu input {
	appearance: none;
	padding: 0;
	margin: 0;
	outline: none;
	pointer-events: none;
}

.hamburger-menu:has(input:checked)::before {
	rotate: -45deg;
	width: var(--x-width);
	translate: 0 calc(var(--hamburger-bar-height) / -2);
}

.hamburger-menu:has(input:checked)::after {
	rotate: 45deg;
	width: var(--x-width);
	translate: 0 calc(var(--hamburger-bar-height) / 2);
}

.hamburger-menu input:checked {
	opacity: 0;
	width: 0;
}

.sidebar {
	position: absolute;
	inset: 0;
	translate: 100%;
	transition: translate var(--hamburger-animation-timing);
	z-index: 10;
}

.hamburger-menu:has(input:checked) + .sidebar {
	translate: 0;
}

@media (min-width: 1024px) {

	.hamburger-menu {	
		display: none;
	}

	.sidebar {
		position: static;
		translate: 0;
	}
	
}

.sidebar {
	background-color: 
		transparent,
		var(--color-green);
	background-image: 
		url("../images/sidebar-bg-mobile-YPBeQww.webp"),
		radial-gradient(circle at center, var(--color-green-light) 0%, var(--color-green) 100%);
	background-repeat: no-repeat;
	background-position: 
		center bottom,
		center;
	background-size: 
		100% auto,
		cover;
	color: #fff;
}

.sidebar nav,
.sidebar nav ul {
	height: 100%;
}

.sidebar nav ul {
	font-size: 1.25rem;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1em;
	
	font-family: 'Sequel-Neue', sans-serif;
	text-transform: uppercase;
}

@media (min-width: 1024px) {

	.sidebar {
		background: none;
	}

	.sidebar nav ul {
		font-size: 1rem;
		opacity: 0.7;
		
		flex-direction: row;
		justify-content: space-between;
	}
	
}

.hero {
	min-height: 100svh;
	overflow: hidden;
	position: relative;
	color: #fff;
}

.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--color-green) radial-gradient(circle 580px at 50% 90%, var(--color-green-light) 0%, transparent 100%);
	z-index: -3;
}

.bg-fixed {
	pointer-events: none;
}

.hero .bg-fixed {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: 
		url("../images/hero-bg-top-mobile-40LNoii.webp"),
		url("../images/hero-bg-bottom-mobile-MJdfrp8.webp");
	background-repeat: no-repeat;
	background-position: 
		50% 0,
		50% 100%;
	background-size: 100% auto;
}

.hero__logo {
	display: block;
	position: absolute;
	bottom: 0;
	right: clamp(12px, 1.25dvw, 18px);
	width: clamp(132px, 14.44dvw, 208px);
}

.hero .container {
	padding: var(--padding) var(--padding) calc(var(--padding) * 0.5625);
	min-height: 100svh;
	display: flex;
	flex-direction: column;
}

.hero__main {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	padding: calc(var(--hambuger-height) + 1rem) 0;
	gap: 1.5rem;
}

@media (min-width: 1024px) {

/*	.hero::after {*/
/*		width: 80%;*/
/*		top: calc(var(--padding) + 1lh + var(--padding));*/
/*		background-image: url("../images/hero-ellipse-p6UMdO5.svg");*/
/*	}*/

	.hero .bg-fixed {
		background-image: 
			url("../images/hero-bg-top-yjcBnyH.webp"),
			url("../images/hero-bg-bottom-YAq7TrQ.webp");
	}


	.hero .container {
		max-width: min(66.66%, 960px);
	}
	
	.hero__main {
		justify-content: center;
		margin-top: var(--padding);
		padding: 0 0 var(--padding);
	}
}

.hero__sponsors {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 3rem;
}

.hero__sponsors h2 {
	font-size: clamp(1rem, 1.389svw, 1.25rem);
	font-weight: 400;
}

.hero__sponsors ul {
	display: contents;
}

.hero__sponsors img {
	max-height: 6svh;
	width: auto;
	display: block;
}

/* Mobile: stack everything in a column */
@media (max-width: 1023px) {
	.hero__sponsors {
		flex-direction: column;
		align-items: flex-start;
		max-width: 50%;
		gap: 1rem;
	}
}

.footer .container,
.footer__links {
	display: flex;
	flex-direction: column;
	gap: 1em;
	align-items: center;
}

.footer__copyright {
	text-align: center;
	padding-top: 1.5em;
	border-top: 1px solid var(--color-green-light);
	width: 100%;
}

@media (min-width: 1024px) {
	
	.footer .container,
	.footer__links {
		flex-direction: row;
		gap: 5svw;
	}

	.footer__copyright {
		font-size: 1rem;
		text-align: left;
		padding-top: 0;
		border-top: none;
		width: auto;
		text-wrap: nowrap;
	}
}

/* Card */

.hero__cards {
	margin: 0 -1rem;
}

.card-group {
	display: flex;
	justify-content: space-around;
	gap: 0.5rem;
	width: min(100%, 75svh);
	margin: 0 auto;
}

.card {
	aspect-ratio: 194/282;
	max-width: 196px;
	width: 33.33%;
	border-radius: 5%;
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	padding: 3% 1.5%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
    transition: transform 300ms ease, box-shadow 300ms ease;
}

.card:nth-child(2) {
    transform: translateY(10%);
}

.card:hover {
    transform: scale(1.05);
	box-shadow: 0 0 21px 5px rgba(171, 211, 21, 0.60), -4px 4px 23px 0 rgba(0, 0, 0, 0.18);
}

.card:nth-child(2):hover {
    transform: translateY(10%) scale(1.05);
}

.card--transit {
	background-color: var(--color-green);
	background-image: url("../images/hero-card-transit-DvjT4l2.webp");
}

.card--microbiote {
	background-color: #fff;
	background-image: url("../images/hero-card-microbiote-tHJ9xZW.webp");
}

.card--nutrition {
	background-color: var(--color-yellow);
	background-image: url("../images/hero-card-nutrition-Cf287AX.webp");
}

.card__title {
	font-family: 'Sequel-Neue', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(12px, 1.5svw, 22px);
}

.card__author {
	font-size: clamp(9px, 1svw, 15px);
}

.card__play {
	font-size: clamp(24px, 2.77svw, 40px);
	margin-top: 0.25em;
}

.card__play::before {
	margin: 0;
}

@media (min-width: 1024px) {

	.hero__cards {
		margin: 0
	}

	.card-group {
		gap: 5rem;
		width: min(100%, 90svh);
	}
}

/* Topic */

body {
	counter-reset: topic;
}

.topic {
	counter-increment: topic;
}

.topic--transit {
	background: var(--color-green);
	color: #fff;
}

.topic--microbiote {
	background-color: #fff;
	color: var(--color-green);
}

.topic--nutrition {
	background-color: var(--color-yellow);
	color: var(--color-green);
}

.topic__header {
	--font-size: clamp(116px, 11.11svw, 160px);
	display: flex;
	align-items: flex-start;
	gap: 1.5em;
}

.topic__header>div {
	width: 75%;
}

.topic--transit .topic__header,
.topic--nutrition .topic__header {
	transform: translateX(calc(-1 * (var(--padding) + var(--font-size) * 0.25)));
}

.topic:not(.topic--reverted) .topic__header::before,
.topic.topic--reverted .topic__header::after {
	content: counter(topic, decimal-leading-zero);
	font-family: 'Sequel-Neue', sans-serif;
	font-size: var(--font-size);
	letter-spacing: -0.055em;
	line-height: 1;
	opacity: 0.5;
}

.topic--transit .topic__header::before {
	color: #029b40;
}

.topic--microbiote .topic__header::after {
	color: #f7e2a2;
}

.topic--nutrition .topic__header::before {
	color: #f2bf05;
}

.topic__title {
	font-family: 'Sequel-Neue';
	text-transform: uppercase;
	font-size: clamp(40px, 6.25svw, 90px);
	letter-spacing: -0.055em;
	color: var(--color-yellow);
}

.topic--nutrition .topic__title  {
	color: var(--color-green);
}

.topic__article {
	display: grid;
}

/* Backgrounds */

.subsection--intro--transit {
	position: relative;
	z-index: 0;
	padding-bottom: 10rem;
	background: url("../images/bg-arrow-left-spiral-T9Kiag3.svg") no-repeat 100% 0/25% auto;
}

.subsection--booklet--transit {
	position: relative;
	z-index: 0;
}

.subsection--intro--transit> .bg-fixed:first-of-type,
.subsection--booklet--transit> .bg-fixed:first-of-type {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	z-index: -1;
}

.subsection--intro--transit> .bg-fixed:first-of-type {
	background-image:
		url("../images/bg-arrow-right-mf5bi3P.svg");
	background-position:
		0 100%;
	background-size:
		20% auto;
}

.subsection--booklet--transit> .bg-fixed:first-of-type {
	background-image:
		url("../images/bg-arrow-left-oUp_RR3.svg");
	background-position:
		100% 78%;
	background-size:
		20% auto;
}

.subsection--intro--microbiote {
	position: relative;
	z-index: 0;
	padding-bottom: 10rem;
}

.subsection--intro--microbiote> .bg-fixed:first-of-type {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		url("../images/microbiote-spiky-green-light-ZmipWq1.svg"),
		url("../images/microbiote-coccus-green-1YWwGU_.svg"),
		url("../images/microbiote-rod-pale-green-gcGJo-I.svg"),
		url("../images/microbiote-spiky-green-q6YWT5n.svg"),
		url("../images/microbiote-spiky-green-light-ZmipWq1.svg"),
		url("../images/microbiote-coccus-small-yellow-uwbtsS5.svg"),
		url("../images/microbiote-rod-yellow-nNRFWlb.svg"),
		url("../images/microbiote-coccus-green-1YWwGU_.svg"),
		url("../images/microbiote-spiky-pale-green-Z02tRQN.svg");
	background-repeat: no-repeat;
	background-position:
		96% 2%,
		84% 1%,
		0 8%,
		94% 18%,
		1% 33%,
		96% 40%,
		96% 96%,
		0 98%,
		96% 100%;
	background-size:
		8vw auto;
}

.subsection--booklet--microbiote  {
	position: relative;
	z-index: 0;
}

.subsection--booklet--microbiote > .bg-fixed {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: 
		url("../images/microbiote-spiky-green-q6YWT5n.svg"),
		url("../images/microbiote-coccus-green-1YWwGU_.svg"),
		url("../images/microbiote-spiky-pale-green-Z02tRQN.svg"),
		url("../images/microbiote-coccus-yellow-KlS_fLW.svg"),
		url("../images/microbiote-rod-pale-green-gcGJo-I.svg"),
		url("../images/microbiote-spiky-yellow-Imv14Vu.svg");
	background-repeat: no-repeat;
	background-position:
		5% 4%, 
		50% 5%, 
		86% 0, 
		96% 40%, 
		4% 100%,
		98% 95%;
}

.subsection--intro--nutrition  {
	position: relative;
	z-index: 0;
}

.subsection--intro--nutrition> .bg-fixed:first-of-type {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-repeat: no-repeat;
	background-image:
		url("../images/nutrition-star-green-light-X6aJ8vS.svg"),
		url("../images/nutrition-star-green-KUc7yQa.svg"),
		url("../images/nutrition-ring-gjT-pZb.svg"),
		url("../images/nutrition-leaf-Heqtqrw.svg"),
		url("../images/nutrition-vitamin-b-9-green-lY9zrNi.svg"),
		url("../images/nutrition-star-white-QvpNgjB.svg");
	background-position:
		92% 4%,
		8% 22%,
		94% 26%,
		96% 81%,
		4% 85%,
		2% 100%;
}

@media (min-width: 1024px) {

	.subsection--intro--transit {
		background-size: 15% auto;
	}
	
	.subsection--intro--transit> .bg-fixed:first-of-type {
		background-position:
			0 80%;
		background-size:
			10% auto;
	}
	
	.subsection--booklet--transit> .bg-fixed:first-of-type {
		background-position:
			100% 78%;
		background-size:
			10% auto;
	}

	.subsection--intro--microbiote> .bg-fixed:first-of-type {
		background-image:
			url("../images/microbiote-spiky-green-light-ZmipWq1.svg"),
			url("../images/microbiote-coccus-small-yellow-uwbtsS5.svg"),
			url("../images/microbiote-coccus-green-1YWwGU_.svg"),
			url("../images/microbiote-rod-pale-green-gcGJo-I.svg"),
			url("../images/microbiote-rod-pale-green-gcGJo-I.svg"),
			url("../images/microbiote-coccus-yellow-KlS_fLW.svg"),
			url("../images/microbiote-spiky-green-q6YWT5n.svg"),
			url("../images/microbiote-rod-yellow-nNRFWlb.svg"),
			url("../images/microbiote-coccus-small-yellow-uwbtsS5.svg");
		background-position:
			8% 5%,
			33% 10%,
			10% 20%,
			33% 20%,
			8% 96%,
			40% 98%,
			54% 90%,
			70% 98%,
			90% 100%;
		background-size: auto;
	}

	.subsection--booklet--microbiote > .bg-fixed {
		background-image: 
			url("../images/microbiote-spiky-green-q6YWT5n.svg"),
			url("../images/microbiote-coccus-green-1YWwGU_.svg"),
			url("../images/microbiote-spiky-pale-green-Z02tRQN.svg"),
			url("../images/microbiote-coccus-yellow-KlS_fLW.svg"),
			url("../images/microbiote-rod-pale-green-gcGJo-I.svg"),
			url("../images/microbiote-spiky-yellow-Imv14Vu.svg");
		background-position:
			5% 4%, 
			50% 5%, 
			86% 0, 
			96% 40%, 
			4% 100%,
			98% 95%;
	}

	.subsection--intro--nutrition {
		padding-bottom: 10rem;
	}

	.subsection--intro--nutrition>.bg-fixed:first-of-type {
		background-image:
			url("../images/nutrition-kiwi--K-OCvb.svg"),
			url("../images/nutrition-leafs-KyoQ5Zk.svg"),
			url("../images/nutrition-vitamin-k-fXUqgVH.svg"),
			url("../images/nutrition-star-green-KUc7yQa.svg"),
			url("../images/nutrition-vitamin-b-9-white-GgpQivd.svg"),
			url("../images/nutrition-star-green-light-X6aJ8vS.svg"),
			url("../images/nutrition-star-green-KUc7yQa.svg"),
			url("../images/nutrition-ring-small-cyBvnMT.svg"),
			url("../images/nutrition-star-green-light-X6aJ8vS.svg");
		background-position:
			96% 4%,
			82% 8%,
			92% 16%,
			94% 32%,
			6% 66%,
			94% 85%,
			6% 96%,
			16% 100%,
			24% 98%;
	}

}

.subsection--booklet--nutrition  {
	position: relative;
}

.subsection--booklet--nutrition > .bg-fixed {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-image:
		url("../images/nutrition-star-white-QvpNgjB.svg"),
		url("../images/nutrition-vitamin-k-small-jT8be3P.svg"),
		url("../images/nutrition-ring-green-llt9paQ.svg"),
		url("../images/nutrition-dot-Bn3MNYv.svg");
	background-position:
		96% 0,
		2% 54%,
		96% 54%,
		92% 80%;
}

@media (min-width: 1024px) {

	.subsection--booklet--nutrition > .bg-fixed {
		background-image:
			url("../images/nutrition-dot-Bn3MNYv.svg"),
			url("../images/nutrition-leaf-Heqtqrw.svg"),
			url("../images/nutrition-vitamin-b-9-green-lY9zrNi.svg"),
			url("../images/nutrition-ring-gjT-pZb.svg"),
			url("../images/nutrition-vitamin-k-fXUqgVH.svg"),
			url("../images/nutrition-heart-qa4xavc.svg"),
			url("../images/nutrition-ring-gjT-pZb.svg"),
			url("../images/nutrition-dot-Bn3MNYv.svg"),
			url("../images/nutrition-star-green-light-X6aJ8vS.svg");
		background-position:
			4% 0,
			44% 8%,
			88% 20%,
			94% 70%,
			6% 96%,
			44% 90%,
			60% 84%,
			72% 92%,
			92% 90%;
	}

}

@media (min-width: 1024px) {
	.topic--reverted .topic__header {
		width: 54%;
		margin-left: auto;
	}
	.topic--nutrition .topic__header {
		width: 66.66%;
		margin-right: auto;
	}

	.topic--reverted .topic__article {
		direction: rtl;
	}

	.topic--reverted .topic__article>* {
		direction: ltr;
		/* reset text direction inside children so content isn't reversed too */
	}

	.topic__header>div {
		width: auto;
	}

	.topic--transit {
		background-size: 15% auto;
	}

	.topic--transit .topic__header,
	.topic--nutrition .topic__header {
		transform: none;
	}
}

/* Statement */

.statement {
	font-size: 1rem;
	grid-template-columns: 1fr;
	gap: 3em;
	align-items: start
}

.statement__video_wrapper {
	width: 100%;
	max-width: 360px;  /* 540x360 3:2 */
	position: relative;
}

.statement__video_wrapper:has(> video.is-paused)::before {
	display: block;
	content: '';
	aspect-ratio: 1;
	width: 4rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: url("../images/icon-play-green-juXguL4.svg") no-repeat center/cover;
	pointer-events: none;
}

.statement__video_wrapper video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: pointer;
}

.statement__details {
	display: flex;
	flex-direction: column;
	gap: 3em;
}

.statement__quote {
	font-family: 'Sequel-Neue', sans-serif;
	font-size: clamp(20px, 2.25vw, 32px);
}

.statement__quote> blockquote {
	display: inline;
	font-family: 'Sequel-Neue', sans-serif;
	font-size: clamp(20px, 2.25vw, 32px);
	position: relative;
}

.statement__quote> blockquote::before,
.statement__quote> blockquote::after  {
	content: '';
	width: 0.4em;
	aspect-ratio: 13/9;
	background-color: currentColor
}

.statement__quote> blockquote::before {
	display: block;
	position: absolute;
	top: 0;
	right: calc(100% + 0.2em);
	mask: url("../images/quotation-mark-open-G2ax5eH.svg") no-repeat center/cover;
}

.statement__quote> blockquote::after {
	display: inline-block;
	vertical-align: top;
	mask: url("../images/quotation-mark-close-sPztPzC.svg") no-repeat center/contain;
}

.statement__author__name {
	font-family: 'Sequel-Neue', sans-serif;
	font-size: clamp(24px, 2vw, 30px);
	font-style: normal;
}

.statement__author {
	padding-top: 3em;
	border-top: 1px solid #029B40;
}

.statement__author__role {
	display: block;
	color: var(--color-yellow);
}

.statement__author__bio {
	font-size: clamp(16px, 1.4vw, 20px);
}

@media (min-width: 1024px) {

	.statement {
		font-size: 1.25rem;
		grid-template-columns: 1fr 2fr;
	}

	.statement__author {
		width: 90%;
	}
}

.topic--white .statement__quote {
	color: var(--color-yellow);
}

.topic--white .statement__author {
	border-top-color: #f7e2a2;
}

.topic--yellow .statement__quote,
.topic--yellow  .statement__author__name {
	color: #fff;
}

.topic--yellow  .statement__author {
	border-top-color: #f2bf05;
}

.topic--yellow  .statement__author__role {
	color: var(--color-green);
}

/* Presentation */ 

.presentation {
	font-size: 1rem;
	grid-template-columns: minmax(0, 1fr);
	gap: 3em;
	align-items: center;
	/*	min-height: 100svh;*/
	will-change: transform;
}

.presentation__texts {
	display: grid;
}

.presentation__text {
	grid-area: 1 / 1;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.presentation__text:first-child {
	opacity: 1;
}

.presentation__keyword__image {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1em;
}

.presentation__keywords {
	font-size: clamp(18px, 1.39vw, 20px);
	padding: 0.5em;
	background: rgba(171, 211, 21, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 9999px;
	color: var(--color-green-light);
	font-family: 'Sequel-Neue', sans-serif;
	letter-spacing: -0.05em;
	overflow: hidden;
	position: relative;
	min-width: 176px;
	width: 50%;
}

.topic--microbiote .presentation__keywords {
	border: none;
	background: rgba(249, 243, 224, 0.9);
	color: var(--color-green);
	width: 60%;
}

.topic--nutrition .presentation__keywords {
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: rgba(255, 218, 88);
	color: #fff;
	width: 40%;
}

.presentation__keywords ul {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	transform: translateX(0);
}

.presentation__keywords li {
	flex: 0 0 100%;
	width: 100%;
	text-align: center;
}

.presentation__image {
	aspect-ratio: 1;
	position: relative;
	padding: 1rem;
	min-width: 360px;
}

/* this is the element JS should rotate */
.presentation__image__frame {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	pointer-events: none;
	background: url("../images/circular-ring-green-light-DVLiLiV.svg") no-repeat center/contain;
}

.topic--nutrition .presentation__image__frame {
	background: url("../images/circular-ring-green-WX2xGdN.svg") no-repeat center/contain;
}

.presentation__image img {
	position: absolute;
	width: calc(100% - 3rem);
	height: calc(100% - 3rem);
	object-fit: cover;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
}

@media (min-width: 1024px) { 

	.presentation {
		grid-template-columns: 1fr 1fr;
	}

	.presentation__keyword__image {
		flex-direction: column;
		align-items: center;
		margin-right: 0;
		gap: 2em;
	}

	.presentation__image {
		width: 480px;
	}
	
}
/* Booklet */

.booklet {
	grid-template-columns: 1fr;
	gap: 3em;
	justify-items: center;
}

.booklet__img img {
	display: block;
	width: 100%;
}

@media (min-width: 1024px) { 

	.booklet {
		display: grid;
		grid-template-columns: 1fr 1.8fr;
		gap: 10%;
		align-items: center;
	}
}

/* Specs */

.specs .container {
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.list-spec {
	width: 100%;
	max-width: 350px;
	aspect-ratio: 349/473;
	margin: 0 auto;
	position: relative;
}

.specs__wrapper {
	position: relative;
}

.specs__wrapper > .bg-fixed {
	position: absolute;
	inset: 0;
	background: url("../images/bg-specs-mobile-58V0E8b.webp") no-repeat center;
	z-index: 0;
	will-change: transform;
}

.spec {
	font-size: 0.875em;
	width: 100%;
	max-width: 164px;
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	background-color: #0084361a;
	backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	position: absolute;
}

.spec:first-child,
.spec:last-child {
	background-color: #abd3151a;
}

.spec:first-child {
	top: 24px;
	left: 0;
}

.spec:nth-child(2) {
	top: -24px;
	right: 10px;
	z-index: -1;
}

.spec:nth-child(3) {
	bottom: -32px;
	left: 0;
	z-index: -1;
}

.spec:nth-child(4) {
	bottom: 8px;
	right: 0;
}

.spec__body {
	text-align: center;
	font-weight: 700;
}

.spec__value {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.25em;
	font-size: 2.4em;
}

.spec__number {
	font-family: 'Sequel-Neue', sans-serif;
	letter-spacing: -0.05em;
}

.spec__label {
	display: inline;
}

.specs .container {
	position: relative;
}

.source-notes {
	margin-top: 3rem;
}

@media (min-width: 1024px) {

	.specs .bg-fixed {
		background-image: url("../images/bg-specs-UK65fN5.webp");
	}
		
	.list-spec {
		max-width: 838px;
		aspect-ratio: 838/570;
	}

	.spec {
		max-width: 256px;
	}

	.spec:first-child {
		top: 0;
		left: 20%;
	}

	.spec:nth-child(2) {
		top: 36px;
	}

	.spec:nth-child(3) {
		bottom: 36px;
	}

	.spec:nth-child(4) {
		bottom: 16px;
		right: 14%;
	}

	.spec__body {
		font-size: 1.5em;
	}

	.source-notes {
		margin-top: 1rem;
	}

	.source-notes__long-text {
		font-size: 1.25em;
	}
}

/* Products */

.list-product {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.product {
	--bg-translate: 25%;
	max-width: 360px;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 0.5rem;
	margin: -1rem 0;
	position: relative;
}

.product::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(2px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	z-index: 1;
	pointer-events: none; /* pour ne pas bloquer les clics sur le contenu */
}

.product::before {
	content: '';
	position: absolute;
	width: 100%;
	top: 50%;
	z-index: 0;
}

.product--green::before {
	aspect-ratio: 582/366;
	left: 0;
	transform: translateX(calc(-1 * var(--bg-translate)));
	background: url("../images/kiwi-green-xNS91YT.webp") no-repeat left center/auto 100%;
}

.product--sungold::before {
	aspect-ratio: 634/393;
	right: 0;
	transform: translateX(calc(var(--bg-translate)));
	background: url("../images/kiwi-sungold-VzX_6ls.webp") no-repeat left center/auto 100%;
}

.product > * {
	position: relative;
	z-index: 2;
}

.product__title {
	font-family: 'Sequel-Neue', sans-serif;
	font-weight: 400;
	font-size: clamp(40px, 5.55svw, 80px);
	letter-spacing: -0.055em;
}

.product__features {
	font-size: 0.5rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1em;
}

.product__feature {
	padding: 0.5em 0.5em;
	border: 1px solid #fff;
	border-radius: 0.125em;
	font-weight: 700;
}

@media (min-width: 1024px) {

	.list-product {
		flex-direction: row;
	}

	.product {
		--bg-translate: 30%;
		gap: 1.5rem;
		margin: 0 -2rem;
		max-width: 672px;
	}
	
	.product__text {
		font-size: 1.25rem;
	}

	.product__features {
		font-size: 1rem;
	}

	.product__feature {
		padding: 0.5em 1em;
	}
}

/* Downloads */ 

.list-download {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.download {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
}

.download__title {
	font-family: 'Sequel-Neue', sans-serif;
	font-weight: 400;
	font-size: 1.5rem;
	min-height: 2lh;
	display: flex;
	align-items: flex-end;
	text-align: center;
}

.download__thumbnail {
	width: 100%;
	max-width: 260px;
	aspect-ratio: 1 / 1.41421356;
}

@media (min-width: 1024px) {

	.list-download {
		grid-template-columns: 16fr 5fr 16fr 1fr 16fr 1fr 16fr;
		gap: 0;
	}
	
	.list-download > *:nth-child(1) { grid-column: 1; }
	.list-download > *:nth-child(2) { grid-column: 3; }
	.list-download > *:nth-child(3) { grid-column: 5; }
	.list-download > *:nth-child(4) { grid-column: 7; }
}

/* Buttons */

.btn {
	display: inline-block;
	padding: 1em 1.5em;
	border: 0;
	border-radius: 0.3125em;
	text-align: center;
	vertical-align: middle;
	user-select: none;
	cursor: pointer;
	outline: none;
	font-weight: 700;
	text-transform: uppercase;
	box-shadow: -0.3125em 0.3125em 0.5625em 0 rgba(0, 0, 0, 0.25);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-green {
	background-color: var(--color-green);
	color: #fff;
}

.btn-yellow {
	background-color: var(--color-yellow);
	color: var(--color-green);
}

.btn-rounded {
	padding: 1rem;
	aspect-ratio: 1;
	border-radius: 9999px;
	display: flex;
	align-items: center;
	box-shadow: none;
}

.btn-green:hover,
.btn-yellow:hover {
	background-color: var(--color-green-light);
	color: #fff;
}

.bg-green-light:hover {
	background-color: var(--color-yellow);
}

/* Lists */

.list-group {
	display: flex;
	flex-direction: column;
}

.list-group li {
	padding: 1em 0;
	border-bottom: 1px solid currentColor;
}

.list-group li:last-child {
	border-bottom: none; /* removes the line after the last item */
}

.list-group a {
	text-decoration: underline;
	width: 100%;
	transition: color 0.2s ease;
}

.list-group a:hover {
	color: var(--color-green-light);
}

.list-group-numbered {
	counter-reset: list-counter;
}

.list-group-numbered li {
	counter-increment: list-counter;
	display: flex;
	align-items: baseline;
	gap: 0.75em;
}

.list-group-numbered li::before {
	font-family: 'Sequel-Neue';
	content: counter(list-counter, decimal-leading-zero);
	flex-shrink: 0;
	min-width: 1.5em; /* keeps numbers aligned even at 10+ */
}

@media (min-width: 1024px) {

	.list-group a {
		width: 100%;
		text-align: center;
	}
}

/* Refs */

.ref {
	font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
	font-size: 1rem;
	margin-left: 0.1em;
}

.ref--asterisk {
	font-size: 1.5rem;
}

/* Utilities */

.green {
	color: var(--color-green);
}

.green-light {
	color: var(--color-green-light);
}

.white {
	color: #fff;
}

.yellow {
	color: var(--color-yellow);
}

.bg-ecru {
	background-color: var(--color-ecru);
}

.bg-green {
	background-color: var(--color-green);
}

.bg-green-light {
	background-color: var(--color-green-light);
}

.bg-yellow {
	background-color: var(--color-yellow);
}

.fs-3 {
	font-size: 1rem;
}

.fs-4 {
	font-size: clamp(18px, 1.32vw, 19px);
}

.fs-5 {
	font-size: 1.25rem;
}

.fs-6 {
	font-size: clamp(16px, 1.389vw, 20px);
}

.fst-italic {
	font-style: italic;
}

.mt-025 {
	margin-top: 0.25rem;
}

.mt-05 {
	margin-top: 0.5rem;
}

.mt-1 {
	margin-top: 1rem;
}

.mt-15 {
	margin-top: 1.5rem;
}

.mt-2 {
	margin-top: 2rem;
}

.mt-3 {
	margin-top: 3rem;
}

.mt-4 {
	margin-top: 4rem;
}

.mt-5 {
	margin-top: 5rem;
}

.mt-6 {
	margin-top: 6rem;
}

.pt-6 {
	padding-top: 6rem;
}

.pb-6 {
	padding-bottom: 6rem;
}

.py-4 {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.py-5 {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

.py-6 {
	padding-top: 6rem;
	padding-bottom: 6rem;
}

.text-center {
	text-align: center;
}

.text-underline {
	text-decoration: underline;
}

.flex-row-center {
	display: flex;
	justify-content: center;
}

.framed {
	padding: 1.25rem;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.30);
	border-radius: 1%;
}

.is-pinned {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%; /* important — fixed elements lose their width context */
}

@media (max-width: 1023px) {

	.hide-on-mobile {
		display: none;
	}
}