:root {
	--elena-bg: #050507;
	--elena-fg: #f4f4f2;
	--elena-muted: rgba(244, 244, 242, 0.5);
	--elena-line: rgba(255, 255, 255, 0.14);
	--elena-blue: #2563eb;
	--elena-violet: #8b5cf6;
	--elena-page-gutter: clamp(22px, 5vw, 84px);
}

html {
	scroll-behavior: smooth;
}

body.elena-landing {
	margin: 0;
	background: var(--elena-bg);
	color: var(--elena-fg);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.45;
	overflow-x: hidden;
}

body.elena-landing *,
body.elena-landing *::before,
body.elena-landing *::after {
	box-sizing: border-box;
}

body.elena-landing a {
	color: inherit;
	text-decoration: none;
}

body.elena-landing h1,
body.elena-landing h2,
body.elena-landing h3,
body.elena-landing p {
	margin: 0;
	color: inherit;
	font-family: inherit;
}

.elena-skip-link {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 100001;
	padding: 12px 18px;
	background: #fff;
	color: #000 !important;
	transform: translateY(-160%);
	transition: transform 180ms ease;
}

.elena-skip-link:focus {
	transform: translateY(0);
}

.elena-canvas {
	position: fixed;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.elena-noise {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.04;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.elena-site {
	position: relative;
	z-index: 2;
	min-height: 100vh;
}

.elena-header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 26px var(--elena-page-gutter);
	background: linear-gradient(to bottom, rgba(5, 5, 7, 0.9), rgba(5, 5, 7, 0));
	mix-blend-mode: difference;
}

.elena-logo {
	display: flex;
	align-items: baseline;
	gap: 12px;
	letter-spacing: -0.05em;
}

.elena-logo span {
	font-size: 20px;
	font-weight: 900;
}

.elena-logo small {
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.55;
}

.elena-nav {
	display: flex;
	gap: clamp(16px, 3vw, 44px);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.elena-nav a {
	position: relative;
	padding: 7px 0;
}

.elena-nav a::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background: currentColor;
	content: "";
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 300ms ease;
}

.elena-nav a:hover::after,
.elena-nav a:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left;
}

.elena-section {
	position: relative;
	display: flex;
	min-height: 100svh;
	padding: 130px var(--elena-page-gutter) 90px;
}

.elena-hero {
	flex-direction: column;
	justify-content: space-between;
	min-height: 100vh;
	min-height: 100svh;
}

.elena-eyebrow {
	display: flex;
	justify-content: space-between;
	width: 100%;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.48;
}

.elena-hero-copy {
	position: relative;
	z-index: 4;
	width: min(850px, 92%);
	margin-top: auto;
	margin-bottom: 4vh;
}

.elena-kicker,
.elena-contact-label {
	margin-bottom: 20px !important;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.48;
}

.elena-hero h1,
.elena-section-heading h2,
.elena-contact h2 {
	font-size: clamp(56px, 9.4vw, 152px);
	font-weight: 900;
	line-height: 0.83;
	letter-spacing: -0.075em;
	text-transform: uppercase;
}

.elena-hero h1 em,
.elena-section-heading h2 em,
.elena-contact h2 em {
	color: var(--elena-blue);
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
	text-transform: none;
}

.elena-intro {
	max-width: 490px;
	margin-top: 34px !important;
	font-size: clamp(15px, 1.5vw, 22px);
	font-weight: 400;
	line-height: 1.45;
	opacity: 0.68;
}

.elena-scroll-cue {
	display: flex;
	align-items: center;
	align-self: flex-end;
	gap: 16px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.55;
	transition: opacity 200ms ease;
}

.elena-scroll-cue:hover,
.elena-scroll-cue:focus-visible {
	opacity: 1;
}

.elena-scroll-cue svg {
	width: 28px;
	height: 28px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
}

.elena-work,
.elena-about,
.elena-services {
	flex-direction: column;
	justify-content: center;
	background: rgba(5, 5, 7, 0.68);
}

.elena-section-heading {
	display: grid;
	grid-template-columns: minmax(150px, 0.28fr) 1fr;
	align-items: start;
	margin-bottom: clamp(54px, 9vw, 130px);
}

.elena-section-heading > span {
	padding-top: 10px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.45;
}

.elena-section-heading h2 {
	font-size: clamp(46px, 7.2vw, 116px);
}

.elena-projects {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(18px, 3vw, 42px);
}

.elena-project {
	grid-column: span 4;
}

.elena-project:nth-child(2) {
	margin-top: 90px;
}

.elena-project-art {
	position: relative;
	display: grid;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 6px;
	isolation: isolate;
}

.elena-project-art::before,
.elena-project-art::after {
	position: absolute;
	border-radius: 50%;
	content: "";
	filter: blur(8px);
	transition: transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.elena-project-art::before {
	top: 12%;
	left: 12%;
	width: 76%;
	aspect-ratio: 1;
	background: radial-gradient(circle at 30% 30%, #fff, #4f79ff 20%, #02030c 72%);
	box-shadow: 0 0 100px rgba(37, 99, 235, 0.7);
}

.elena-project-art::after {
	right: -30%;
	bottom: -20%;
	width: 80%;
	aspect-ratio: 1;
	background: rgba(255, 255, 255, 0.14);
	filter: blur(45px);
}

.elena-project:hover .elena-project-art::before {
	transform: scale(1.14) rotate(14deg);
}

.elena-project-art span {
	position: relative;
	z-index: 2;
	color: rgba(255, 255, 255, 0.88);
	font-size: clamp(100px, 14vw, 220px);
	font-weight: 900;
	line-height: 1;
	text-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
	transform: scaleX(0.72);
}

.elena-project--silver .elena-project-art {
	background: linear-gradient(145deg, #111 0%, #c3c5cd 48%, #17171a 100%);
}

.elena-project--silver .elena-project-art::before {
	background: radial-gradient(circle at 35% 28%, #fff, #a7a8ac 28%, #18181b 68%);
	box-shadow: 0 0 100px rgba(255, 255, 255, 0.28);
}

.elena-project--violet .elena-project-art {
	background: #08050e;
}

.elena-project--violet .elena-project-art::before {
	background: radial-gradient(circle at 35% 30%, #fff, #a855f7 17%, #3b0764 46%, #050507 72%);
	box-shadow: 0 0 110px rgba(139, 92, 246, 0.55);
}

.elena-project-meta {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 20px;
	padding-top: 18px;
}

.elena-project-meta h3 {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.elena-project-meta p,
.elena-project-meta span {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.42;
}

.elena-project-meta p {
	grid-column: 1 / -1;
}

.elena-about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(40px, 9vw, 150px);
	margin-left: 28%;
}

.elena-about-lead {
	font-size: clamp(26px, 3vw, 48px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.045em;
}

.elena-about-copy {
	display: grid;
	gap: 28px;
	max-width: 520px;
	font-size: clamp(14px, 1.2vw, 18px);
	line-height: 1.65;
	opacity: 0.58;
}

.elena-service-list {
	margin-left: 28%;
	border-top: 1px solid var(--elena-line);
}

.elena-service-list > div {
	display: grid;
	grid-template-columns: 70px 1fr 1fr;
	align-items: baseline;
	gap: 24px;
	padding: 28px 0;
	border-bottom: 1px solid var(--elena-line);
	transition: padding 300ms ease, background 300ms ease;
}

.elena-service-list > div:hover {
	padding-right: 18px;
	padding-left: 18px;
	background: rgba(255, 255, 255, 0.035);
}

.elena-service-list span,
.elena-service-list p {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.4;
}

.elena-service-list h3 {
	font-size: clamp(24px, 3vw, 46px);
	font-weight: 600;
	letter-spacing: -0.05em;
}

.elena-contact {
	align-items: center;
	justify-content: center;
	text-align: center;
}

.elena-glass-box {
	width: min(100%, 1020px);
	padding: clamp(50px, 8vw, 125px) clamp(24px, 7vw, 100px);
	border: 1px solid rgba(255, 255, 255, 0.17);
	border-radius: clamp(28px, 4vw, 50px);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.025));
	box-shadow: 0 32px 100px rgba(0, 0, 0, 0.45);
	-webkit-backdrop-filter: blur(22px);
	backdrop-filter: blur(22px);
}

.elena-contact h2 {
	margin-bottom: clamp(42px, 6vw, 76px);
	font-size: clamp(54px, 8vw, 124px);
}

.elena-email {
	position: relative;
	display: inline-block;
	max-width: 100%;
	margin-bottom: 60px;
	font-size: clamp(20px, 4vw, 58px);
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -0.05em;
	text-transform: uppercase;
}

.elena-email::after {
	position: absolute;
	right: 0;
	bottom: -10px;
	left: 0;
	height: 3px;
	background: var(--elena-blue);
	content: "";
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.elena-email:hover,
.elena-email:focus-visible {
	color: #60a5fa;
}

.elena-email:hover::after,
.elena-email:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left;
}

.elena-socials {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px 40px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	opacity: 0.42;
}

.elena-socials a {
	transition: color 180ms ease, opacity 180ms ease;
}

.elena-socials a:hover,
.elena-socials a:focus-visible {
	color: #60a5fa;
	opacity: 1;
}

.elena-footer {
	display: flex;
	justify-content: space-between;
	padding: 32px var(--elena-page-gutter);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.34;
}

body.elena-landing .elena-site :focus-visible {
	outline: 2px solid #60a5fa;
	outline-offset: 5px;
}

@media (max-width: 900px) {
	.elena-section-heading {
		grid-template-columns: 1fr;
		gap: 25px;
	}

	.elena-projects {
		grid-template-columns: 1fr;
	}

	.elena-project {
		grid-column: auto;
		width: min(100%, 620px);
	}

	.elena-project:nth-child(2) {
		margin-top: 0;
		margin-left: auto;
	}

	.elena-about-grid,
	.elena-service-list {
		margin-left: 0;
	}

	.elena-about-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.elena-header {
		align-items: flex-start;
		padding-top: 20px;
	}

	.elena-logo small,
	.elena-nav a:nth-child(2),
	.elena-nav a:nth-child(3) {
		display: none;
	}

	.elena-nav {
		gap: 18px;
	}

	.elena-section {
		padding-top: 105px;
		padding-bottom: 70px;
	}

	.elena-eyebrow span:last-child {
		display: none;
	}

	.elena-hero-copy {
		width: 100%;
		margin-bottom: 8vh;
	}

	.elena-scroll-cue {
		align-self: flex-start;
	}

	.elena-service-list > div {
		grid-template-columns: 40px 1fr;
	}

	.elena-service-list p {
		grid-column: 2;
		margin-top: 8px;
	}

	.elena-email {
		font-size: clamp(18px, 6vw, 36px);
	}

	.elena-footer {
		gap: 20px;
		line-height: 1.5;
	}
}

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

	body.elena-landing *,
	body.elena-landing *::before,
	body.elena-landing *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}