* {
	box-sizing: border-box;
}
html,
body {
	height: 100%;
}
html {
	font-size: 16px;
}
body {
	margin: 0;
	background: #000;
	color: #fff;
	font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans',
		'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
	/* Section snap container */
	scroll-snap-type: y mandatory;
	overscroll-behavior: none;
}

a {
	color: white;
	text-decoration: none;
}

/* Menu Overlay */
.menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: #000;
	z-index: 100;
	transform: translateX(-100%);
	transition: transform 0.3s ease;
}

.menu-overlay.open {
	transform: translateX(0);
}

.menu-close {
	position: absolute;
	top: 16px;
	left: 16px;
	width: 32px;
	height: 32px;
	background: none;
	border: none;
	color: white;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.menu-list {
	list-style: none;
	margin: 0;
	padding: 78px 0 0 23px;
}

.menu-list li {
	line-height: 42px;
}

.menu-list a {
	font-size: 24px;
	font-weight: 200;
	color: white;
	text-decoration: none;
	text-transform: uppercase;
}

.menu-list a.active {
	font-weight: 700;
}

/* Lightbox */
.lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, 0.95);
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.open {
	opacity: 1;
	visibility: visible;
}

.lightbox-close {
	position: absolute;
	top: 20px;
	right: 20px;
	background: none;
	border: none;
	color: white;
	cursor: pointer;
	padding: 8px;
	z-index: 201;
}

.lightbox-img {
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
}

.gallery .item {
	cursor: pointer;
}

.header {
	z-index: 10;

	.hamburger {
		position: fixed;
		top: 24px;
		left: 24px;
		width: 32px;
		height: 32px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 6px;
		background: none;
		border: none;
		cursor: pointer;
		padding: 0;
		z-index: 10;

		span {
			height: 2px;
			background-color: white;
			width: 24px;
		}
	}

	.logo {
		position: fixed;
		top: 24px;
		left: 50%;
		transform: translateX(-50%);
		width: 100px;
		z-index: 10;
		cursor: pointer;
	}
}

#hero {
    background-image: url('assets/home.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#hero::before {
    content: "";
    position: absolute;
    inset: 0;
}

#hero > * {
    z-index: 2; /* above overlay */
}

#hero .bg-words {
	top: auto;
	left: clamp(96px, 12vw, 260px);
	bottom: 16px;
	transform: none;
	font-weight: 700;
		font-size: 120px;
		color: black;
		text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
		opacity: 0.2;
	z-index: 1;
	pointer-events: none;
}

#hero .bg-words .bg-line + .bg-line {
	margin-left: clamp(220px, 30vw, 520px);
}

#hero .buttons {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

#hero .hero-rectangle {
	width: clamp(220px, 22vw, 300px);
	aspect-ratio: 1;
}

#hero .hero-rectangle img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#hero .content {
	position: absolute;
	left: clamp(64px, 8vw, 140px);
	top: 50%;
	transform: translateY(-50%);
	margin-left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 48px;
}

section {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	scroll-snap-align: start;
	scroll-snap-stop: always;

	.bg-words {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-weight: 700;
		font-size: 120px;
		color: black;
		text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
		opacity: 0.2;
		z-index: -1;

		.bg-line {
			white-space: nowrap;
		}
	}

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

		&::after {
			content: '';
			position: absolute;
			inset: 0;
			background: rgba(0, 0, 0, 0.6);
			pointer-events: none;
		}

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

	.content {
		margin-left: 92px;
		max-width: 640px;

		h1 {
			text-transform: uppercase;
			width: 357px;
			font-weight: 700;
			font-size: 36px;
			display: flex;
			flex-direction: column;
			gap: 40px;

			.buttons {
				display: flex;
				flex-direction: column;
				gap: 14px;
				align-items: flex-end;
			}
		}

		.right {
			text-align: right;
		}

		p {
			font-weight: 300;
			font-size: 16px;
			line-height: 32px;

			strong {
				font-weight: 700;
			}
		}

		.contact-grid {
			display: flex;
			flex-direction: column;

			span {
				line-height: 24px;
			}
		}
	}

	.aside {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 300px;
		height: 400px;
		background-color: gray;

		.outside {
			position: absolute;
			top: 50%;
			left: -200px;
			transform: translateY(-50%);
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 10px;

			span {
				text-transform: uppercase;
				font-weight: 700;
				font-size: 36px;
				display: inline-block;
				max-width: min-content;
				line-height: 30px;
				text-align: right;
			}

			.btn {
				padding: 14px 36px;
				background-color: #00000068;
			}
		}

		.inside {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;

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

	.gallery {
		z-index: 1;
		position: absolute;
		inset: 0;
		display: block;

		.item {
			position: absolute;
			background: #111;
			overflow: hidden;

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

#work .bg-words {
	top: 44px;
	left: 50%;
	transform: translateX(-50%);
	font-size: clamp(118px, 11vw, 180px);
	line-height: 0.9;
	opacity: 0.18;
	z-index: 0;
}

#work .bg-words .bg-line span {
	display: inline;
}

#work .gallery .item:nth-child(1) {
	left: 3.6vw;
	top: 15vh;
	width: 19vw;
	height: 28vh;
}

#work .gallery .item:nth-child(2) {
	left: 21vw;
	top: 29vh;
	width: 17vw;
	height: 25vh;
}

#work .gallery .item:nth-child(3) {
	left: 63vw;
	top: 23vh;
	width: 20vw;
	height: 29vh;
}

#work .gallery .item:nth-child(4) {
	left: 39vw;
	top: 43vh;
	width: 17vw;
	height: 25vh;
}

#work .gallery .item:nth-child(5) {
	left: 27.5vw;
	top: 70vh;
	width: 18vw;
	height: 27vh;
}

#work .gallery .item:nth-child(6) {
	left: 5.8vw;
	top: 58vh;
	width: 19vw;
	height: 29vh;
}

#work .gallery .item:nth-child(7) {
	left: 74vw;
	top: 50vh;
	width: 25vw;
	height: 34vh;
}

#work .gallery .item:nth-child(8) {
	left: 52vw;
	top: 60vh;
	width: 21vw;
	height: 31vh;
}

.btn {
	padding: 14px;
	border: 1px solid white;
	background: none;
	color: white;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 16px;
}

#prices {
	isolation: isolate;
}

#prices .bg-words {
	top: 36px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 0;
}

#prices .prices-image {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 50%;
	z-index: -1;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

#prices .prices-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center;
	filter: grayscale(1);
}

#prices .content {
	z-index: 1;
	width: min(44vw, 620px);
	max-width: none;
	margin-left: auto;
	margin-right: clamp(28px, 8vw, 140px);
	padding: 0;
	font-size: 14px;
}

#prices .content h1 {
	width: auto;
	margin: 0 0 24px;
	gap: 0;
}

#prices .content p {
	line-height: 1.7;
}

#prices .content ul {
	line-height: 1.6;
}