:root {
	--bg: #0d1020;
	--bg-deep: #080a14;
	--panel: #14182b;
	--panel-alt: #1b2038;
	--text: #f0f1fa;
	--muted: #a5aac5;
	--line: #40486f;
	--accent: #3f51b5;
	--accent-light: #9fa8da;
	--accent-bright: #bec5ff;
	--accent-soft: rgba(63, 81, 181, .2);
	--cyan: #54ddd2;
	--amber: #f3b94f;
	--violet: #bd92ff;
	--red: #ff7166;
	--shadow: 8px 8px 0 rgba(0, 0, 0, .42);
	--mono: "IBM Plex Mono", "Courier New", monospace;
	--display: "Space Grotesk", Arial, sans-serif;
	--page-x: clamp(1rem, 4vw, 4.5rem);
	--max-width: 1500px;
	--radius: 10px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
	scrollbar-color: var(--accent) var(--bg-deep);
	scrollbar-width: thin;
}

* {
	scrollbar-color: var(--accent) var(--bg-deep);
	scrollbar-width: thin;
}

*::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

*::-webkit-scrollbar-track {
	border-left: 1px solid rgba(63, 81, 181, .28);
	background:
		linear-gradient(90deg, transparent 0 3px, rgba(63, 81, 181, .06) 3px 4px, transparent 4px),
		var(--bg-deep);
}

*::-webkit-scrollbar-thumb {
	border: 3px solid var(--bg-deep);
	border-radius: 0;
	background:
		linear-gradient(180deg, var(--accent-light), var(--accent) 32%, #2d3d96 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

*::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, var(--accent-bright), #596dcc 45%, var(--accent));
}

*::-webkit-scrollbar-corner {
	background: var(--bg-deep);
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--mono);
	font-size: 1rem;
	line-height: 1.6;
	overflow-x: hidden;
}

body::before {
	position: fixed;
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(rgba(63, 81, 181, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(63, 81, 181, .035) 1px, transparent 1px);
	background-size: 48px 48px;
	content: "";
	pointer-events: none;
}

body.dialog-open {
	overflow: hidden;
}

::selection {
	background: var(--accent);
	color: #fff;
}

button,
a {
	color: inherit;
}

button {
	font: inherit;
}

img {
	display: block;
	max-width: 100%;
}

h1,
h2,
h3,
p {
	margin-top: 0;
}

h1,
h2,
h3 {
	font-family: var(--display);
	line-height: .98;
	letter-spacing: -.04em;
}

h2 {
	margin-bottom: 0;
	font-size: clamp(1.96rem, 4.9vw, 5.25rem);
}

h2 span.title-accent {color: var(--accent-light);}

.skip-link {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 1000;
	padding: .75rem 1rem;
	background: var(--accent);
	color: #fff;
	font-weight: 700;
	transform: translateY(-180%);
}

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

.boot-screen {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: grid;
	place-items: center;
	background: var(--bg-deep);
	color: var(--accent-light);
	transition: opacity .35s ease, visibility .35s ease;
}

.boot-screen.is-hidden {
	opacity: 0;
	visibility: hidden;
}

.boot-screen__content {
	width: min(34rem, calc(100% - 2rem));
	font-size: clamp(.72rem, 2vw, .95rem);
}

.boot-screen__content p {
	margin-bottom: .5rem;
}

.boot-progress {
	height: 8px;
	margin-top: 1.25rem;
	border: 1px solid var(--accent);
}

.boot-progress span {
	display: block;
	width: 0;
	height: 100%;
	background: var(--accent);
	animation: boot 1.05s steps(9, end) forwards;
}

@keyframes boot {
	to { width: 100%; }
}

.site-noise,
.scanlines,
.pointer-glow {
	position: fixed;
	inset: 0;
	z-index: 20;
	pointer-events: none;
}

.site-noise {
	opacity: .04;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.scanlines {
	opacity: .055;
	background: repeating-linear-gradient(0deg, transparent 0 3px, #000 4px);
}

.pointer-glow {
	inset: auto;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(63, 81, 181, .15), transparent 68%);
	transform: translate(-50%, -50%);
	transition: opacity .2s ease;
}

.effects-off .site-noise,
.effects-off .scanlines,
.effects-off .pointer-glow,
.effects-off .hero-hud,
.effects-off .project-card__visual::after {
	display: none;
}

.effects-off *,
.effects-off *::before,
.effects-off *::after {
	animation-duration: .001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: .001ms !important;
}

.effects-off .reveal,
.effects-off .terminal-lines p,
.effects-off .timeline__item,
.effects-off .lab-console,
.effects-off .lab-console__sidebar,
.effects-off .lab-console__content,
.effects-off .lab-file {
	opacity: 1 !important;
	transform: none !important;
	clip-path: none !important;
	filter: none !important;
}

.topbar {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 50;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	width: 100%;
	height: 76px;
	padding: 0 var(--page-x);
	border-bottom: 1px solid rgba(63, 81, 181, .5);
	background: rgba(13, 16, 32, .9);
	backdrop-filter: blur(14px);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	width: max-content;
	color: var(--text);
	font-weight: 600;
	text-decoration: none;
}

.brand__mark {
	width: 34px;
}

/*.brand__mark {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--accent);
	background: var(--accent);
	color: #fff;
	font-size: .8rem;
	box-shadow: 3px 3px 0 rgba(63, 81, 181, .38);
}*/

.desktop-nav {
	display: flex;
	gap: clamp(1rem, 3vw, 3.5rem);
}

.desktop-nav a,
.footer a {
	position: relative;
	color: var(--muted);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-decoration: none;
}

.desktop-nav a::after,
.footer a::after {
	position: absolute;
	bottom: -.3rem;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--accent);
	content: "";
	transition: width .2s ease;
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible,
.footer a:hover,
.footer a:focus-visible {
	color: var(--accent-bright);
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after,
.footer a:hover::after,
.footer a:focus-visible::after {
	width: 100%;
}

.effects-toggle {
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	border: 0;
	background: transparent;
	color: var(--muted);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .06em;
	cursor: pointer;
}

.effects-toggle__light,
.status-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 12px var(--accent);
}

#topbar-social {
	display: flex;
	align-items: center;
	justify-self: end;
	gap: 10px;
}

#topbar-social svg {
	width: 24px;
	vertical-align: middle;
	fill: var(--accent-light);
	transition: .3s;
}

#topbar-social a:hover svg {
	fill: var(--accent-bright);
}

.flight-progress {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 2px;
	overflow: hidden;
}

.flight-progress span {
	display: block;
	width: var(--flight-progress, 0%);
	height: 100%;
	background: linear-gradient(90deg, var(--accent), var(--accent-bright));
	box-shadow: 0 0 12px var(--accent);
	transition: width .08s linear;
}

.section {
	width: min(100%, var(--max-width));
	margin: 0 auto;
	padding: clamp(6rem, 11vw, 11rem) var(--page-x);
}

#background-video {
	position: absolute;
	width: 100%;
	height: 100vh;
	z-index: -1;
	top: 0;
	left: 0;
	opacity: .5;
}

#background-video::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	height: 60%;
	width: 100%;
	background: #0D1020;
	background: linear-gradient(0deg,rgba(13, 16, 32, 1) 0%, rgba(13, 16, 32, 0) 100%);
}

#background-video video {
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100vh;
	object-fit: cover;
	top: 0;
	left: 0;
	filter: invert(1);
	opacity: .5;
}

.hero {
	position: relative;
	display: flex;
	min-height: 100svh;
	flex-direction: column;
	justify-content: center;
	padding-top: 8rem;
	padding-bottom: 4rem;
}

.hero video {
	position: absolute;
	z-index: -1;
	width: 100%;
	mix-blend-mode: multiply;
	top: 0;
	left: 0;
	height: 100%;
}

.hero-hud {
	position: absolute;
	top: 18%;
	right: clamp(1rem, 5vw, 5rem);
	z-index: -1;
	display: grid;
	grid-template-columns: auto auto;
	align-items: end;
	gap: 1.2rem;
	opacity: .34;
	pointer-events: none;
}

.hero-hud__reticle {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(150px, 20vw, 280px);
	aspect-ratio: 1;
	border: 1px solid var(--accent);
	border-radius: 50%;
	background: radial-gradient(circle, transparent 0 8%, rgba(63, 81, 181, .08) 8.5% 9%, transparent 9.5% 45%, rgba(63, 81, 181, .08) 45.5% 46%, transparent 46.5%);
	box-shadow: inset 0 0 40px rgba(63, 81, 181, .08);
	animation: hud-drift 7s ease-in-out infinite;
}

.hero-hud__reticle::before,
.hero-hud__reticle::after {
	position: absolute;
	background: var(--accent-light);
	content: "";
	opacity: .65;
}

.hero-hud__reticle::before {
	width: 118%;
	height: 1px;
}

.hero-hud__reticle::after {
	width: 1px;
	height: 118%;
}

.hero-hud__reticle i {
	position: absolute;
	width: 18%;
	height: 18%;
	border-color: var(--accent-light);
	border-style: solid;
}

.hero-hud__reticle i:nth-child(1) { top: 11%; left: 11%; border-width: 1px 0 0 1px; }
.hero-hud__reticle i:nth-child(2) { top: 11%; right: 11%; border-width: 1px 1px 0 0; }
.hero-hud__reticle i:nth-child(3) { right: 11%; bottom: 11%; border-width: 0 1px 1px 0; }
.hero-hud__reticle i:nth-child(4) { bottom: 11%; left: 11%; border-width: 0 0 1px 1px; }

.hero-hud__reticle span {
	color: var(--accent-bright);
	font-size: .65rem;
	letter-spacing: .14em;
}

.hero-hud__telemetry {
	margin: 0;
	color: var(--accent-light);
	font-size: .58rem;
	line-height: 1.8;
	letter-spacing: .1em;
}

@keyframes hud-drift {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	50% { transform: translate3d(-10px, 8px, 0) rotate(3deg); }
}

.hero__status {
	display: flex;
	justify-content: space-between;
	margin-bottom: clamp(2rem, 5vw, 5rem);
	padding-bottom: .7rem;
	border-bottom: 1px solid var(--line);
}

.mono-label,
.eyebrow {
	color: var(--accent-light);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.65fr) minmax(300px, .65fr);
	align-items: end;
	gap: clamp(3rem, 7vw, 8rem);
}

.hero__title {
	max-width: 1050px;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
	font-size: clamp(2.38rem, 6.16vw, 6.44rem);
}

.hero__title span {
	display: block;
	color: transparent;
	-webkit-text-stroke: 1px var(--muted);
}

.hero__intro {
	max-width: 760px;
	margin-bottom: 2.5rem;
	color: var(--muted);
	font-family: var(--display);
	font-size: clamp(1.05rem, 1.6vw, 1.45rem);
	line-height: 1.5;
}

.hero__actions,
.contact__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: .85rem 1.2rem;
	border: 1px solid var(--accent);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
	border-radius: var(--radius);
}

.button:hover,
.button:focus-visible {
	transform: translate(-3px, -3px);
	box-shadow: 5px 5px 0 rgba(63, 81, 181, .36);
}

.button--primary {
	background: var(--accent);
	color: #fff;
}

.button--ghost {
	background: transparent;
	color: var(--accent-light);
}

.system-card,
.capability-terminal,
.lab-console {
	border: 1px solid var(--line);
	background: var(--panel);
	box-shadow: var(--shadow);
	border-radius: var(--radius);
}

.window-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 36px;
	padding: .45rem .7rem;
	border-bottom: 1px solid var(--line);
	background: var(--panel-alt);
	color: var(--muted);
	font-size: .65rem;
	letter-spacing: .08em;
	border-radius: var(--radius) var(--radius) 0 0;
}

.window-controls {
	display: flex;
	gap: .35rem;
}

.window-controls i {
	display: block;
	width: 8px;
	height: 8px;
	border: 1px solid var(--muted);
	border-radius: var(--radius);
}

.system-card__body {
	padding: 1.25rem;
}

.system-list {
	margin: 0;
}

.system-list div {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 1rem;
	padding: .55rem 0;
	border-bottom: 1px dotted rgba(163, 165, 146, .25);
	font-size: .72rem;
}

.system-list dt {
	color: var(--muted);
}

.system-list dd {
	margin: 0;
	color: var(--text);
}

.system-portrait {
	margin-bottom: 1.3rem;
	padding: 1rem;
	border: 1px dashed var(--line);
	color: var(--accent-light);
	text-align: center;
	overflow: hidden;
	border-radius: 10px;
}

.system-portrait .image-filter {
	border-radius: 5px;
}

.scroll-hint {
	display: flex;
	align-items: center;
	gap: 1rem;
	align-self: flex-start;
	margin-top: clamp(3rem, 8vh, 7rem);
	color: var(--muted);
	font-size: .64rem;
	letter-spacing: .1em;
	text-decoration: none;
}

.scroll-hint i {
	position: relative;
	display: block;
	width: 80px;
	height: 1px;
	background: var(--line);
	overflow: hidden;
}

.scroll-hint i::after {
	position: absolute;
	inset: 0;
	background: var(--accent);
	content: "";
	transform: translateX(-100%);
	animation: scan 1.8s infinite ease-in-out;
}

@keyframes scan {
	50%, 100% { transform: translateX(100%); }
}

.section-heading {
	display: grid;
	grid-template-columns: 1.3fr .7fr;
	align-items: end;
	gap: 3rem;
	margin-bottom: clamp(3rem, 7vw, 6rem);
}

.section-heading > p {
	max-width: 500px;
	margin: 0 0 .7rem;
	color: var(--muted);
	font-family: var(--display);
	font-size: 1.08rem;
}

.project-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 2.5vw, 2.5rem);
}

.project-card {
	min-width: 0;
}

.project-card--wide {
	grid-column: span 2;
}

.project-card__button {
	display: grid;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 1px solid var(--line);
	background: var(--panel);
	color: var(--text);
	text-align: left;
	box-shadow: var(--shadow);
	cursor: pointer;
	overflow: hidden;
	transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
	border-radius: var(--radius);
}

.project-card--wide .project-card__button {
	grid-template-columns: 1.25fr .75fr;
}

.project-card__button:hover,
.project-card__button:focus-visible {
	border-color: var(--accent);
	transform: translate(-5px, -5px);
	box-shadow: 13px 13px 0 rgba(0, 0, 0, .46);
	outline: none;
}

.project-card__visual {
	position: relative;
	min-height: 370px;
	background: #11152a;
	overflow: hidden;
}

.project-card:not(.project-card--wide) .project-card__visual {
	min-height: 330px;
}

.project-card__visual::before {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: repeating-linear-gradient(90deg, transparent 0 11px, rgba(0, 0, 0, .08) 12px);
	content: "";
	mix-blend-mode: multiply;
}

.project-card__visual::after {
	position: absolute;
	inset: 12px;
	z-index: 2;
	background:
		linear-gradient(var(--accent-light), var(--accent-light)) left top / 24px 1px no-repeat,
		linear-gradient(var(--accent-light), var(--accent-light)) left top / 1px 24px no-repeat,
		linear-gradient(var(--accent-light), var(--accent-light)) right top / 24px 1px no-repeat,
		linear-gradient(var(--accent-light), var(--accent-light)) right top / 1px 24px no-repeat,
		linear-gradient(var(--accent-light), var(--accent-light)) left bottom / 24px 1px no-repeat,
		linear-gradient(var(--accent-light), var(--accent-light)) left bottom / 1px 24px no-repeat,
		linear-gradient(var(--accent-light), var(--accent-light)) right bottom / 24px 1px no-repeat,
		linear-gradient(var(--accent-light), var(--accent-light)) right bottom / 1px 24px no-repeat;
	content: "";
	opacity: 0;
	transform: scale(1.025);
	transition: opacity .22s ease, transform .35s ease;
	pointer-events: none;
}

.project-card__button:hover .project-card__visual::after,
.project-card__button:focus-visible .project-card__visual::after {
	opacity: .8;
	transform: scale(1);
}

.project-card__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .3s ease;
}

.project-card__button:hover .project-card__visual img {
	transform: scale(1.045);
	filter: saturate(1.15) contrast(1.06);
}

.project-card__index {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 2;
	padding: .25rem .45rem;
	background: var(--bg-deep);
	color: var(--accent);
	font-size: .65rem;
}

.project-card__content {
	display: flex;
	min-height: 270px;
	flex-direction: column;
	padding: clamp(1.3rem, 3vw, 2.5rem);
}

.project-card__meta {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: auto;
	color: var(--muted);
	font-size: .62rem;
	letter-spacing: .07em;
}

.project-card h3 {
	margin: clamp(2rem, 5vw, 5rem) 0 1rem;
	font-size: clamp(1.4rem, 2.8vw, 3.15rem);
}

.project-card:not(.project-card--wide) h3 {
	font-size: clamp(1.26rem, 2.38vw, 2.24rem);
}

.project-card p {
	max-width: 620px;
	margin-bottom: 2rem;
	color: var(--muted);
}

.project-card__open {
	margin-top: auto;
	color: var(--accent-light);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .07em;
}

.profile {
	position: relative;
}

.profile::before {
	position: absolute;
	top: 8%;
	right: -8%;
	z-index: -1;
	width: 420px;
	height: 420px;
	border: 1px solid rgba(63, 81, 181, .2);
	border-radius: 50%;
	box-shadow: 0 0 0 50px rgba(63, 81, 181, .035), 0 0 0 100px rgba(63, 81, 181, .02);
	content: "";
}

.profile-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 6vw, 7rem);
	align-items: start;
}

.profile-copy {
	font-family: var(--display);
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
}

.profile-copy p {
	color: var(--muted);
}

.profile-copy__lead {
	color: var(--text) !important;
	font-size: clamp(1.35rem, 2.2vw, 2.1rem);
	font-weight: 600;
	line-height: 1.35;
}

.terminal-lines {
	padding: 1rem 1.4rem;
}

.terminal-lines p {
	display: grid;
	grid-template-columns: 30px 1fr;
	gap: .8rem;
	margin: 0;
	padding: .8rem 0;
	border-bottom: 1px dotted rgba(163, 165, 146, .25);
	position: relative;
	font-size: clamp(.7rem, 1vw, .82rem);
	opacity: 0;
	transform: translateX(-14px);
}

.capability-terminal.is-visible .terminal-lines p {
	animation: terminal-line-in .46s cubic-bezier(.2, .75, .25, 1) forwards;
	animation-delay: calc(180ms + var(--line-index, 0) * 95ms);
}

.capability-terminal.is-visible .terminal-lines p::after {
	position: absolute;
	top: 50%;
	right: 0;
	width: 0;
	height: 1px;
	background: linear-gradient(90deg, var(--accent), transparent);
	content: "";
	opacity: .65;
	animation: terminal-scan .42s ease-out forwards;
	animation-delay: calc(240ms + var(--line-index, 0) * 95ms);
}

@keyframes terminal-line-in {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes terminal-scan {
	50% { width: 36px; }
	100% { width: 0; opacity: 0; }
}

.terminal-lines span {
	color: var(--accent-light);
}

.timeline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	margin-top: clamp(4rem, 9vw, 9rem);
}

.timeline::before,
.timeline::after {
	position: absolute;
	top: 0;
	left: 0;
	height: 1px;
	content: "";
}

.timeline::before {
	width: 100%;
	background: var(--line);
}

.timeline::after {
	width: 0;
	background: linear-gradient(90deg, var(--accent), var(--accent-light));
	box-shadow: 0 0 10px rgba(63, 81, 181, .65);
}

.timeline.is-visible::after {
	animation: timeline-draw 1.05s cubic-bezier(.25, .8, .25, 1) .1s forwards;
}

.timeline__item {
	position: relative;
	padding: 2.3rem 1.2rem 0 0;
	opacity: 0;
	transform: translateY(18px);
}

.timeline.is-visible .timeline__item {
	animation: timeline-item-in .52s cubic-bezier(.2, .75, .25, 1) forwards;
	animation-delay: calc(280ms + var(--timeline-index, 0) * 145ms);
}

.timeline__item::before {
	position: absolute;
	top: -6px;
	left: 0;
	width: 11px;
	height: 11px;
	border: 1px solid var(--accent);
	background: var(--bg);
	content: "";
	transform: scale(0);
}

.timeline.is-visible .timeline__item::before {
	animation: timeline-node-in .32s cubic-bezier(.2, 1.45, .4, 1) forwards;
	animation-delay: calc(210ms + var(--timeline-index, 0) * 145ms);
}

.timeline__item--active::before {
	background: var(--accent);
	box-shadow: 0 0 14px var(--accent);
}

.timeline time {
	display: block;
	margin-bottom: .8rem;
	color: var(--accent-light);
	font-size: .7rem;
}

.timeline strong {
	display: block;
	margin-bottom: .6rem;
	font-size: .75rem;
}

.timeline p {
	color: var(--muted);
	font-size: .76rem;
}

@keyframes timeline-draw {
	to { width: 100%; }
}

@keyframes timeline-item-in {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes timeline-node-in {
	to { transform: scale(1); }
}

.lab.section {padding-bottom: 0;}

.lab-console {
	position: relative;
	display: grid;
	grid-template-columns: 220px 1fr;
	min-height: 460px;
	opacity: 0;
	margin-bottom: -11vw;
	padding-top: 36px;
	transform: translateY(18px) scaleX(.975);
	transform-origin: left center;
}

.lab-console::after {
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 5;
	width: 2px;
	background: var(--accent-bright);
	box-shadow: 0 0 18px var(--accent), 0 0 38px rgba(63, 81, 181, .55);
	content: "";
	opacity: 0;
	pointer-events: none;
}

.lab-console.is-visible {
	animation: console-reveal .82s cubic-bezier(.2, .75, .25, 1) forwards;
}

.lab-console.is-visible::after {
	animation: console-scan .82s cubic-bezier(.2, .75, .25, 1) forwards;
}

@keyframes console-reveal {
	to {
		opacity: 1;
		transform: translateY(0) scaleX(1);
	}
}

@keyframes console-scan {
	0% { left: 0; opacity: 0; }
	12%, 72% { opacity: .85; }
	100% { left: 100%; opacity: 0; }
}

.lab-console .window-bar {
	position: absolute;
	width: 100%;
}

.lab-console__sidebar {
	display: flex;
	flex-direction: column;
	padding: 1rem;
	border-right: 1px solid var(--line);
	background: var(--panel-alt);
	opacity: 0;
	border-bottom-left-radius: var(--radius);
	transform: translateX(-12px);
}

.lab-console.is-visible .lab-console__sidebar {
	animation: console-panel-in .45s ease .52s forwards;
}

.lab-console__sidebar button {
	padding: 1rem;
	border: 0;
/*	border-bottom: 1px solid var(--line);*/
	background: transparent;
	color: var(--muted);
	font-size: .75rem;
	text-align: left;
	cursor: pointer;
	border-radius: var(--radius);
}

.lab-console__sidebar button:hover,
.lab-console__sidebar button:focus-visible,
.lab-console__sidebar button.is-active {
	background: var(--accent);
	color: #fff;
	outline: none;
}

.lab-console__sidebar button:not(:first-child) {
	margin-top: 5px;
}

.lab-console__content {
	padding: clamp(1.5rem, 4vw, 4rem);
	opacity: 0;
	transform: translateY(10px);
}

.lab-console.is-visible .lab-console__content {
	animation: console-panel-in .5s ease .62s forwards;
}

@keyframes console-panel-in {
	to {
		opacity: 1;
		transform: translate(0);
	}
}

.lab-command {
	margin-bottom: 2.5rem;
	color: var(--accent-light);
	font-size: .75rem;
}

.lab-command::after {
	display: inline-block;
	width: .65em;
	height: 1.1em;
	margin-left: .4rem;
	background: var(--accent);
	content: "";
	vertical-align: -.2em;
	animation: blink 1s steps(1) infinite;
}

@keyframes blink {
	50% { opacity: 0; }
}

.lab-files {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.lab-file {
	position: relative;
	min-width: 0;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, .018);
	overflow: hidden;
	opacity: 0;
	border-radius: var(--radius);
	transform: translateY(12px);
	transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.lab-console.is-visible .lab-panel.is-active:not(.is-switching) .lab-file {
	animation: lab-file-in .42s cubic-bezier(.2, .75, .25, 1) forwards;
	animation-delay: calc(760ms + var(--lab-index, 0) * 80ms);
}

.lab-console.is-visible .lab-panel.is-active.is-switching .lab-file {
	animation: lab-file-in .34s cubic-bezier(.2, .75, .25, 1) forwards;
	animation-delay: calc(50ms + var(--lab-index, 0) * 65ms);
}

.lab-panel.is-ready .lab-file {
	opacity: 1;
	transform: translateY(0);
}

@keyframes lab-file-in {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.lab-file:hover {
	border-color: var(--accent-light);
	background: var(--accent-soft);
	transform: translateY(-3px);
}

.lab-file__media {
	display: grid;
	grid-template-columns: 1fr;
/*	height: 170px;*/
	aspect-ratio: 2 / 1;
	border-bottom: 1px solid var(--line);
	background: var(--bg-deep);
	overflow: hidden;
}

.lab-file__media--double {
	grid-template-columns: repeat(2, 1fr);
}

.lab-file__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.72) contrast(1.08);
	transition: transform .45s ease, filter .25s ease;
}

.lab-file__media--double img + img {
	border-left: 1px solid var(--line);
}

.lab-file:hover .lab-file__media img {
	transform: scale(1.035);
	filter: saturate(1) contrast(1.08);
}

.lab-file__copy {
	position: relative;
	padding: 1rem 4.2rem 1rem 1rem;
}

.lab-file__copy span,
.lab-file__copy small,
.lab-file__copy b {
	display: block;
}

.lab-file__copy span {
	margin-bottom: .35rem;
	font-size: .76rem;
}

.lab-file__copy small {
	color: var(--muted);
	font-size: .7rem;
}

.lab-file__copy b {
	position: absolute;
	top: 1rem;
	right: 1rem;
	color: var(--accent-light);
	font-size: .58rem;
	font-weight: 500;
	letter-spacing: .06em;
}

.contact {
	width: 100%;
	max-width: none;
	padding-right: max(var(--page-x), calc((100vw - var(--max-width)) / 2 + var(--page-x)));
	padding-left: max(var(--page-x), calc((100vw - var(--max-width)) / 2 + var(--page-x)));
	padding-top: 22vw;
	border-top: 1px solid rgba(63, 81, 181, .38);
	background: var(--bg-deep);
}

.contact__inner {
/*	max-width: 1120px;*/
	z-index: 1;
	position: relative;
	display: flex;
	align-items: center;
}

.contact__inner > div:first-child {
	width: 60%;
}

.contact h2 {
	margin-bottom: 2rem;
}

.contact h2 span {
	color: var(--accent-light);
}

.contact__inner > p:not(.eyebrow, .contact__notice) {
	max-width: 720px;
	margin-bottom: 2.5rem;
	color: var(--muted);
	font-family: var(--display);
	font-size: 1.15rem;
}

.contact__notice {
	min-height: 1.6rem;
	margin-top: 1rem;
	color: var(--accent-light);
	font-size: .72rem;
}

.lab.section {position: relative; z-index: 2;}

.contact.section {position: relative;}

#background-bottom {
	position: absolute;
	width: 100%;
	height: 100vh;
	z-index: 0;
	bottom: 0;
	left: 0;
	opacity: .10;
	background-image: url(../img/background-bottom.png);
	background-attachment: fixed;
	background-size: cover;
	background-position: top;
}

#background-bottom::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	background: #080a14;
	background: linear-gradient(-180deg,rgba(8, 10, 20, 1) 0%, rgba(8, 10, 20, 0) 100%);
}

#background-bottom img {
	display: none;
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100vh;
	object-fit: cover;
	top: 0;
	left: 0;
	opacity: .25;
}

.footer {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 2rem;
	padding: 2rem var(--page-x);
	border-top: 1px solid var(--line);
	background: var(--bg-deep);
	color: var(--muted);
	font-size: .62rem;
	letter-spacing: .05em;
}

.footer p {
	margin: 0;
}

.footer p:nth-child(2) {
	text-align: center;
}

.footer a {
	justify-self: end;
}

.mobile-nav {
	display: none;
}

.project-dialog {
	width: min(1160px, calc(100% - 2rem));
	max-height: calc(100svh - 2rem);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--text);
	overflow: visible;
	opacity: 0;
}

.project-dialog::backdrop {
	background: rgba(5, 7, 16, 0);
	backdrop-filter: blur(0);
}

.project-dialog.is-open {
	opacity: 1;
}

.project-dialog.is-open::backdrop {
	background: rgba(5, 7, 16, .88);
	backdrop-filter: blur(8px);
}

.project-dialog.is-opening {
	animation: dialog-fade-in .34s ease forwards;
}

.project-dialog.is-opening::backdrop {
	animation: backdrop-in .34s ease forwards;
}

.project-dialog.is-closing {
	animation: dialog-fade-out .28s ease forwards;
	pointer-events: none;
}

.project-dialog.is-closing::backdrop {
	animation: backdrop-out .28s ease forwards;
}

.dialog-shell {
	position: relative;
	border: 1px solid var(--accent);
	background: var(--panel);
	box-shadow: 16px 16px 0 rgba(0, 0, 0, .6);
	overflow: hidden;
	transform: translateY(34px) scale(.965);
	transform-origin: center 42%;
	filter: blur(4px);
}

.dialog-shell::after {
	position: absolute;
	inset: 0;
	z-index: 8;
	background: linear-gradient(180deg, transparent 0 45%, rgba(190, 197, 255, .32) 49%, rgba(63, 81, 181, .15) 51%, transparent 56%);
	content: "";
	opacity: 0;
	pointer-events: none;
}

.project-dialog.is-open .dialog-shell {
	transform: translateY(0) scale(1);
	filter: blur(0);
}

.project-dialog.is-opening .dialog-shell {
	animation: dialog-shell-in .42s cubic-bezier(.16, .85, .28, 1.05) forwards;
}

.project-dialog.is-opening .dialog-shell::after {
	animation: dialog-boot-scan .48s ease-out forwards;
}

.project-dialog.is-closing .dialog-shell {
	animation: dialog-shell-out .28s cubic-bezier(.55, .05, .75, .35) forwards;
}

@keyframes dialog-fade-in {
	to { opacity: 1; }
}

@keyframes dialog-fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes backdrop-in {
	to {
		background: rgba(5, 7, 16, .88);
		backdrop-filter: blur(8px);
	}
}

@keyframes backdrop-out {
	from {
		background: rgba(5, 7, 16, .88);
		backdrop-filter: blur(8px);
	}
	to {
		background: rgba(5, 7, 16, 0);
		backdrop-filter: blur(0);
	}
}

@keyframes dialog-shell-in {
	0% {
		transform: translateY(34px) scale(.965);
		filter: blur(4px);
	}
	65% {
		transform: translateY(-4px) scale(1.003);
		filter: blur(0);
	}
	100% {
		transform: translateY(0) scale(1);
		filter: blur(0);
	}
}

@keyframes dialog-shell-out {
	from {
		transform: translateY(0) scale(1);
		filter: blur(0);
	}
	to {
		transform: translateY(24px) scale(.975);
		filter: blur(3px);
	}
}

@keyframes dialog-boot-scan {
	0% { opacity: 0; transform: translateY(-60%); }
	25% { opacity: .85; }
	100% { opacity: 0; transform: translateY(75%); }
}

.dialog-close {
	display: grid;
	place-items: center;
	width: 28px;
	height: 24px;
	padding: 0;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--text);
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
}

.dialog-close:hover,
.dialog-close:focus-visible {
	border-color: var(--red);
	background: var(--red);
	color: var(--bg-deep);
	outline: none;
}

.dialog-content {
	max-height: calc(100svh - 5rem);
	overflow: auto;
}

.dialog-hero {
	height: min(45vw, 440px);
	min-height: 280px;
	border-bottom: 1px solid var(--line);
	overflow: hidden;
}

.dialog-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
/*	position: fixed;*/
}

.case-header {
	display: grid;
	grid-template-columns: 1.3fr .7fr;
	gap: 2rem;
	padding: clamp(2rem, 5vw, 4rem);
	border-bottom: 1px solid var(--line);
}

.case-header h2 {
	font-size: clamp(2.1rem, 4.9vw, 4.55rem);
}

.case-header dl {
	align-self: end;
	margin: 0;
}

.case-header dl div {
	display: grid;
	grid-template-columns: 80px 1fr;
	padding: .7rem 0;
	border-bottom: 1px dotted var(--line);
	font-size: .72rem;
}

.case-header dt {
	color: var(--muted);
}

.case-header dd {
	margin: 0;
}

.case-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.case-grid > div {
	min-height: 230px;
	padding: clamp(1.5rem, 4vw, 3.5rem);
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.case-grid h3 {
	margin-bottom: 1.2rem;
	color: var(--accent-light);
	font-family: var(--mono);
	font-size: .75rem;
	letter-spacing: .07em;
}

.case-grid p {
	margin: 0;
	color: var(--muted);
	font-family: var(--display);
	font-size: 1.05rem;
}

.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .2, 1);
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.project-card.reveal {
	transform: translateY(38px) scale(.985);
	transition-duration: .72s;
	transition-delay: var(--reveal-delay, 0ms);
}

.project-card.reveal.is-visible {
	transform: translateY(0) scale(1);
}

.capability-terminal.reveal,
.timeline.reveal,
.lab-console.reveal {
	transition-delay: 0ms !important;
}


/* Image treatments ------------------------------------------------------- */

.project-card__visual,
.dialog-hero {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
}

.project-card__visual > .image-filter,
.dialog-hero > .image-filter {
	position: absolute;
	inset: 0;
}

.lab-file__media > .image-filter {
	min-width: 0;
	height: 100%;
}

.lab-file__media--double .image-filter + .image-filter {
	border-left: 1px solid var(--line);
}

.image-filter {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background: var(--bg-deep);
	isolation: isolate;
	overflow: hidden;
}

.image-filter > img {
	position: relative;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.22) brightness(.72);
	mix-blend-mode: luminosity;
	opacity: .82;
	transition: filter .42s ease, opacity .42s ease, mix-blend-mode .42s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}

.image-filter::before,
.image-filter::after {
	position: absolute;
	inset: 0;
	content: "";
	pointer-events: none;
	transition: opacity .38s ease;
}

.image-filter::after {
	z-index: 1;
	background:
		linear-gradient(125deg, rgba(8, 10, 20, .18), rgba(63, 81, 181, .72)),
		linear-gradient(0deg, rgba(159, 168, 218, .2), transparent 65%);
	mix-blend-mode: color;
	opacity: .78;
}

.image-filter--halftone::before {
	z-index: 2;
	background:
		radial-gradient(circle at center, rgba(190, 197, 255, .82) 0 1px, transparent 1.35px) 0 0 / 6px 6px,
		linear-gradient(90deg, rgba(8, 10, 20, .5), transparent 55%);
	mix-blend-mode: screen;
	opacity: .68;
}

.image-filter--ascii > img {
	filter: grayscale(1) contrast(1.35) brightness(.55);
	opacity: .3;
}

.image-filter--ascii::before {
	z-index: 2;
	background:
		repeating-linear-gradient(90deg, rgba(190, 197, 255, .14) 0 1px, transparent 1px 7px),
		repeating-linear-gradient(0deg, rgba(63, 81, 181, .12) 0 1px, transparent 1px 10px);
	mix-blend-mode: screen;
	opacity: .45;
}

.image-filter--ascii.is-ascii-ready::before {
	opacity: .12;
}

.ascii-filter-canvas {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: block;
	width: 100%;
	height: 100%;
	mix-blend-mode: screen;
	opacity: 0;
	filter: drop-shadow(0 0 4px rgba(63, 81, 181, .38));
	transition: opacity .38s ease;
	pointer-events: none;
}

.image-filter--ascii.is-ascii-ready .ascii-filter-canvas {
	opacity: .92;
}

.image-filter--ascii-fallback::before {
	background:
		repeating-linear-gradient(0deg, transparent 0 7px, rgba(190, 197, 255, .24) 7px 8px),
		repeating-linear-gradient(90deg, rgba(63, 81, 181, .28) 0 2px, transparent 2px 8px);
	opacity: .72;
}

.project-card__button:hover .image-filter::before,
.project-card__button:hover .image-filter::after,
.project-card__button:focus-visible .image-filter::before,
.project-card__button:focus-visible .image-filter::after,
.project-card__button:hover .ascii-filter-canvas,
.project-card__button:focus-visible .ascii-filter-canvas,
.lab-file:hover .image-filter::before,
.lab-file:hover .image-filter::after,
.lab-file:hover .ascii-filter-canvas,
.lab-file:focus-within .image-filter::before,
.lab-file:focus-within .image-filter::after,
.lab-file:focus-within .ascii-filter-canvas,
.dialog-hero:hover .image-filter::before,
.dialog-hero:hover .image-filter::after,
.dialog-hero:hover .ascii-filter-canvas {
	opacity: 0;
}

.project-card__button:hover .image-filter > img,
.project-card__button:focus-visible .image-filter > img,
.lab-file:hover .image-filter > img,
.lab-file:focus-within .image-filter > img,
.dialog-hero:hover .image-filter > img {
	filter: none;
	mix-blend-mode: normal;
	opacity: 1;
}

.effects-off .image-filter::before,
.effects-off .image-filter::after,
.effects-off .ascii-filter-canvas {
	display: none;
}

.effects-off .image-filter > img {
	filter: none !important;
	mix-blend-mode: normal;
	opacity: 1;
}

@media (max-width: 1050px) {
	.topbar {
		grid-template-columns: 1fr auto;
	}

	.desktop-nav {
		display: none;
	}

	.hero__grid,
	.profile-grid {
		grid-template-columns: 1fr;
	}

	.system-card {
		max-width: 540px;
	}

	.section-heading {
		grid-template-columns: 1fr;
	}

	.section-heading > p {
		max-width: 700px;
	}

	.timeline {
		grid-template-columns: 1fr;
	}

	.timeline::before,
	.timeline::after {
		top: 0;
		width: 1px;
		height: 100%;
	}

	.timeline::after {
		height: 0;
	}

	.timeline.is-visible::after {
		animation-name: timeline-draw-mobile;
	}

	.timeline__item {
		padding: 0 0 2.5rem 2rem;
	}

	.timeline__item::before {
		top: .3rem;
		left: -6px;
	}

	@keyframes timeline-draw-mobile {
		to { height: 100%; }
	}
}

@media (max-width: 760px) {
	:root {
		--page-x: 1rem;
	}

	html {
		scroll-padding-top: 5rem;
	}

	body {
		padding-bottom: 68px;
	}

	.topbar {
		height: 64px;
	}

	.brand__text {
		font-size: .78rem;
	}

	.effects-toggle {
		min-width: 42px;
		justify-content: flex-end;
		gap: .35rem;
		font-size: 0;
	}

	.effects-toggle::after {
		content: "";
	}

	.hero {
		min-height: auto;
		padding-top: 8rem;
	}

	.hero-hud {
		top: 7rem;
		right: 1rem;
		opacity: .18;
	}

	.hero-hud__reticle {
		width: 120px;
	}

	.hero-hud__telemetry {
		display: none;
	}

	.hero__status {
		align-items: flex-start;
		flex-direction: column;
		gap: .3rem;
	}

	.hero__title {
		font-size: clamp(2.1rem, 10.85vw, 3.85rem);
	}

	.hero__title span {
		-webkit-text-stroke-width: .7px;
	}

	.hero__intro {
		font-size: 1rem;
	}

	.hero__actions,
	.contact__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.button {
		width: 100%;
	}

	.scroll-hint {
		display: none;
	}

	.section {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}

	h2 {
		font-size: clamp(1.89rem, 9.8vw, 3.5rem);
	}

	.project-grid {
		grid-template-columns: 1fr;
	}

	.project-card--wide {
		grid-column: auto;
	}

	.project-card--wide .project-card__button {
		grid-template-columns: 1fr;
	}

	.project-card__visual,
	.project-card:not(.project-card--wide) .project-card__visual {
		min-height: 260px;
	}

	.project-card__content {
		min-height: 300px;
	}

	.lab-console {
		grid-template-columns: 1fr;
	}

	.lab-console__sidebar {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}

	.lab-files {
		grid-template-columns: 1fr;
	}

	.lab-file__media {
		height: 150px;
	}

	.footer {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.footer p:nth-child(2) {
		text-align: left;
	}

	.footer a {
		align-self: flex-start;
	}

	.mobile-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 60;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		width: 100%;
		height: 68px;
		border-top: 1px solid var(--accent);
		background: rgba(8, 10, 20, .97);
		backdrop-filter: blur(12px);
	}

	.mobile-nav a {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: .15rem;
		border-right: 1px solid var(--line);
		color: var(--muted);
		font-size: .57rem;
		text-decoration: none;
	}

	.mobile-nav a span {
		color: var(--accent);
		font-size: 1rem;
	}

	.project-dialog {
		width: calc(100% - 1rem);
		max-height: calc(100svh - 1rem);
	}

	.dialog-shell {
		box-shadow: 7px 7px 0 rgba(0, 0, 0, .6);
	}

	.dialog-content {
		max-height: calc(100svh - 3.5rem);
	}

	.dialog-hero {
/*		height: 270px;*/
		min-height: 0;
	}

	.case-header,
	.case-grid {
		grid-template-columns: 1fr;
	}

	.case-header h2 {
		font-size: clamp(1.96rem, 9.1vw, 3.5rem);
	}

	.case-grid > div {
		min-height: auto;
		border-right: 0;
	}
}

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

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

	.boot-screen,
	.site-noise,
	.scanlines,
	.pointer-glow {
		display: none;
	}

	.reveal,
	.terminal-lines p,
	.timeline__item,
	.lab-console,
	.lab-console__sidebar,
	.lab-console__content,
	.lab-file,
	.project-dialog,
	.dialog-shell {
		opacity: 1;
		transform: none;
		clip-path: none;
		filter: none;
	}
}

/* JSON / client connections --------------------------------------------- */

.data-error {
	position: fixed;
	top: 5.25rem;
	left: 50%;
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 1rem;
	width: min(760px, calc(100% - 2rem));
	padding: .8rem 1rem;
	border: 1px solid var(--red);
	background: rgba(20, 8, 18, .96);
	box-shadow: 6px 6px 0 rgba(0, 0, 0, .4);
	color: var(--text);
	font-size: .74rem;
	transform: translateX(-50%);
}

.data-error strong {
	color: var(--red);
	white-space: nowrap;
}

.clients-block {
	position: relative;
	margin-top: clamp(3rem, 7vw, 7rem);
	border: 1px solid var(--line);
	background:
		linear-gradient(90deg, rgba(63, 81, 181, .08) 1px, transparent 1px),
		linear-gradient(rgba(63, 81, 181, .06) 1px, transparent 1px),
		rgba(8, 10, 20, .68);
	background-size: 34px 34px;
	box-shadow: var(--shadow);
		border-radius: var(--radius);
	overflow: hidden;
}

.clients-block::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 32%;
	height: 2px;
	background: linear-gradient(90deg, var(--accent-bright), transparent);
	content: "";
}

.clients-block::after {
	position: absolute;
	top: .7rem;
	right: .8rem;
	color: rgba(159, 168, 218, .42);
	content: "LINKED ORGANISATIONS / 06";
	font-family: var(--mono);
	font-size: .58rem;
	letter-spacing: .12em;
}

.clients-block__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr);
	gap: 2rem;
	padding: clamp(1.4rem, 3vw, 2.4rem);
	border-bottom: 1px solid var(--line);
}

.clients-block__header h3 {
	margin: .25rem 0 0;
	font-size: clamp(1.35rem, 2.2vw, 2.15rem);
}

.clients-block__header > div > p {
	align-self: end;
	margin: 0;
	margin-bottom: 10px;
	color: var(--muted);
	font-size: .78rem;
}

.client-logos {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.client-logo {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 132px;
	padding: 1.2rem;
	border-right: 1px solid var(--line);
	color: var(--muted);
	text-decoration: none;
	overflow: hidden;
	opacity: 0;
	transform: translateY(16px);
	transition: background .3s ease, opacity .5s ease, transform .5s ease;
}

.client-logo:last-child {
	border-right: 0;
}

.clients-block.is-visible .client-logo {
	opacity: 1;
	transform: translateY(0);
}

.clients-block.is-visible .client-logo:nth-child(2) { transition-delay: 70ms; }
.clients-block.is-visible .client-logo:nth-child(3) { transition-delay: 140ms; }
.clients-block.is-visible .client-logo:nth-child(4) { transition-delay: 210ms; }
.clients-block.is-visible .client-logo:nth-child(5) { transition-delay: 280ms; }
.clients-block.is-visible .client-logo:nth-child(6) { transition-delay: 350ms; }

.client-logo::before,
.client-logo::after {
	position: absolute;
	width: 14px;
	height: 14px;
	border-color: transparent;
	border-style: solid;
	content: "";
	opacity: .45;
	transition: opacity .25s ease, width .25s ease, height .25s ease;
}

.client-logo::before {
	top: .55rem;
	left: .55rem;
	border-width: 1px 0 0 1px;
	border-color: var(--accent-light) transparent transparent var(--accent-light);
}

.client-logo::after {
	right: .55rem;
	bottom: .55rem;
	border-width: 0 1px 1px 0;
	border-color: transparent var(--accent-light) var(--accent-light) transparent;
}

.client-logo img {
	width: 100%;
	max-width: 180px;
	height: 64px;
	object-fit: contain;
	filter: grayscale(1) contrast(1.15) brightness(.9) sepia(.18) hue-rotate(188deg) saturate(1.9);
	mix-blend-mode: screen;
	opacity: .58;
	transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}

.client-logo:hover img {
	mix-blend-mode: normal;
	filter: none !important;
}

.client-logo span {
	position: absolute;
	left: .8rem;
	bottom: .5rem;
	font-size: .52rem;
	letter-spacing: .08em;
	opacity: .38;
}

.client-logo:hover,
.client-logo:focus-visible {
	background: rgba(63, 81, 181, .09);
	outline: none;
}

.client-logo:hover::before,
.client-logo:hover::after,
.client-logo:focus-visible::before,
.client-logo:focus-visible::after {
	width: 22px;
	height: 22px;
	opacity: .9;
}

.client-logo:hover img,
.client-logo:focus-visible img {
	filter: grayscale(1) contrast(1.08) brightness(1.28) sepia(.08) hue-rotate(188deg) saturate(1.45);
	opacity: .92;
	transform: scale(1.025);
}

.effects-off .client-logo,
.clients-block.effects-off .client-logo {
	opacity: 1;
	transform: none;
}

@media (max-width: 1100px) {
	.client-logos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.client-logo:nth-child(3) {
		border-right: 0;
	}

	.client-logo:nth-child(-n + 3) {
		border-bottom: 1px solid var(--line);
	}
}

@media (max-width: 700px) {
	.data-error {
		align-items: flex-start;
		flex-direction: column;
		gap: .2rem;
	}

	.clients-block__header {
		grid-template-columns: 1fr;
		gap: .8rem;
	}

	.clients-block::after {
		display: none;
	}

	.client-logos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.client-logo,
	.client-logo:nth-child(3) {
		min-height: 112px;
		border-right: 1px solid var(--line);
		border-bottom: 1px solid var(--line);
	}

	.client-logo:nth-child(even) {
		border-right: 0;
	}

	.client-logo:nth-last-child(-n + 2) {
		border-bottom: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.client-logo {
		opacity: 1;
		transform: none;
	}
}

/*** SWITCH ***/

:root {
	--white: #ffffff;
	--light-grey: #e9e9e9;

	--u-xs: 5px;
	--u-xs-n: -5px;
	--u-sm: 10px;
	--u-sm-n: -10px;
	--u: 20px;
	--u-n: -20px;
	--u-me: 30px;
	--u-me-n: -30px;
	--u-lg: 40px;
	--u-lg-n: -40px;
	--u-xl: 80px;
	--u-xl-n: -80px;
	--u-xxl: 100px;
	--u-xxl-n: -100px;

	--border: 2px solid var(--light-grey);

	--shadow: 0 2px 10px rgba(0, 0, 0, .1);
	--shadow-lg: 0 5px 40px rgba(0, 0, 0, .1);

	--transition: .3s;
	--transition-bezier: .6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.contact__switch {
	width: 40%;
	display: flex;
}

.switch {
	aspect-ratio: 2.5 / 1;
	max-width: 300px;
	margin: 0 auto;
	width: 100%;
	border-radius: var(--u-xxl);
	position: relative;
	overflow: hidden;
	cursor: pointer;
	transition: var(--transition-bezier);
}

.switch.big-switch, .switch.loader-switch {box-shadow: 0 5px 10px rgba(0,0,0,.3) inset;}

.switch.loader-switch {width: calc(var(--u-xl) * 3);}

.logo .switch {
	width: var(--u-lg);
	top: .5px;
	margin: 0 2px;
}

.switch div {
	background-size: cover;
	background-position: center;
	position: absolute;
	height: 100%;
	width: 100%;
	transition: var(--transition);
}

.switch.big-switch div, .switch.loader-switch div {z-index: -1;}

.switch div:first-child {background-image: url('../img/gradient-1.jpg');}

.switch:hover div:first-child, .switch.disabled div:first-child {
	opacity: 0;
	transform: scale(2);
}

.switch.loader-switch div:first-child {transform: scale(2);}

.switch.loaded div:first-child {
	opacity: 1;
	transform: scale(1);
}

.switch div:nth-child(2) {
	background-image: url('../img/gradient-2.jpg');
	opacity: 0;
	transform: scale(2);
}

.switch.loader-switch div:nth-child(2) {
	opacity: 1;
	transform: scale(1);
}

.switch.loader-switch.loaded div:nth-child(2) {
	opacity: 0;
	transform: scale(2);
}

.switch:hover div:nth-child(2), .switch.disabled div:nth-child(2) {
	opacity: 1;
	transform: scale(1);
}

.switch span {
	background: var(--white);
	border: var(--border);
	box-shadow: var(--shadow);
	display: block;
	height: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--u-xl);
	position: absolute;
	left: 0;
	transition: var(--transition-bezier);
}

.switch:hover span {left: calc(100% - var(--u-xl));}

.switch.disabled span {left: calc(100% - var(--u-lg));}

.switch:hover.disabled span {left: calc(100% - calc(var(--u-lg) + var(--u)));}

.switch.loader-switch span {left: calc(100% - var(--u-xl));}

.switch.loader-switch.loaded span {left: 0;}

/*** FLOATERS ***/

.floating {
	position: absolute;
	width: 200px;
	z-index: 9;
	padding: 0;
	margin: 0;
}

.floating figure, .floating img {
	width: 100%;
}

/*.project-grid {position: relative;}*/

.project-grid .floating {
	margin-left: -50px;
	margin-top: 50px;
}

.capability-terminal .floating {
	right: 0;
	margin-top: -70px;	
}

.capability-terminal .floating figure {
/*	transform: rotate(10deg);*/
}

.lab-console .floating {
	right: -40px;
	bottom: 50px;
}