/*
Theme Name: Neiko
Theme URI: https://neiko.it/
Author: Neiko srl
Author URI: https://www.neiko.it/
Description: Neiko Corporate - 2026
Version: 1.0
License: GNU General Public License v2 or later
*/

/*  FONTS e COLORI */

@font-face {
	font-family: "Roobert";
	src:
		url("fonts/Roobert-Regular.woff2") format("woff2"),
		url("fonts/Roobert-Regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Roobert";
	src:
		url("fonts/Roobert-Medium.woff2") format("woff2"),
		url("fonts/Roobert-Medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Roobert";
	src:
		url("fonts/Roobert-SemiBold.woff2") format("woff2"),
		url("fonts/Roobert-SemiBold.woff") format("woff");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Roobert";
	src:
		url("fonts/Roobert-Bold.woff2") format("woff2"),
		url("fonts/Roobert-Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Roobert Mono";
	src:
		url("fonts/RoobertMono-Regular.woff2") format("woff2"),
		url("fonts/RoobertMono-Regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	interpolate-size: allow-keywords;

	/* Primitive */
	--mono-900: #000000;
	--mono-800: #282828;
	--mono-600: #505050;
	--mono-300: #cdc8c3;
	--mono-200: #f0f0eb;
	--mono-100: #ffffff;
	--dda-500: #791515;
	--vre-500: #ebaf08;
	--nvr-500: #083F68;

	/* Componenti */
	--button-primary-default: var(--mono-200);
	--button-primary-hover: var(--mono-300);
	--button-primary-active: var(--mono-100);

	--button-secondary-default: var(--mono-900);
	--button-secondary-hover: var(--mono-800);
	--button-secondary-active: var(--mono-700);

	--button-tertiary-default: var(--mono-600);
	--button-tertiary-hover: var(--mono-300);
	--button-tertiary-active: var(--mono-100);

	--input-default: var(--mono-300);
	--input-hover: var(--mono-600);
	--input-focus: var(--mono-800);

	--accent: var(--mono-200);

	--text-light: var(--mono-100);
	--text-dark: var(--mono-900);

	--background--white: var(--mono-100);
	--background-light: var(--mono-200);
	--background-smoke: var(--mono-300);
	--background-middle: var(--mono-600);
	--background-carbon: var(--mono-800);
	--background-dark: var(--mono-900);

	--radius-x-small: 3px;
	--radius-small: var(--20);
	--radius-medium: var(--40);
	--radius-large: var(--60);

	--header-color: var(--text-dark);
	--header-background-color-scrolled: var(--background-dark);
	--header-color-scrolled: var(--text-light);
	--header-color-active-scrolled: var(--text-dark);

	/* Font */
	--font-sans: "Roobert", Helvetica, Arial, sans-serif;
	--font-mono: "Roobert Mono", Consolas, monospaced;
	--font-regular: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;

	/* Dimensioni */
	--header-height: clamp(4.375rem, 5.729vw, 6.875rem); /* 70px - 110px */
	--header-height-scrolled: calc(var(--header-height) * 0.65);

	--external-padding: clamp(var(--40), 4.167vw, var(--80));
}

/* --- LOADER INIZIALE --- */
#initial-session-loader {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	display: none;

	.show-initial-loader & {
		opacity: 1;
		pointer-events: auto;
		visibility: visible;

		position: fixed;
		inset: 0;
		background: var(--background-dark);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999999;
		transition: opacity 0.5s ease;
	}

	&.loader-ready {
		animation: loaderFadeOut 800ms cubic-bezier(0.7, 0, 0.84, 0) 900ms
			forwards;
	}

	#filler-shape {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 167px;
		height: 100px;
		background: var(--accent);
		z-index: -1;
		border-radius: var(--radius-small);
		opacity: 0;
		transition: 200ms;

		body.page-template-page-home[class*="wp-child-theme-"] .loader-ready & {
			animation: revealFiller 1200ms cubic-bezier(0.87, 0, 0.13, 1)
				forwards;
		}

		.loader-ready & {
			animation: revealFillerFull 1200ms cubic-bezier(0.87, 0, 0.13, 1)
				forwards;
			opacity: 1;
		}
	}
}

@keyframes loaderFadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		pointer-events: none;
	}
}

@keyframes revealFiller {
	0% {
		width: 167px;
		height: 100px;
	}
	100% {
		width: calc(100% - (clamp(0.625rem, 1.302vw, 1.563rem) * 2));
		height: calc(100% - (clamp(0.625rem, 1.302vw, 1.563rem) * 2));
	}
}

@keyframes revealFillerFull {
	0% {
		width: 167px;
		height: 100px;
	}
	100% {
		width: 100%;
		height: 100%;
		border-radius: 0;
	}
}

/* VIEW TRANSITION */
@view-transition {
	navigation: auto;
}

::view-transition-old(root) {
	animation-name: slideOut;
	animation-duration: 900ms;
	animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
	animation-fill-mode: forwards;
}

::view-transition-new(root) {
	animation-name: slideIn;
	animation-duration: 900ms;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	animation-fill-mode: forwards;
}

.fallback-exit {
	animation-name: fadeOut;
	animation-duration: 900ms;
	animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
	animation-fill-mode: forwards !important;
}

.fallback-enter {
	animation-name: fadeIn;
	animation-duration: 900ms;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	animation-fill-mode: forwards !important;
}

@keyframes slideOut {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	50% {
		transform: translateY(-5vh);
		opacity: 0;
	}
	100% {
		transform: translateY(-5vh);
		opacity: 0;
	}
}

@keyframes slideIn {
	0% {
		transform: translateY(-5vh);
		opacity: 0;
		border-radius: var(--radius-large);
	}
	50% {
		transform: translateY(5vh);
		opacity: 0;
		border-radius: var(--radius-large);
	}
	100% {
		transform: translateY(0);
		opacity: 1;
		border-radius: 0;
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* SCROLLBAR */

:root {
	scrollbar-width: thin;
	scrollbar-color: var(--background-smoke) transparent;
}

/*
::-webkit-scrollbar {
	width: 5px;
	transition: .3s;
}

::-webkit-scrollbar-track {
	background: var(--document-background-color);
	transition: .3s;
}

::-webkit-scrollbar-thumb {
	background: var(--document-color-alt);
	transition: .3s;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--document-color-alt);
	transition: .3s;
}
*/

/* GENERAL & LAYOUT */

html {
	scrollbar-gutter: stable;
	font-size: 18px;

	@media (max-width: 575.98px) {
		font-size: 16px;
	}
}

body {
	margin: 0;
	padding: 0;
	background-color: var(--background-dark);
	color: var(--text-light);
	font-family: var(--font-sans, sans-serif);
	font-weight: var(--font-regular);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
}

.container-fluid {
	padding-left: var(--external-padding);
	padding-right: var(--external-padding);

	@media (max-width: 991.98px) {
		&.padding-0 {
			padding-left: 0;
			padding-right: 0;
		}
	}
}

.row {
	--bs-gutter-x: var(--40);
}

picture {
	display: block;
	& img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
	}
}

img,
video {
	border-radius: var(--radius-x-small);
}

img,
a img {
	border: none !important;
}

::-moz-selection {
	background: none repeat scroll 0 0 #fff;
	color: #000;
}

.overlap {
	margin-top: calc(-1 * var(--40));
}

.lenis.lenis-smooth iframe {
	pointer-events: none;
}

/* TYPOGRAPHY */

.big {
	font-size: 1.1rem;
}

.small {
	font-size: 0.9rem;
}

.uppercase {
	text-transform: uppercase;
}

.lowercase {
	text-transform: lowercase;
}

.capitalize {
	text-transform: capitalize;
}

b,
strong,
.bold {
	font-weight: var(--font-bold) !important;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	font-family: var(--font-sans);
	font-weight: var(--font-regular);
	line-height: 1.35;
}

.title {
	/* font-size: clamp(5.000rem, 6.250vw, 7.500rem);
	line-height: 80%;
	letter-spacing: calc(clamp(5.000rem, 6.250vw, 7.500rem) * -0.05); */
	font-size: clamp(3.333rem, 8.333vw, 6.667rem);
	line-height: 80%;
	letter-spacing: calc(clamp(3.333rem, 8.333vw, 6.667rem) * -0.05);
	font-weight: var(--font-medium);

	@media (max-width: 1600px) {
		font-size: clamp(2.8rem, 6.3vw, 6.667rem);
		letter-spacing: calc(clamp(2.8rem, 6.3vw, 6.667rem) * -0.05);
	}
}

h1,
.h1 {
	font-size: clamp(2.778rem, 5.556vw, 4.444rem);
	line-height: 80%;
	letter-spacing: calc(clamp(2.778rem, 5.556vw, 4.444rem) * -0.05);
	text-transform: uppercase;
	font-weight: var(--font-medium);
	&.small-on-mobile {
		@media (max-width: 575.98px) {
			font-size: clamp(2.222rem, 3.125vw, 3.333rem);
			letter-spacing: calc(clamp(2.222rem, 3.125vw, 3.333rem) * -0.05);
		}
	}
}

h2,
.h2 {
	font-size: clamp(2.222rem, 3.125vw, 3.333rem);
	line-height: 80%;
	letter-spacing: calc(clamp(2.222rem, 3.125vw, 3.333rem) * -0.05);
	text-transform: uppercase;
	font-weight: var(--font-medium);
	&.small-on-mobile {
		@media (max-width: 575.98px) {
			font-size: clamp(1.875rem, 2.083vw, 2.5rem);
			letter-spacing: calc(clamp(1.875rem, 2.083vw, 2.5rem) * -0.05);
		}
	}
}

h3,
.h3 {
	font-size: clamp(1.667rem, 2.083vw, 2.222rem);
	line-height: 80%;
	letter-spacing: calc(clamp(1.667rem, 2.083vw, 2.222rem) * -0.05);
	text-transform: uppercase;
	font-weight: var(--font-medium);
	&.lowercase {
		text-transform: none;
		line-height: 100%;
		font-weight: var(--font-regular);
	}
}

h4,
.h4 {
	font-size: clamp(1.222rem, 1.406vw, 1.5rem);
	letter-spacing: calc(clamp(1.222rem, 1.406vw, 1.5rem) * -0.03);
	text-transform: none;
}

h5,
.h5 {
	font-size: clamp(1.111rem, 1.042vw, 1.111rem);
	line-height: clamp(1.111rem, 1.042vw, 1.111rem);
	text-transform: none;
}

@media (min-width: 1920px) {
	.big-paragraph {
		font-size: clamp(1.222rem, 1.15vw, 1.375rem);
		letter-spacing: calc(clamp(1.222rem, 1.15vw, 1.375rem) * -0.03);
		text-transform: none;
		line-height: 1.35;
	}
}

.section-title {
	font-size: 0.889rem;
	font-family: var(--font-mono);
	text-transform: uppercase;
}

p {
	margin-bottom: 0;
}

.p {
	font-size: 1rem;
	font-weight: var(--font-regular);
}

/* COLORI, SFONDI E DECORAZIONI */

.bg-black,
.black-bg {
	background: var(--background-dark);
	color: var(--text-light);
}

.bg-carbon,
.carbon-bg {
	background: var(--background-carbon);
	color: var(--text-light);
}

.bg-middle,
.middle-bg {
	background: var(--background-middle);
	color: var(--text-light);
}

.bg-smoke,
.smoke-bg {
	background: var(--background-smoke);
	color: var(--text-dark);
}

.light-bg,
.light-bg {
	background-color: var(--background-light);
	color: var(--text-dark);
}

.white-bg,
.white-bg {
	background-color: var(--background-light);
	color: var(--text-dark);
}

.white-txt,
.white-text {
	color: var(--text-light);
}

.dark-txt,
.dark-text {
	color: var(--text-dark);
}

.radius-x-small {
	border-radius: var(--radius-x-small);
}

.radius-small {
	border-radius: var(--radius-small);
}

.radius-medium {
	border-radius: var(--radius-medium);
}

.radius-large {
	border-radius: var(--radius-large);
}

.border-radius-top {
	border-top-left-radius: var(--radius-medium);
	border-top-right-radius: var(--radius-medium);
}

.border-radius-bottom {
	border-bottom-left-radius: var(--radius-medium);
	border-bottom-right-radius: var(--radius-medium);
}

/* COMPONENTI */

a {
	color: inherit;
}

.primary-button {
	display: inline-flex;
	align-items: stretch;
	gap: var(--10);
	border: none;
	background: transparent;
	text-decoration: none !important;
	text-transform: uppercase;
	transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
	font-family: var(--font-mono);
	padding: 0;
	white-space: nowrap;

	.light-bg &,
	.light-bg &,
	.bg-smoke &,
	.smoke-bg & {
		--button-primary-default: var(--button-secondary-default);
		--button-primary-hover: var(--button-secondary-hover);
		--button-primary-active: var(--button-secondary-active);
		--text-light: var(--mono-900);
		--text-dark: var(--mono-200);
	}

	.text {
		position: relative;
		z-index: 2;
		padding: var(--15) var(--30);
		font-size: 1rem;
		line-height: 1rem;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		background: var(--button-primary-default);
		color: var(--text-dark);
		border: 1px solid var(--button-primary-default);
		border-radius: var(--radius-large);
		transition: inherit;
		text-decoration: inherit;

		.primary-button:hover & {
			background: var(--button-primary-hover);
			border: 1px solid var(--button-primary-hover);
		}
	}
	.icon {
		width: calc(1.25rem + (var(--15) * 2));
		aspect-ratio: 1 / 1;
		align-self: stretch;
		position: relative;
		z-index: 2;
		font-size: 1rem;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 7px;
		border: 1px solid var(--button-primary-default);
		color: var(--text-light);
		transition: inherit;

		i {
			transition: inherit;
		}

		.primary-button:hover & {
			background: var(--button-primary-hover);
			border: 1px solid var(--button-primary-hover);
			color: var(--text-dark);

			i {
				transform: rotate(45deg);
			}
		}
	}
}

.secondary-button {
	display: inline-flex;
	align-items: stretch;
	gap: var(--10);
	border: none;
	background: transparent;
	text-decoration: none !important;
	text-transform: uppercase;
	transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
	font-family: var(--font-mono);
	padding: 0;

	.bg-black &,
	.black-bg &,
	.bg-carbon &,
	.carbon-bg &,
	.bg-middle &,
	.middle-bg & {
		--button-secondary-default: var(--button-primary-default);
		--button-secondary-hover: var(--button-primary-hover);
		--button-secondary-active: var(--button-primary-active);
		--text-dark: var(--mono-200);
		--text-light: var(--mono-900);
	}

	.text {
		position: relative;
		z-index: 2;
		padding: var(--15) var(--30);
		font-size: 1rem;
		line-height: 1rem;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		background: var(--button-secondary-default);
		color: var(--text-light);
		border: 1px solid var(--button-secondary-default);
		border-radius: var(--radius-large);
		transition: inherit;
		text-decoration: inherit;

		.secondary-button:hover & {
			background: var(--button-secondary-hover);
			border: 1px solid var(--button-secondary-hover);
		}
	}
	.icon {
		width: calc(1.25rem + (var(--15) * 2));
		aspect-ratio: 1 / 1;
		align-self: stretch;
		position: relative;
		z-index: 2;
		font-size: 1rem;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 7px;
		border: 1px solid var(--button-secondary-default);
		color: var(--text-dark);
		transition: inherit;

		i {
			transition: inherit;
		}

		.secondary-button:hover & {
			background: var(--button-secondary-hover);
			border: 1px solid var(--button-secondary-hover);
			color: var(--text-light);

			i {
				transform: rotate(45deg);
			}
		}
	}
}

.tertiary-button {
	display: inline-flex;
	padding: var(--10) var(--20);
	justify-content: center;
	align-items: center;
	border-radius: var(--radius-medium);
	border: 1px solid var(--button-tertiary-default);
	background: transparent;
	color: inherit;
	text-decoration: none !important;
	transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);

	&:not(button, a) {
		pointer-events: none;
		cursor: default;
	}

	&:is(button, a):hover {
		background: var(--button-tertiary-hover);
		border: 1px solid var(--button-tertiary-hover);
		color: var(--text-dark);
	}

	&:is(button, a):active,
	&.active {
		background: var(--button-tertiary-active);
		border: 1px solid var(--button-tertiary-active);
		color: var(--text-dark);
	}

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

	&.mono {
		font-family: var(--font-mono);
	}

	.light-bg & {
		color: var(--text-dark);
		border: 1px solid var(--button-tertiary-hover);

		&:is(button, a):hover {
			background: var(--button-tertiary-hover);
			border: 1px solid var(--button-tertiary-hover);
			color: var(--text-dark);
		}
	}
}

.card {
	display: flex;
	align-items: start;
	border-radius: var(--radius-small);
	padding: var(--40);
	border: none;

	&.light {
		background: var(--background-light);
		color: var(--text-dark);
	}

	&.smoke {
		background: var(--background-smoke);
		color: var(--text-dark);
	}

	&.middle {
		background: var(--background-middle);
		color: var(--text-light);
	}

	&.carbon {
		background: var(--background-carbon);
		color: var(--text-light);
	}

	> .icon {
		height: clamp(2.5rem, 3.906vw, 4.688rem);
		width: auto;
		max-width: 100%;
		text-decoration: none;
		color: inherit;

		&.white {
			filter: invert(1) sepia(1) saturate(1) hue-rotate(180deg);
			text-decoration: none;
			color: var(--text-light);
		}
	}
}

form {
	position: relative;

	* {
		transition: 300ms;
	}

	input:not([type="checkbox"], [type="file"]),
	select {
		display: flex;
		width: 100%;
		padding: var(--15) var(--20);
		align-items: center;
		gap: var(--10);
		align-self: stretch;
		border-radius: 50px;
		border: 1px solid var(--input-default);
		background: transparent;
		margin-bottom: var(--30);
		color: inherit;

		&:hover {
			border: 1px solid var(--input-hover);
		}

		&:focus-visible {
			border: 1px solid var(--input-focus);
			outline: 1px solid var(--input-focus);
			background: rgb(255, 255, 255);
		}
	}

	input[type="file"] {
		position: relative;

		&::file-selector-button {
			border-radius: var(--radius-medium);
			height: 100%;
			padding: var(--10) var(--20);
			margin-bottom: var(--30);
			cursor: pointer;
			background-color: transparent;
			border: 1px solid var(--input-default);
			margin-right: var(--15);
			transition: 300ms;
			position: relative;
		}

		&:focus,
		&:focus-visible {
			outline: none;
		}

		&::file-selector-button:hover,
		&::file-selector-button:active {
			border: 1px solid var(--input-hover);
			background: var(--input-hover);
			color: var(--text-light);
		}

		&::file-selector-button:focus-visible {
			outline: 1px solid var(--input-focus);
			outline-offset: 2px;
			background: var(--input-focus);
			color: var(--text-light);
		}
	}

	textarea {
		display: flex;
		width: 100%;
		padding: var(--15) var(--20);
		align-items: center;
		gap: var(--10);
		align-self: stretch;
		border-radius: 20px;
		border: 1px solid var(--input-default);
		background: transparent;
		margin-bottom: var(--30);

		&:hover {
			border: 1px solid var(--input-hover);
		}

		&:focus-visible {
			border: 1px solid var(--input-focus);
			outline: 1px solid var(--input-focus);
			background: rgb(255, 255, 255);
		}
	}

	label {
		padding: 0 var(--20);
		display: block;
		padding-bottom: var(--15);
	}

	.policy-wrapper {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--10);

		label {
			margin: 0;
			padding: 0;
		}

		input[type="checkbox"] {
			appearance: none;
			min-width: 24px;
			width: 24px;
			min-height: 24px;
			height: 24px;
			border: 1px solid var(--input-default);
			border-radius: 0px;
			cursor: pointer;
			position: relative;
			padding: 0;
			&:focus-visible {
				border-color: var(--input-focus);
				box-shadow: 0 0 0 1px var(--input-focus);
			}
			&:checked {
				background: var(--input-focus);
				border-color: var(--input-focus);
				&::before {
					font-family: "Phosphor";
					content: "\e182";
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					color: var(--text-light);
				}
			}
		}
	}
}

/* ============================================================
   FILTER COMBOBOX
   Da aggiungere al foglio stile del tema (es. _filters.scss)
   Replica lo stile di Bootstrap .form-select
   ============================================================ */

/* Contenitore */
.filter-combobox {
    position: relative;
}

/* Trigger: aspetto identico a Bootstrap .form-select */
.combobox-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;

    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;

    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

    appearance: none;
    -webkit-appearance: none;
}

.combobox-trigger:focus {
    border-color: rgba(0, 0, 0, 0.2);
	outline: 0;
	box-shadow: 0 0 0 0.25rem rgba(133, 133, 133, 0.25);
}

/* Label del trigger */
.combobox-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Caret */
.combobox-caret {
    flex-shrink: 0;
    font-size: 0.85em;
    transition: transform 0.2s ease;
    pointer-events: none;
}

.combobox-trigger[aria-expanded="true"] .combobox-caret {
    transform: rotate(180deg);
}

/* Stato attivo: uno o più valori specifici selezionati */
.filter-combobox.is-active .combobox-trigger {
    border-color: var(--mono-600);
    color: var(--mono-900);
}

/* ============================================================
   PANNELLO — position absolute, non sposta il layout
   ============================================================ */

.combobox-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 200;
    min-width: 100%;
    max-height: 260px;
    overflow-y: auto;

    background-color: var(--mono-100);
    border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

    padding: 0.25rem 0;
}

/* Evita che il pannello venga tagliato dall'overflow del parent */
#filters-container .row,
#filters-container .col-lg,
#filters-container [class*="col-"] {
    overflow: visible;
}

/* ============================================================
   OPZIONI
   ============================================================ */

.combobox-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--bs-body-color);
    user-select: none;
    transition: background-color 0.1s ease;
}

.combobox-option:hover {
    background-color: var(--mono-200);
}

.combobox-option input[type="checkbox"] {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    accent-color: var(--mono-600);
    cursor: pointer;
}

/* Opzione selezionata */
.combobox-option:has(input:checked) {
    background-color: var(--mono-200);
    color: var(--mono-900);
    font-weight: 500;
}

/* Opzione "Tutto" — separata dalle altre da un bordo sotto */
.combobox-option--all {
    font-weight: 500;
    border-bottom: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
    padding-bottom: 0.5rem;
}

/* Label gruppo (per taxonomy raggruppate per sito) */
.combobox-group-label {
    margin: 0;
    padding: 0.5rem 0.75rem 0.5rem;
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
    border-top: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
}

.combobox-group-label:first-of-type {
    border-top: none;
}

/* ============================================================
   SHARE LINK
   ============================================================ */
 
.share-link-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
 
#share-link-feedback {
    font-size: 0.875rem;
    color: var(--bs-success, #198754);
    display: none;
}
 
#share-link-feedback.is-visible {
    display: inline;
}
 
#share-link-feedback.is-error {
    color: var(--bs-danger, #dc3545);
}

/* UTILITIES */

.menu-spacing {
	padding-top: calc(var(--header-height) + var(--30));
}

.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	border: 0 !important;
}

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999999;
	padding: 8px 16px;
	background: #000;
	color: #fff;
	text-decoration: none;
	border-radius: 3px;
	font-weight: bold;
}

.skip-link:focus-visible,
.sr-only-focusable:focus-visible {
	position: absolute !important;
	left: auto !important;
	top: auto !important;
	width: auto !important;
	height: auto !important;
	padding: 8px 16px !important;
	margin: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	white-space: nowrap !important;
	background: #000 !important;
	color: #fff !important;
	z-index: 999999 !important;
	display: block !important;
	text-align: center;
}

a {
	color: inherit;
	text-decoration: none;
	transition: 300ms;

	&:hover {
		text-decoration: underline;
	}
}

/* ANIMATIONS */

[animate="fadeInUp"] {
	transform: translateY(var(--100));
	opacity: 0;
	transition: 1s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: var(--delay);
	&.fadeInUp {
		transform: translateY(0);
		opacity: 1;
	}
}

[animate-text="unblur"] {
	display: block;
	visibility: visible;
}

[animate-text="unblur"] .word {
	display: inline-flex;
}

[animate-text="unblur"] .word .letter {
	display: inline-block;
	transform: translateY(30%) rotate(10deg);
	filter: blur(20px);
	opacity: 0;
}

[animate-text="unblur"].unblur .letter {
	animation-name: unblur;
	animation-duration: 3s;
	animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
	animation-delay: var(--delay);
	animation-fill-mode: forwards;
}

@keyframes unblur {
	0% {
		transform: translateY(30%) rotate(10deg);
		filter: blur(20px);
		opacity: 0;
	}
	66.666% {
		opacity: 1;
	}
	100% {
		transform: translateY(0) rotate(0);
		filter: blur(0);
		opacity: 1;
	}
}

/* HEADER */

#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(var(--header-height) + var(--30));
	padding: var(--30) var(--external-padding) 0 var(--external-padding);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	color: var(--header-color, var(--text-light));
	z-index: 999;
	transition: 600ms cubic-bezier(0.19, 1, 0.22, 1);

	&.scroll-hidden {
		transform: translateY(-100%);
	}

	@media (max-width: 575.98px) {
		padding: 0 var(--external-padding);
	}

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--header-background-color-scrolled);
		transition: 600ms cubic-bezier(0.19, 1, 0.22, 1);
		z-index: -1;
		transform: translateY(-100%);
	}

	&.scrolled {
		height: var(
			--header-height-scrolled,
			calc(var(--header-height) * 0.65)
		);
		color: var(--header-color-scrolled, var(--text-light));
		padding-top: 0;

		&::before {
			transform: translateY(0);
		}

		@media (max-width: 575.98px) {
			height: calc(var(--header-height) * 0.85);
		}
	}

	.page-template-page-chi-siamo &,
	.page-template-page-lavora-con-noi & {
		--header-color: var(--text-light);
	}

	a#logo {
		display: flex;
		align-items: center;
		gap: var(--20);
		text-decoration: none;
		color: currentcolor;
		transition: 600ms cubic-bezier(0.19, 1, 0.22, 1);

		svg {
			width: clamp(5.5rem, 7.031vw, 7.5rem); /* 90px - 120px */
			height: auto;
			z-index: 1;
		}

		#header.menu-open & {
			color: var(--text-light);
		}
	}

	#navigation-toggle {
		display: none;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 3px;
		min-width: 2rem;
		min-height: 2rem;
		border-radius: clamp(0.313rem, 0.365vw, 0.438rem);
		background: var(--header-color);
		border: none;
		cursor: pointer;
		padding: 0;
		transition: 300ms;

		#header.scrolled & {
			background: var(--header-color-scrolled, var(--background-light));
		}

		#header.menu-open & {
			background: var(--text-light);
			gap: 0;
		}

		.bar {
			width: 50%;
			height: 1.5px;
			background: var(--header-color);
			filter: invert();
			border-radius: 2px;
			transition: 300ms;

			#header.scrolled & {
				background: var(--header-color-scrolled);
			}

			#header.menu-open &:nth-child(1) {
				rotate: -45deg;
				translate: 0 1.5px;
				background: var(--text-dark);
				filter: none;
			}

			#header.menu-open &:nth-child(2) {
				opacity: 0;
			}

			#header.menu-open &:nth-child(3) {
				rotate: 45deg;
				translate: 0 -1.5px;
				background: var(--text-dark);
				filter: none;
			}
		}

		@media (max-width: 991.98px) {
			display: flex;
			z-index: 1;
		}
	}

	#navigation-container {
		display: flex;
		align-items: center;
		gap: 5px;
		position: relative;

		ul#primary-menu {
			display: flex;
			flex-direction: row;
			padding: 0;
			margin: 0;
			font-family: var(--font-mono);
			line-height: 1rem;
			font-weight: var(--font-regular);
			font-size: 0.889rem;
			text-transform: uppercase;
			gap: 5px;

			> li {
				list-style: none;
				padding: 0;
				margin: 0;

				> a {
					color: currentcolor;
					padding: 7px var(--10);
					border: 1px solid transparent;
					border-radius: var(--radius-large);
					transition: 600ms cubic-bezier(0.19, 1, 0.22, 1);
					display: flex;
					align-items: center;
					text-decoration: none;

					&:hover {
						border: 1px solid var(--mono-600);
					}

					&:active {
						border: 1px solid var(--mono-600);
						background: var(--mono-600);
						color: var(--text-light);
					}

					.current-menu-item & {
						background: transparent;
						border: 1px solid currentcolor;
						color: currentcolor;
					}

					ul#primary-menu > li:last-of-type > & {
						background: var(--mono-100);
						border: 1px solid var(--mono-100);
						color: var(--mono-900);
					}

					#header.scrolled &:hover {
						border: 1px solid var(--header-color-scrolled, var(--mono-300));
					}

					#header.scrolled &:active {
						border: 1px solid var(--header-color-scrolled, var(--mono-300));
						background: var(--header-color-scrolled,var(--mono-300));
						color: var(--header-color-active-scrolled, var(--text-dark));
					}
				}
			}
		}

		.nav-panel-item {
			display: flex;
			align-items: center;

			.nav-panel-toggle {
				font-family: var(--font-mono);
				font-size: 0.889rem;
				font-weight: var(--font-regular);
				line-height: 1rem;
				text-transform: uppercase;
				color: currentcolor;
				padding: 7px var(--10);
				border: 1px solid transparent;
				border-radius: var(--radius-large);
				background: transparent;
				transition: 600ms cubic-bezier(0.19, 1, 0.22, 1);
				display: flex;
				align-items: center;
				text-decoration: none;
				cursor: pointer;

				&:hover,
				&[aria-expanded="true"] {
					border: 1px solid var(--mono-600);
				}

				&:active {
					border: 1px solid var(--mono-600);
					background: var(--mono-600);
					color: var(--text-light);
				}

				#header.scrolled &:hover,
				#header.scrolled &[aria-expanded="true"] {
					border: 1px solid var(--header-color-scrolled, var(--mono-300));
				}
			}
		}

		.nav-panel {
			position: absolute;
			top: calc(var(--header-height-scrolled));
			right: 0;
			width: 100%;
			height: calc(100svh - var(--header-height) - var(--30) - var(--external-padding));
			background: var(--background-light);
			color: var(--text-dark);
			border-radius: var(--radius-small);
			box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
			opacity: 0;
			pointer-events: none;
			transform: translateY(-0.75rem);
			transition: 400ms cubic-bezier(0.19, 1, 0.22, 1);

			#header.scrolled & {
				height: calc(100svh - var(--header-height-scrolled) - var(--30) - var(--external-padding));
			}

			#header.nav-panel-open & {
				opacity: 1;
				pointer-events: auto;
				transform: translateY(0);
			}

			.nav-panel-inner {
				padding: var(--20);
				height: 100%;
				display: flex;
				flex-direction: column;
				min-height: 0;
			}

			.nav-panel-back {
				display: none;
			}

			.nav-panel-title {
				flex: 0 0 auto;
				margin: 0 0 var(--20) 0;
				font-family: var(--font-mono);
				font-size: 0.889rem;
				line-height: 1rem;
				text-transform: uppercase;
				color: var(--mono-600);
			}

			ul.nav-panel-grid {
				display: grid;
				grid-template-columns: minmax(0, 1fr);
				grid-auto-rows: minmax(0, 1fr);
				gap: var(--20);
				flex: 1 1 auto;
				min-height: 0;
				padding: 0;
				margin: 0;

				& li {
					list-style: none;
					margin: 0;
					padding: 0;

					a.nav-panel-card {
						display: flex;
						flex-direction: column;
						height: 100%;
						min-height: 0;
						color: currentcolor;
						text-decoration: none;
						border-radius: var(--radius-x-small);
						overflow: hidden;
						background: var(--background-light);
						transition: 300ms;
						position: relative;

						&.vre {
							--filter-color: var(--vre-500);
						}

						&.dda {
							--filter-color: var(--dda-500);
						}

						&.nvr {
							--filter-color: var(--nvr-500);
						}

						&::before {
							content: "";
							position: absolute;
							inset: 0;
							background-color: var(--filter-color);
							border-radius: inherit;
							z-index: 1;
							mix-blend-mode: multiply;
							opacity: 0;
							pointer-events: none;
							transition: opacity 300ms;
						}

						&:hover,
						&:focus-visible,
						&[aria-current="page"] {
							border-color: var(--accent);
						}

						&:hover::before,
						&:focus-visible::before,
						.current-menu-item > &::before {
							opacity: 1;
						}

						&[aria-current="page"] {
							background: var(--mono-100);
						}

						.nav-panel-card-media {
							display: block;
							width: 100%;
							flex: 1 1 auto;
							min-height: 0;
							background: var(--mono-200);
							overflow: hidden;
							position: relative;
							z-index: 0;
						}

						.nav-panel-card-image {
							display: block;
							width: 100%;
							height: 100%;
							object-fit: cover;
						}

						.nav-panel-card-content {
							flex: 0 0 auto;
							display: flex;
							width: 100%;
							align-items: center;
							justify-content: space-between;
							gap: var(--20);
							padding: var(--20);
							position: absolute;
							bottom: 0;
							color: var(--text-light);
							z-index: 2;
						}

						.nav-panel-card-title {
							font-size: 1.20rem;
							letter-spacing: -2%;
							font-family: var(--font-sans);
							line-height: 110%;
						}

						.nav-panel-card-status {
							flex: 0 0 auto;
							font-family: var(--font-mono);
							font-size: 0.5rem;
							line-height: 1rem;
							text-transform: uppercase;
							border: 1px solid currentcolor;
							padding: 2px 5px;
							border-radius: var(--radius-small);
							color: inherit;
						}
					}
				}
			}
		}

		@media (max-width: 991.98px) {
			position: fixed;
			top: 0;
			right: 0;
			height: 100dvh;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: end;
			background: var(--background-dark);
			transform: translateX(100%);
			transition: 600ms cubic-bezier(0.19, 1, 0.22, 1);

			#header.menu-open & {
				transform: translateX(0);
			}

			ul#primary-menu {
				flex-direction: column;
				background: var(--background-dark);
				width: 100%;
				padding: var(--80) var(--external-padding);
				gap: var(--30);
				font-family: var(--font-sans);
				line-height: 80%;
				font-weight: var(--font-regular);
				font-size: clamp(2.5rem, 3.125vw, 3.75rem);
				letter-spacing: calc(clamp(2.5rem, 3.125vw, 3.75rem) * -0.05);

				& > li {
					& > a {
						color: currentcolor;
						padding: 0;
						border: 1px solid transparent;
						border-radius: none;
						transition: 600ms cubic-bezier(0.19, 1, 0.22, 1);
						display: inline-flex;
						align-items: center;

						&:hover {
							border: 1px solid transparent;
							padding: 0;
						}

						&:active {
							border: 1px solid transparent;
							background: transparent;
						}

						.current-menu-item & {
							background: transparent;
							border: 1px solid transparent;
							color: inherit;
							font-weight: var(--font-semibold);
						}

						#header.scrolled &:hover {
							border: 1px solid transparent;
						}

						#header.scrolled &:active {
							border: 1px solid transparent;
							background: transparent;
							color: var(--text-light);
						}

						#header.menu-open & {
							color: var(--text-light);
						}

						ul#primary-menu > li:last-of-type > & {
							background: transparent;
							border: 1px solid transparent;
							color: var(--text-light);
						}
					}
				}
			}

			.nav-panel-item {
				width: 100%;
				padding: 0;

				.nav-panel-toggle {
					font-family: var(--font-sans);
					font-size: 2.5rem;
					line-height: 80%;
					text-transform: uppercase;
					color: var(--text-light);
					padding: 0;
					border: 1px solid transparent;
					border-radius: 0;

					&:hover,
					&:active,
					&[aria-expanded="true"] {
						border: 1px solid transparent;
						background: transparent;
						color: var(--text-light);
					}
				}
			}

			.nav-panel {
				inset: 0;
				width: 100%;
				height: calc(100dvh - var(--header-height));
				border-radius: 0;
				box-shadow: none;
				background: var(--background-dark);
				color: var(--text-light);
				opacity: 1;
				pointer-events: auto;
				transform: translate(100%, var(--header-height));

				#header.nav-panel-open & {
					transform: translate(0, var(--header-height));
				}

				.nav-panel-inner {
					min-height: 100%;
					padding: var(--40) var(--external-padding);
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
				}

				.nav-panel-back {
					position: relative;
					display: inline-flex;
					align-items: center;
					margin-bottom: var(--30);
					gap: var(--10);
					padding: 0;
					border: none;
					background: transparent;
					color: currentcolor;
					font-family: var(--font-mono);
					font-size: 0.889rem;
					line-height: 1rem;
					text-transform: uppercase;
				}

				.nav-panel-title {
					color: var(--mono-300);
				}

				.nav-panel-grid {
					gap: var(--20);
					grid-template-columns: 1fr;
				}

				.nav-panel-card {
					min-height: auto;
					background: transparent;
					color: var(--text-light);
					border-color: rgba(255, 255, 255, 0.2);

					&[aria-current="page"] {
						background: rgba(255, 255, 255, 0.08);
						border-color: var(--text-light);
					}

					.nav-panel-card-content {
						padding: var(--20);
					}

					.nav-panel-card-title {
						font-size: 2rem;
						line-height: 90%;
					}

					.nav-panel-card-status {
						text-transform: uppercase;
						color: var(--text-light);
					}
				}
			}
		}
	}
}

/* BREADCRUMB */

.rank-math-breadcrumb {
	color: var(--text-light);
	a {
		color: currentcolor;
		text-decoration: none;
		transition: 300ms;
		text-underline-offset: 3px;

		&:hover {
			text-decoration: underline;
		}
	}
}

/* CONTENUTI PAGINE */

div[id*="page-"] {
	position: relative;
	transition: 600ms cubic-bezier(0.19, 1, 0.22, 1);

	.menu-open & {
		filter: blur(5px);
		transform: translateX(-20vw);
		opacity: 0;
	}
}

.marquee-wrapper {
  width: 100%;
  overflow: hidden;
  white-space: nowrap; 
  display: flex;
}

.marquee-content {
  display: flex;
  gap: var(--20);
  padding-right: var(--20); 
  animation: scroll-marquee 15s linear infinite;
  will-change: transform;
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--text-light);
}

@keyframes scroll-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); 
  }
}

#background-manifesto-video,
#background-manifesto-image {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	object-fit: cover;
	object-position: center;
	z-index: -1;
	border-radius: var(--radius-medium) var(--radius-medium) 0 0;
}

.manifesto-content {
	position: relative;
	z-index: 1;
	margin-top: -100vh;
}

.single-service {
	position: sticky;
	top: 0;
	min-height: 100vh;
	padding-top: var(--160);
	padding-bottom: var(--160);
	border-radius: var(--radius-large);
	background: var(--mono-900);

	.service-video-showreel {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		position: relative;
	}

	.video-container {
		position: relative;
		width: 100%;
		height: 100%;

		.vre & {
			--filter-color: var(--vre-500);
		}

		.dda & {
			--filter-color: var(--dda-500);
		}

		.nvr & {
			--filter-color: var(--nvr-500);
		}

		&::before {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background-color: var(--filter-color);
			border-radius: var(--radius-x-small);
			z-index: 2;
			mix-blend-mode: multiply;
		}
	}

	@media (max-width: 991.98px) {
		position: relative;
		padding-top: var(--100);
		padding-bottom: var(--200);
	}
}

.single-project-hero {
	position: relative;
	width: 100%;
	height: 100svh;
	overflow: hidden;

	.video-container,
	.image-container {
		position: absolute;
		inset: 0;
		object-fit: cover;
		object-position: center;
		z-index: -1;

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			background: linear-gradient(
				var(--background-dark),
				transparent,
				var(--background-dark)
			);
			opacity: 0.5;
		}

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

	.infos-container {
		position: relative;
		width: 100%;
		height: 100%;
		padding-top: calc(var(--header-height) + var(--30));
		padding-bottom: var(--80);
	}
}

/*
 * Scroll effects dichiarativi. L'overlay evita di trasformare intere sezioni
 * che contengono elementi position: sticky.
 */
section.parallax[data-parallax="fade"],
aside.parallax[data-parallax="fade"] {
	position: relative;
	isolation: isolate;
}

section.parallax[data-parallax="fade"]::after,
aside.parallax[data-parallax="fade"]::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 10;
	border-radius: inherit;
	background: var(--parallax-overlay-color, var(--background-dark));
	opacity: var(--parallax-overlay-opacity, 0);
	pointer-events: none;
	will-change: opacity;
}

[data-parallax="media"] {
	overflow: hidden;
}

[data-parallax-media] {
	will-change: transform;
}

#project-intro {
	position: relative;

	.intro-list {
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--20);

		.intro-list-item {
			display: inline-flex;
			flex-direction: row;
			align-items: start;
			gap: var(--20);

			.marker {
				flex-shrink: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				height: calc(clamp(1.111rem, 1.463vw, 1.667rem) * 1.2);
			}

			.text {
				flex-grow: 1;
			}
		}
	}

	.solutions-wrapper {
		position: sticky;
		top: calc(var(--header-height-scrolled) + var(--external-padding));
	}
}

#project-contents {
	position: relative;

	.project-contents-image {
		width: 100%;
		border-radius: var(--radius-x-small);
		overflow: hidden;

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

	.project-contents-video {
		width: 100%;
		height: 100%;

		&.embed {
			aspect-ratio: 16 / 9;
			position: relative;

			iframe {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
			}
		}
	}

	.project-contents-text {
		h2,
		h3,
		h4,
		h5,
		h6 {
			margin-bottom: var(--40);
		}

		p {
			margin-bottom: 0;

			&.section-title {
				margin-bottom: var(--40);
			}
		}
	}
}

.highlight-item {
	position: sticky;
	top: calc(var(--header-height-scrolled) + var(--external-padding));
	transition: 600ms cubic-bezier(0.19, 1, 0.22, 1);

	.scrolled & {
		top: var(--external-padding);
	}

	.highlight-card {
		position: relative;
		padding: var(--40);
		border-radius: var(--radius-x-small);
		color: var(--text-light);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100%;
		min-height: calc(100vh - var(--header-height-scrolled) - var(--external-padding) - var(--external-padding));
		overflow: hidden;
		
		&.vre {
			--filter-color: var(--vre-500);
		}

		&.dda {
			--filter-color: var(--dda-500);
		}

		&.nvr {
			--filter-color: var(--nvr-500);
		}

		.scrolled & {
			min-height: calc(100vh - var(--external-padding) - var(--external-padding));
		}

		&::before {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background-color: var(--filter-color);
			border-radius: var(--radius-x-small);
			z-index: 2;
			mix-blend-mode: multiply;
		}

		.highlight-card-link {
			display: block;
			text-decoration: none;
			color: currentcolor;
			position: absolute;
			inset: 0;
			z-index: 0;

			.video-container {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}

			img,
			video {
				border-radius: var(--radius-x-small);
				width: 100%;
				height: 100%;
				display: block;
				object-fit: cover;
				object-position: center;
				transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1);

				.highlight-card:hover & {
					transform: scale(1.05);
				}
			}
		}

		h3 {
			position: relative;
			z-index: 2;
		}

		.highlight-card-infos {
			z-index: 2;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			gap: var(--20);
		}
	}

	@media (max-width: 991.98px) {
		position: relative;
		top: 0;

		.highlight-card {
			position: relative;
			gap: var(--40);
			min-height: unset;
			aspect-ratio: 3 / 4;

			.video-container {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}

			.highlight-card-infos {
				flex-direction: column;
				align-items: flex-start;
				gap: var(--20);
			}
		}
	}
}

.project-item {
	position: relative;
	overflow: hidden;

	.project-card {
		display: block;
		width: 100%;

		a {
			text-decoration: none;
		}

		.project-image-wrapper {
			width: 100%;
			height: 100%;
			overflow: hidden;
			border-radius: var(--radius-x-small);

			img {
				width: 100%;
				height: 100%;
				display: block;
				object-fit: cover;
				object-position: center;
				transition: transform 0.3s ease;
				overflow: hidden;
			}

			&:hover img {
				transform: scale(1.05);
			}
		}
	}
}

#horizontal-space-holder {
	position: relative;

	.items-wrapper {
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: sticky;
		top: 0;

		.items-container {
			width: fit-content;
			height: 100vh;
			display: flex;
			align-items: center;
			gap: var(--40);
			padding: calc(
					var(--header-height-scrolled) + var(--external-padding)
				)
				var(--external-padding) var(--external-padding)
				var(--external-padding);

			&.ms-50vw {
				padding-left: 50vw;
			}

			.card {
				min-width: calc(100vw / 3);
				max-width: calc(100vw - (var(--external-padding) * 2));
				height: 100%;
				max-height: clamp(37.5rem, 47.917vw, 57.5rem);
			}
		}
	}
}

#video-container {
	position: sticky;
	top: calc(var(--header-height) + var(--external-padding));
	left: 0;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-x-small);
	overflow: hidden;
	background: var(--mono-900);

	.video-wrapper {
		opacity: 0;
		transition: opacity 0.5s ease-in-out;
		position: absolute;
		top: 0;
		left: -50%;
		transform: translateX(50%);
		width: 100%;
		height: 100%;

		&.active {
			opacity: 1;
		}

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

#list-container {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	transition: 500ms;

	.list-item {
		list-style: none;
		margin: 0;

		.term-link {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			text-decoration: none;
			color: inherit;
			padding: var(--40) 0;
			border-bottom: 1px solid var(--mono-600);

			.icon {
				width: calc(1.25rem + (var(--15) * 2));
				height: calc(1.25rem + (var(--15) * 2));
				aspect-ratio: 1 / 1;
				align-self: stretch;
				position: relative;
				z-index: 2;
				font-size: 1.25rem;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 7px;
				border: 1px solid currentcolor;
				color: currentcolor;
				transition: inherit;
				visibility: hidden;
				opacity: 0;

				.term-link.active &,
				.term-link:hover &,
				.term-link:focus-visible & {
					visibility: visible;
					opacity: 1;
				}
			}
		}
	}
}

/* FOOTER */

footer {
	background-color: var(--background-carbon);
	color: var(--text-light);
	position: relative;
	padding-top: var(--120);
	padding-bottom: var(--80);
	display: flex;
	align-items: stretch;

	&.full-vw {
		min-height: calc(100vh + var(--40));
		padding-top: calc(var(--header-height-scrolled) + var(--120));
	}

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--mono-900);
		opacity: 0.5;
		z-index: 1;
	}

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--accent);
		mix-blend-mode: multiply;
	}

	.background-visual {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		z-index: 0;
	}

	.container-fluid {
		position: relative;
		z-index: 2;
	}

	ul {
		margin: 0;
		padding: 0;
		list-style: none;

		& li {
			margin-bottom: 0;
		}
	}

	a {
		color: currentcolor;
		text-decoration: none;
		transition: 300ms;
		text-underline-offset: 3px;

		&:hover {
			text-decoration: underline;
		}
	}

	.footer-logo {
		width: calc(0.75 * clamp(6.25rem, 10.208vw, 9.188rem));
		height: auto;
	}

	.footer-certification-image {
		width: 100%;
		max-width: 240px;
		height: auto;
	}
}

.otgs-development-site-front-end {
	display: none !important;
}

.partner,
.client {
	position: relative;
	overflow: hidden;

	.partner-logo,
	.client-logo {
		height: clamp(8.25rem, 50%, 12.5rem);
		width: clamp(8.25rem, 50%, 12.5rem);
		object-fit: contain;
		object-position: center;
		transform: scale(var(--image-size, 100%));
		filter: grayscale(100%);

		.black-bg &,
		.bg-black & {
			filter: brightness(0) invert(1) !important;
			-webkit-filter: brightness(0) invert(1) !important;
		}
	}

	.partner-infos,
	.client-infos {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		color: var(--text-light);
		padding: var(--40);
		border-radius: var(--radius-small);
		clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
		visibility: hidden;
		scale: 1.2;

		.hovered & {
			animation: showInfos 0.8s forwards cubic-bezier(0.83, 0, 0.17, 1);
		}

		.leaved & {
			animation: hideInfos 0.8s forwards cubic-bezier(0.83, 0, 0.17, 1);
		}
	}
}

.partner {
	cursor: pointer;
}

@keyframes showInfos {
	100% {
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		visibility: visible;
		scale: 1;
	}
}

@keyframes hideInfos {
	0% {
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		visibility: visible;
		scale: 1;
	}
	100% {
		clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
		visibility: hidden;
		scale: 1;
	}
}

.position-item {
	position: sticky;
	top: calc(var(--header-height-scrolled) + var(--external-padding));

	.position-card {
		position: relative;
		padding: var(--80);
		border-radius: var(--radius-small);
		background: #fff;
		color: var(--text-dark);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		width: 100%;
		min-height: calc(
			100vh - var(--header-height-scrolled) - var(--external-padding) -
				var(--external-padding)
		);
		gap: var(--40);

		.position-card-role {
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: var(--40);
			z-index: 2;
		}

		.position-card-desc {
			flex: 1;
			position: relative;
			z-index: 2;
		}
	}

	@media (max-width: 991.98px) {
		position: relative;
		top: 0;

		.position-card {
			flex-direction: column;
			align-items: stretch;
			min-height: auto;
			padding: var(--40);
			gap: 0;

			.position-card-role {
				align-items: flex-start;
			}
		}
	}
}

.marquee-container {
	overflow: hidden;
	width: 100%;
	height: 100%;
	mask-image: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 1) 30%,
		rgba(0, 0, 0, 1) 70%,
		rgba(0, 0, 0, 0) 100%
	);
}

.marquee-content {
	display: flex;
	height: 100%;
	align-items: center;
	width: max-content;
	will-change: transform;
}

.marquee-group {
	display: flex;
	align-items: center;
	gap: var(--40);
	flex-shrink: 0;
	padding-right: var(--40);
}

.client-logo-scroll {
	flex-shrink: 0;

	& img {
		max-width: clamp(5rem, 7.813vw, 8.333rem); /* 90px - 150px */
		max-height: clamp(5rem, 7.813vw, 8.333rem); /* 90px - 150px */
		transform: scale(var(--image-size, 100%));

		.black-bg &,
		.bg-black & {
			filter: brightness(0) invert(1) !important;
			-webkit-filter: brightness(0) invert(1) !important;
		}
	}
}

.policy-text {
	position: relative;

	ul {
		margin: 0;
	}

	p + h2,
	p + h3,
	ul + h2,
	ul + h3 {
		margin-top: var(--80);
	}
}