/*
	Theme Name: Supply Logic
	Author: Dalton Agency
	Author URI: http://daltonagency.com
*/

/* Variables */
:root {
	--site-pad: 2rem;
	--container: 68.75rem;

	/* colors */
	--orange: #fc4c02;
	--blue: #41b6e6;
	--blue-light: #9bcbeb;
	--blue-lighter: #ecf5f9;
	--green: #009775;
	--lime: #7ccc6c;
	--purple: #211747;
	--gray: #d9d9d6;

	/* fonts */
	--font-primary: "mundial", sans-serif;
	/* 200, 300, 600 */
}

/* Reset */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 1rem;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	background: #fff;
}

body {
	min-height: 100vh;
	margin: 0 auto;
	background: #fff;
	font-family: var(--font-primary);
	position: relative;
}

img,
video {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
}

button,
input,
textarea,
select {
	font: inherit;
	border: none;
	background: none;
}

button {
	cursor: pointer;
}

input,
textarea,
select {
	width: 100%;
	min-width: 0;
}

html {
	scroll-behavior: smooth;
}

p {
	font-size: 1rem;
	font-weight: 300;
}

/* Utility */
.container {
	width: 100%;
	max-width: calc(var(--container) + var(--site-pad) + var(--site-pad));
	margin: 0 auto;
	padding: 0 var(--site-pad);
}
.hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.btn1,
.btn2 {
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	border: 1px solid var(--orange);
	border-radius: 6.25rem;
	padding: 0.3rem 2rem 0.6rem 2rem;
	text-decoration: none;
	display: inline-block;
	transition: scale 0.2s ease;

	&:hover,
	&:focus-visible {
		background: var(--orange);
		color: #fff;
	}

	&:active {
		scale: 0.9;
	}

	@media (width < 550px) {
		width: 100%;
		text-align: center;
		padding: 0.7rem 1rem 1rem 1rem;
		font-size: 1.2rem;
	}
}

.btn2 {
	color: var(--orange);
}

.headline {
	font-size: 2.5rem;
	font-weight: 200;
	color: var(--orange);
	margin: 0 0 1.5rem 0;
}

/* Universal */

.bar {
	position: absolute;
	inset: 0 0 auto 0;
	padding: var(--site-pad);
	z-index: 2;
	display: flex;
	align-items: center;

	height: 7.125rem;

	.group {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 2rem;
		width: 100%;

		.logo {
			width: 12.5rem;
			z-index: 1;
		}

		nav.primary {
			display: flex;
			align-items: center;
			gap: 2rem;
			transition: translate 0.2s ease;

			a:not(.btn1) {
				font-size: 1rem;
				font-weight: 200;
				color: #fff;
				text-decoration: none;

				&:hover,
				&:focus-visible {
					color: var(--orange);
				}
			}

			.btn1 {
				padding: 0.1rem 1.5rem 0.3rem 1.5rem;
			}
		}

		.toggle {
			display: none;
			background: var(--orange);
			padding: 0.8rem;
			border-radius: 62.4375rem;
			width: 3.125rem;
			height: 3.125rem;
			transition: scale 0.2s ease;
			z-index: 3;

			img {
				object-fit: contain;
				width: 100%;
				height: 100%;
			}

			&:active {
				scale: 0.9;
			}
		}

		@media (width < 820px) {
			nav.primary {
				position: fixed;
				inset: 0 auto auto 100%;
				background: rgba(33, 23, 71, 0.95);
				padding: var(--site-pad);
				z-index: 1;
				flex-direction: column;
				padding: 8.125rem 3rem 3rem 3rem;
				height: 100vh;
				min-width: 20rem;

				a:not(.btn1),
				.btn1 {
					font-size: 1.4rem;
				}

				.btn1 {
					padding: 0.3rem 1.5rem 0.6rem 1.5rem;
				}
			}
			.toggle {
				display: inline-block;
			}
		}
	}

	[data-mobile-nav="closed"] {
		.toggle {
			img:nth-child(1) {
				display: inline-block;
			}
			img:nth-child(2) {
				display: none;
			}
		}
	}

	[data-mobile-nav="opened"] {
		.toggle {
			position: fixed;
			inset: 2rem 2rem auto auto;
			img:nth-child(1) {
				display: none;
			}
			img:nth-child(2) {
				display: inline-block;
			}
		}

		nav.primary {
			translate: -100% 0;
		}
	}
}

.hero {
	background-color: var(--purple);
	padding: 12.5rem 0 9.375rem 0;
	min-height: 37.5rem;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 1;

	.video {
		position: absolute;
		inset: 0;
		z-index: -1;

		video {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}
	}

	span {
		font-weight: 200;
		color: #fff;
		margin: 0 0 1rem 0;
		display: inline-block;
	}

	.txt {
		max-width: 40rem;

		h1 {
			font-size: 3.4375rem;
			font-weight: 600;
			line-height: 1em;
			color: var(--orange);
			margin: 0 0 1.4rem 0;
		}
		p {
			color: #fff;
			margin: 0 0 1rem 0;

			&:last-of-type {
				margin: 0 0 1.8rem 0;
			}
		}
	}
}

.cta {
	background: var(--blue-lighter);
	position: relative;

	.group {
		display: flex;
		gap: 1rem;

		.txt {
			flex: 1;
			padding: 6rem 0 3rem 0;

			h2 {
				font-size: 2.5rem;
				line-height: 1em;
				margin: 0 0 3rem 0;
				color: var(--purple);
			}
		}
		.img {
			flex: 1;

			img {
				position: absolute;
				inset: auto 0 0 auto;
				max-height: 100%;
				width: unset;
				max-width: 50vw;
			}
		}
	}

	&::after {
		content: "";
		position: absolute;
		inset: 0 0 0 0;
		background: var(--lime);
		height: 2.5rem;
		width: 30vw;
		border-radius: 0 0 6.25rem 0;
	}

	@media (width < 800px) {
		&::after {
			width: 50vw;
		}

		.group {
			flex-direction: column;

			.img {
				flex: unset;
				height: 45vw;

				img {
					inset: auto 0 0 0;
					max-width: 100%;
					width: 100%;
				}
			}
		}
	}
}

footer.main {
	padding: 5rem 0;

	.wrapper {
		display: flex;
		justify-content: space-between;
		gap: 2rem;
		margin: 0 0 4rem 0;
	}

	.group1 {
		/* Without subscribe */
		display: flex;
		gap: 3rem;
		justify-content: space-between;
		width: 100%;
		flex: 1;

		/* With subscribe */
		/* display: flex;
		gap: 3rem;
		flex: 1;*/

		.logo {
			max-width: 9.375rem;
		}

		nav {
			display: flex;
			flex-direction: column;
			gap: 1rem;
			padding: 0.5rem 0 0 0;

			a {
				text-decoration: none;
				color: var(--orange);
				font-weight: 600;
				text-wrap: nowrap;

				&:hover,
				&:focus-visible {
					text-decoration: underline;
				}
			}
		}
	}
	.group2 {
		display: flex;
		display: none;
		flex: 1;
		gap: 2rem;
		justify-content: flex-end;
		align-items: center;

		p {
			font-size: 1.25rem;
			line-height: 1.1em;
			font-weight: 600;
			color: var(--purple);
			max-width: 16.25rem;
		}
	}

	.legal {
		display: flex;
		justify-content: center;
		gap: 2rem;
		text-align: center;

		p {
			font-size: 0.875rem;
			font-weight: 200;
		}

		a {
			font-size: 0.875rem;
			font-weight: 200;
			color: #000;
			text-decoration: none;

			&:hover,
			&:focus-visible {
				text-decoration: underline;
			}
		}
	}

	@media (width < 820px) {
		.group2 {
			flex-direction: column-reverse;
		}

		.legal {
			justify-content: center;
		}
	}

	@media (width < 700px) {
		.wrapper {
			flex-direction: column;
			gap: 4rem;
		}

		.group1 {
			justify-content: space-between;
		}

		nav {
			text-align: right;
		}
		.group2 {
			text-align: center;

			div {
				width: 100%;
			}

			p {
				max-width: unset;
			}
		}
	}

	@media (width < 550px) {
		.legal {
			flex-direction: column;
			gap: 1rem;
			text-align: center;
		}
	}
}

.verticals {
	padding: 5rem 0;

	.headline {
		margin: 0 0 3rem 0;
	}

	.group {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 4rem;
		margin: 0 0 4rem 0;

		.item {
			display: flex;
			gap: 2rem;
			position: relative;

			.icon {
				flex: 1;
			}

			.txt {
				flex: 3;

				h3 {
					font-size: 1.125rem;
					line-height: 1.1em;
					color: var(--purple);
					text-box-trim: trim-start;
					margin: 0 0 1rem 0;
				}
			}

			&:nth-of-type(2),
			&:nth-of-type(5) {
				&::before,
				&::after {
					content: "";
					position: absolute;
					inset: 0 auto 0 -2rem;
					background: var(--blue-light);
					width: 1px;
				}
				&::after {
					inset: 0 -2rem 0 auto;
				}
			}
		}

		@media (width < 970px) {
			grid-template-columns: 1fr 1fr;

			.item {
				&::before,
				&::after {
					display: none;
				}

				&:nth-of-type(even)::before {
					display: block;
					content: "";
					position: absolute;
					inset: 0 auto 0 -2rem;
					background: var(--blue-light);
					width: 1px;
				}
			}
		}
		@media (width < 700px) {
			.item {
				flex-direction: column;
				align-items: flex-start;
				gap: 1rem;

				.txt {
					flex: unset;
				}

				.icon {
					flex: unset;
					height: 3.75rem;
					overflow: hidden;

					img {
						height: 100%;
						object-fit: contain;
					}
				}
			}
		}
	}
	@media (width < 550px) {
		.headline {
			text-align: center;
		}
		.group {
			grid-template-columns: 1fr;
			text-align: center;

			.item {
				align-items: center;
				&:nth-of-type(even)::before {
					display: none;
				}
			}
		}
	}
}

.controls {
	display: flex;
	justify-content: flex-end;
	gap: 1rem;

	button {
		border: 1px solid var(--orange);
		position: relative;
		border-radius: 6.25rem;
		width: 2.5rem;
		height: 2.5rem;

		&::after {
			content: "";
			position: absolute;
			inset: 0.75rem;
			background: url("./images/icon_arrow1.svg") center center / contain
				no-repeat;
			transition: scale 0.2s ease;
		}

		&:hover,
		&:focus-visible {
			background: var(--orange);
		}

		&:active {
			scale: 0.9;
		}

		&.back {
			rotate: 180deg;
		}

		&[disabled] {
			opacity: 0.3;
			pointer-events: none;
		}

		&.pause {
			margin: 0 auto 0 0;
			border: 1px solid rgba(0, 0, 0, 0.6);

			&:after {
				background: url("./images/icon_pause.svg") center center / contain
					no-repeat;
			}
		}

		&.play {
			&:after {
				background: url("./images/icon_play.svg") center center / contain
					no-repeat;
			}
		}
	}
}

body:has(dialog[open]) {
	overflow: hidden;
	overscroll-behavior: none;
}

dialog {
	border: none;
	padding: 6rem 4rem;
	width: 90vw;
	max-width: 62.5rem;
	place-self: center;
	/* background: transparent; */
	position: fixed;
	transition: scale 0.2s ease;

	&::backdrop {
		background: rgba(255, 255, 255, 0.8);
		transition: background 0.2s ease;
	}

	@starting-style {
		scale: 0.4;

		&::backdrop {
			background: rgba(255, 255, 255, 0);
		}
	}

	.close {
		border: 1px solid var(--orange);
		padding: 0.8rem;
		border-radius: 62rem;
		width: 2.5rem;
		height: 2.5rem;
		transition: scale 0.2s ease;
		z-index: 3;
		position: absolute;
		inset: 2rem 2rem auto auto;

		img {
			object-fit: contain;
			width: 100%;
			height: 100%;
		}

		img:nth-child(1) {
			display: block;
		}
		img:nth-child(2) {
			display: none;
		}

		&:hover,
		&:focus-visible {
			background: var(--orange);
			img:nth-child(1) {
				display: none;
			}
			img:nth-child(2) {
				display: block;
			}
		}

		&:active {
			scale: 0.9;
		}
	}

	.group {
		display: flex;
		justify-content: space-between;
		gap: 3rem;

		.main {
			max-width: 31.25rem;

			h2 {
				font-size: 2.5rem;
				font-weight: 200;
				line-height: 1em;
				color: var(--purple);
				margin: 0 0 2rem 0;
			}

			.item {
				margin: 0 0 1rem 0;

				label {
					color: var(--purple);
					margin: 0 0 0.5rem 0;
					display: block;
				}
				input {
					width: 100%;
					border: 1px solid #000;
					padding: 0.5rem;
				}
				input[type=submit] {
					width: auto;
					border: 1px solid var(--orange);
					padding: 0.25rem 1rem 0.5rem;
				}
				textarea {
					width: 100%;
					border: 1px solid #000;
					padding: 0.5rem;
					min-height: 6.25rem;
				}

				.checkbox {
					margin: 0 0 2rem 0;
					label,
					input {
						width: auto;
						display: inline;
					}
				}
			}
		}
		.sidebar {
			max-width: 15.625rem;
			h3 {
				font-size: 1.125rem;
				line-height: 1.1em;
				font-weight: 200;
				color: var(--purple);
				margin: 0 0 1rem 0;
			}
			a {
				color: var(--orange);
				text-decoration: none;
				font-weight: 600;
				margin: 0 0 2rem 0;
				display: inline-block;

				&:last-of-type {
					margin: 0 0 4rem 0;
				}
			}
			p {
				font-size: 1rem;
				font-weight: 200;
			}
		}
	}

	@media (width < 800px) {
		.group {
			flex-direction: column;
			gap: 3rem;

			.main {
				max-width: unset;
				border-bottom: 1px solid var(--gray);
				padding: 0 0 3rem 0;
			}
		}
	}
}

/* Pages */
#home {
	.hero {
		background: url("./images/hero_home.jpg") center center / cover no-repeat;

		.txt {
			p {
				line-height: 1.6em;
				font-size: 1.1rem;
			}
		}
	}

	.methodology {
		padding: 5rem 0;

		.group {
			display: flex;
			justify-content: space-between;
			gap: 2rem;
			margin: 0 0 4rem 0;

			.item {
				flex: 1;
				max-width: 18.75rem;

				.img {
					margin: 0 0 1rem 0;
					height: 9.375rem;
					overflow: hidden;

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				.txt {
					h3 {
						font-size: 1.125rem;
						line-height: 1.1em;
						color: var(--blue);
						margin: 0 0 1rem 0;
					}
				}
			}

			@media (width < 800px) {
				flex-direction: column;

				.item {
					flex: unset;
					max-width: unset;
					display: flex;
					gap: 1rem;

					.img {
						height: unset;
						flex: 1;
						margin: unset;
					}
					.txt {
						flex: 1;
					}
				}
			}

			@media (width < 550px) {
				gap: 3rem;
				.item {
					display: block;

					.img {
						height: 12.5rem;
						margin: 0 0 1.5rem 0;
					}
				}
			}
		}

		.wrapper {
			text-align: center;
		}
	}

	.about {
		background: var(--blue-lighter);
		padding: 3rem 0;
		border-radius: 0 6.25rem 0 0;

		.group {
			display: flex;
			align-items: center;
			margin: 0 0 4rem 0;

			.img {
				flex: 1;
				height: 15.625rem;
				overflow: hidden;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					object-position: center center;
				}
			}

			.txt {
				flex: 1;

				padding: 0 0 0 3rem;

				h3 {
					font-size: 2.5rem;
					line-height: 1em;
					font-weight: 200;

					strong {
						font-weight: 600;
						color: var(--green);
						display: block;
					}
				}
			}

			&:nth-of-type(even) {
				flex-direction: row-reverse;

				.txt {
					text-align: right;
					padding: 0 3rem 0 0;
				}
			}
		}

		@media (width < 550px) {
			padding: var(--site-pad) 0;
			.group {
				flex-direction: column;
				gap: 1rem;
				align-items: center;

				.img {
					height: 12.5rem;
					width: 100%;
					flex: unset;
				}

				.txt {
					padding: 0;
					text-align: center;
				}

				&:nth-of-type(even) {
					flex-direction: column;

					.txt {
						padding: 0;
						text-align: center;
					}
				}

				&:nth-of-type(1) {
					.img {
						border-radius: 0 4.375rem 0 0;
					}
				}
			}
		}
	}

	.feed {
		background: var(--purple);
		padding: 6.25rem 0;

		.group {
			display: flex;
			gap: 3rem;
			margin: 0 0 3rem 0;

			&.swiper-wrapper {
				gap: 0;
			}

			.date {
				font-size: 0.875rem;
				font-weight: 600;
				color: var(--blue);
			}
			.title {
				font-size: 2rem;
				font-weight: 200;
				line-height: 1em;
				color: #fff;
				text-decoration: none;

				&:hover,
				&:focus-visible {
					color: var(--orange);
				}
			}
		}

		.controls {
			display: flex;
			justify-content: flex-end;
			gap: 1rem;

			button {
				border: 1px solid var(--orange);
				position: relative;
				border-radius: 100px;
				width: 2.5rem;
				height: 2.5rem;

				&:after {
					content: "";
					position: absolute;
					inset: 0.75rem;
					background: url("./images/icon_arrow1.svg") center center / contain
						no-repeat;
					transition: scale 0.2s ease;
				}

				&:hover,
				&:focus-visible {
					background: var(--orange);
				}

				&:active {
					scale: 0.9;
				}

				&.back {
					rotate: 180deg;
				}

				&[disabled] {
					opacity: 0.3;
					pointer-events: none;
				}

				&.pause {
					margin: 0 auto 0 0;
					border: 1px solid rgba(0, 0, 0, 0.6);

					&:after {
						background: url("./images/icon_pause.svg") center center / contain
							no-repeat;
					}
				}

				&.play {
					&:after {
						background: url("./images/icon_play.svg") center center / contain
							no-repeat;
					}
				}
			}
		}
	}
}

#whoweare {
	.hero {
		position: relative;
		z-index: 1;

		h1 {
			text-wrap: balance;
		}

		.controls {
			position: absolute;
			inset: auto var(--site-pad) var(--site-pad) auto;
		}

		.images {
			z-index: -1;
			position: absolute;
			inset: 0;

			img {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}

	.why {
		padding: 5rem 0;
		background: var(--blue-lighter);

		p {
			max-width: 680px;
			strong {
				font-weight: 600;
			}
		}

		.group {
			display: flex;
			justify-content: space-between;

			gap: 2rem;
			margin: 4rem 0 0 0;

			.item {
				flex: 1;
				text-align: center;
				max-width: 15rem;

				h3 {
					font-size: 1.125rem;
					line-height: 1.1em;
					color: var(--purple);
					margin: 0 0 4rem 0;
					text-wrap: balance;
					position: relative;
					min-height: 40px;
					display: flex;
					justify-content: center;
					align-items: center;

					&::after {
						content: "";
						position: absolute;
						inset: auto auto -2rem 50%;
						translate: -50% 0;
						background: var(--blue);
						height: 2px;
						width: 30%;
					}
				}

				p {
					font-size: 1.2rem;
				}
				.circle {
					width: 40px;
					height: 40px;
					border: 3px solid #000;
					border-radius: 200px;
					place-content: center;
					margin: 1rem auto;
					p {
						display: block;
						font-size: 1.5rem;
						font-weight: 600;
						color: var(--orange);
						margin-top: -6px;
					}
				}
			}

			@media (width < 800px) {
				flex-direction: column;

				.item {
					max-width: unset;
				}
			}
		}
	}

	.verticals {
		position: relative;
		z-index: 1;
		background: #edefef;

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			background: #fff;
			z-index: -1;
			border-radius: 0 0 6.25rem 0;
		}
	}

	.culture {
		padding: 5rem 0;
		background: #fff;
		position: relative;
		z-index: 2;
		overflow: hidden;

		&::before {
			content: "";
			position: absolute;
			inset: auto -10% -35% auto;
			width: 56.25rem;
			height: 56.25rem;
			background: url("./images/dots.webp") center center / contain no-repeat;
			z-index: -1;
		}
		&::after {
			content: "";
			position: absolute;
			inset: 0;
			background: linear-gradient(to bottom, #edefef, #edefef);
			z-index: -2;
			border-radius: 6.25rem 0 0 0;
		}

		.group {
			display: flex;
			justify-content: space-between;
			gap: 3rem;
			margin: 4rem 0 0 0;

			.txt {
				flex: 1;
				max-width: 31.25rem;

				.headline {
					color: var(--purple);
					line-height: 1em;
					margin: 0 0 2.5rem 0;
				}

				p {
					font-size: 1.25rem;
					font-weight: 200;
					margin: 0 0 2.5rem 0;
					color: var(--purple);
				}
			}

			.list {
				flex: 1;
				max-width: 31.25rem;

				li {
					list-style: none;
					margin: 0 0 2rem 0;
					position: relative;

					p,
					h4 {
						color: var(--purple);
					}

					&:not(:last-of-type) {
						&::before {
							content: "";
							position: absolute;
							inset: auto auto -1rem 0;
							background: var(--orange);
							height: 1px;
							width: 40%;
						}
					}
				}
			}

			@media (width < 830px) {
				flex-direction: column;
				gap: 3rem;

				.txt {
					max-width: unset;
				}
				.list {
					margin: 0 auto;
				}
			}
		}
	}

	.commitments {
		padding: 8.75rem 0;
		background-color: var(--purple);
		background: url("./images/commitments_bg.jpg") center top / cover no-repeat;

		h2 {
			color: var(--orange);
			font-size: 1.2rem;
			line-height: 1em;
			margin: 0 0 1rem 0;
		}

		p {
			color: #fff;
			max-width: 28.4375rem;

			&:not(:last-of-type) {
				margin: 0 0 1rem 0;
			}
		}

		.group {
			display: flex;
			align-items: center;

			flex-wrap: wrap;
			gap: 2rem;
			margin: 3rem 0 0 0;

			.logo {
				flex: 1;
				max-width: 7rem;
				min-width: 5rem;
			}
		}

		@media (width < 1130px) {
			.group {
				justify-content: center;
			}
		}
	}
}

#whatwedo {
	.hero {
		padding: 9.375rem 0 0 0;
		overflow: hidden;
		position: relative;

		.txt {
			max-width: 35vw;
			padding: 0 2rem 0 0;
		}

		.img {
			flex: 1;
			border-radius: 6.25rem 0 0 0;
			position: absolute;
			inset: 9.375rem 0 0 auto;
			overflow: hidden;
			max-width: 45vw;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		@media (width < 850px) {
			.txt {
				max-width: unset;
			}
			.img {
				display: none;
			}
		}
	}

	.services {
		padding: 5rem 0;
		background: var(--blue-lighter);
		border-radius: 0 0 6.25rem 0;

		.opening {
			max-width: 50rem;
			p {
				margin: 0 0 5rem 0;
				font-size: 1.25rem;
			}
		}

		.group {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 3rem;

			.item {
				position: relative;
				z-index: 1;
				min-height: 18.75rem;

				.img {
					position: absolute;
					inset: 0;
					overflow: hidden;
					z-index: -1;

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				.txt {
					position: relative;
					padding: 3rem;
					height: 100%;
					place-content: center;
					display: flex;
					flex-direction: column;

					h2 {
						color: #fff;
						font-size: clamp(2rem, 4vw, 3rem);
						line-height: 1em;
						margin: 0 0 1rem 0;
						text-wrap: balance;
					}
					p {
						color: #fff;
						overflow: hidden;
						/* height: 0; */
						transition: flex 0.2s ease;
						flex: 0;
					}
					.pbv {
						max-width: 6.25rem;
					}

					&::after {
						content: "";
						position: absolute;
						inset: 0;
						background: var(--blue);
						opacity: 0;
						transition: opacity 0.2s ease;
						z-index: -1;
					}
					button {
						position: absolute;
						inset: auto 0 0 auto;
						background: var(--blue);
						color: #fff;
						border-radius: 0.625rem 0 0 0;
						height: 1.875rem;
						width: 1.875rem;
						place-content: center;

						transform-origin: bottom right;
						transition: scale 0.2s ease;

						&::after {
							content: "";
							background: url("./images/icon_close.svg") center center / contain
								no-repeat;
							position: absolute;
							inset: 0.625rem;
							rotate: 45deg;
							transition: rotate 0.2s ease;
						}

						&:hover,
						&:focus-visible {
							background: var(--orange);
						}

						&:active {
							scale: 0.9;
						}
					}
				}

				&.active {
					.txt {
						p {
							flex: 1;
						}

						&::after {
							opacity: 0.85;
						}
						button::after {
							rotate: 0deg;
						}
					}
				}
			}
		}
		@media (width < 700px) {
			.group {
				grid-template-columns: 1fr;
				gap: 2rem;

				.item {
					min-height: unset;

					.txt {
						text-align: center;
						justify-content: center;

						.pbv {
							margin: 0 auto;
						}
					}
				}
			}
		}
	}

	.vero {
		padding: 5rem 0;
		background: var(--blue-lighter);
		position: relative;
		z-index: 1;

		&::before {
			content: "";
			position: absolute;
			inset: 0;
			background: #fff;
			z-index: -1;
			border-radius: 6.25rem 0 0 0;
		}

		.opening {
			padding: 0 3.75rem;
			position: relative;

			&::before {
				content: "";
				position: absolute;
				inset: 1.2rem auto auto 0;
				border-left: 1px solid var(--orange);
				border-top: 1px solid var(--orange);
				width: 2.5rem;
				height: 100%;
				border-radius: 1.25rem 0 0 0;
			}

			.group {
				display: flex;
				gap: 3rem;
				padding: 0 0 4rem 0;

				.logo {
					width: 9.375rem;
					min-width: 9.375rem;
				}
			}

			@media (width < 700px) {
				.group {
					flex-direction: column;
					gap: 2rem;
				}
			}
		}
		.main {
			/* padding: 0 60px; */
			position: relative;

			&::before {
				content: "";
				position: absolute;
				inset: 1.2rem auto auto 0;
				border-left: 1px solid var(--orange);
				width: 1px;
				height: 100%;
			}

			&::after {
				content: "";
				position: absolute;
				inset: auto auto -1.25rem -0.3125rem;
				width: 0.625rem;
				height: 2.5rem;
				background: linear-gradient(to bottom, transparent, #fff);
				z-index: 2;
			}

			.item {
				display: flex;
				align-items: center;
				gap: 1rem;
				width: 100%;
				&:not(:last-of-type) {
					margin: 0 0 2rem 0;
				}

				.dots {
					position: relative;
					flex: 1;
					min-width: 3.125rem;

					&::before {
						content: "";
						position: absolute;
						inset: 50% 0 auto 0;
						height: 0.125rem;
						background-image: radial-gradient(
							circle at center,
							var(--orange) 1px,
							transparent 1px
						);
						background-size: 0.875rem 0.125rem;
						background-repeat: repeat-x;
						background-position: 0 center;
					}
				}

				.img {
					flex: 4;
					max-width: 18.75rem;
					width: 18.75rem;
					min-width: 18.75rem;

					img {
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}

				.txt {
					flex: 6;
					padding: 0 0 0 1rem;
					min-width: 18.75rem;

					h2 {
						font-size: 1.2rem;
						line-height: 1em;
						margin: 0 0 1rem 0;
						color: var(--purple);
					}

					ul {
						padding: 0 0 0 0.5rem;

						li {
							font-size: 1rem;
							font-weight: 200;
							line-height: 1.2em;
							margin: 0 0 0.5rem 0;
							color: var(--purple);
							position: relative;

							&::marker {
								content: "•  ";
							}
						}
					}
				}

				&:nth-of-type(even) {
					.dots {
						flex: 6;
					}
					.txt {
						flex: 4;
					}
				}
			}

			@media (width < 730px) {
				.item {
					flex-wrap: wrap;
					justify-content: center;
					gap: 2rem;

					.dots {
						width: 100%;
						min-width: 100%;
					}
					.img {
						padding: 0 0 0 2rem;
						min-width: unset;
						width: 40vw;
						flex: unset;
					}

					.txt {
						max-width: unset;
						min-width: unset;
						width: unset;
					}
				}
			}

			@media (width < 550px) {
				.item {
					flex-direction: column;
					gap: 2rem;

					.img {
						width: 50vw;
						padding: 0;
					}

					.txt {
						text-align: center;
						padding: 0;

						ul li::marker {
							content: none;
							display: none;
						}
					}
				}
			}
		}
	}
}

#cs_template {
	.headline {
		margin: 0 0 2rem 0;
	}
	.hero {
		padding: 12.5rem 0 0 0;
		position: relative;
		min-height: 34.375rem;
		align-items: flex-end;

		:has(.controls) {
			align-items: flex-start;
		}

		.txt {
			padding: 0 2rem 2rem 0;
			position: relative;
			z-index: 1;
			width: 60vw;
			max-width: 50rem;

			h1 {
				color: #fff;

				@media (max-width: 600px) {
					font-size: 2.2rem;
				}
			}
		}

		.img {
			flex: 1;
			border-radius: 6.25rem 0 0 0;
			position: absolute;
			inset: 7rem 0 -4.375rem auto;
			overflow: hidden;
			width: 60%;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		&:has(.controls) .img {
			inset: 12.5rem 0 -4.375rem auto;
		}

		@media (width < 850px) {
			align-items: center;
			.txt {
				max-width: unset;
				width: unset;
			}
			.img {
				display: none;
			}
		}
	}

	.controls.cs {
		position: absolute;
		inset: 8.125rem auto auto 50%;
		translate: -50% 0;
		width: 100%;
		padding: 0 5rem;
		max-width: 81.25rem;
		margin: 0 auto;

		display: flex;
		justify-content: space-between;

		a {
			position: relative;
			color: #fff;
			text-decoration: none;

			&:after {
				content: "";
				position: absolute;
				inset: 50% -3rem auto auto;
				translate: 0 -50%;
				border-radius: 6.25rem;
				width: 2.5rem;
				height: 2.5rem;
				aspect-ratio: 1/1;
				border: 1px solid var(--orange);
				background: url("./images/icon_arrow1.svg") center center / 50% 50%
					no-repeat;
				transition: scale 0.2s ease;
			}

			&:hover,
			&:focus-visible {
				color: var(--orange);

				&::after {
					background: url("./images/icon_arrow1.svg") center center / 50% 50%
							no-repeat,
						var(--orange);
				}
			}

			&:active::after {
				scale: 0.9;
			}

			&.back {
				&:after {
					rotate: 180deg;
					inset: 50% auto auto -3rem;
				}
			}

			&[disabled] {
				opacity: 0.3;
				pointer-events: none;
			}

			@media (width < 550px) {
				font-size: 0.75rem;
			}
		}
	}

	.opening {
		padding: 9.375rem 0;

		.group {
			display: flex;
			justify-content: space-between;
			gap: 3rem;

			.item {
				max-width: 31.25rem;
				flex: 1;

				p {
					color: var(--purple);
					font-weight: 200;
					font-size: 1.2rem;

					&:not(:last-of-type) {
						margin: 0 0 1rem 0;
					}
				}

				table {
					width: 100%;
					padding: 0;
					margin: 2rem 0;

					td {
						text-align: center;
						padding: 1rem;

						h2 {
							color: var(--purple);
						}

						&:not(:last-of-type) {
							border-right: 1px solid var(--blue);
						}
					}
				}

				ul {
					p {
						font-size: 1rem;
					}

					li {
						padding: 0.8rem 1.2rem;
						position: relative;
						list-style: none;
						margin: 0 0 0.5rem 0;

						h3 {
							font-size: 1.2rem;
							color: var(--purple);
						}

						&::before {
							content: "";
							position: absolute;
							inset: 0 auto 0 0;
							width: 0.1875rem;
							background: var(--orange);
						}

						&:nth-child(even) {
							background: #f5f8fa;
						}
					}
				}
			}

			@media (width < 800px) {
				flex-direction: column;
				gap: 3rem;

				.item {
					max-width: unset;
					flex: unset;
				}
			}
		}
		@media (width < 650px) {
			padding: 5rem 0;
		}
	}

	.delivered {
		padding: 0 0 8rem 0;
		position: relative;
		z-index: 1;

		&::after {
			content: "";
			position: absolute;
			inset: 0 0 auto auto;
			width: 90%;
			height: 90vh;
			height: 62.5rem;
			background: url("./images/dots.webp") top right -25rem / auto 100% no-repeat;
			z-index: -1;
		}
		.group {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			gap: 2rem;

			.item {
				display: flex;
				flex-direction: column;
				gap: 2rem;
				border-radius: 0 6.25rem 0 0;
				overflow: hidden;
				padding: 2rem;

				&:nth-of-type(1) {
					background: #e1f2e0;
				}

				&:nth-of-type(2) {
					background: #d4effa;
				}

				&:nth-of-type(3) {
					background: #c9e8e3;
				}
				
				&:nth-of-type(4) {
					background: #ebf3fc;
				}

				.icon {
					max-height: 3.125rem;

					img {
						height: 100%;
						width: unset;
						object-fit: contain;
					}
				}

				.txt {
					h3 {
						font-size: 1.2rem;
						line-height: 1em;
						margin: 0 0 1rem 0;
						color: var(--purple);
					}
				}
			}

			@media (width < 850px) {
				grid-template-columns: 1fr;

				.item {
					flex-direction: row;
					align-items: flex-start;
					gap: 1rem;
					border-radius: 0 2.5rem 0 0;
				}
			}

			@media (width < 510px) {
				grid-template-columns: 1fr;

				.item {
					flex-direction: column;
				}
			}
		}
		@media (width < 650px) {
			padding: 0 0 5rem 0;
		}
	}

	.results {
		padding: 0 0 8rem 0;

		.group {
			display: flex;
			gap: 2rem;

			.item:nth-of-type(1) {
				flex: 2;

				ol {
					padding: 0;
					counter-reset: custom-counter;

					li {
						counter-increment: custom-counter;
						padding: 0 0 0 4rem;
						position: relative;
						list-style: none;
						margin: 0 0 2rem 0;
						z-index: 1;

						&::before {
							content: counter(custom-counter);
							position: absolute;
							inset: 0.5rem auto auto 0;
							background: var(--orange);
							color: #fff;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							font-weight: bold;
							font-size: 1.4rem;
							width: 2.5rem;
							height: 2.5rem;
							line-height: 1em;
						}

						&:not(:last-of-type) {
							&::after {
								content: "";
								position: absolute;
								inset: 1rem auto -2.5rem 1.2rem;
								background: var(--orange);
								width: 0.125rem;
								z-index: -1;
							}
						}

						h3 {
							font-size: 1.4rem;
							color: var(--purple);
						}
						p {
							color: var(--purple);
							font-weight: 200;
							font-size: 1.2rem;
							line-height: 1.2em;
						}
					}
				}
			}
			.item:nth-of-type(2) {
				flex: 1;

				h3 {
					font-size: 1.2rem;
					line-height: 1em;
					margin: 0 0 1.2rem 0;
					color: var(--purple);
				}
				ul {
					padding: 0 0 0 1rem;

					&:first-of-type {
						margin: 0 0 2rem 0;
					}

					p {
						color: var(--purple);
						font-weight: 200;
						font-size: 1.2rem;
					}

					li {
						font-size: 1rem;
						font-weight: 200;
						line-height: 1.2em;
						margin: 0 0 0.5rem 0;
						color: var(--purple);
						position: relative;

						&::marker {
							content: "•  ";
						}
					}
				}
			}
		}
		@media (width < 650px) {
			padding: 0 0 5rem 0;

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

	.controls.cs.bottom {
		position: unset;
		translate: unset;
		margin: 0 0 4rem 0;
		a {
			color: var(--orange);

			&::after {
				background: url("./images/icon_arrow2.svg") center center / 50% 50%
					no-repeat;
			}

			&:hover,
			&:focus-visible {
				color: var(--purple);

				&::after {
					background: url("./images/icon_arrow1.svg") center center / 50% 50%
						no-repeat;
					background-color: var(--purple);
					border-color: var(--purple);
				}
			}
		}
	}
}

#page {
	.hero {
		min-height: 5rem;
		padding: 8rem 0 1rem 0;
		position: relative;
		z-index: 1;

		h1 {
			color: #fff;
		}

		&::before {
			content: "";
			position: absolute;
			inset: 0;
			background: url("./images/dots.webp") center center / cover no-repeat,
				url("./images/dots.webp") center center / cover no-repeat;
			z-index: -1;
		}
	}

	.content {
		padding: 4rem 0 0 0;

		p, h2 {
			margin: 0 0 1rem 0;
		}
		
		ul {
			margin: 0 0 1rem 2rem;
		}
		
		a {
			text-decoration: none;
			font-weight: 500;
			color: var(--orange);
		}
	}
	
	.case-studies {
		padding: 5rem 0;

		.group {
			display: flex;
			justify-content: space-between;
			gap: 2rem;
			margin: 3rem 0 4rem 0;

			.item {
				flex: 1;
				max-width: 18.75rem;

				.img {
					margin: 0 0 1rem 0;
					height: 9.375rem;
					overflow: hidden;

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				.txt {
					h3 {
						font-size: 1.125rem;
						line-height: 1.1em;
						color: var(--blue);
						margin: 0 0 1rem 0;
					}
					p {
						margin: 0 0 2rem 0;
					}
				}
			}

			@media (width < 800px) {
				flex-direction: column;

				.item {
					flex: unset;
					max-width: unset;
					display: flex;
					gap: 1rem;

					.img {
						height: unset;
						flex: 1;
						margin: unset;
					}
					.txt {
						flex: 1;
					}
				}
			}

			@media (width < 550px) {
				gap: 3rem;
				.item {
					display: block;

					.img {
						height: 12.5rem;
						margin: 0 0 1.5rem 0;
					}
				}
			}
		}

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