:root {
	--container: max(2rem, calc((100% - 90rem) / 2));
	--color-black: oklch(12.212% 0 271.152deg);
	--color-charcoal: oklch(27.815% 0.008 240.265deg);
	--color-gray: oklch(43.495% 0 271.152deg);
	--color-white: oklch(96.715% 0 271.152deg);
	--color-orange: oklch(65.446% 0.2073 38.999deg);
	--color-yellow: oklch(96.722% 0.2108 110.07deg);
	--gradient-orange: linear-gradient(to right, var(--color-orange), var(--color-yellow));
	--font-sans: "Geist", ui-sans-serif, sans-serif;
	--font-mono: "Geist Mono", ui-monospace, monospace;
	--fluid: clamp(0rem, (100vw - 20rem) / 70, 1rem);
	--text-display: 400 calc(2.5rem + 2 * var(--fluid)) / 1.05 var(--font-mono);
	--text-h2: 400 calc(2rem + 1.25 * var(--fluid)) / 1.14 var(--font-mono);
	--text-h3: 700 calc(1.5rem + 0.5 * var(--fluid)) / 1.3 var(--font-mono);
	--text-h4: 700 calc(1.375rem + 0.375 * var(--fluid)) / 1.3 var(--font-mono);
	--text-h5: 700 calc(1.125rem + 0.125 * var(--fluid)) / 1.3 var(--font-mono);
	--text-eyebrow: 400 calc(1rem + 0.125 * var(--fluid)) / 1 var(--font-mono);
	--text-body: 400 calc(1rem + 0.125 * var(--fluid)) / 1.6 var(--font-sans);
	--text-body-sm: 400 calc(0.9375rem + 0.0625 * var(--fluid)) / 1.6 var(--font-sans);
	--text-nav: 700 calc(0.9375rem + 0.0625 * var(--fluid)) / 1 var(--font-mono);
	--text-stat: 500 calc(2rem + var(--fluid)) / 1 var(--font-mono);
}

@property --gradient-end {
	syntax: "<color>";
	inherits: false;
	initial-value: oklch(96.722% 0.2108 110.07deg);
}

*,
::before,
::after {
	box-sizing: border-box;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: -1%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	letter-spacing: -3%;
	text-wrap: balance;
}

h2,
.text-h2 {
	font: var(--text-h2);
}

h3,
.text-h3 {
	font: var(--text-h3);
}

h4,
.text-h4 {
	font: var(--text-h4);
}

h5,
.text-h5 {
	font: var(--text-h5);
}

p {
	margin: 0;
	text-wrap: pretty;
}

ul,
ol {
	padding-left: 0;
	margin: 0;
	list-style: none;
}

a {
	color: currentcolor;
	text-decoration: none;
	transition: color 0.15s;
}

button {
	cursor: pointer;
}

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

.font-sans {
	font-family: var(--font-sans);
}

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

.fw-extrabold {
	font-weight: 800;
}

.fw-black {
	font-weight: 900;
}

.bg-black {
	background-color: var(--color-black) !important;
}

.bg-white {
	background-color: var(--color-white) !important;
}

.bg-charcoal {
	background-color: var(--color-charcoal) !important;
}

.bg-orange {
	background-color: var(--color-orange) !important;
}

.text-black {
	color: var(--color-black) !important;
}

.text-white {
	color: var(--color-white) !important;
}

.text-gradient {
	color: #0000;
	background-image: var(--gradient-orange);
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.text-display {
	font: var(--text-display);
	letter-spacing: -3%;
}

.text-eyebrow {
	font: var(--text-eyebrow);
	text-transform: uppercase;
	letter-spacing: 10%;
}

.text-body-ui {
	font: var(--text-body);
	letter-spacing: -1%;
}

.text-nav {
	font: var(--text-nav);
	letter-spacing: -3%;
}

.text-stat {
	font: var(--text-stat);
	letter-spacing: -2%;
}

.inset {
	inset: 0;
}

.max-w-container {
	padding-inline: var(--container);
}

.py-section {
	padding-block: clamp(2.5rem, 8vw, 6rem);
}

.flex-1 {
	flex: 1;
}

.btn {
	padding: 0.75rem 1.5rem;
	font: var(--text-nav);
	border: none;
	border-radius: 0;
}

.btn-gradient {
	background: linear-gradient(to right, var(--color-orange), var(--gradient-end));
	transition: --gradient-end 0.15s;

	&:hover {
		--gradient-end: var(--color-orange);

		outline: 2px solid var(--color-black);
	}
}

.btn-black {
	--bs-btn-bg: var(--color-black);
	--bs-btn-color: var(--color-white);
	--bs-btn-hover-bg: var(--color-orange);
	--bs-btn-hover-color: var(--color-black);

	&:hover {
		outline: 2px solid var(--color-black);
	}
}

.btn-white {
	--bs-btn-bg: var(--color-white);
	--bs-btn-color: var(--color-black);
	--bs-btn-hover-bg: var(--color-orange);
	--bs-btn-hover-color: var(--color-black);
}

@scope (#site-header) {
	.logo {
		max-height: 2.25rem;
	}

	nav a:hover {
		color: var(--color-orange);
	}

	button {
		padding: 0;
		background: 0 0;
		border: none;
	}

	button[aria-expanded="true"] .icon-menu,
	button[aria-expanded="false"] .icon-close {
		display: none;
	}
}

@scope (#mobile-nav) {
	:scope {
		position: fixed;
		top: var(--header-height);
		right: 0;
		left: 0;
		z-index: 1020;
		display: grid;
		visibility: hidden;
		grid-template-rows: 0fr;
		overflow: hidden;
		border-top: 1px solid var(--color-charcoal);
		transition:
			grid-template-rows 0.25s,
			visibility 0.25s;
	}

	:scope[data-open] {
		visibility: visible;
		grid-template-rows: 1fr;
	}

	:scope > div {
		min-height: 0;
	}

	a:hover {
		color: var(--color-orange);
	}
}

@scope (#hero) {
	:scope {
		--grid-size: 2.5rem;
		--content-columns: 36;

		box-sizing: border-box;
		grid-template-rows: repeat(20, var(--grid-size));
		grid-template-columns: repeat(auto-fill, var(--grid-size));
		grid-auto-rows: var(--grid-size);
		min-height: 100%;
		padding-inline: max(
			0px,
			round(down, (100% - var(--content-columns) * var(--grid-size)) / 2, var(--grid-size))
		);
		padding-bottom: var(--grid-size);
		background-color: var(--color-black);
		background-image:
			linear-gradient(to bottom, transparent 50%, var(--color-black)),
			linear-gradient(to right, var(--color-charcoal) 1px, transparent 1px),
			linear-gradient(to bottom, var(--color-charcoal) 1px, transparent 1px);
		background-size:
			100% 100%,
			var(--grid-size) var(--grid-size),
			var(--grid-size) var(--grid-size);
	}

	.intro {
		grid-area: 2/2 / span 16/-2;

		& hgroup {
			& p {
				font: 700 1.25rem / 1.4 var(--font-mono);
				color: var(--color-white);
			}
		}

		@media (width>=576px) {
			grid-row-end: span 14;
		}

		@media (width>=768px) {
			grid-row-end: span 13;
		}

		@media (width>=992px) {
			grid-area: 4/2 / span 15/-13;
			justify-self: start;
			inline-size: min(100%, calc(13 * var(--grid-size)));
		}

		@media (width>=1200px) {
			grid-column: 3/-14;
		}
	}

	img {
		grid-area: -3/2 / span 10/-2;

		@media (width>=576px) {
			grid-row-start: -6;
		}

		@media (width>=992px) {
			grid-area: span 10/-12/-8/-2;
		}

		@media (width>=1200px) {
			grid-column: -13/-3;
		}
	}
}

@scope (#hero-line) {
	:scope {
		--animation-duration: 1.8s;

		grid-area: 2/-17 / span 4 / span 16;
		place-self: start;
		inline-size: calc(16 * var(--grid-size));
		block-size: calc(4 * var(--grid-size));
		pointer-events: none;
	}

	#hero-line-path {
		stroke-dasharray: 1000;
		stroke-dashoffset: 1000px;
		animation: hero-line-draw var(--animation-duration) ease-in-out forwards;
	}

	.dot {
		transform-origin: 50%;
		transform-box: fill-box;
	}

	.dot-start {
		animation: 0.4s ease-out both hero-dot-in;
	}

	.dot-end {
		animation:
			hero-line-travel var(--animation-duration) ease-in-out forwards,
			hero-dot-in 0.4s ease-out calc(var(--animation-duration) - 0.3s) both;
		offset-path: path(
			"M40 80 L42.3 69.2 L44.7 58.9 L47 49.5 L49.3 41 L51.7 33.7 L54 27.7 L56.3 23.2 L58.7 20.2 L61 18.7 L63.3 18.8 L65.7 20.4 L68 23.3 L70.3 27.6 L72.7 33.1 L75 39.6 L77.3 46.8 L79.7 54.7 L82 63 L84.3 71.5 L86.7 80 L89 88.2 L91.3 96.1 L93.7 103.3 L96 109.7 L98.3 115.3 L100.7 119.8 L103 123.2 L105.3 125.5 L107.7 126.6 L110 126.5 L112.3 125.3 L114.7 123 L117 119.8 L119.3 115.6 L121.7 110.7 L124 105.1 L126.3 99.1 L128.7 92.9 L131 86.4 L133.3 80 L135.7 73.8 L138 67.9 L140.3 62.4 L142.7 57.6 L145 53.4 L147.3 50 L149.7 47.4 L152 45.7 L154.3 44.9 L156.7 45 L159 45.9 L161.3 47.6 L163.7 50.1 L166 53.2 L168.3 57 L170.7 61.1 L173 65.6 L175.3 70.4 L177.7 75.2 L180 80 L182.3 84.7 L184.7 89.1 L187 93.2 L189.3 96.8 L191.7 99.9 L194 102.4 L196.3 104.3 L198.7 105.6 L201 106.2 L203.3 106.1 L205.7 105.4 L208 104.1 L210.3 102.2 L212.7 99.9 L215 97.1 L217.3 94 L219.7 90.7 L222 87.1 L224.3 83.6 L226.7 80 L229 76.5 L231.3 73.3 L233.7 70.3 L236 67.6 L238.3 65.3 L240.7 63.5 L243 62.1 L245.3 61.2 L247.7 60.8 L250 60.8 L252.3 61.4 L254.7 62.3 L257 63.7 L259.3 65.4 L261.7 67.5 L264 69.8 L266.3 72.2 L268.7 74.8 L271 77.4 L273.3 80 L275.7 82.5 L278 84.9 L280.3 87.1 L282.7 89 L285 90.6 L287.3 92 L289.7 93 L292 93.6 L294.3 93.9 L296.7 93.8 L299 93.4 L301.3 92.7 L303.7 91.7 L306 90.5 L308.3 89 L310.7 87.3 L313 85.6 L315.3 83.7 L317.7 81.9 L320 80 L322.3 78.2 L324.7 76.5 L327 75 L329.3 73.6 L331.7 72.5 L334 71.5 L336.3 70.8 L338.7 70.4 L341 70.2 L343.3 70.3 L345.7 70.6 L348 71.1 L350.3 71.8 L352.7 72.7 L355 73.7 L357.3 74.9 L359.7 76.1 L362 77.4 L364.3 78.7 L366.7 80 L369 81.2 L371.3 82.4 L373.7 83.5 L376 84.4 L378.3 85.2 L380.7 85.8 L383 86.3 L385.3 86.6 L387.7 86.7 L390 86.6 L392.3 86.4 L394.7 86.1 L397 85.6 L399.3 84.9 L401.7 84.2 L404 83.4 L406.3 82.6 L408.7 81.7 L411 80.9 L413.3 80 L415.7 79.2 L418 78.4 L420.3 77.7 L422.7 77.1 L425 76.6 L427.3 76.2 L429.7 75.9 L432 75.7 L434.3 75.7 L436.7 75.7 L439 75.9 L441.3 76.1 L443.7 76.4 L446 76.8 L448.3 77.3 L450.7 77.8 L453 78.4 L455.3 78.9 L457.7 79.5 L460 80 L462.3 80.5 L464.7 81 L467 81.4 L469.3 81.8 L471.7 82.1 L474 82.3 L476.3 82.5 L478.7 82.6 L481 82.6 L483.3 82.6 L485.7 82.5 L488 82.3 L490.3 82.1 L492.7 81.8 L495 81.6 L497.3 81.3 L499.7 80.9 L502 80.6 L504.3 80.3 L506.7 80 L509 79.7 L511.3 79.5 L513.7 79.2 L516 79 L518.3 78.9 L520.7 78.8 L523 78.7 L525.3 78.7 L527.7 78.7 L530 78.7 L532.3 78.8 L534.7 78.9 L537 79 L539.3 79.1 L541.7 79.3 L544 79.4 L546.3 79.6 L548.7 79.7 L551 79.9 L553.3 80 L555.7 80.1 L558 80.2 L560.3 80.3 L562.7 80.4 L565 80.4 L567.3 80.4 L569.7 80.4 L572 80.4 L574.3 80.4 L576.7 80.4 L579 80.3 L581.3 80.3 L583.7 80.2 L586 80.2 L588.3 80.1 L590.7 80.1 L593 80 L595.3 80 L597.7 80 L600 80"
		);
		offset-rotate: 0deg;
		offset-anchor: center;
	}

	@keyframes hero-line-draw {
		to {
			stroke-dashoffset: 0;
		}
	}

	@keyframes hero-line-travel {
		0% {
			offset-distance: 0%;
		}

		100% {
			offset-distance: 100%;
		}
	}

	@keyframes hero-dot-in {
		0% {
			opacity: 0%;
			transform: scale(0);
		}

		100% {
			opacity: 100%;
			transform: scale(1);
		}
	}

	@keyframes hero-dot-out {
		to {
			opacity: 0%;
		}
	}
}

@scope (#proof) {
	:scope {
		background: var(--gradient-orange);
	}

	dd {
		color: var(--color-charcoal);
	}

	.stats {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
		align-items: center;
	}

	@media (width>=992px) {
		.stats {
			grid-template-columns: repeat(4, 1fr);
		}

		dl + dl::before {
			position: absolute;
			left: 0;
			width: 1px;
			height: 3.75rem;
			content: "";
			background-color: #06060633;
			transform: translate(-50%);
		}
	}
}

@scope (#end-markets) {
	:scope {
		background-color: oklch(18.934% 0.0077 248.304deg);
	}

	.content {
		min-width: 0;
	}

	.content > p {
		font: var(--text-body);
		color: color-mix(in oklab, var(--color-white) 80%, transparent);
	}

	.markets {
		grid-template-columns: 1fr;

		@media (width>=576px) {
			grid-template-columns: repeat(2, 1fr);
		}

		& li {
			& p {
				font: var(--text-body-sm);
				color: color-mix(in oklab, var(--color-white) 75%, transparent);
			}
		}
	}

	video {
		min-width: 0;
		aspect-ratio: 5/4;
	}
}

@scope (#compliance) {
	:scope {
		isolation: isolate;

		&::after {
			position: absolute;
			inset: 0;
			z-index: -1;
			content: "";
			background: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='246'%20height='246'%20fill='none'%3e%3cg%20stroke='%23fefdfe'%20stroke-width='3'%20clip-path='url(%23a)'%3e%3cpath%20stroke-miterlimit='10'%20d='M123%2070V0M123%20245v-70M73%20123H0M245%20123h-73'%20/%3e%3crect%20width='47'%20height='47'%20x='99.5'%20y='98.5'%20rx='23.5'%20/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='a'%3e%3cpath%20fill='%23fff'%20d='M0%200h245.22v245.22H0z'%20/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e")
				0 -50%/12rem;
			opacity: 20%;
		}
	}

	.content > p {
		font: var(--text-body);
	}

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

		@media (width>=576px) {
			grid-template-columns: repeat(2, 1fr);
		}

		& li {
			gap: 0.75rem;

			& .icon {
				width: 2.5rem;
				height: 2.5rem;
			}

			& p {
				font: var(--text-body-sm);
			}
		}
	}
}

@scope (#data-centers) {
	.content {
		& > p {
			font: var(--text-body);
			color: color-mix(in oklab, var(--color-black) 85%, transparent);
		}
	}

	.callout {
		max-width: 100%;

		@media (width>=992px) {
			width: 36rem;
		}

		& ul {
			padding-left: 1.5rem;
			list-style: outside;
		}

		& li {
			font: var(--text-body-sm);

			& + li {
				margin-top: 0.5rem;
			}
		}
	}
}

@scope (#engineering-capabilities) {
	:scope {
		--grid-size: 2.5rem;

		row-gap: 5rem;
		background-image:
			linear-gradient(to right, var(--color-charcoal) 1px, transparent 1px),
			linear-gradient(to bottom, var(--color-charcoal) 1px, transparent 1px);
		background-size: var(--grid-size) var(--grid-size);
	}

	.header {
		max-width: 56rem;
		background-color: var(--color-black);

		& p {
			max-width: 48ch;
			font: 400 1.25rem / 1.6 var(--font-sans);
		}
	}

	.capabilities {
		grid-template-columns: repeat(4, 1fr);

		& > li {
			& h3 {
				font: 700 2rem / 1.3 var(--font-mono);
				letter-spacing: -3%;
			}

			& > p {
				font: 400 1.25rem / 1.6 var(--font-sans);
			}
		}

		& .tags li {
			font: var(--text-body);

			&::before {
				margin-right: 0.5rem;
				content: "•";
			}
		}
	}

	.tool-cards {
		grid-template-columns: repeat(2, 1fr);

		& li {
			padding: 1.75rem;

			& p {
				font: var(--text-body);
				color: color-mix(in oklab, var(--color-white) 70%, transparent);
			}
		}
	}
}

@media (width<992px) {
	@scope (#engineering-capabilities) {
		.capabilities {
			grid-template-columns: repeat(2, 1fr);
		}
	}
}

@media (width<576px) {
	@scope (#engineering-capabilities) {
		.capabilities,
		.tool-cards {
			grid-template-columns: 1fr;
		}
	}
}

@scope (#about) {
	.content > p {
		margin-bottom: 0;
		font: var(--text-body);
	}

	video {
		aspect-ratio: 1;
	}
}

@scope (#contact) {
	.background {
		opacity: 20%;
	}

	.intro {
		& p {
			font: var(--text-body);
		}

		& address {
			font: var(--text-body-sm);
			font-style: normal;
		}

		& a:hover {
			color: var(--color-orange);
		}

		@media (width>=992px) {
			inline-size: 26rem;
		}
	}

	form {
		flex: 1;
		grid-template-columns: 1fr;
		min-inline-size: 0;

		@media (width>=992px) {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	.full {
		grid-column: 1/-1;
	}

	.fg {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	label {
		font: 500 1rem / 1 var(--font-sans);
		color: var(--color-white);
	}

	input:not([type="hidden"]),
	select,
	textarea {
		inline-size: 100%;
		padding: 0.5rem 0.75rem;
		font: var(--text-body-sm);
		color: var(--color-white);
		outline-offset: 2px;
		background-color: #0000;
		border: 1px solid var(--color-white);
		border-radius: 0;
		transition:
			border-color 0.15s,
			background-color 0.15s;

		&::placeholder {
			color: var(--color-gray);
		}

		&:hover {
			background-color: #f4f4f40d;
		}

		&:focus-visible {
			outline: 2px solid var(--color-orange);
			border-color: var(--color-orange);
		}

		&:user-invalid {
			border-color: var(--color-orange);
		}
	}

	input:not([type="hidden"]),
	select {
		block-size: 2.75rem;
	}

	textarea {
		min-block-size: 6rem;
		resize: vertical;
	}

	.g-recaptcha {
		max-inline-size: 100%;
		overflow: clip;
	}

	button[type="submit"] {
		justify-self: start;
	}
}

/* $vite$:1 */