/* VARIABLES */

:root {
	/* Base unit = 1rem = 16px */
	--base-unit: 1rem;
	--spacer-base-unit: 1rem;

	/* Font sizes (based on 4px steps) */
	--font-size-sm: calc(var(--base-unit) * 0.875);
	/* 14px */
	--font-size-base: var(--base-unit);
	/* 16px */
	--font-size-lg: calc(var(--base-unit) * 1.25);
	/* 20px */
	--font-size-xl: calc(var(--base-unit) * 1.5);
	/* 24px */
	--font-size-2xl: calc(var(--base-unit) * 2);
	/* 32px */
	--font-size-3xl: calc(var(--base-unit) * 3);
	/* 48px */
	--font-size-4xl: calc(var(--base-unit) * 4);
	/* 64px */
	--font-size-5xl: calc(var(--base-unit) * 5);
	/* 80px */
	--font-size-6xl: calc(var(--base-unit) * 6);
	/* 96px */


	/* Spacing (4px scale) */
	--spacer-xs: calc(var(--spacer-base-unit) * 0.25);
	/* 4px */
	--spacer-sm: calc(var(--spacer-base-unit) * 0.5);
	/* 8px */
	--spacer-mdsm: calc(var(--spacer-base-unit) * 0.75);
	/* 16px */
	--spacer-md: var(--spacer-base-unit);
	/* 16px */
	--spacer-lg: calc(var(--spacer-base-unit) * 1.5);
	/* 24px */
	--spacer-xl: calc(var(--spacer-base-unit) * 2);
	/* 32px */
	--spacer-2xl: calc(var(--spacer-base-unit) * 3);
	/* 48px */
	--spacer-3xl: calc(var(--spacer-base-unit) * 4);
	/* 64px */
	--spacer-3xl: calc(var(--spacer-base-unit) * 5);
	/* 80px */
	--spacer-4xl: calc(var(--spacer-base-unit) * 6);
	/* 96px */
	--outer-padding: 7rem;
	/* 64px */
	--header-height: 100vh;

	--max-section-width: 1600px;
	--section-width: calc(100vw - calc(var(--outer-padding) * 2));
	--transitionparams: 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
	--border-radius: var(--base-unit);
	/* 16px */
	--border-radius-smaller: calc(var(--base-unit)/2);
	--background-gradient: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, .18));
	--background-gradient-dark: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, .4));
	--background-gradient-blue: linear-gradient(rgba(20, 60, 93, 0.18), rgba(20, 60, 93, 0.18));

	--slate: #4F5965;
	--slate-lighter: rgba(79, 89, 101, 0.25);
	--orange: #FFAE13;
	--blue: #143c5d;
	--light-blue: #355dab;

	--filter-slate: brightness(0) saturate(100%) invert(32%) sepia(22%) saturate(362%) hue-rotate(172deg) brightness(94%) contrast(84%);
	--filter-orange: brightness(0) saturate(100%) invert(73%) sepia(40%) saturate(1916%) hue-rotate(348deg) brightness(102%) contrast(101%);
	--filter-blue: brightness(0) saturate(100%) invert(17%) sepia(79%) saturate(694%) hue-rotate(170deg) brightness(93%) contrast(93%);
	--filter-white: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(177deg) brightness(107%) contrast(107%);
}

/* outfit-regular - latin */
@font-face {
	font-display: swap;
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/outfit-v15-latin-regular.woff2') format('woff2');
}

/* outfit-500 - latin */
@font-face {
	font-display: swap;
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 500;
	src: url('fonts/outfit-v15-latin-500.woff2') format('woff2');
}

/* outfit-700 - latin */
@font-face {
	font-display: swap;
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 700;
	src: url('fonts/outfit-v15-latin-700.woff2') format('woff2');
}

/* RESETS */
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
}

ul[role="list"],
ol[role="list"] {
	list-style: none;
}

html:focus-within {
	scroll-behavior: smooth;
}

a:not([class]) {
	text-decoration-skip-ink: auto;
}

img,
picture,
svg,
video,
canvas {
	width: 100%;
	height: 100%;
	vertical-align: middle;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	object-fit: cover
}

input,
button,
textarea,
select {
	font: inherit;
}

address {
	font-style: normal;
	line-height: 1.2
}

caption {
	font-size: var(--font-size-sm)
}

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition: none;
	}
}

body,
html {
	height: auto;
	scroll-behavior: smooth;
	font-size: var(--font-size);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: 'Outfit', Arial, sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	color: var(--slate);
	interpolate-size: allow-keywords;
	background-color: var(--light-blue);
}

main {
	background-color: white;
}

p {
	text-wrap: pretty;
	line-height: 1.5;
	max-width: 65ch;
	margin-bottom: var(--spacer-md);
	font-size: var(--base-unit);
}

p a:hover {
	color: var(--white);
}

p:last-of-type {
	margin-bottom: 0;
	text-box: trim-end cap alphabetic;
}

/* LINKS */
a {
	transition: all var(--transitionparams), transform var(--transitionparams), color var(--transitionparams);
	cursor: pointer;
	text-decoration: none;
	color: var(--orange);
	position: relative;
	overflow: hidden;
	width: fit-content;

	&:hover,
	&.current {
		color: var(--orange)
	}

	& span {
		display: inline-block;
		transition: opacity var(--transitionparams), transform var(--transitionparams), color var(--transitionparams);
		transition-duration: .5s;
	}

	&:after {
		position: absolute;
		content: attr(data-nav-text);
		left: 0;
		transform: translate(0, 1.75ch);
		width: 100%;
		transition: opacity var(--transitionparams), transform var(--transitionparams), color var(--transitionparams);
		transition-duration: .5s;
		opacity: 0
	}

	&:hover::after {
		transform: translate(0, 0rem);
		opacity: 1
	}

	&:hover span {
		transform: translate(0, -1.75ch);
		color: white;
		opacity: 0
	}

	& .arrow-right {
		display: inline-block;
		margin-left: var(--spacer-sm);
		filter: var(--filter-orange)
	}

	&:hover .arrow-right {
		filter: var(--filter-white)
	}

	&:before {
		position: absolute;
		inset: -1rem;
		content: "";
	}
}


strong {
	font-weight: 700;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 700;
	line-height: 1;
	text-wrap: balance;

	& span {
		font-size: calc(100% / 1.6);
		display: block;
		font-weight: 500
	}
}

.line {
	width: 100%;
	height: 1px;
	position: absolute;
	bottom: var(--spacer-4xl);
	width: calc(100% - var(--spacer-4xl))
}

.slogan {
	font-size: var(--font-size-5xl);
	letter-spacing: -1px;
	line-height: .9;
	color: white;
	font-weight: 700;

	& span {
		font-size: calc(100% / 1.6);
		display: block;
		font-weight: 500
	}
}

:lang(fr) #contact .slogan,
:lang(fr) #index .slogan {
	font-size: var(--font-size-4xl);
}

.mask {
	overflow: hidden;
	display: block;

	& span {
		line-height: 1.2;
	}

	& div {
		padding-bottom: .15em;
	}

	&:last-of-type {
		margin-bottom: -.15em
	}
}

h1 {
	font-size: var(--font-size-4xl)
}

h2 {
	font-size: var(--font-size-4xl);
	color: var(--orange);

	& span {
		color: var(--slate)
	}
}

h3 {
	font-size: var(--font-size-2xl);
	line-height: 1.3
}

h4 {
	font-size: var(--font-size-xl)
}

.subtitle {
	font-size: var(--font-size-xl);
	line-height: 1.5
}

.grid-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

section {
	padding: var(--outer-padding);
}

.inner-section {
	max-width: var(--max-section-width);
	width: var(--section-width);
	margin: 0 auto
}

.graph-background {
	background-image: linear-gradient(145deg, rgba(20, 60, 93, .8) 0%, rgba(20, 60, 93, .85) 100%), url(imgs/graphy.svg);
	background-size: auto, 80px auto;
	background-blend-mode: multiply;
}

.graph-background-dark {
	background-image: linear-gradient(145deg, rgba(12, 36, 57, 0.8) 0%, rgba(12, 36, 57, .85) 100%), url(imgs/graphy.svg);
}

.graph-background-blue {
	background-image: linear-gradient(145deg, rgba(53, 93, 171, 1) 0%, rgba(20, 60, 93, 1) 100%), url(imgs/graphy.svg);
}

.graph-background-light {
	background-image: linear-gradient(145deg, rgba(79, 89, 101, 1) 0%, rgba(79, 89, 101, 1) 100%), url(imgs/graphy.svg);
}

.switcher {
	display: flex;
	background-color: var(--orange);
	width: fit-content;
	border-radius: 100vw;
	align-items: center;
	justify-content: center;
	padding: var(--spacer-mdsm);
	gap: var(--spacer-mdsm);
	margin-bottom: var(--outer-padding);

	& .switcher-btn {
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--spacer-mdsm);
		border: 1px solid white;
		color: white;
		border-radius: 100vw;
		transition: background-color var(--transitionparams);
		font-weight: 700;

		& .icons {
			height: 1.25ch
		}

		&.disabled {
			opacity: .25;
			pointer-events: none
		}

		&:hover,
		&.current {
			background-color: white;
			color: var(--orange);

			& .icons {
				filter: var(--filter-orange)
			}
		}
	}
}

/* LAZY LOADING IMAGES */
.blurred-img {
	background-repeat: no-repeat;
	background-size: cover;
}

.blurred-img::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	animation: pulse 2.5s infinite;
	background-color: var(--text-color);
}

@keyframes pulse {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 0.1;
	}

	100% {
		opacity: 0;
	}
}

.blurred-img.loaded::before {
	animation: none;
	content: none;
}

.blurred-img img {
	opacity: 0;
	transition: opacity 250ms ease-in-out;
}

.blurred-img.loaded img {
	opacity: 1;
}

/* ANIMATIONS */
.wow {
	visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	will-change: transform;
	transition: opacity var(--transitionparams), transform var(--transitionparams);
}

.animated {
	animation-duration: 1s;
	animation-fill-mode: both;
	transform: translateZ(0);
}

/* ========== FADE IN ========== */
@keyframes fadeInRight {
	0% {
		opacity: 0;
		transform: translateX(100px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.fadeInRight {
	animation-name: fadeInRight;
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeInUp {
	animation-name: fadeInUp;
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeInDown {
	animation-name: fadeInDown;
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-20px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.fadeInLeft {
	animation-name: fadeInLeft;
}

/* ========== SLIDE IN ========== */
@keyframes slideInUp {
	from {
		transform: translate3d(0, 100%, 0);
		visibility: visible;
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}

.slideInUp {
	animation-name: slideInUp;
}

@keyframes bounceInLeft {
	0% {
		opacity: 0;
		transform: translateX(-2000px);
	}

	60% {
		opacity: 1;
		transform: translateX(30px);
	}

	80% {
		transform: translateX(-10px);
	}

	100% {
		transform: translateX(0);
	}
}

@keyframes growInLeft {
	0% {
		opacity: 0;
		transform: scaleX(0);
		transform-origin: left center;
	}

	100% {
		opacity: 1;
		transform: scaleX(1);
		transform-origin: left center;
	}
}

.growInLeft {
	animation-name: growInLeft;
}

@keyframes slideInLeft {
	0% {
		transform: translateX(-30vw);
	}

	100% {
		transform: translateX(0);
	}
}

.slideInLeft {
	animation-name: slideInLeft;
}

@keyframes slideInDown {
	from {
		transform: translate3d(0, -300%, 0);
		visibility: visible;
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}

.slideInDown {
	animation-name: slideInDown;
}

/* HEADER */
.logo {
	aspect-ratio: 5/2.4375;
	background-image: url(imgs/elevate-erp-consulting.svg);
	background-size: contain;
	background-position: center left;
	background-repeat: no-repeat;
	display: block;
	transition: opacity var(--transitionparams), transform var(--transitionparams);
}

.logo-nav {
	aspect-ratio: 1;
	background-image: url(imgs/elevate-favicon.svg);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	display: block;
	transition: opacity var(--transitionparams), transform var(--transitionparams);
	margin-right: var(--spacer-sm);
	height: 25px;
	z-index: 2
}

.lang-btn {
	position: absolute;
	right: var(--spacer-2xl);
	padding: var(--spacer-sm);
	border: 1px solid white;
	border-radius: calc(var(--border-radius)/2);
	font-size: var(--font-size-base);
	font-weight: 700;

	&:hover {
		background-color: white;
	}
}


header {
	overflow: hidden;
	position: relative;

	& .lang-btn {
		top: var(--spacer-2xl);
	}

	& img {
		position: absolute;
		inset: 0;
		z-index: 0
	}

	& h1 {
		color: white;
		text-shadow: 1px 1px 1px rgba(52, 52, 52, 0.5);
	}
}

.hero-logo {
	height: 12rem;
	width: fit-content;
	position: relative;
	aspect-ratio: 5/2.4375;
	z-index: 8
}

@keyframes bounce {

	0%,
	100% {
		transform: translate(-50%, 0);
	}

	50% {
		transform: translate(-50%, -30px);
	}
}

.hero-wrapper {
	height: 100vh;

	& .chevron {
		height: 2rem;
		position: absolute;
		bottom: var(--spacer-sm);
		left: 50%;
		animation: bounce 2s infinite ease-in-out;
		transition: transform var(--transitionparams);
	}
}

.hero-content {
	display: flex;
	z-index: 2;
	position: relative;
	flex-direction: column;
	height: 100%;
	padding: var(--outer-padding)
}

.dot {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
	background-image: radial-gradient(#265fd1 1px, transparent 1px);
	background-size: 16px 16px;
	z-index: 0;
	opacity: .075
}

.grid {
	position: absolute;
	inset: -2rem;
	height: 100%;
	width: 100%;
	background-image: linear-gradient(to right, #80808062 1px, transparent 1px),
		linear-gradient(to bottom, #80808062 1px, transparent 1px);
	background-size: 24px 24px;
	z-index: 0;
	opacity: .25;
	transform: rotate(45deg)
}

.frosted {
	backdrop-filter: blur(20px);
	background: linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
	border-radius: var(--spacer-md);
	box-shadow: rgba(17, 24, 39, 0.02) 0px 0px 32px, rgba(17, 24, 39, 0.02) 0px 0px 16px, rgba(17, 24, 39, 0.02) 0px 0px 0px 1px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	padding: var(--spacer-lg);
	width: fit-content;
	display: flex;
	align-items: center;
	justify-content: center
}

.hero-wrapper::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, .25) 40%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
	user-select: none;
}

.hero-content-bottom {

	margin-top: auto;
	margin-bottom: .5rem;

	& .cta {
		margin-top: var(--spacer-2xl)
	}

	& p {
		color: white;
		margin: var(--spacer-lg) 0 var(--spacer-xl);
		font-weight: 700;
		font-size: var(--font-size-lg);
		text-wrap: balance
	}
}

/* BUTTONS */
.cta {
	width: fit-content;
	border-radius: 100vw;
	color: white;
	background-color: var(--orange);
	padding: var(--spacer-md) var(--spacer-lg);
	display: flex;
	align-items: center;
	font-weight: 700;
	border: 1px solid rgba(255, 255, 255, 0.25);
	text-transform: uppercase;
	position: relative;
	z-index: 2;
	transition: opacity var(--transitionparams), transform var(--transitionparams), background-color var(--transitionparams), border var(--transitionparams);
	cursor: pointer;
	overflow: visible;

	& .icons {
		margin-left: var(--spacer-sm);
		filter: var(--filter-white);
	}

	&:hover {
		background-color: var(--blue)
	}

	&:hover .icons {
		transform: translateX(.25rem)
	}

	&:hover:after {
		border: 1px solid rgba(255, 255, 255, 0.5);
	}
}

.cta:after {
	position: absolute;
	background: linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
	border-radius: 100vw;
	box-shadow: rgba(17, 24, 39, 0.02) 0px 0px 32px, rgba(17, 24, 39, 0.02) 0px 0px 16px, rgba(17, 24, 39, 0.02) 0px 0px 0px 1px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	content: "";
	inset: -.5rem;
	z-index: 1;
	transform: translate(0, 0);
	width: unset;
	opacity: 1
}

.mini-cta {
	z-index: 1;
	font-weight: 500;
	font-size: 120%;
}

/* ICONS */
.icons {
	aspect-ratio: 1;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	height: 1ch;
	transition: transform var(--transitionparams)
}

.arrow-right {
	background-image: url(imgs/icons/arrow.svg);
}

.menu-btn {
	background-image: url(imgs/icons/menu.svg);
	display: none
}

.chevron {
	background-image: url(imgs/icons/chevron.svg);
}

.project {
	background-image: url(imgs/icons/project.svg);
}

.testing {
	background-image: url(imgs/icons/testing.svg);
}

.data {
	background-image: url(imgs/icons/data.svg);
}

.process {
	background-image: url(imgs/icons/process.svg);
}

.change {
	background-image: url(imgs/icons/change.svg);
}

.linkedin {
	background-image: url(imgs/icons/linkedin.svg);
}

.circle-plus {
	background-image: url(imgs/icons/circle-plus.svg);
}

.circle-check {
	background-image: url(imgs/icons/circle-check.svg);
}

.success {
	background-image: url(imgs/icons/success.svg);
}

.search {
	background-image: url(imgs/icons/search.svg);
}

.data-migration {
	background-image: url(imgs/icons/data-migration.svg);
}

.coordinate {
	background-image: url(imgs/icons/coordinate.svg);
}

.tests {
	background-image: url(imgs/icons/tests.svg);
}

.chart {
	background-image: url(imgs/icons/chart.svg);
}

.manage {
	background-image: url(imgs/icons/manage.svg);
}

.training {
	background-image: url(imgs/icons/training.svg);
}

.nav-close {
	background-image: url(imgs/icons/close.svg);
}

.map {
	background-image: url(imgs/icons/map.svg);
}

.phone {
	background-image: url(imgs/icons/phone.svg);
}

/* MAIN NAVIGATION */
.nav-wrapper {
	background: var(--background-gradient-dark);
	border-radius: 100vw;
	border: 1px solid rgba(255, 255, 255, 0.25);
	padding: var(--spacer-md);
	display: flex;
	align-items: center;
	position: fixed;
	top: var(--outer-padding);
	right: var(--outer-padding);
	z-index: 11;
	backdrop-filter: blur(20px);
	transition: transform var(--transitionparams);
	transition-duration: .75s;
	width: fit-content;

	&:hover {
		border: 1px solid rgba(255, 255, 255, 0.5);
	}
}

nav {
	display: flex;
	align-items: center;
	gap: calc(var(--spacer-sm) / 2);
	font-weight: 500;
	width: 100%;

	& .cta {
		padding: var(--spacer-sm) var(--spacer-md);
		margin-left: var(--spacer-md);
	}

	& .cta:after {
		display: none
	}

	& a {
		color: white;
		text-align: center;
		padding: var(--spacer-sm) var(--spacer-md);
		border-radius: 100vw;
		border: 1px solid transparent
	}

	& a:hover {
		color: white;
	}

	& a.current {
		background-color: rgba(79, 89, 101, 0.15);
		border: 1px solid rgba(255, 255, 255, .15)
	}
}

.menu-btn {
	cursor: pointer;
	position: relative;
	transition: opacity var(--transitionparams), transform var(--transitionparams);
	height: 1.25ch;

	&:hover {
		filter: var(--filter-orange)
	}
}

.menu-btn:after {
	position: absolute;
	inset: -1rem;
	content: "";
}

.scrolled {
	transform: translateY(-13rem);
}

.scrolling-up {
	transform: translateY(-3rem);
}


/* SERVICES INTRO */
.services-intro-wrapper {
	position: relative;
	color: white;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	gap: var(--spacer-3xl);
	align-items: center;

	& .mini-cta {
		position: absolute;
		bottom: var(--outer-padding);
		left: var(--outer-padding);
	}

	& h1 {
		margin-bottom: var(--spacer-lg)
	}

	& .services-intro-left {
		width: calc(100vw * .33);
		display: flex;
		flex-direction: column;
	}

	& .services-intro-right {
		flex: 1
	}

	& .grid-wrapper {
		gap: var(--spacer-2xl);
		position: relative;
		z-index: 1;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
	}

	& h3 {
		font-weight: 500;
		z-index: 2;
		position: relative;
		margin-bottom: var(--spacer-3xl);
	}

	& h4 {
		font-weight: 500;
		font-size: calc(var(--base-unit) * 1.75);
		z-index: 1;
		position: relative;
	}

	& .grid-wrapper>div {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacer-md);
		z-index: 1;
		position: relative;
	}

	& .grid-wrapper>div .icons {
		height: 3rem;
		filter: var(--filter-white)
	}

	& a:after {
		color: white
	}
}

.elevate-icon {
	--elevate-icon-width: 40rem;
	aspect-ratio: 50/42;
	width: var(--elevate-icon-width);
	background-image: url(imgs/icons/elevate-icon.svg);
	background-size: contain;
	background-position: center left;
	background-repeat: no-repeat;
	position: absolute;
	bottom: calc(var(--elevate-icon-width) * -.25);
	right: var(--outer-padding);
	opacity: .1;
	z-index: 0;
	pointer-events: none;
	user-select: none;
}



/* WHY WORK */
.why-work {
	& .grid-wrapper {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		margin: var(--spacer-3xl) auto;
		gap: var(--spacer-xl)
	}

	& .grid-wrapper:last-of-type {
		margin-top: calc(var(--spacer-2xl) * -1)
	}

	& h4 {
		max-width: 10ch;
		font-size: var(--font-size-2xl);
		line-height: 1
	}

	& .grid-wrapper>div {
		overflow: hidden;
		border-radius: var(--border-radius-smaller);
		display: flex;
		flex-direction: column;
		color: white;
	}

	& img {
		object-fit: cover;
		object-position: top;
		aspect-ratio: 16/9;
	}

	& .years-wrapper {
		font-size: var(--font-size-xl);
		font-weight: 700;
		line-height: 1.1;
		background: radial-gradient(circle, rgba(255, 174, 19, 1) 35%, rgba(255, 131, 0, 1) 100%);
		position: relative;
		padding: var(--spacer-2xl);
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		aspect-ratio: 16/8;
		width: 100%;

		& span {
			display: block;
			font-size: var(--font-size-6xl);
			text-box: trim-both cap alphabetic;
			margin: var(--spacer-sm) 0
		}

		& span.caption {
			font-size: var(--font-size);
			display: block
		}

		& .years-number-wrapper {
			text-align: center;
			display: flex;
			justify-content: center;
			flex-direction: column;
		}

		& .years-graph {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 1px solid white;
			width: 75%;
			height: 1px;
			margin: var(--spacer-2xl) auto 0;
			border-radius: 100vw;
			position: relative
		}

		& .years-graph:before,
		& .years-graph:after {
			position: absolute;
			left: -4.5ch;
			top: 50%;
			transform: translateY(-50%);
			content: "2010";
			font-size: var(--font-size-sm);
			opacity: .8
		}

		& .years-graph:after {
			content: "2025";
			left: unset;
			right: -4.5ch
		}

		& .dash {
			height: 10px;
			width: 1px;
			border-right: 1px solid white;
			border-radius: 100vw
		}

		& .dash:nth-of-type(5n),
		.dash:first-of-type,
		.dash:last-of-type {
			height: 20px;
			border-width: 2px
		}

	}

	& .why-work-footer {
		padding: var(--spacer-2xl);
		margin-top: auto;
		display: flex;
		flex-direction: column;
		gap: var(--spacer-sm);
	}
}

.cost-savings {
	position: relative;
}


.why-work .erp-lives {
	& .years-wrapper {
		background: #355DAB;
		background: linear-gradient(145deg, rgba(53, 93, 171, 1) 0%, rgba(20, 60, 93, 1) 100%);
	}

	& .lives-graph-wrapper span {
		font-size: var(--font-size-sm);
		display: inline-block
	}

	& .years-wrapper:after {
		content: "";
		position: absolute;
		border: 1px dotted rgba(255, 255, 255, 0.25);
		inset: var(--spacer-xl);
		border-radius: var(--border-radius-smaller);
	}

}


.lives-graph {
	background-color: white;
	width: 30vw;
	height: 5px;
	border-radius: 100vw;
	position: relative;
	z-index: 0;
}

.lives-graph-wrapper {
	position: relative;
	font-size: var(--base-unit);
	align-items: center;
	width: fit-content;
	margin: var(--spacer-2xl) auto var(--spacer-lg);
	display: flex;
	justify-content: flex-end
}

.lives-graph-number {
	padding: var(--spacer-sm) var(--spacer-md);
	background-color: white;
	border-radius: 100vw;
	color: var(--orange);
	margin-left: -1.5rem;
	z-index: 1;
	display: flex;
	align-items: center
}

.cost-wrapper {
	display: flex;
	width: calc(100% - var(--spacer-4xl));
	justify-content: space-around;
	align-items: flex-end;
	padding: var(--spacer-2xl) 0;
	margin: auto auto 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	aspect-ratio: 16/9;

	& .bar {
		--bar-height: calc(100vw / 10.4);
		--base-hue: 39;
		--sat: 100%;
		--light: 54%;
		width: 10px;
		height: calc(var(--bar-height) * var(--bar-multiplier));
		background-color: hsl(calc(var(--base-hue) * (1 - var(--bar-multiplier))),
				var(--sat),
				var(--light));
		border-radius: 100vw;
		margin-top: auto;
	}
}



/* BIOS INTRO */

.bios-intro {

	& h4 {
		font-size: var(--font-size-2xl);
		color: var(--blue)
	}

	& h4 span {
		color: var(--slate)
	}

	& h1 {
		color: var(--orange);

		& span {
			color: var(--slate);
		}
	}
}

.bios-wrapper-outer {
	margin: var(--spacer-2xl) auto;
	padding: var(--spacer-xl) var(--outer-padding);
	gap: var(--spacer-xl);
	display: flex;
}

.bios-wrapper {
	display: flex;
	scroll-snap-align: start;

	& .img-wrapper {
		overflow: hidden;
		border-radius: var(--border-radius-smaller) 0 0 var(--border-radius-smaller);
		position: relative;
		min-width: 440px;
	}

	& .img-wrapper:after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, .25) 15%, rgba(0, 0, 0, 0) 100%);
		pointer-events: none;
		user-select: none;
		z-index: 0
	}

	& .position {
		position: absolute;
		top: var(--spacer-2xl);
		left: var(--spacer-2xl);
		z-index: 1
	}

	& .years-wrapper {
		color: white;
		position: absolute;
		bottom: var(--spacer-2xl);
		left: var(--spacer-2xl);
		text-box: trim-both cap alphabetic;
		z-index: 1
	}

	& .years-wrapper span {
		font-size: 200%;
		font-weight: 700;
		color: var(--orange);
	}

	& .years-wrapper:after {
		position: absolute;
		content: "Years Experience";
		bottom: 0;
		right: -6ch;
		width: 5ch;
		line-height: 1;
		font-weight: 500;
	}

	& :lang(fr) .years-wrapper:after {
		content: "Années d’expérience";
	}
}

.bios-text-footer {
	padding: var(--spacer-2xl);
	display: flex;
	flex-direction: column;
	gap: var(--spacer-md);
	border-radius: 0 var(--border-radius-smaller) var(--border-radius-smaller) 0;
	min-width: 520px;
	color: white;
	position: relative;

	& a {
		margin-top: auto;
	}

	& a:after {
		color: white
	}

	& h3 {
		color: var(--orange)
	}

	& h3 span {
		color: white
	}

	& p:first-of-type {
		margin-top: var(--spacer-xl)
	}

	& .toggle-label {
		position: absolute;
		bottom: var(--spacer-2xl);
		right: var(--spacer-2xl);
		font-weight: 500;
		color: var(--orange);
		cursor: pointer;
		display: none;
	}

	& .toggle-label:hover {
		color: white
	}

	& .toggle-label:after {
		position: absolute;
		inset: -1rem;
		content: "";
	}

	& .toggle-label:before {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 3ch;
		content: "See Profile";
		width: max-content;
		text-align: right
	}

	:lang(fr) & .toggle-label:before {
		content: "Afficher le profil";
	}

	& .circle-plus {
		filter: var(--filter-orange);
		height: 2ch
	}

	& .toggle-label:hover .circle-plus {
		filter: var(--filter-white)
	}

}

.section-tagline {
	font-size: var(--font-size-2xl);
	line-height: 1.1;
	text-wrap: pretty;
	margin-top: var(--spacer-md)
}

.position {
	background-color: var(--orange);
	border-radius: calc(var(--border-radius-smaller) / 2);
	padding: calc(var(--spacer-sm) / 3) calc(var(--spacer-md) / 2);
	width: fit-content;
	color: white;
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--font-size-sm)
}

/* HTML TOGGLES */
.content {
	transition: grid-template-rows var(--transitionparams);
	display: grid;
	margin-bottom: var(--spacer-xl);
	overflow: hidden;

	& .inner-content {
		overflow: hidden;
		opacity: 0;
		transition: opacity var(--transitionparams);

	}

	& p:first-of-type {
		margin-top: 0;
		transition-delay: .15s;
	}

	& p:last-of-type {
		text-box: initial;
		transition-delay: .25s;
	}
}

.toggle-wrapper:has(.toggle:checked) .content {
	grid-template-rows: 1fr;

	& .inner-content {
		opacity: 1;
	}

}

.toggle-wrapper:has(.toggle:checked) {

	& .circle-plus {
		transform: rotate(45deg)
	}

	& .toggle-label:before {
		content: "Hide Profile"
	}

	:lang(fr) & .toggle-label:before {
		content: "Masquer le profil";
	}
}

.toggle-wrapper:not(:has(.toggle:checked)) .content {
	grid-template-rows: 1fr;

	& .inner-content {
		opacity: 1;
	}
}

.hidden-checkbox {
	display: none
}


/* FOOTER */
footer {
	--footer-font-size: 1.2rem;
	overflow: hidden;
	background-image: url(imgs/icons/elevate-icon-opaque.svg);
	background-color: var(--blue);
	font-size: var(--footer-font-size);
	background-repeat: no-repeat;
	background-size: 45% auto;
	background-position: var(--spacer-4xl) 30%;

	& section {
		display: flex;
		justify-content: space-between;
		gap: var(--spacer-4xl);
		position: relative
	}

	& .hero-logo {
		height: 8rem;
	}

	& .footer-nav-wrapper {
		display: flex;
		flex-direction: column;
		gap: var(--spacer-md);
	}

	& a {
		color: white
	}

	& a:hover,
	& a.current {
		color: var(--orange);
	}

	& .footer-nav-wrapper:first-of-type {
		margin-left: auto;
	}

	& .footer-contact-wrapper address {
		color: white;
	}

	& .mini-cta {
		margin-top: var(--spacer-lg)
	}

	& .footer-title {
		text-transform: uppercase;
		font-size: calc(var(--footer-font-size)/1.6);
		margin-bottom: var(--spacer-sm);
		color: white;
		opacity: .25
	}

	.lang-btn {
		bottom: var(--spacer-2xl);
	}
}

/* PROGRESS RING */
.circular-loader {
	--size: 48px;
	--thickness: 2px;
	--color: var(--orange, white);
	--track: var(--light-blue, white);

	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	top: var(--spacer-2xl);
	right: var(--spacer-2xl);
	position: absolute;
	aspect-ratio: 1;
	border: var(--thickness) solid var(--track);
	border-bottom-color: var(--color);

	transition: transform var(--transitionparams);

	&:after {
		position: absolute;
		content: "";
		inset: 0;
		background-image: url(imgs/icons/arrow-down.svg);
		background-size: contain;
		width: 1rem;
		aspect-ratio: 1;
		filter: var(--filter-orange);
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%)
	}
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* HIGHLIGHT TEXT */
.highlight-text-wrapper {
	--img-height: 75px;
	color: white;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;

	& h2 {
		padding: var(--spacer-2xl) 0 var(--spacer-xl);
		text-align: center;
		position: relative;

		& span {
			color: white
		}
	}

	& img {
		height: var(--img-height);
		margin: 0 auto;
		object-fit: contain
	}

	& p {
		text-align: center;
		margin: 0 auto;
		text-wrap: balance
	}

	& .mini-cta {
		margin: var(--spacer-xl) auto;
	}

	& .mini-cta:after {
		color: white;
	}

	& .chevron {
		height: 2rem;
		position: absolute;
		bottom: var(--spacer-xl);
		left: 50%;
		animation: bounce 2s infinite ease-in-out;
		transition: transform var(--transitionparams);
		filter: var(--filter-orange)
	}
}

.highlight-image {
	aspect-ratio: 2448/1264;
	display: flex;
	justify-content: center;
	flex-direction: column;
	max-width: 1200px;
	width: 100%;
	margin: var(--spacer-2xl) auto;
	position: relative;

	& img {
		height: 100%;
		object-fit: cover;
		z-index: 1;
		position: relative;
		border-radius: var(--border-radius);
		border: 1px solid rgba(255, 255, 255, 0.25)
	}

	& .img-logo {
		position: absolute;
		background-image: url(imgs/icons/elevate-icon-opaque.svg);
		background-size: 80% auto;
		background-position: center;
		background-repeat: no-repeat;
		top: var(--spacer-2xl);
		left: var(--spacer-2xl);
		width: 5rem;
		aspect-ratio: 48/39;
		z-index: 2
	}

	&:before,
	&:after {
		position: absolute;
		border-radius: 100vw;
		width: 50%;
		aspect-ratio: 1;
		background-color: var(--orange);
		top: -25%;
		left: -25%;
		content: none;
		z-index: 0;
		filter: blur(100px);
		/* adjust intensity */
		opacity: 0.2;
	}

	&:after {
		bottom: -25%;
		right: -25%;
		top: unset;
		left: unset
	}
}

.logos-wrapper {
	display: flex;
	align-items: center;
	margin: 0 auto var(--spacer-xl);
	gap: var(--spacer-2xl);

	& .microsoft {
		height: calc(var(--img-height) * 2)
	}
}

/* SERVICES PAGE */
.services-page-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--spacer-xl);

	& .services-page-left {
		display: flex;
		flex-direction: column;

		& p {
			margin-top: var(--spacer-xl)
		}
	}

	& .services-page-right {}
}

.services-wrapper {
	gap: var(--spacer-lg);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));


	&>div {
		padding: var(--spacer-xl);
		background: linear-gradient(145deg, rgba(53, 93, 171, 1) 40%, rgba(20, 60, 93, 1) 100%);
		border-radius: var(--border-radius-smaller);
		aspect-ratio: 16/9;
		color: white;
		display: flex;
		flex-direction: column;
		position: relative;
		gap: var(--spacer-lg);


		& p {
			margin-top: auto;
			line-height: 1.1;
			position: relative;
			text-wrap: balance;
		}

		& .icons {
			position: absolute;
			top: calc(var(--spacer-xl) + .5ch);
			right: var(--spacer-xl);
			height: 2.5ch;
		}

		& .cubes-wrapper {
			position: absolute;
			bottom: var(--spacer-xl);
			right: var(--spacer-xl);
			opacity: .25
		}
	}

	& h3 {
		font-size: var(--font-size-lg);
		position: relative;
		max-width: 12ch;
	}
}

/* SCROLL SECTIONS */
.scroll-wrapper {
	margin: var(--spacer-md) calc(var(--outer-padding) * -1) 0;
	overflow-x: auto;
	overflow-y: hidden;
	flex-wrap: nowrap;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	will-change: transform;
	scrollbar-width: none;
	scroll-padding-left: var(--outer-padding);
}

.scroll-footer {
	display: flex;
	background-color: var(--orange);
	width: fit-content;
	border-radius: 100vw;
	align-items: center;
	justify-content: center;
	padding: var(--spacer-mdsm);
	gap: var(--spacer-mdsm);

	& .scroll-btn {
		aspect-ratio: 1;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--spacer-mdsm);
		border: 1px solid white;
		border-radius: 100vw;
		transition: background-color var(--transitionparams);

		& .icons {
			height: 1.25ch
		}

		&.disabled {
			opacity: .25;
			pointer-events: none
		}

		&:hover {
			background-color: white;

			& .icons {
				filter: var(--filter-orange)
			}
		}
	}

	& #scroll-left {
		transform: rotate(180deg)
	}
}

/* CUBES */
.cubes-wrapper {
	--cube-variable: 8px;
	display: flex;
	flex-direction: column;
	gap: var(--cube-variable);


	& .cubes-inner-wrapper {
		display: inherit;
		gap: inherit;
		justify-content: flex-end
	}

	& .cubes {
		aspect-ratio: 1;
		background-color: var(--orange);
		width: var(--cube-variable);
		border-radius: var(--border-radius-smaller);
		corner-shape: squircle
	}
}


/* MOBILE NAV */
.mobile-nav-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100dvh;
	background: var(--background-gradient-dark);
	transition: transform var(--transitionparams);
	transform: translateX(-100vw);
	z-index: 9;
	backdrop-filter: blur(20px);
	padding: calc(var(--outer-padding) * 2);
	flex-direction: column;
	gap: var(--spacer-xl);
	display: none;

	& a {
		transform: translateX(-2rem);
		transition: opacity var(--transitionparams), transform var(--transitionparams);
		pointer-events: none;
		font-weight: 500;
		opacity: 0;
		color: white;
		font-size: var(--font-size-lg)
	}

	& a.current {
		color: var(--orange)
	}

	& a:nth-of-type(1) {
		transition-delay: 0.15s;
	}

	& a:nth-of-type(2) {
		transition-delay: 0.20s;
	}

	& a:nth-of-type(3) {
		transition-delay: 0.25s;
	}

	& a:nth-of-type(4) {
		transition-delay: 0.30s;
	}

	& a:nth-of-type(5) {
		transition-delay: 0.35s;
	}

	& a:nth-of-type(6) {
		transition-delay: 0.40s;
	}

	& a:nth-of-type(7) {
		transition-delay: 0.45s;
	}

	& a:nth-of-type(8) {
		transition-delay: 0.50s;
	}

	& .cta {
		margin-top: calc(var(--outer-padding) * 2);
		opacity: 0
	}

	& a:last-of-type {
		margin-top: auto
	}
}

.mobile-nav-logo {
	background-image: url(imgs/icons/elevate-icon.svg);
	background-repeat: no-repeat;
	width: 3rem;
	aspect-ratio: 48/39
}


& .mobile-nav-close {
	position: absolute;
	top: calc(var(--outer-padding) * 2);
	right: calc(var(--outer-padding) * 2);

	& .icons {
		height: 1.5rem
	}
}

#nav-toggle:checked~.mobile-nav-wrapper {
	transform: translateX(0);

	& a {
		transform: translateX(0);
		pointer-events: all;
		opacity: 1
	}
}

#nav-toggle:checked~main {
	& .nav-wrapper {
		border: 1px solid transparent;
		background: transparent;
		backdrop-filter: blur(0);
		box-shadow: none;
		pointer-events: none;
		transition-duration: .25s
	}

	& .logo-nav,
	& .menu-btn {
		opacity: 0;
		transform: translateX(-1rem);
		pointer-events: none
	}
}

/* DIAGRAM */
.diagram-outer-section-wrapper {
	position: relative;

	& h1 {
		margin: 0 auto;
		text-align: center;
		z-index: 1;
		position: relative;
		color: var(--orange);
		width: 60%
	}

	& h1 span {
		color: white
	}

	& p {
		margin: var(--spacer-xl) auto 0;
		text-align: center;
		color: white;
		text-wrap: balance;
		z-index: 1;
		position: relative
	}
}

.diagram-outer-wrapper {
	display: flex;
	gap: var(--spacer-4xl);
	font-weight: 700;
	align-items: center;
	margin-top: var(--spacer-3xl);
	justify-content: center;
}

.diagram-section-wrapper {
	display: flex;
	position: relative;
	z-index: 1
}

.diagram-single {
	padding: var(--spacer-2xl);
	display: flex;
	align-items: center;
	border: 1px dashed white;
	border-radius: var(--border-radius);
	aspect-ratio: 2/1;
	flex: 1;
	min-width: 200px;
	backdrop-filter: blur(20px);
	color: white;
	font-size: var(--font-size-lg);
	font-weight: 700;
	text-align: center;
	justify-content: center;
	background: radial-gradient(rgba(255, 174, 19, 1), rgba(255, 131, 0, 1));
}

.diagram-logo-holder {
	background: var(--background-gradient);
	backdrop-filter: blur(20px);
	padding: var(--spacer-3xl) var(--spacer-4xl);
	border-radius: var(--border-radius);
	position: relative;
	width: 100%;
	max-width: 1000px;
	display: flex;
	flex-direction: column;
	gap: var(--spacer-xl);
	border: 1px solid rgba(255, 255, 255, 0.25);

	& .hero-solo {
		margin: 0 auto;
		aspect-ratio: 360/139;
		width: 30%;
		min-width: 300px
	}

	& .diagram-border {
		position: absolute;
		inset: 2rem;
		border-radius: calc(var(--border-radius) - .5rem);
		border: 1px solid rgba(255, 255, 255, 0.25);
	}

	&:before,
	&:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(calc(var(--spacer-4xl) * -.75), -50%) rotate(-90deg);
		width: var(--spacer-2xl);
		aspect-ratio: 1;
		background-image: url(imgs/icons/chevrons.svg);
		filter: var(--filter-orange)
	}

	&:after {
		left: unset;
		right: 0;
		transform: translate(calc(var(--spacer-4xl) * .75), -50%) rotate(90deg);

	}
}

.diagram-words-wrapper {
	display: flex;
	color: white;
	gap: var(--spacer-lg);
	text-align: center;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 auto;

	&>div {
		border: 1px solid rgba(255, 255, 255, 0.25);
		border-radius: var(--border-radius);
		padding: var(--spacer-sm) var(--spacer-md);
		display: flex;
		flex-direction: column;
		gap: var(--spacer-sm);
		flex: 1;
		min-width: 200px;
		aspect-ratio: 2/1.25;
		align-items: center;
		justify-content: center;

		& .icons {
			height: var(--spacer-lg);
			filter: var(--filter-orange)
		}
	}
}

/* CONTACT PAGE */
.contact-form-wrapper {
	display: flex;
	gap: var(--outer-padding);
	flex-direction: row-reverse;
	margin: 0 auto;
	padding: var(--outer-padding) 0;

	& p {
		margin: var(--spacer-md) 0 var(--spacer-xl)
	}

	& img {
		border-radius: var(--border-radius);
		object-position: bottom right
	}

	& h1 {
		color: var(--orange);

		& span {
			color: var(--slate)
		}
	}
}

.form-wrapper {
	min-width: 500px;
	width: 100%;
}

.contact-left {
	position: relative;
	overflow: hidden;

	&:after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, .25) 35%, rgba(0, 0, 0, 0) 100%);
		pointer-events: none;
		user-select: none;
		z-index: 0;
		border-radius: var(--border-radius);
	}
}

.address-wrapper {
	flex-direction: row;
	padding-top: 0;
	gap: 0;

	& address {
		font-size: var(--font-size-lg);
		position: relative;

		&:before {
			content: "";
			position: absolute;
			background-image: url(imgs/icons/map.svg);
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
			aspect-ratio: 1;
			height: 1.5ch;
			left: -2rem;
			top: .65ch
		}
	}

	.phone-wrapper {
		position: relative;
		font-size: var(--font-size-xl);

		&:before {
			content: "";
			position: absolute;
			background-image: url(imgs/icons/phone.svg);
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
			aspect-ratio: 1;
			height: 1.5ch;
			left: -2rem;
			top: .25ch
		}
	}

	& h2 {
		color: white
	}

	& img {
		object-position: center;
		border-radius: var(--border-radius) 0 0 var(--border-radius);
	}

	& .contact-left:after {
		display: none
	}

	& .contact-right {
		display: flex;
		flex-direction: column;
		border-radius: 0 var(--border-radius) var(--border-radius) 0;
		color: white;
		padding: var(--spacer-3xl);
		justify-content: space-between;
		min-width: fit-content;

		& p {
			margin: var(--spacer-sm) 0 var(--outer-padding);
		}
	}

	& .form-wrapper {
		margin-top: auto;
		display: flex;
		gap: var(--outer-padding)
	}
}

.proudly {
	position: absolute;
	left: 50%;
	bottom: var(--spacer-3xl);
	transform: translateX(-50%);
	width: 80%;
	text-wrap: balance;
	font-size: var(--font-size-3xl);
	color: white;
	font-weight: 700;
	text-align: center;
	line-height: 1
}

.stats-holder {
	position: absolute;
	bottom: var(--spacer-2xl);
	left: var(--spacer-2xl);
	color: white;
	z-index: 1;
	font-size: var(--font-size-4xl);
	font-weight: 700;
	display: flex;
	gap: var(--spacer-xl);
	align-items: center;

	&>div {
		position: relative;

		& span {
			margin-left: .025ch
		}
	}

	&>div:after {
		font-size: var(--font-size-sm);
		font-weight: 500;
		position: absolute;
		left: 0;
		line-height: 1.1;
		width: max-content;
		color: var(--orange)
	}

	&>div:before {
		top: -.75ch;
	}

	&>div:after {
		bottom: -.75ch;
	}
}

.contact-logo {
	position: absolute;
	background-image: url(imgs/icons/elevate-icon.svg);
	background-size: 80% auto;
	background-position: center;
	background-repeat: no-repeat;
	top: var(--spacer-2xl);
	right: var(--spacer-2xl);
	width: 5rem;
	aspect-ratio: 48 / 39;
	z-index: 2;
}

.stats-holder-divider {
	width: 1px;
	background-color: rgba(255, 255, 255, .5);
	height: 1ch;
}

.years-experience:after {
	content: "Years Experience";
}

:lang(fr).years-experience:after {
	content: "Années d’expérience";
}

.go-lives:after {
	content: "Go-Lives"
}

/* LINKEDIN */
.linkedin-wrapper {
	margin: 0 auto var(--outer-padding);
	border-radius: var(--border-radius);
	display: flex;
	align-items: center;
	gap: var(--spacer-xl);

	& h3 {
		color: var(--orange);

		& span {
			color: white
		}
	}

	& .cta {
		margin-left: auto;
		flex-shrink: 0;
		flex-grow: 0;
		width: max-content;
	}

	& .linkedin {
		height: 5rem
	}
}

#index .linkedin-wrapper {
	width: var(--section-width);
	max-width: unset;
	margin-bottom: 0
}

/* CAREERS PAGE */
.careers-wrapper {

	& h1 {
		color: var(--orange);
		margin-bottom: var(--spacer-md);

		& span {
			color: var(--slate)
		}
	}
}

.career {
	border: 1px solid var(--slate-lighter);
	padding: var(--spacer-xl);
	margin-top: var(--spacer-3xl);
	border-radius: var(--border-radius);
	position: relative;


	& h2 {
		font-size: var(--font-size-3xl);
		margin-bottom: var(--spacer-2xl);
		color: var(--light-blue);
	}
}

.career-details-left {
	display: flex;
	flex-direction: column;
	gap: var(--spacer-lg);

	&>div {
		padding: var(--spacer-md) 0;
		border-bottom: 1px solid var(--slate-lighter)
	}

	&>div:last-of-type {
		border: 0
	}

	&>div:first-of-type {
		padding: 0 0 var(--spacer-md);
	}

	& h4 span {
		margin-bottom: .75ch
	}

	& h2 {
		margin-bottom: var(--spacer-lg)
	}

	& .cta {
		margin: auto 0 .5rem;
	}
}

.career-details-wrapper {
	display: flex;
	gap: var(--spacer-xl);
}

.career-details-right {

	border-left: 1px solid var(--slate-lighter);
	padding-left: var(--spacer-xl);

	& p {
		margin: var(--spacer-md) 0 var(--spacer-xl)
	}

	& ul {
		padding: var(--spacer-md) 0 var(--spacer-xl) var(--spacer-xl);

		& li {
			margin-bottom: var(--spacer-md)
		}

		& li:last-of-type {
			margin: 0
		}
	}

	& svg {
		height: 0;
	}
}

.hidden {
	display: none
}

.careers-form-divider {
	width: 100%;
	height: 1px;
	border-top: 1px solid var(--slate-lighter);
	padding-bottom: var(--spacer-lg)
}

/* ABOUT US */
.mission-statement {
	display: flex;
	align-items: center;
	gap: var(--outer-padding);
	flex-direction: row-reverse;

	& h2 span,
	& p {
		color: white
	}

	& h2 {
		margin-bottom: var(--spacer-md)
	}

	& picture {
		aspect-ratio: 16/9;
		border-radius: var(--border-radius);
		max-width: 70%;
		border: 1px solid rgba(255, 255, 255, 0.25);
		overflow: hidden
	}

	& .mission-text-wrapper {
		margin-bottom: var(--spacer-xl)
	}
}

/* THANK YOU PAGES */
#thanks .hero-wrapper {
	height: 70vh
}

.thankyou-wrapper {
	flex-direction: row;

	& p,
	& h2 span {
		color: var(--slate)
	}

	& .circle-check {
		height: 5rem;
		filter: var(--filter-orange)
	}

	& a:hover .arrow-right {
		filter: var(--filter-orange)
	}
}

/* RESPONSIVE */
@media screen and (max-width: 1550px) {
	:root {
		--outer-padding: 5rem;
	}

	.bios-wrapper {
		max-width: initial
	}

	.why-work .years-wrapper {
		aspect-ratio: 16/10
	}

	.services-intro-wrapper {
		justify-content: space-between;

		& .services-intro-right {
			width: calc(100vw * .5);
		}
	}

	.diagram-words-wrapper {
		&>div {
			min-width: 10vw
		}
	}

	.careers-wrapper.inner-section {
		max-width: unset;
		width: 100%;
	}

	.highlight-text-wrapper {
		& .chevron {
			bottom: 0;
		}
	}
	
	.diagram-outer-section-wrapper h1 {
		width: 100%
	}
}


@media screen and (max-width: 1280px) {
	:root {
		--outer-padding: 4rem;
	}

	.menu-btn {
		display: flex;
		z-index: 11
	}

	.mobile-nav-wrapper {
		display: flex
	}

	.scrolling-up {
		transform: translateY(0);
	}

	.scrolled {
		transform: translateY(-8rem);
	}

	nav a,
	nav .cta {
		display: none
	}

	.nav-wrapper {
		padding: var(--spacer-md)
	}

	.cost-wrapper .bar {
		width: 5px
	}

	.logo-nav {
		margin-right: 0;
		height: 20px;
		padding: 0;
		pointer-events: none
	}

	.why-work .years-wrapper {
		aspect-ratio: 16/11
	}

	.services-intro-wrapper {
		flex-direction: column;
		align-items: flex-start;

		& .services-intro-left,
		& .services-intro-right {
			width: 100%
		}

		& .mini-cta {
			position: relative;
			left: unset;
			bottom: unset;
			margin: 0;
			width: fit-content;
		}

		& h3 {
			margin-bottom: var(--spacer-md)
		}
	}

	.mission-statement picture {
		max-width: 60%;
		aspect-ratio: 16/11
	}
}

@media screen and (max-width: 1150px) {
	.why-work {
		& .grid-wrapper {
			grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
			grid-template-rows: auto
		}

		& .grid-wrapper>div:first-of-type,
		& .grid-wrapper>div:nth-of-type(2),
		& .grid-wrapper>div:nth-of-type(3),
		& .grid-wrapper>div:nth-of-type(4),
		& .grid-wrapper>div:last-of-type {
			grid-area: auto
		}
	}

	.cost-wrapper .bar:nth-last-child(-n+5) {
		display: none
	}

	.scrolling-up,
	.scrolled {
		max-width: fit-content
	}

	.why-work .years-wrapper {
		aspect-ratio: 16/8
	}

	.diagram-outer-wrapper {
		flex-direction: column;
		margin-top: var(--spacer-2xl)
	}

	.diagram-words-wrapper {
		&>div {
			min-width: 16vw
		}
	}

	.diagram-logo-holder {

		&:before,
		&:after {
			top: 0;
			left: 50%;
			transform: translate(-50%, calc(var(--spacer-4xl) * -.75));
		}

		&:after {
			top: unset;
			bottom: 0;
			transform: translate(-50%, calc(var(--spacer-4xl) * .75)) rotate(180deg);
		}
	}

	.contact-form-wrapper {
		flex-direction: column-reverse;

		& .contact-left {
			display: none
		}
	}

	.address-wrapper {
		flex-direction: column;

		& .contact-left {
			display: block
		}

		& img {
			border-radius: var(--border-radius);
			aspect-ratio: 16/9
		}

		& .contact-right {
			border-radius: 0;
			padding: var(--spacer-xl) var(--spacer-md) 0;
			color: var(--slate)
		}

		& .graph-background {
			background: none
		}

		& h2 {
			color: var(--slate)
		}

		& address:before,
		& .phone-wrapper:before {
			filter: var(--filter-blue)
		}
	}

	.career-details-wrapper {
		flex-direction: column
	}

	.career-details-left {
		width: fit-content;

		& .cta {
			position: absolute;
			bottom: var(--spacer-xl);
			left: var(--spacer-xl)
		}
	}

	.career-details-right {
		border: 0;
		padding-left: 0;

		& ul:last-of-type {
			padding-bottom: calc(var(--spacer-2xl) * 2)
		}
	}

	.careers-divider {
		width: 100%;
		height: 1px;
		border-top: 1px solid var(--slate-lighter);
	}
}

@media screen and (max-width: 1050px) {
	.hero-wrapper {
		height: unset
	}
	
	.slogan {
		margin-top: var(--outer-padding)
	}

	.bios-wrapper {
		flex-direction: column;
		min-width: 65vw;

		& .img-wrapper {
			border-radius: var(--border-radius-smaller) var(--border-radius-smaller) 0 0;
			min-width: initial
		}

		& .bios-text-footer {
			border-radius: 0 0 var(--border-radius-smaller) var(--border-radius-smaller);
			min-width: initial;
			padding: var(--spacer-xl)
		}

		& .position {
			top: var(--spacer-xl);
			left: var(--spacer-xl)
		}

		& .toggle-label {
			bottom: var(--spacer-xl);
			right: var(--spacer-xl)
		}

		& .years-wrapper {
			bottom: var(--spacer-xl);
			left: var(--spacer-xl);
		}
	}


	.cost-wrapper .bar:nth-last-child(-n+5) {
		display: block
	}

	.cost-wrapper .bar {
		--bar-height: 300px;
	}

	.why-work .years-wrapper {
		aspect-ratio: 16/9
	}

	footer {
		--footer-logo-width: 40vw;
		background-position: right calc(var(--footer-logo-width) * -.5) bottom calc(var(--footer-logo-width) * -.5);
		background-size: 85vw auto;

		& section {
			flex-direction: column;
			gap: var(--spacer-2xl);
		}

		& .footer-nav-wrapper:first-of-type {
			margin-left: unset
		}
	}

	.linkedin-wrapper {
		flex-direction: column;
		align-items: flex-start;

		& .cta {
			margin: 0 0 .5rem
		}

		& .linkedin {
			height: 3rem
		}
	}

	.mission-statement {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: var(--spacer-xl);

		& picture {
			max-width: 100%
		}
	}

	.thankyou-wrapper {
		flex-direction: column;
	}

	.services-wrapper {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

		&>div {
			aspect-ratio: 1
		}
	}

	.address-wrapper {
		& .form-wrapper {
			gap: calc(var(--outer-padding) * 2)
		}
	}
	
	.proudly {
		bottom: var(--spacer-xl)
	}
}

@media screen and (max-width: 800px) {
	:root {
		--outer-padding: 3rem;
	}

	.elevate-icon {
		--elevate-icon-width: 70vw;
		right: calc(var(--elevate-icon-width) * -.25);
	}

	.bios-wrapper {
		min-width: 67vw;
	}

	@keyframes slideInLeft {
		0% {
			transform: translateX(-55vw);
		}

		100% {
			transform: translateX(0);
		}
	}
	
	.why-work {
	& .grid-wrapper {
		grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
	}
}
	
	.why-work .erp-lives .years-wrapper:after {
		inset: var(--spacer-md);
	}

	.lives-graph-wrapper {
		margin: var(--spacer-lg) auto var(--spacer-md);
	}

	.lives-graph-number {
		padding: calc(var(--spacer-sm)/2) var(--spacer-sm)
	}

	.lives-graph {
		width: 55vw
	}

	.services-wrapper {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

		&>div {
			aspect-ratio: unset;
			min-height: 15rem
		}
	}

	.scroll-footer {
		display: none
	}

	.bios-wrapper-outer {
		padding-bottom: 0
	}

	.highlight-text-wrapper {
		--img-height: 10vw;
	}

	.logos-wrapper {
		gap: var(--spacer-lg)
	}

	.subtitle {
		font-size: var(--font-size-lg);
		line-height: 1.2
	}

	.highlight-image .img-logo {
		top: var(--spacer-lg);
		left: var(--spacer-lg);
		width: 3rem
	}

	.diagram-logo-holder {
		padding: var(--spacer-3xl)
	}

	.diagram-words-wrapper {
		&>div {
			min-width: 150px
		}
	}

	.form-wrapper {
		max-width: 500px;
		min-width: unset;
	}

	.linkedin-outer-wrapper {
		width: 100%;
		max-width: 100%;
	}

	.linkedin-wrapper {
		border-radius: 0
	}

	#index .linkedin-wrapper {
		border-radius: var(--border-radius)
	}
}



@media screen and (max-width: 500px) {
	:root {
		--outer-padding: 2rem;
		--font-size-xl: calc(var(--base-unit) * 1.25);
		--font-size-2xl: calc(var(--base-unit) * 1.5);
		--font-size-3xl: calc(var(--base-unit) * 2);
		--font-size-4xl: calc(var(--base-unit) * 3);
		--spacer-base-unit: .75rem;
	}

	.slogan {
		font-size: var(--font-size-4xl);
	}

	header .hero-logo {
		height: 6rem
	}

	.hero-wrapper {
		height: unset;
		min-height: 50vh;
		/* aspect-ratio: 2341/2448; */

		& .chevron {
			display: none
		}
	}

	.hero-wrapper img {
		object-fit: cover;
	}

	.hero-content-bottom {
		margin-top: auto
	}
	
	.hero-content {
		min-height: 60vh
	}
	
	#index .hero-content {
		min-height: 70vh
	}

	.cta,
	.mini-cta,
	.toggle-label {
		font-size: calc(var(--base-unit) * .85)
	}

	.services-intro-wrapper {
		gap: var(--spacer-2xl);

		& .grid-wrapper {
			gap: var(--spacer-2xl);
		}


		& h3 {
			font-size: calc(var(--base-unit) * 1.35);
			line-height: 1.2
		}

		& .grid-wrapper>div {

			& .icons {
				height: 2.5rem
			}
		}
	}

	.why-work {

		& img,
		& .years-wrapper {
			aspect-ratio: auto
		}

		& h4 {
			font-size: calc(var(--base-unit) * 1.75);
		}

		& .grid-wrapper:last-of-type {
			margin-top: calc(var(--spacer-md) * -1);
		}
	}

	.bios-intro {
		& h3 {
			font-size: var(--font-size-3xl)
		}
	}

	.why-work .grid-wrapper {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		margin: var(--spacer-2xl) auto
	}

	.bios-wrapper-outer .bios-text-header {
		bottom: var(--spacer-xl);
		left: var(--spacer-xl);
		color: white;
		width: calc(100% - calc(var(--spacer-xl) * 2))
	}

	.bios-wrapper {
		min-width: 80vw;

		& .years-wrapper span {
			font-size: 180%
		}
	}

	.position {
		font-size: calc(var(--font-size-sm) / 1.2)
	}

	.bios-text-footer p:first-of-type {
		margin-top: var(--spacer-md)
	}

	.toggle-wrapper:not(:has(.toggle:checked)) .content {
		grid-template-rows: 0fr;

		& .inner-content {
			opacity: 0;
		}
	}

	.bios-text-footer .toggle-label {
		display: flex
	}


	.cost-wrapper .bar:nth-last-child(-n+5) {
		display: none
	}

	.cost-wrapper .bar {
		--bar-height: 150px;
	}

	.cost-savings .circular-loader {
		--size: 36px;

		&:after {
			width: .75rem
		}
	}

	.scrolling-up {
		transform: translateY(0rem);
	}

	.highlight-text-wrapper {
		padding: var(--spacer-2xl) var(--outer-padding);
		--img-height: 40px;
	}

	.diagram-logo-holder {
		padding: var(--spacer-2xl);

		& .hero-solo {
			min-width: 200px
		}

		& .diagram-border {
			inset: 1rem;
			border-width: 1px
		}
	}

	.diagram-words-wrapper {
		&>div {
			min-width: 100px;
			font-size: var(--font-size-sm)
		}
	}

	.address-wrapper {
		& address {
			font-size: var(--base-unit);

			&:before {
				left: -1.5rem
			}
		}

		& h2 {
			font-size: var(--font-size-3xl);
		}

		& h3 {
			font-size: var(--font-size-2xl);
		}

		& .phone-wrapper:before {
			left: -1.5rem
		}

		& .phone-wrapper {
			font-size: var(--base-unit)
		}
	}

	.highlight-text-wrapper {
		& .chevron {
			height: 1rem;
			animation: bounce 1.5s infinite ease-in-out;
		}
	}

	@keyframes bounce {

		0%,
		100% {
			transform: translate(-50%, 0);
		}

		50% {
			transform: translate(-50%, -10px);
		}
	}
}

@media screen and (max-width: 400px) {
	:root {
		--outer-padding: 1.5rem;
	}

	p {
		line-height: 1.4
	}

	.why-work .why-work-footer {
		padding: var(--spacer-xl)
	}

	.why-work .years-wrapper {
		padding: var(--spacer-xl)
	}

	.why-work .years-wrapper .years-graph:before,
	.why-work .years-wrapper .years-graph:after,
	.why-work .erp-lives .lives-graph-wrapper span {
		font-size: calc(var(--font-size-sm) * .8)
	}

	.why-work .years-wrapper .years-graph {
		margin: var(--spacer-xl) auto
	}

	.cost-wrapper {
		width: calc(100% - var(--spacer-2xl));
		padding: var(--spacer-2xl) 0 var(--spacer-xl)
	}

	.cost-savings .circular-loader {
		top: var(--spacer-xl);
		right: var(--spacer-xl);
		--size: 36px;
	}

	footer {
		& .footer-title {
			margin-bottom: 0
		}

		& .hero-logo {
			height: 6rem
		}
	}

	.services-wrapper {

		&>div {
			min-height: 12rem
		}
	}
}