/*=====
Theme Name: Pánico
Author: Pedro Gris
Author URI: https://pedrogris.com/
Description: A custom WordPress theme developed with ♥ by Pedro Gris, specifically designed for the Pánico website. All rights reserved. This theme is not intended for redistribution, modification, or resale.
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.6.1
Requires PHP: 7.0
License: Proprietary - All Rights Reserved
License URI: https://pedrogris.com/
Text Domain: panico
Tags: custom, modern, responsive, SEO-friendly, accessible
=======*/

/* FONT */
@font-face {
	font-family: 'Monument Extended';
	src: url('/wp-content/themes/panico/assets/fonts/MonumentExtended-Bold.woff2') format('woff2'),
	url('/wp-content/themes/panico/assets/fonts/MonumentExtended-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Monument Extended';
	src: url('/wp-content/themes/panico/assets/fonts/MonumentExtended-Black.woff2') format('woff2'),
	url('/wp-content/themes/panico/assets/fonts/MonumentExtended-Black.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Input Sans';
	src: url('/wp-content/themes/panico/assets/fonts/InputSans-Regular.woff2') format('woff2'),
	url('/wp-content/themes/panico/assets/fonts/InputSans-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Input Sans';
	src: url('/wp-content/themes/panico/assets/fonts/InputSans-Medium.woff2') format('woff2'),
	url('/wp-content/themes/panico/assets/fonts/InputSans-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	src: url('/wp-content/themes/panico/assets/fonts/AcuminVariableConcept.woff2') format('woff2-variations');
	font-family:'Acumin Variable Pro';
	font-style: normal;
}

/* BASIC */

:root {
	@media (prefers-reduced-motion: no-preference) {
		interpolate-size: allow-keywords;
	}
	--black: #000;
	--white: #FCFCFB;
	--yellow: #FFC214;
	--red: #FF1A1F;
	--blue: #09399E;
	--light-blue: #E5F2F8;
	--light-blue-transparent: rgba(229, 242, 248, 0.9);
	--green: #035C41;
	--nav-wordmark-w: min(33vw, 190px);
	--cubic-bezier: cubic-bezier(0.25, 1, 0.5, 1);
	--cubic-bezier-bounce: cubic-bezier(0.4, 0, 0.2, 1.5);
}

::-moz-selection {
	color: var(--white);
	background: var(--black);
}
  
::selection {
	color: var(--white);
	background: var(--black);
}

.nojq  {
	display: none;
}

* {
	/* Designer mode */
	/* outline: 1px solid blue; */
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

html {
	scrollbar-gutter: stable;
	interpolate-size: allow-keywords;
}

html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

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

html {
	overflow-x: hidden;
	overflow-anchor: none;
}

body {
	overflow-x: clip;
	overflow-anchor: none;
}

body {
	width: 100%;
	height: 100%;
	font-family: 'Monument Extended', sans-serif;
	color: var(--black);
	background-color: var(--white);
	font-size: 14px;
	font-weight: 400;
	margin: 0;
	padding: 0;
	min-block-size: 100svh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 700;
}

h1 {
	font-size: 78.54px;
}

h2 {
	font-size: 58.92px;
}

h3 {  
	font-size: 44.2px;  
}

h4 {  
	font-size: 33.16px;  
}

h5 {  
	font-size: 24.88px;  
}

h6 {  
	font-size: 18.66px;  
}

p {
	font-size: 14px;
}

a {
	text-decoration: none;
	color: var(--black);
}

b {
	font-weight: 700;
}

.placeholder {
	height: 150svh;
}

nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin-inline: auto;
	box-sizing: border-box;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 20px 55px;
	border-radius: 0px;
	background-color: var(--light-blue-transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: background-color 0.5s var(--cubic-bezier);
	z-index: 1000;

	.logo {
		display: block;
		width: 70px;
		height: 70px;

		svg {
			display: block;
			width: 100%;
			height: 100%;
		}
	}

	.main-nav {
		display: flex;
		flex-direction: row;
		gap: 30px;

		.menu-item {
			position: relative;
			width: fit-content;
			height: fit-content;
			font-size: 20px;
			font-weight: 700;
			line-height: 100%;
			letter-spacing: 5%;
			text-transform: uppercase;
			display: grid;
			grid-template-columns: minmax(0, 1fr);
			grid-template-rows: minmax(0, 1fr);
			box-sizing: border-box;
			overflow: hidden;
			--bw: 2.5px;

			&::after {
				content: '';
				position: absolute;
				inset: 0;
				border-radius: inherit;
				box-shadow: inset 0 0 0 var(--bw) var(--bc, transparent);
				pointer-events: none;
				z-index: 2;
				transition: box-shadow 0.5s var(--cubic-bezier);
			}

			.face {
				grid-area: 1 / 1;
				display: inline-flex;
				align-items: center;
				box-sizing: border-box;
				min-width: 0;
				min-height: 0;
				padding: 11px 12px 9px;
				transition: transform 0.5s var(--cubic-bezier);
			}

			.face:nth-of-type(2) {
				transform: translateY(100%);
			}

			@media (width < 900px) {
				font-size: 18px;

				&:active {
					.face {
						transition: none;
					}

					.face:nth-of-type(1) {
						transform: translateY(-100%);
					}

					.face:nth-of-type(2) {
						transform: translateY(0);
					}
				}
			}

			.text,
			.text-mobile {
				display: inline-block;
				white-space: nowrap;
				overflow: hidden;
				transition: opacity 0.35s var(--cubic-bezier);
			}

			.text {
				width: auto;
				opacity: 1;
				text-align: right;
				transform-origin: right center;
			}

			.text-mobile {
				width: 0;
				opacity: 0;
				text-align: left;
				transform-origin: left center;
			}

			&.yellow {
				--bc: var(--green);
				background-color: var(--yellow);

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

				.face:nth-of-type(2) {
					background-color: var(--green);
					color: var(--yellow);
				}
			}

			&.whitered {
				--bc: var(--red);
				background-color: var(--white);

				.face {
					background-color: var(--white);
					color: var(--red);
				}

				.face:nth-of-type(2) {
					background-color: var(--red);
					color: var(--white);
				}
			}

			&.blue {
				--bc: var(--blue);
				background-color: var(--blue);

				.face {
					background-color: var(--blue);
					color: var(--white);
					padding: 8px 30px 15px 8px;
				}

				.face:nth-of-type(2) {
					background-color: var(--white);
					color: var(--blue);
				}

				.text {
					white-space: normal;
					width: min-content;
					text-align: left;
				}
			}

			&.red {
				--bc: var(--red);
				background-color: var(--red);

				.face {
					background-color: var(--red);
					color: var(--white);
				}

				.face:nth-of-type(2) {
					background-color: var(--white);
					color: var(--red);
				}
			}

			&:is(:hover, :active, :focus-visible) {
				.face:nth-of-type(1) {
					transform: translateY(-100%);
				}

				.face:nth-of-type(2) {
					transform: translateY(0);
				}
			}
		}

		@media (width < 900px) {
			gap: 8px;
		}
	}

	.mobile-toggle {
		display: none;
	}

	@media (min-width: 900px) {
		&.scrolled {
			top: 20px;
			gap: 14px;
			width: fit-content;
			padding: 18px 20px;
			border-radius: 100px;
			justify-content: flex-start;

			> a,
			.main-nav {
				flex: none;
			}

			.logo {
				width: 45px;
				height: 45px;
			}

			.main-nav {
				gap: 14px;
				align-items: center;

				.menu-item {
					flex: none;
					width: 45px;
					height: 45px;
					--bw: 2px;
					border-radius: 30px;

					.face {
						padding: 0;
						position: relative;
						transition: transform 0.5s var(--cubic-bezier), padding 0s 0.1s;
					}

					.text {
						width: 0;
						opacity: 0;
						padding-top: 2px;
						transition: opacity 0.15s var(--cubic-bezier), width 0s 0.1s;
					}

					.text-mobile {
						position: absolute;
						inset: 0;
						width: auto;
						opacity: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						padding-top: 2px;
						transition: opacity 0.2s var(--cubic-bezier);
					}

					&.expand {
						width: fit-content;
						height: 45px;
						--bw: 3px;
						border-radius: 0;

						.face {
							padding: 11px 12px 9px;
							transition: transform 0.5s var(--cubic-bezier);
						}

						.text {
							width: auto;
							opacity: 1;
							transition: opacity 0.35s var(--cubic-bezier);
						}

						.text-mobile {
							width: auto;
							opacity: 0;
							transition: opacity 0.1s var(--cubic-bezier);
						}
					}

					&.blue.expand {
						height: fit-content;

						.face {
							padding: 8px 30px 15px 8px;
						}

						.text {
							width: min-content;
						}
					}
				}
			}
		}
	}

	@media (width < 900px) {
		& {
			top: 0;
			left: 0;
			right: 0;
			width: auto;
			margin-inline: 0;
			padding: 20px;
			border-radius: 0;
			/* Geometria de la pastilla colapsada: el JS la lee para calcular --pill-w */
			--pill-pad: 9px;
			--pill-pad-right: 12px;
			--pill-gap: 14px;
			--logo-size: 46px;
			gap: var(--pill-gap);
			/* El contenido se coloca ya en formacion de pastilla: el reparto a lo ancho
			   lo da el translate del logo, asi acompana al fondo en el mismo timing */
			justify-content: flex-start;
			transition: left 0.5s var(--cubic-bezier), right 0.5s var(--cubic-bezier),
				padding 0.5s var(--cubic-bezier), border-radius 0.5s var(--cubic-bezier),
				translate 0.5s var(--cubic-bezier), background-color 0.5s var(--cubic-bezier);

			> a,
			.mobile-toggle {
				flex: none;
			}

			/* Sin scroll el logo queda equidistante entre el toggle y el logotipo de texto */
			> a {
				translate: calc((100vw - 40px - var(--toggle-w, 97px) - var(--logo-size) - var(--nav-wordmark-w)) / 2 - var(--pill-gap)) 0;
				transition: translate 0.5s var(--cubic-bezier);
			}

			.logo {
				width: var(--logo-size);
				height: var(--logo-size);
			}

			/* Al hacer scroll la barra se cierra sobre el toggle y el logo (--pill-w lo mide el JS) */
			&.scrolled {
				left: 20px;
				right: calc(100% - 20px - var(--pill-w, 180px));
				translate: 0 20px;
				padding: var(--pill-pad) var(--pill-pad-right) var(--pill-pad) var(--pill-pad);
				border-radius: 12px 50px 50px 12px;

				> a {
					translate: 0 0;
				}
			}

			.main-nav {
				flex-direction: column;
                gap: 10px;
                position: absolute;
                left: 0;
                top: calc(100% + 10px);
                padding: 20px;
                visibility: hidden;
                opacity: 0;
                background: var(--light-blue-transparent);
				backdrop-filter: blur(10px);
                border-radius: 13px;
			}

			.mobile-toggle {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 5px;
				padding: 9px;
				border: 2px solid var(--blue);
				background-color: var(--white);
				border-radius: 5px;
				cursor: pointer;

				.toggle-text {
					font-family: 'Input Sans', sans-serif;
					font-weight: 500;
					font-size: 13px;
					display: grid;
					grid-template-columns: 1;
					width: fit-content;
					height: fit-content;
					overflow: hidden;
					color: var(--blue);
					transition: width .3s var(--cubic-bezier);

					.menu,
					.close {
						text-transform: uppercase;
						white-space: nowrap;
						grid-column: 1;
						grid-row: 1;
						transition: transform .3s var(--cubic-bezier);
					}

					.menu {
						transform: translateY(10%);
					}

					.close {
						transform: translateY(110%);
					}
				}

				/* --icon-w: ancho destino del icono, el JS lo usa para medir la pastilla
				   sin esperar a la transition */
				--icon-w: 28px;

				.toggle-icon {
					display: flex;
					flex-direction: column;
					gap: 4px;

					span {
						height: 2.5px;
                        width: var(--icon-w);
						transition: transform .3s var(--cubic-bezier), width .3s var(--cubic-bezier);

						&:nth-of-type(1) {
							background-color: var(--blue);
						}

						&:nth-of-type(2) {
							background-color: var(--red);
						}

						&:nth-of-type(3) {
							background-color: var(--green);
						}
					}
				}
			}

			&.open {
				.mobile-toggle {
					--icon-w: 24px;

					.toggle-text {
						.menu {
							transform: translateY(-110%);
						}

						.close {
							transform: translateY(10%);
						}
					}

					.toggle-icon {
						span {
							&:nth-of-type(1) {
								transform: translateY(calc(100% + 4px)) rotate(45deg);
							}

							&:nth-of-type(2) {
								width: 0;
							}

							&:nth-of-type(3) {
								transform: translateY(calc(-100% - 4px)) rotate(-45deg);
								background-color: var(--blue);
							}
						}
					}
				}
			}
		}
	}
}

/* Logotipo de texto del header: solo movil. Va fijo al viewport y fuera del nav,
   asi la barra al contraerse no le arrastra en horizontal: solo baja y sube con
   el scroll de la pagina (--nav-scroll). 43px = centro del logo sin scroll */
.nav-wordmark {
	display: none;
	position: fixed;
	top: 43px;
	right: 20px;
	width: var(--nav-wordmark-w);
	z-index: 1001;
	translate: 0 calc(-50% + var(--nav-scroll, 0px));

	svg {
		display: block;
		width: 100%;
		height: auto;
	}

	path {
		fill: var(--blue);
	}

	@media (width < 900px) {
		display: block;
	}
}

nav.scrolled + .nav-wordmark {
	visibility: hidden;
}

.blur-overlay {
	position: fixed;
	inset: 0;
	opacity: 0;
	background-color: rgba(0, 12, 52, 0.52);
	pointer-events: none;
	z-index: 999;
	transition: opacity 0.6s var(--cubic-bezier);

	&.active {
		opacity: 1;
		pointer-events: auto;
	}
}

.mute-unmute-toggle {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 10px;
	box-shadow: inset 0 0 0 3.5px var(--blue, transparent);
	color: var(--blue);
	background-color: var(--white);
	font-family: 'Input Sans', sans-serif;
	z-index: 10;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	will-change: transform;
	--theme-color: var(--blue);
	transition: color 0.2s var(--cubic-bezier),
		box-shadow 0.2s var(--cubic-bezier);

	.toggle-text {
		display: grid;
		grid-template-columns: 1;
		justify-items: start;
		width: fit-content;
		height: fit-content;
		overflow: hidden;
		transition: width .3s var(--cubic-bezier);

		.unmute,
		.mute {
			text-transform: uppercase;
			white-space: nowrap;
			grid-column: 1;
			grid-row: 1;
			transition: transform .3s var(--cubic-bezier);
		}

		.unmute {
			transform: translateY(10%);
		}

		.mute {
			transform: translateY(110%);
		}
	}

	&.sound-on {
		.toggle-text {
			.unmute {
				transform: translateY(-110%);
			}

			.mute {
				transform: translateY(10%);
			}
		}
	}

	@media (width < 900px) {
		& {
			position: absolute;
			top: auto;
			left: auto;
			bottom: 0;
			right: 0;
			opacity: 1;
			visibility: visible;
			transform-origin: center center;
			pointer-events: auto;
			cursor: pointer;
			padding: 10px;
			box-shadow: none;
			background-color: transparent;
			color: var(--theme-color);

			svg {
				width: 22px;
				height: 22px;

				path {
					stroke: var(--theme-color);
					transition: stroke 0.2s var(--cubic-bezier);
				}

				circle {
					fill: var(--red);
					transition: fill 0.2s var(--cubic-bezier);
				}
			}
		}
	}
}

/* INDICADOR DE CARGA DE VIDEO */

.video-loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: var(--red);
	pointer-events: none;
	opacity: 0;
	z-index: 3;
	transition: opacity 0.4s var(--cubic-bezier);

	&.is-visible {
		opacity: 1;
	}

	svg {
		width: 100%;
		height: 100%;
		overflow: visible;
	}

	rect,
	circle {
		transform-box: fill-box;
		transform-origin: center;
	}

	rect {
		stroke: currentColor;
		animation: video-loader-spin 2s var(--cubic-bezier) infinite;
	}

	circle {
		fill: currentColor;
		animation: video-loader-pulse 1s var(--cubic-bezier) infinite alternate;
	}

	@media (width < 900px) {
		& {
			width: 26px;
			height: 26px;
		}
	}
}

@keyframes video-loader-spin {
	0%, 5% { transform: rotate(0deg); }
	20%, 30% { transform: rotate(90deg); }
	45%, 55% { transform: rotate(180deg); }
	70%, 80% { transform: rotate(270deg); }
	95%, 100% { transform: rotate(360deg); }
}

@keyframes video-loader-pulse {
	from { transform: scale(1); }
	to { transform: scale(0.35); }
}

@media (prefers-reduced-motion: reduce) {
	.video-loader rect,
	.video-loader circle {
		animation: none;
	}
}

img {
	display: block;
	width: 100%;
	height: auto;
}

.banner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 20px;
	align-content: center;
	align-items: stretch;
	width: calc(100% - 110px);
	min-height: calc(100svh - 110px - 111px);
	padding: 55px;
	margin-top: 111px;
	position: relative;
	overflow: hidden;
	color: var(--blue);

	video {
		width: 100%;
		aspect-ratio: 19 / 12;
		object-fit: cover;
		max-height: calc(100svh - 222px);
	}

	.main-content {
		--theme-color: var(--blue);
		width: fit-content;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 5vw;
		color: var(--theme-color);
		font-family: 'Input Sans', sans-serif;
		z-index: 2;

		.banner-logo {
			display: block;
			width: 15vw;
			height: fit-content;
			overflow: visible;

			path {
				fill: var(--theme-color);
				transform: translateY(-11px);
			}
		}

		.horizontal-line {
			height: 3.5px;
			width: 8vw;
			background-color: var(--theme-color);
		}

		h1 {
			font-size: 17px;
			width: 20vw;
			text-wrap: balance;
			font-weight: 400;
		}

		.transversal-line {
			height: 3.5px;
			width: 25px;
			background-color: var(--theme-color);
			transform: rotate(-45deg);
			transform-origin: center;
		}

		h2 {
			font-size: 17px;
			width: 8vw;
			text-wrap: balance;
			text-transform: uppercase;
			font-weight: 400;
		}

		.order-toggle {
			display: block;
			width: 42px;
			height: 42px;
			cursor: pointer;
			transition: transform 0.5s;

			path {
				stroke: var(--blue);
			}
			circle {
				fill:  var(--blue);
				transition: fill .2s;
			}

			&:is(:hover, :active, :focus-visible) {
				circle {
					fill: var(--red);
				}
			}
		}
	}

	@media (width < 1500px) {
		& {
			grid-template-columns: repeat(1, 1fr);
			gap: 50px;

			.main-content {
				order: 2;
				flex-direction: row;
				align-items: center;
				width: 100%;
			}
			
			video {
				order: 1;
			}
		}
	}

	@media (width < 900px) {
		& {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: calc(100% - 40px);
			min-height: calc(100svh - 80px - 111px);
			padding: 40px 20px;
			gap: 40px;

			overflow: visible;

			.mute-unmute-toggle {
				order: 2;
				position: relative;
				inset: auto;
				align-self: flex-start;
				margin-top: -30px;
				padding: 10px 10px 10px 0px;
				z-index: 4;
			}

			.main-content {
				order: 3;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: space-between;
				gap: 12px;
				width: 100%;
				position: relative;

				.banner-logo,
				.horizontal-line,
				.order-toggle {
					display: none;
				}

				h1,
				h2 {
					width: auto;
					min-width: 0;
					font-size: 13px;
				}

				h1 {
					flex: 1 1 auto;
					max-width: 21ch;
				}

				.transversal-line {
					flex: 0 0 auto;
				}

				h2 {
					flex: 0 1 auto;
					max-width: 9ch;
				}

				.transversal-line {
					width: 18px;
					height: 18px;
					background-color: transparent;
					transform: rotate(-45deg);
					transform-origin: center;
					position: relative;

					&::before {
						content: '';
						position: absolute;
						inset: 0;
						margin: auto;
						width: 25px;
						height: 2px;
						background-color: var(--theme-color);
					}
				}
			}

			video {
				height: fit-content;
			}
		}
	}

	@media (width < 1100px) {
		& {
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 100%;
			height: calc(100svh - 70px);
			min-height: 0;
			margin-top: 70px;

			.main-content {
				flex: 0 0 auto;
			}
		}

		video {
			flex: 0 1 auto;
			width: 100%;
			height: auto;
			min-height: 0;
			aspect-ratio: 108 / 145;
			max-height: none;
			object-fit: cover;
			object-position: center;
		}
	}
}

/* cada path va en su propio svg apilado y gira sobre el eje Y de forma independiente */
.spin-y {
	display: inline-grid;
	line-height: 0;
	perspective: 2000px;

	.spin-part {
		grid-area: 1 / 1;
		display: block;
		line-height: 0;
		transform-origin: 50% 50%;
		backface-visibility: visible;
	}

	&.is-spinning .spin-part:nth-child(1) {
		animation: spin-y-part 1s cubic-bezier(.3,0,.7,1) both;
	}

	&.is-spinning .spin-part:nth-child(2) {
		animation: spin-y-part 0.5s cubic-bezier(.3,0,.7,1) 0.25s both;
	}
}

@keyframes spin-y-part {
	from {
		transform: rotateY(0deg);
	}

	to {
		transform: rotateY(360deg);
	}
}

.brand-statement {
	--theme-bg: var(--yellow);
	--theme-color: var(--green);
	--theme-btn-text: var(--green);
	--theme-logo: var(--white);
	display: flex;
	flex-direction: column;
	gap: 100px;
	background-color: var(--theme-bg);
	padding: 100px 55px;

	.text-content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		color: var(--theme-color);

		.tags {
			display: flex;
			flex-direction: column;

			.tag {
				font-size: clamp(45px, 8vw, 145px);
				line-height: 90%;
				letter-spacing: 0.3rem;
				text-transform: uppercase;
				display: block;
				overflow: hidden;
				padding: 0.08em 0 0.12em;
				margin: -0.08em 0 -0.12em;
			}

			.tag-inner {
				display: block;
			}
		}

		.small-text {
			font-family: 'Input Sans', sans-serif;
			text-align: right;
			font-size: clamp(20px, 3vw, 37px);
			overflow: hidden;
			padding: 0.08em 0 0.12em;
			margin: -0.08em 0 -0.12em;

			.small-text-inner {
				display: block;
			}
		}
	}

	.actionable {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		.button {
			--bc: var(--theme-color);
			--bw: 2.5px;
			position: relative;
			color: var(--theme-btn-text);
			background-color: var(--white);
			width: fit-content;
			height: fit-content;
			font-size: 24px;
			font-weight: 700;
			line-height: 100%;
			letter-spacing: 5%;
			text-transform: uppercase;
			display: grid;
			grid-template-columns: minmax(0, 1fr);
			grid-template-rows: minmax(0, 1fr);
			box-sizing: border-box;
			overflow: hidden;

			&::after {
				content: '';
				position: absolute;
				inset: 0;
				border-radius: inherit;
				box-shadow: inset 0 0 0 var(--bw) var(--bc, transparent);
				pointer-events: none;
				z-index: 2;
			}

			.face {
				grid-area: 1 / 1;
				display: inline-flex;
				align-items: center;
				box-sizing: border-box;
				min-width: 0;
				min-height: 0;
				padding: 11px 12px 9px;
				background-color: var(--white);
				color: var(--theme-btn-text);
				transition: transform 0.5s var(--cubic-bezier);
			}

			.face:nth-of-type(2) {
				transform: translateY(100%);
				background-color: var(--theme-color);
				color: var(--white);
			}

			&:is(:hover, :active, :focus-visible) {
				.face:nth-of-type(1) {
					transform: translateY(-100%);
				}

				.face:nth-of-type(2) {
					transform: translateY(0);
				}
			}
		}

		.transversal-line {
			height: 3.5px;
			width: 25px;
			background-color: var(--theme-color);
			transform: rotate(-45deg);
			transform-origin: center;
		}
	}

	@media (width < 900px) {
		& {
			gap: 60px;
			padding: 60px 20px;

			.text-content {
				flex-direction: column;
				gap: 40px;

				.tags {
					.tag {
						font-size: 11vw;
						font-weight: 900;
						letter-spacing: 0;
					}
				}

				.small-text {
					text-align: left;
				}
			}

			.actionable {
				flex-wrap: wrap;
				gap: 10px;

				.button {
					--bw: 2px;
					font-size: 14px;

					.face {
						font-weight: 900;
						padding: 8px 12px 6px;
					}
				}

				.transversal-line {
					height: 2px;
				}

				svg {
					width: 85px;
					height: fit-content;
				}
			}
		}
	}
}

.brand-statement-alt {
	display: flex;
	flex-direction: column;
	gap: 100px;
	background-color: var(--light-blue);
	padding: 100px 55px;

	.text-content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		color: var(--red);
	}

	.tags {
		display: flex;
		flex-direction: column;
		color: var(--red);
		transform: translateY(14px);

		.tag {
			font-size: clamp(45px, 8vw, 145px);
			line-height: 90%;
			letter-spacing: 0.3rem;
			text-transform: uppercase;
			display: block;
			overflow: hidden;
			padding: 0.08em 0 0.12em;
			margin: -0.08em 0 -0.12em;
		}

		.tag-inner {
			display: block;
		}
	}

	.small-text {
		font-family: 'Input Sans', sans-serif;
		text-align: right;
	}

	.actionable {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
	}

	.button {
		--bc: var(--red);
		--bw: 2.5px;
		position: relative;
		color: var(--red);
		background-color: var(--white);
		width: fit-content;
		height: fit-content;
		font-size: 24px;
		font-weight: 700;
		line-height: 100%;
		letter-spacing: 5%;
		text-transform: uppercase;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr);
		box-sizing: border-box;
		overflow: hidden;

		&::after {
			content: '';
			position: absolute;
			inset: 0;
			border-radius: inherit;
			box-shadow: inset 0 0 0 var(--bw) var(--bc, transparent);
			pointer-events: none;
			z-index: 2;
		}

		.face {
			grid-area: 1 / 1;
			display: inline-flex;
			align-items: center;
			box-sizing: border-box;
			min-width: 0;
			min-height: 0;
			padding: 11px 12px 9px;
			background-color: var(--white);
			color: var(--red);
			transition: transform 0.5s var(--cubic-bezier);
		}

		.face:nth-of-type(2) {
			transform: translateY(100%);
			background-color: var(--red);
			color: var(--white);
		}

		&:is(:hover, :active, :focus-visible) {
			.face:nth-of-type(1) {
				transform: translateY(-100%);
			}

			.face:nth-of-type(2) {
				transform: translateY(0);
			}
		}
	}

	.transversal-line {
		height: 3.5px;
		width: 25px;
		background-color: var(--red);
		transform: rotate(-45deg) translate(50%, -50%);
		transform-origin: center;
	}

	@media (width < 900px) {
		& {
			flex-direction: column-reverse;
			gap: 60px;
			padding: 60px 20px;

			.text-content {
				flex-direction: column;
				gap: 24px;

				.small-text {
					text-align: left;
				}
			}

			.button {
				--bw: 2px;
				font-size: 14px;

				.face {
					font-weight: 900;
					padding: 8px 12px 6px;
				}
			}

			.tags {
				.tag {
					font-size: 11vw;
					font-weight: 900;
					letter-spacing: -0.05rem;
				}
			}

			.actionable {
				align-items: center;
				flex-wrap: wrap;
				gap: 24px;

				.transversal-line {
					height: 2px;
					transform: rotate(-45deg);
				}

				svg {
					width: 85px;
					height: fit-content;
				}
			}
		}
	}
}

.projects {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 55px;

	.projects-row {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: 30px;
	}

	.project {
		width: 100%;
		grid-column: span 6;
		display: flex;
		flex-direction: column;
		gap: 40px;
		color: var(--black);

		&:last-of-type {
			align-items: flex-end
		}

		&.col-4 { grid-column: span 4; }
		&.col-5 { grid-column: span 5; }
		&.col-6 { grid-column: span 6; }
		&.col-7 { grid-column: span 7; }
		&.col-8 { grid-column: span 8; }

		.project-thumbnail {
			width: 100%;
			height: 38vw;
			overflow: hidden;
			border-radius: 15px;

			img, video {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: transform 0.6s var(--cubic-bezier);
			}
		}

		.project-info {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 40px;

			.project-title {
				font-family: 'Acumin Variable Pro', sans-serif;
				letter-spacing: -0.03em;
				font-size: clamp(17px, 1.8vw, 29.5px);
				line-height: 100%;
				text-transform: uppercase;
				transition: letter-spacing 0.6s var(--cubic-bezier);
			}

			.project-typology {
				list-style: none;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				gap: 6px;
				font-family: 'Input Sans', sans-serif;
				font-size: 15.5px;
				line-height: 120%;

				li {
					max-width: 10ch;
				}

				li:not(:last-child)::after {
					content: ',';
				}
			}
		}

		&:is(:hover, :active, :focus-visible) .project-thumbnail :is(img, video) {
			transform: scale(1.05);
		}

		&:is(:hover, :active, :focus-visible) .project-title {
			letter-spacing: 0.06em;
		}
	}

	@media (width < 900px) {
		& {
			gap: 20px;
			padding: 20px;

			.project {
				gap: 20px;
				height: 100%;
				
				.project-thumbnail {
					border-radius: 10px;
				}

				.project-info {
					.project-typology {
						display: none;
					}
				}

				&:not(:first-child) .project-info {
					justify-content: flex-end;

					.project-title {
						text-align: right;
					}
				}
			}

			.projects-row {
				gap: 15px;
			}
		}
	}
}

.more-info {
	width: 100%;
	height: auto;
	aspect-ratio: var(--fit-ar, auto);
	position: relative;
	overflow: hidden;

	.content {
		position: absolute;
		inset: 80px 55px;
		display: flex;
		flex-direction: column;
		gap: 20px;

		.text {
			font-family: 'Input Sans', sans-serif;
			text-wrap: balance;
			max-width: 200px;
			padding: 20px 20px 50px 20px;
			background-color: var(--white);
			color: var(--blue);
			box-shadow: inset 0 0 0 2.5px var(--blue, transparent);
			overflow: hidden;

			.text-inner {
				display: block;
				width: 200px;
				font-size: clamp(14px, 2vw, 20px);
			}
		}

		.button {
			--bw: 2.5px;
			--bc: var(--blue);
			position: relative;
			height: fit-content;
			font-size: 24px;
			font-weight: 700;
			line-height: 100%;
			letter-spacing: 5%;
			text-transform: uppercase;
			display: grid;
			grid-template-columns: minmax(min-content, 1fr);
			grid-template-rows: minmax(0, 1fr);
			box-sizing: border-box;
			overflow: hidden;
			background-color: var(--blue);
			color: var(--white);
			width: min-content;
			white-space: normal;
			text-align: left;

			&::after {
				content: '';
				position: absolute;
				inset: 0;
				border-radius: inherit;
				box-shadow: inset 0 0 0 var(--bw) var(--bc, transparent);
				pointer-events: none;
				z-index: 2;
			}

			.face {
				grid-area: 1 / 1;
				display: inline-flex;
				align-items: center;
				box-sizing: border-box;
				min-width: 0;
				min-height: 0;
				width: 100%;
				padding: 8px 30px 15px 8px;
				background-color: var(--blue);
				color: var(--white);
				transition: transform 0.5s var(--cubic-bezier);
			}

			.face:nth-of-type(2) {
				transform: translateY(100%);
				background-color: var(--white);
				color: var(--blue);
			}

			@media (width < 900px) {
				font-size: 14px;
			}

			&:is(:hover, :active, :focus-visible) {
				.face:nth-of-type(1) {
					transform: translateY(-100%);
				}

				.face:nth-of-type(2) {
					transform: translateY(0);
				}
			}
		}
	}

	img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		z-index: -1;
		will-change: transform;
	}

	@media (width < 900px) {
		& {
			display: flex;
			min-height: 420px;
			aspect-ratio: auto;
		}

		.content {
			position: static;
			inset: auto;
			flex: 1;
			gap: 10px;
			padding: 40px 20px;
			flex-direction: row;

			.text {
				align-self: flex-start;
				max-width: 135px;
				max-height: 100%;
				padding: 15px 15px 25px 15px;
				box-shadow: inset 0 0 0 1.5px var(--blue, transparent);

				.text-inner {
					width: 100%;
				}
			}
		}

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

.say-hi {
	display: flex;
	flex-direction: column;
	gap: 40px;
	background-color: var(--yellow);
	color: var(--red);
	padding: 100px 40px;
	--reveal-y: 0%;

	.wpcf7-not-valid-tip {
		display: none;
	}

	.message-preview > * {
		transform: translateY(var(--reveal-y));
	}

	.actionable {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 15px;
		overflow: hidden;

		h2 {
			text-transform: uppercase;
			font-size: clamp(40px, 5vw, 100px);
			line-height: 100%;
			cursor: pointer;
		}

		.text {
			font-family: 'Acumin Variable Pro', sans-serif;
			max-width: 30ch;

			p {
				display: inline;
				font-size: 18px;
			}

			a {
				color: var(--red);
				font-weight: 700;
				font-style: italic;
				overflow-wrap: anywhere;

				&:is(:hover, :active, :focus-visible) {
					text-decoration: underline;
				}
			}
		}
	}

	.message-preview {
		font-family: 'Acumin Variable Pro', sans-serif;
		font-weight: 700;
		font-size: clamp(20px, 2vw, 30px);
		overflow: hidden;

		&:empty {
			display: none;
		}
	}

	.wpcf7-form {
		--field-w: 100%;
	}

	.wpcf7-form > p {
		display: none;
		overflow: hidden;
		width: var(--field-w);
	}

	.wpcf7-form br {
		display: none;
	}

	&[data-step="message"] .wpcf7-form > p:has([data-name="your-message"]) {
		display: block;
	}

	&[data-step="name"] .wpcf7-form > p:has([data-name="your-name"]) {
		display: block;
	}

	&[data-step="email"] .wpcf7-form > p:has([data-name="your-email"]) {
		display: block;
	}

	.wpcf7-form > p:has(> .wpcf7-submit),
	.wpcf7-response-output,
	.wpcf7-spinner {
		display: none;
	}

	.sent-message {
		display: none;
		text-transform: uppercase;
		font-size: clamp(30px, 5vw, 100px);
	}

	.reset-form {
		display: none;
		align-self: flex-start;
		margin-bottom: -20px;
		padding: 0;
		background: none;
		border: none;
		font-family: 'Acumin Variable Pro', sans-serif;
		font-weight: 700;
		font-size: clamp(14px, 1.2vw, 18px);
		text-transform: uppercase;
		color: var(--red);
		text-decoration: underline;
		text-underline-offset: 4px;
		cursor: pointer;
		transition: letter-spacing 0.2s ease;

		&:is(:hover, :active, :focus-visible) {
			letter-spacing: 2px;
		}
	}

	&[data-has-content="true"] .reset-form {
		display: block;
	}

	.field-error {
		display: none;
		margin-top: -20px;
		font-family: 'Acumin Variable Pro', sans-serif;
		font-weight: 700;
		font-size: clamp(14px, 1.2vw, 18px);
		text-transform: uppercase;
		color: var(--red);
	}

	&[data-has-error="true"] .field-error {
		display: block;
	}

	&[data-step="sent"] .field-error {
		display: none;
	}

	&[data-step="sent"] .wpcf7 {
		display: none;
	}

	&[data-step="sent"] .sent-message {
		display: block;
	}

	&[data-step="sent"] .actionable h2 {
		cursor: default;
	}

	textarea,
	input {
		font-family: 'Monument Extended', sans-serif;
		box-sizing: border-box;
		width: 100%;
		background-color: var(--red);
		color: var(--yellow);
		border: none;
		overflow: hidden;
		line-height: 1.1;
		padding: 0.4em;
		font-size: clamp(30px, 5vw, 100px);

		&:focus {
			outline: none;
		}
	}

	textarea {
		height: 1.9em;
		resize: none;
		line-height: 130%;
	}

	.field-caret {
		position: relative;
		background-color: var(--red);

		textarea,
		input {
			position: relative;
			z-index: 1;
			background-color: transparent;
			caret-color: transparent;
		}

		&[data-type="input"] .caret-mirror {
			white-space: pre;
			overflow-wrap: normal;
			line-height: 1.1;
			padding: 0.25em 0.4em;
		}
	}

	.caret-mirror {
		position: absolute;
		inset: 0;
		pointer-events: none;
		font-family: 'Monument Extended', sans-serif;
		font-size: clamp(30px, 5vw, 100px);
		line-height: 1.1;
		padding: 0.25em 0.5em;
		box-sizing: border-box;
		color: transparent;
		white-space: pre-wrap;
		overflow-wrap: break-word;
		overflow: hidden;

		.caret {
			display: inline-block;
			width: 5px;
            height: 1.5em;
			vertical-align: -0.1em;
			background-color: var(--yellow);
			animation: caret-blink 1s steps(1, end) infinite;
		}
	}

	input:-webkit-autofill,
	input:-webkit-autofill:hover,
	input:-webkit-autofill:focus,
	input:-webkit-autofill:active {
		-webkit-background-clip: text;
		-webkit-text-fill-color: var(--yellow);
		transition: background-color 5000s ease-in-out 0s;
		box-shadow: inset 0 0 0 100px var(--red);
	}

	@media (width < 900px) {
		& {
			padding: 50px 20px;

			.actionable {
				.text {
					max-width: 24ch;

					p {
						font-size: 14px;
					}
				}
			}

			.actionable {
				svg {
					display: block;
					width: 18px;

					path {
						stroke-width: 2.5px;
					}
				}
			}
		}
	}
}

/* PROJECT */

.project {
	max-width: 1800px;
	margin: auto;

	.header {
		display: flex;
        flex-direction: column;
        width: calc(100% - 220px);
        padding: 0 110px;
		height: fit-content;
		margin: 111px 0 55px;

		.header-media {
			position: relative;
			height: fit-content;
			overflow: hidden;
			border-radius: 30px;

			@media (width < 900px) {
				& {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					overflow: visible;
					border-radius: 0;

					img,
					video {
						border-radius: 15px;
					}
				}

				.mute-unmute-toggle {
					--theme-color: var(--black);
					position: static;
					margin-top: 15px;
					width: fit-content;
				}
			}
		}

		img,
		video {
			display: block;
			width: 100%;
			height: auto;
			object-fit: contain;
		}

		.title-subtitle {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 30px 0 10px;
			font-family: 'Acumin Variable Pro', sans-serif;

			@media (width < 900px) {
				& {
					flex-direction: column;
					align-items: flex-start;
				}
			}

			h1 {
				font-size: clamp(30px, 5vw, 65px);
				font-variation-settings: 'wght' 700;
				position: relative;
				display: flex;
				align-items: center;
				gap: 10px;

				svg {
					transform: translateY(-20%);
				}
			}

			span {
				font-family: 'Input Sans', sans-serif;
				font-size: clamp(17px, 1.5vw, 22px);
			}
		}

		@media (width < 900px) {
			& {
				width: calc(100% - 40px);
				padding: 0 20px;
				margin: 111px 0 35px;
				gap: 25px;

				.header-media {
					border-radius: 15px;
				}

				.title-subtitle {
					height: fit-content;
					padding: 10px 0;
					
					h1 {
						svg {
							path {
								stroke-width: 2px;
							}
						}
					}
				}
			}
		}
	}

	.description {
		margin: 20px 110px;
		font-family: 'Input Sans', sans-serif;
		font-size: 17px;
		columns: 2;
		column-gap: 110px;

		h2 {
			column-span: all;
			font-family: 'Acumin Variable Pro', sans-serif;
			font-size: clamp(30px, 6vw, 60px);;
			font-variation-settings: 'wght' 600;
			line-height: 100%;
			margin-bottom: 55px;

			display: flex;
            gap: 30px;
            align-items: flex-end;

			svg {
				transform: translateY(-50%);
			}
		}

		p {
			font-size: clamp(13px, 1.75vw, 20px);
			line-height: 130%;
			margin-bottom: 20px;

			a { text-decoration: underline; }

			&:last-child {
				margin-bottom: 0;
			}
		}

		@media (width < 900px) {
			& {
				margin: 20px;
				columns: 1;

				h2 {
					svg {
						path {
							stroke-width: 2px;
						}
					}
				}
			}
		}
	}

	.project-content {
		display: flex;
		flex-direction: column;
		gap: 55px;
		margin: 100px 110px;

		.text {
			font-family: 'Input Sans', sans-serif;

			p {
				font-size: clamp(13px, 1.75vw, 20px);
				line-height: 130%;
				max-width: 50ch;
				margin-bottom: 20px;

				a { text-decoration: underline; }

				&:last-child {
					margin-bottom: 0;
				}
			}
		}

		.media-video {
			position: relative;
			display: flex;
			flex-direction: column;
		}

		.single {
			img,
			video {
				width: 100%;
				height: auto;
			}
		}

		.dual {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 55px;

			img,
			video {
				width: 100%;
				height: auto;
			}
		}

		@media (width < 900px) {
			& {
				gap: 20px;
				margin: 50px 20px;

				.dual {
					gap: 20px;
				}

				.media-video {
					align-items: flex-end;

					.mute-unmute-toggle {
						--theme-color: var(--black);
						position: static;
						margin-top: 5px;
						width: fit-content;
					}
				}
			}
		}
	}
}

/* WORK */
.work {
	header {
		display: flex;
		flex-direction: column;
		gap: 30px;
		padding: 275px 55px 60px;

		h1 {
			font-size: clamp(55px, 10vw, 150px);
			line-height: 90%;
			text-transform: uppercase;
			color: var(--red);

			.line {
				display: block;
				overflow: hidden;
				padding: 0.08em 0 0.12em;
				margin: -0.08em 0 -0.12em;
			}

			.line-inner {
				display: block;
			}
		}

		.filter {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			gap: 10px;

			.filter-item {
				font-family: 'Input Sans', sans-serif;
				font-size: clamp(11px, 1vw, 15px);
				text-transform: uppercase;
				color: var(--red);
				background-color: transparent;
				border: 2px solid var(--red);
				border-radius: 30px;
				padding: 8px 14px 6px;
				cursor: pointer;
				transition: color 0.4s var(--cubic-bezier),
					background-color 0.4s var(--cubic-bezier),
					border-color 0.4s var(--cubic-bezier),
					border-radius 0.4s var(--cubic-bezier);

				&:is(:hover, :active, :focus-visible)&:not(.is-active) {
					border-radius: 0;
				}

				&.is-active {
					color: var(--white);
					background-color: var(--red);
					border-color: var(--red);
				}
			}
		}
	}

	.project-list:empty::after {
		content: 'No projects';
		display: block;
		font-family: 'Input Sans', sans-serif;
		text-transform: uppercase;
		color: var(--black);
		padding: 20px;
	}

	@media (width < 900px) {
		header {
			gap: 20px;
			padding: 140px 20px 40px;

			h1 {
				font-weight: 900;
			}

			.filter {
				.filter-item {
					padding: 9px 12px 7px;
					border: 1.5px solid var(--red);
				}
			}
		}
	}
}

.about {
	header {
		display: flex;
		flex-direction: column;
		gap: 30px;
		padding: 165px 55px 60px;
		margin-top: 110px;
		background-color: var(--green);

		h1 {
			font-size: clamp(40px, 10vw, 150px);
			line-height: 90%;
			text-transform: uppercase;
			color: var(--yellow);

			.line {
				display: block;
				overflow: hidden;
				padding: 0.08em 0 0.12em;
				margin: -0.08em 0 -0.12em;
			}

			.line-inner {
				display: block;
			}
		}
	}

	.pill {
		display: flex;
		flex-direction: column;
		gap: 100px;
		padding: 120px;
		margin: 20px;
		border-radius: 35px;

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

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

		&.red {
			background-color: var(--red);
			color: var(--white);

			.block {
				align-items: flex-end;

				h2 {
					max-width: 7ch;
					font-size: clamp(30px, 3vw, 80px);
				}
				
				svg:last-of-type,
				.spin-y {
					justify-self: end;
				}
			}
		}

		.block {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 130px;

			&.text {
				display: none;
				overflow: hidden;

				&.is-open {
					display: grid;
				}
			}

			> span {
				display: block;
				font-family: 'Acumin Variable Pro', sans-serif;
				text-transform: uppercase;
				font-size: clamp(17px, 3vw, 37px);
			}

			h2 {
				font-size: clamp(26px, 3vw, 80px);
				line-height: 90%;
				letter-spacing: 1%;
				text-transform: uppercase;
				text-wrap: balance;
			}

			> span,
			h2 {
				.line {
					display: block;
					overflow: hidden;
					padding: 0.08em 0 0.12em;
					margin: -0.08em 0 -0.12em;
				}

				.line-inner {
					display: block;
				}
			}

			.icons-end {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 15px;
			}

			.toggle {
				display: flex;
				align-items: center;
				gap: 15px;
				margin-left: auto;
				padding: 0;
				border: 0;
				background: none;
				color: inherit;
				cursor: pointer;
			}

			.plus {
				display: block;
				width: 23px;
				height: 23px;
				flex: none;

				svg {
					display: block;
					width: 100%;
					height: 100%;
					overflow: visible;
				}

				line {
					transform-box: view-box;
					transform-origin: center;
					transform: scale(1);
					transition: transform .4s cubic-bezier(.76, 0, .24, 1);
				}

				line:nth-child(2) {
					transition-delay: .08s;
				}
			}

			.toggle.is-open .plus line:nth-child(1) {
				transform: scaleY(0);
				transition-delay: .08s;
			}

			.toggle.is-open .plus line:nth-child(2) {
				transform: scaleX(0);
				transition-delay: 0s;
			}

			.burger {
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: 7px;
				width: 44px;
				flex: none;

				span {
					display: block;
					height: 3px;
					background-color: currentColor;
					transition: transform .3s ease, opacity .2s ease;
				}
			}

			.toggle.is-open .burger span:nth-child(1) {
				transform: translateY(9px) rotate(35deg)
			}

			.toggle.is-open .burger span:nth-child(2) {
				opacity: 0;
			}

			.toggle.is-open .burger span:nth-child(3) {
				transform: translateY(-9px) rotate(-35deg);
			}

			.text {
				display: flex;
				flex-direction: column;
				gap: 30px;

				p {
					font-family: 'Acumin Variable Pro', sans-serif;
					font-size: clamp(14px, 2vw, 22px);
					text-wrap: pretty;
					max-width: 60ch;
				}
			}
		}
	}

	@media (width < 900px) {
		header {
			gap: 20px;
			padding: 80px 20px 40px;
			margin-top: 86px;

			h1 {
				font-weight: 900;
				font-size: 11vw;
			}
		}

		.pill {
			gap: 40px;
			padding: 45px 30px;
			border-radius: 15px;

			.block {
				gap: 30px;
			}

			.block.text {
				gap: 20px;

				.text {
					gap: 20px;
				}
			}

			.block:not(.icons) {
				grid-template-columns: 1fr;
				margin-bottom: 20px;
			}

			.block.icons {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.icons-end {
					display: contents;
				}

				.toggle {
					margin-left: 0;
				}

				svg:first-of-type {
					width: 40px;
					height: fit-content;
				}

				.icons-end svg {
					display: block;
					flex: none;
					width: 20px;
					height: 100%;

					path {
						stroke-width: 3px;
					}
				}

				.toggle {
					gap: 5px;

					.plus {
						width: 17px;
                		height: 17px;

						svg {
							width: 16px;

							line {
								stroke-width: 5px;
							}
						}
					}
					.burger {
						span {
							height: 2px;
						}
					}
				}

				.plus {
					flex: none;
				}

				.burger {
					width: 34px;
					flex: none;
				}
			}

			&.blue {
				.block.icons {
					svg:first-of-type {
						width: 30px;
					}

					.icons-end svg {
						display: block;
						flex: none;
						width: 20px;

						path {
							stroke-width: 3px;
						}
					}

					.toggle {
						gap: 5px;

						.plus {
							width: 17px;
                			height: 17px;

							svg {
								width: 16px;

								line {
									stroke-width: 5px;
								}
							}
						}
						.burger {
							span {
								height: 2px;
							}
						}
					}
				}
			}

			&.red {
				margin: 15px;
				
				.block {
					grid-template-columns: repeat(2, 1fr);
					gap: 10px;

					svg {
						width: 85px;
                    	height: fit-content;
					}
				}
			}
		}
	}
}

.more-info-page {
	header {
		display: flex;
		flex-direction: column;
		gap: 30px;
		padding: 165px 55px 60px;
		margin-top: 110px;
		background-color: var(--blue);

		h1 {
			font-size: clamp(55px, 10vw, 150px);
			line-height: 90%;
			text-transform: uppercase;
			color: var(--light-blue);

			.line {
				display: block;
				overflow: hidden;
				padding: 0.08em 0 0.12em;
				margin: -0.08em 0 -0.12em;
			}

			.line-inner {
				display: block;
			}
		}

		@media (width < 900px) {
			& {
				gap: 20px;
				padding: 80px 20px 40px;
				margin-top: 86px;
			}
		}
	}

	.main-content {
		border: 2px solid var(--blue);
		border-top: 0;
	}

	.section-panel {
		overflow: hidden;

		&:not(.is-open) {
			display: none;
		}

		&.is-open {
			overflow: visible;
		}
	}

	.section-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 30px;
		border-top: 2px solid var(--blue);
		background-color: var(--light-blue);
		padding: 20px 55px;
		cursor: pointer;
		-webkit-user-select: none;
		user-select: none;
		-webkit-tap-highlight-color: transparent;

		.burger {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: stretch;
			flex: none;
			gap: 7px;
			width: 44px;
			padding: 0;
			border: 0;
			-webkit-appearance: none;
			appearance: none;
			background: none;
			color: var(--blue);
			font: inherit;
			pointer-events: none;

			span {
				display: block;
				width: 100%;
				height: 3px;
				flex: none;
				background-color: currentColor;
				transition: transform .3s ease, opacity .2s ease;
				will-change: transform;
			}

			&.is-open span:nth-child(1) {
				transform: translateY(10px) rotate(45deg);
			}

			&.is-open span:nth-child(2) {
				opacity: 0;
			}

			&.is-open span:nth-child(3) {
				transform: translateY(-10px) rotate(-45deg);
			}
		}

		h2 {
			font-family: "Monument Extended";
			font-size: clamp(28px, 4vw, 62px);
			line-height: 90%;
			text-transform: uppercase;
			color: var(--blue);

			.line {
				display: block;
				overflow: hidden;
				padding: 0.08em 0 0.12em;
				margin: -0.08em 0 -0.12em;
			}

			.line-inner {
				display: block;
			}

			.txt-mobile {
				display: none;
			}

			@media (width < 900px) {
				.txt-desktop {
					display: none;
				}

				.txt-mobile {
					display: inline;
				}
			}
		}

		@media (width > 900px) {
			& {
				h2 {
					transition: transform .45s var(--cubic-bezier);
				}

				.burger {
					transition: width .45s var(--cubic-bezier);
				}

				&:not([aria-expanded='true']):hover h2 {
					transform: translateX(25px);
				}

				&:not([aria-expanded='true']):hover .burger {
					width: 75px;
				}
			}
		}

		@media (width < 900px) {
			& {
				gap: 20px;
				padding: 20px;

				h2 {
					font-weight: 900;
					letter-spacing: 0.05rem;
				}

				.burger {
					width: 34px;
					gap: 5px;
				}

				.burger.is-open span:nth-child(1) {
					transform: translateY(8px) rotate(45deg);
				}

				.burger.is-open span:nth-child(3) {
					transform: translateY(-8px) rotate(-45deg);
				}
			}
		}
	}

	.awards-wrapper {
		display: flex;
		flex-direction: column;
		color: var(--blue);

		.award-year {
			display: grid;
			grid-template-columns: repeat(6, 1fr);
			gap: 20px;
			border-bottom: 2px solid var(--blue);
			padding: 0;

			&:first-of-type {
				border-top: 2px solid var(--blue);
			}

			&:last-of-type {
				border-bottom: none;
			}

			.year {
				grid-column: 1;
				font-family: 'Input Sans', sans-serif;
				font-weight: 700;
				padding: 10px 0;
				justify-self: center;
                align-self: center;
			}

			.awards-list {
				border-left: 2px solid var(--blue);
				grid-column: 2 / 7;
				display: flex;
				flex-direction: column;
				font-family: 'Input Sans', sans-serif;
				padding: 20px 55px;

				.award {
					display: flex;
					flex-wrap: wrap;
					gap: 20px;
					border-bottom: 2px solid var(--blue);
					padding: 15px 0;
					position: relative;

					> * {
						flex: 1 1 0;
						min-width: 0;
					}

					.award-image {
						display: none;
					}

					@media (width >= 900px) and (hover: hover) and (pointer: fine) {
						.award-image {
							display: block;
							position: absolute;
							right: 50px;
							top: 50%;
							transform: translateY(-50%);
							width: auto;
							max-width: 300px;
							height: auto;
							flex: none;
							z-index: 5;
							opacity: 0;
							visibility: hidden;
							pointer-events: none;
							transition: opacity 0.25s ease;
						}

						&:hover .award-image {
							opacity: 1;
							visibility: visible;
						}
					}

					&:last-of-type {
						border-bottom: none;
					}

					.name {
						font-weight: bold;
					}

					.prize,
					.category,
					.project {
						position: relative;
						padding-left: 25px;

						&::after {
							content: "";
							width: 18px;
							height: 18px;
							position: absolute;
							left: 0;
							top: -3px;
							background: url('data:image/svg+xml,<svg width="19" height="22" viewBox="0 0 19 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.6355 0.980041L1.13544 20.0991" stroke="%2309399E" stroke-width="3"/></svg>');
							background-repeat: no-repeat;
							background-position: center;
							background-size: contain;
						}
					}
				}
			}

			@media (width < 1000px) {
				& {
					.awards-list {
						grid-column: 2 / 7;
					}
				}
			}

			@media (width < 900px) {
				& {
					grid-template-columns: 1fr;
					padding: 0 20px;
					gap: 0;
					
					.year,
					.awards-list {
						grid-column: auto;
					}

					.year {
						width: 100%;
					}

					.awards-list {
						border-left: none;
						border-top: 2px solid var(--blue);
						padding: 0;
					}
				}
			}

			@media (width < 600px) {
				& {
					.awards-list {
						.award {
							gap: 10px;

							> * {
								flex: 1 1 calc(50% - 10px);
							}
						}
					}
				}
			}
		}

		@media (width < 900px) {
			& {
				gap: 0;
			}
		}
	}

	.features-slider {
		--feature-height: clamp(340px, 40vw, 600px);
		--feature-gap: clamp(30px, 4.2vw, 85px);
		--feature-edge: 60px;
		--feature-info-max: min(70vw, 900px);
		--feature-info-top: 17%;
		--feature-text-top: 13%;
		padding: 55px 0;
		border-top: 2px solid var(--blue);

		.features-track {
			display: flex;
			gap: var(--feature-gap);
			margin: 0;
			padding: 0 var(--feature-edge);
			list-style: none;
			overflow-x: auto;
			overscroll-behavior-x: contain;
			scroll-snap-type: x mandatory;
			scroll-padding-left: var(--feature-edge);
			scrollbar-width: none;
			cursor: grab;

			&::-webkit-scrollbar {
				display: none;
			}

			&.no-snap {
				scroll-snap-type: none;
			}

			&.is-dragging {
				cursor: grabbing;
				scroll-behavior: auto;
				user-select: none;

				img {
					pointer-events: none;
				}
			}

			.feature-slide {
				flex: none;
				height: var(--feature-height);
				scroll-snap-align: start;

				.feature {
					display: flex;
					align-items: stretch;
					gap: var(--feature-gap);
					height: 100%;
					color: var(--blue);
					text-decoration: none;

					.feature-image {
						position: relative;
						box-sizing: border-box;
						flex: none;
						height: 100%;
						aspect-ratio: 36 / 43;
						border: 2px solid var(--blue);
						border-radius: 15px;
						overflow: hidden;

						img {
							display: block;
							height: 100%;
							width: 100%;
							object-fit: cover;
							transition: transform 0.6s var(--cubic-bezier), opacity 0.9s var(--cubic-bezier);
						}

						&.is-carousel img {
							position: absolute;
							inset: 0;
							opacity: 0;

							&.is-active {
								opacity: 1;
							}
						}
					}

					.feature-info {
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						flex: none;
						max-width: var(--feature-info-max);
						padding-top: var(--feature-info-top);
						gap: 20px;

						.feature-title {
							font-family: 'Acumin Variable Pro', sans-serif;
							font-weight: bold;
							text-transform: uppercase;
							font-size: clamp(16px, 2.2vw, 38px);
							line-height: 1.12;
							letter-spacing: -0.01em;
							text-wrap: balance;
							max-width: 15ch;
							margin: 0;
						}

						.slash {
							width: 22px;
							height: 22px;
							background-image: url('data:image/svg+xml,<svg width="27" height="28" viewBox="0 0 27 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.3895 1.54444L22.4244 5.34001e-05L-0.00024704 24.6745L1.96488 26.2188L3.93001 27.7632L26.3546 3.08882L24.3895 1.54444Z" fill="%23FF1A1F"/></svg>');
							background-repeat: no-repeat;
							background-size: 20px;
							background-position: center;
						}

						.feature-text {
							margin-top: var(--feature-text-top);
							font-family: 'Input Sans', sans-serif;
							font-size: clamp(13px, 0.95vw, 17px);
							line-height: 1.75;

							p {
								margin: 0 0 1.75em;

								&:last-child {
									margin-bottom: 0;
								}
							}

							a {
								color: inherit;
								text-decoration: underline;
							}
						}
					}
				}

				a.feature {
					&:hover .feature-image img {
						transform: scale(1.08);
					}
				}
			}
		}

		@media (width < 900px) {
			& {
				--feature-height: auto;
				--feature-gap: 15px;
				--feature-edge: 20px;
				--feature-slide-width: 70vw;
				--feature-info-max: 100%;
				--feature-info-top: 0;
				--feature-text-top: 8px;

				.features-track .feature-slide {
					width: var(--feature-slide-width);

					.feature {
						flex-direction: column;
						gap: 40px;

						.feature-image {
							width: 70%;
							height: auto;

							img {
								position: absolute;
								inset: 0;
							}
						}

						.feature-info {
							width: 100%;
							gap: 10px;
							display: grid;
							grid-template-columns: repeat(2, 1fr);

							.slash {
								width: 16px;
								height: 20px;
								background-size: 14px;
								align-self: end;
							}

							.feature-text {
								grid-column: 1 / 3;
								display: grid;
								grid-template-columns: repeat(2, 1fr);

								p  {
									font-size: 12px;
								}
							}
						}
					}
				}

				.slash {
					width: 6px;
					height: 30px;
					margin-top: 12px;
				}
			}
		}
	}

	.domestika {
		display: grid;
		grid-template-columns: 1fr 1fr;
		padding: 55px;
		border-top: 2px solid var(--blue);

		img {
			border: 2px solid var(--blue);
            border-radius: 15px;
			aspect-ratio: 211 / 150;
		}

		.domestika-text {
			justify-self: center;
   			align-self: center;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			gap: 20px;
			font-family: 'Input Sans', sans-serif;
			text-transform: uppercase;
			color: var(--blue);

			p,
			a {
				text-align: right;
			}

			p {
				max-width: 20ch;
				text-wrap: balance;
			}

			a {
				color: var(--blue);
				padding: 5px;
				padding-left: 25px;
				width: fit-content;
				position: relative;

				&::after {
					content: "";
					position: absolute;
					left: 0;
					top: 0;
					width: 22px;
					height: 22px;
					background-image: url('data:image/svg+xml,<svg width="27" height="28" viewBox="0 0 27 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.3895 1.54444L22.4244 5.34001e-05L-0.00024704 24.6745L1.96488 26.2188L3.93001 27.7632L26.3546 3.08882L24.3895 1.54444Z" fill="%23FF1A1F"/></svg>');
					background-repeat: no-repeat;
					background-size: 20px;
					background-position: center;
					transition: transform .3s var(--cubic-bezier);
				}

				&:is(:hover, :active, :focus-visible) {
					&::after {
						transform: rotate(-90deg);
					}
				}
			}
		}

		@media (width < 900px) {
			& {
				grid-template-columns: 1fr;
				padding: 20px;
				
				.domestika-text {
					padding: 40px 0;
					align-items: center;
					
					p {
						text-align: center;
						text-transform: none;
					}

					a {
						margin-top: 40px;
						padding-left: 5px;

						&::after {
							top: -40px;
							left: 50%;
							transform: translateX(-50%);
						}
					}
				}
			}
		}
	}

	.random-photos {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		padding: 55px;
		border-top: 2px solid var(--blue);

		&::before {
			content: "";
			grid-column: 1;
			grid-row: 1;
			width: 100%;
			aspect-ratio: 211 / 150;
			pointer-events: none;
		}

		.photos-wrapper {
			position: relative;
			box-sizing: border-box;
			grid-column: 1;
			grid-row: 1;
			justify-self: flex-start;
			align-self: stretch;
			height: 100%;
			width: 100%;
			min-width: 0;
			max-width: 100%;
			overflow: hidden;
			border: 2px solid var(--blue);
            border-radius: 15px;
			transition: width .55s cubic-bezier(.22,.68,.24,1);

			@media (prefers-reduced-motion: reduce) {
				transition: none;
			}

			.photos-reel {
				position: absolute;
				inset: 0;
				display: flex;
				flex-direction: column;
				will-change: transform;

				img {
					flex: 0 0 100%;
					width: 100%;
					height: 100%;
					object-fit: cover;
					transition: filter .25s ease;
				}

				&.is-spinning img {
					filter: blur(5px);
				}

				&.is-settling img {
					filter: blur(0);
					transition: filter .5s ease-out;
				}
			}
		}

		.button-text {
			align-self: center;
			justify-self: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			height: 100%;

			.random-button {
				width: 150px;
				height: 150px;
				border: 2px solid var(--blue);
				position: relative;
				cursor: pointer;
				touch-action: manipulation;
				-webkit-tap-highlight-color: transparent;

				.circle {
					position: absolute;
					inset: 0;
					margin: auto;
					display: block;
					width: 80px;
					height: 80px;
					background-color: var(--red);
					border-radius: 100%;
					will-change: transform;
				}

				&:is(:hover, :active, :focus-visible) .circle {
					width: 130px;
					height: 130px;
				}

				&.is-busy {
					cursor: default;
				}

				&.js-driven .circle {
					width: 80px;
					height: 80px;
					transition: none;
				}
			}

			p {
				font-family: 'Input Sans', sans-serif;
				color: var(--blue);
				text-transform: uppercase;
			}
		}

		@media (width < 900px) {
			& {
				grid-template-columns: minmax(0, 1fr);
				padding: 20px;

				.photos-wrapper {
					justify-self: center;
				}

				.button-text {
					gap: 20px;

					.random-button {
						width: 100px;
						height: 100px;
					}
				}
			}
		}
	}
}

.more-projects {
	display: flex;
	flex-direction: column;
	gap: 80px;
	padding: 100px 20px;

	.button {
		--bc: var(--red);
		--bw: 2.5px;
		position: relative;
		color: var(--white);
		background-color: var(--red);
		width: fit-content;
		height: fit-content;
		margin: 0 auto;
		font-size: 24px;
		font-weight: 700;
		line-height: 100%;
		letter-spacing: 5%;
		text-transform: uppercase;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr);
		box-sizing: border-box;
		overflow: hidden;

		&::after {
			content: '';
			position: absolute;
			inset: 0;
			border-radius: inherit;
			box-shadow: inset 0 0 0 var(--bw) var(--bc, transparent);
			pointer-events: none;
			z-index: 2;
		}

		.face {
			grid-area: 1 / 1;
			display: inline-flex;
			align-items: center;
			box-sizing: border-box;
			min-width: 0;
			min-height: 0;
			padding: 11px 12px 9px;
			background-color: var(--red);
			color: var(--white);
			transition: transform 0.5s var(--cubic-bezier);
		}

		.face:nth-of-type(2) {
			transform: translateY(100%);
			background-color: var(--white);
			color: var(--red);
		}

		&:is(:hover, :active, :focus-visible) {
			.face:nth-of-type(1) {
				transform: translateY(-100%);
			}

			.face:nth-of-type(2) {
				transform: translateY(0);
			}
		}

		@media (width < 900px) {
			font-size: 18px;
		}
	}

	.more-projects-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 40px;
	}

	.more-project {
		display: flex;
		flex-direction: column;
		gap: 40px;
		color: var(--black);

		&:nth-of-type(2) {
			.more-project-info {
				justify-content: center;
			}
		}

		&:nth-of-type(3) {
			.more-project-info {
				justify-content: flex-end;
			}
		}

		.more-project-thumbnail {
			width: 100%;
			aspect-ratio: 101 / 79;
			overflow: hidden;
			border-radius: 30px;

			img, video {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: transform 0.6s var(--cubic-bezier);
			}
		}

		.more-project-info {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			gap: 20px;

			.more-project-title {
				font-family: 'Acumin Variable Pro', sans-serif;
				letter-spacing: -0.03em;
				font-size: clamp(18px, 2vw, 33.16px);
				line-height: 100%;
				text-transform: uppercase;
				transition: letter-spacing 0.6s var(--cubic-bezier);
			}

			.more-project-typology {
				list-style: none;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				gap: 6px;
				font-family: 'Input Sans', sans-serif;
				text-align: right;

				li {
					max-width: 10ch;
				}

				li:not(:last-child)::after {
					content: ',';
				}
			}
		}

		&:is(:hover, :active, :focus-visible) .more-project-thumbnail :is(img, video) {
			transform: scale(1.05);
		}

		&:is(:hover, :active, :focus-visible) .more-project-title {
			letter-spacing: 0.06em;
		}
	}

	@media (width < 900px) {
		& {
			gap: 60px;
			padding: 0;
			align-items: flex-start;	

			.more-projects-grid {
				display: flex;
				flex-direction: column;
				gap: 10px;
				grid-template-columns: none;
				gap: 20px;
				padding: 0 20px;

				&::after {
					content: '';
					flex: 0 0 20px;
					align-self: stretch;
				}

				&.is-dragging {
					cursor: grabbing;
					scroll-snap-type: none;
					scroll-behavior: auto;
				}

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

			.more-project {
				gap: 20px;

				&:last-of-type {
					display: none;
				}

				.more-project-thumbnail {
					border-radius: 15px;
				}

				.more-project-info {
					justify-content: space-between !important;
					gap: 10px;
				}
			}
		}
	}
}

footer {
	display: flex;
	flex-direction: column;
	gap: 80px;
	padding: 80px 40px;
	color: var(--yellow);
	background-color: var(--green);
	overflow: hidden;

	.top-bar {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		gap: 20vw;

		@media (width < 900px) {
			& {
				gap: clamp(20px, 10vw, 80px);
			}
		}

		.reduced-logo {
			display: block;
			width: clamp(50px, 10vw, 100px);
			height: 100%;
			justify-self: start;
		}

		.links {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			gap: clamp(30px, 6vw, 60px);
			width: 100%;
			height: fit-content;
			padding-top: 20px;

			li {
				list-style: none;
				display: flex;
				flex-direction: row;
				align-items: center;
				position: relative;
				padding-left: 45px;
				height: fit-content;
				width: 100%;

				svg {
					position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
					transform-origin: center;
				}

				a {
					font-family: 'Input Sans', sans-serif;
					text-transform: uppercase;
					color: var(--yellow);
					padding: 5px;
				}

				@media (width > 900px) {
					svg {
						transition: transform 0.3s var(--cubic-bezier);
					}

					&:has(a:is(:hover, :active, :focus-visible)) svg {
						transform: translateY(-50%) rotate(-90deg);
					}
				}
			}

			@media (width < 900px) {
				& {
					--stagger: clamp(15px, 6vw, 55px);
					display: grid;
					grid-template-columns: repeat(2, auto);
					justify-content: space-between;
					column-gap: clamp(15px, 4vw, 40px);
					row-gap: clamp(14px, 3vw, 28px);
					width: 63vw;
					padding-top: 0;

					li:nth-child(even) {
						justify-self: end;
					}

					li:nth-child(n+3) {
						transform: translateX(calc(-1 * var(--stagger)));
					}

					li {
						padding-left: 25px;
						width: fit-content;

						svg {
							width: 15px;
							height: 15px;
						}
					}
				}
			}
		}
	}

	.raw-design,
	.raw-design-mobile {
		display: block;
		width: 100%;
		height: fit-content;
	}

	.raw-design-mobile {
		display: none;
	}

	@media (width < 900px) {
		.raw-design {
			display: none;
		}

		.raw-design-mobile {
			display: block;
		}
	}

	.bottom-bar {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		align-items: center;

		.more-links,
		.go-up {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 20px;
			font-family: 'Input Sans', sans-serif;
			width: fit-content;

			p {
				text-transform: uppercase;
				max-width: 8ch;
				color: var(--yellow);
			}
		}

		.more-links {
			perspective: 600px;

			svg {
				transform-style: preserve-3d;
				backface-visibility: visible;
			}

			&:is(:focus-visible, .is-active) svg {
				animation: more-links-flip 0.9s cubic-bezier(0.4, 0, 0.2, 1);
			}

			@media (hover: hover) {
				&:hover svg {
					animation: more-links-flip 0.9s cubic-bezier(0.4, 0, 0.2, 1);
				}
			}
		}

		.go-up {
			cursor: pointer;
			background: none;
			border: none;
			padding: 0;
			color: var(--yellow);
			justify-self: end;

			.go-up-circle {
				transform-box: fill-box;
				transform-origin: center;
				transition: transform 0.3s ease;
			}

			.go-up-arrow {
				transform-box: fill-box;
				transform-origin: center;
				opacity: 0;
				transform: scale(0.4);
				transition: opacity 0.3s ease, transform 0.3s ease;
			}

			&:is(:hover, :active, :focus-visible),
			&.is-active {
				.go-up-circle {
					transform: scale(1.7);
				}

				.go-up-arrow {
					opacity: 1;
					transform: scale(1);
				}
			}
		}

		.logo-footer-small {
			grid-column: span 2;
			justify-self: center;
			display: block;
			width: 200px;
			height: fit-content;
			margin-bottom: 10px;
		}

		@media (width < 900px) {
			& {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.more-links,
				.go-up {
					max-width: 80px;
					gap: 7px;

					p {
						font-size: 12px;
						font-weight: 500;
					}
				}

				.more-links {
					svg {
						height: 40px;
					}
				}

				.go-up {
					p {
						width: 2ch;
						text-align: right;
					}

					svg {
						height: 30px;
						width: 100%;
					}
				}

				.logo-footer-small {
					width: 140px;
				}
			}
		}
	}

	@media (width < 900px) {
		& {
			padding: 50px 20px 35px;
			gap: 40px;
			
			.top-bar {
				.links {
					li {
						a {
							padding: 3px;
							font-size: 12px;
                            font-weight: 500;
						}
					}
				}
			}
		}
	}
}

#loading-transition {
	display: none;
	position: fixed;
	inset: 0;
	background-color: var(--white);
	z-index: 99999999;
	opacity: 0;
}

html.js-transition #loading-transition {
	display: block;
	opacity: 1;
}

#loading-transition.is-covering {
	display: block;
	animation: loading-transition-in .3s var(--cubic-bezier) forwards;
}

#loading-transition.is-revealing {
	display: block;
	animation: loading-transition-out .4s var(--cubic-bezier) forwards;
}

@keyframes loading-transition-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes loading-transition-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
@keyframes caret-blink {
	0%, 50% { opacity: 1; }
	50.01%, 100% { opacity: 0; }
}
@keyframes more-links-flip {
	from {
		transform: rotateY(0deg);
	}

	to {
		transform: rotateY(360deg);
	}
}