:root {
	--off-white: #F7F4EE;
	--cream: #FFFDF9;

	--maroon: #6D1F2F;
	--maroon-dark: #4A1521;

	--yellow: #E8B931;

	--text: #2B1D1A;
	--muted: #7A6E68;

	--border: #E5DDD2;
}


/* =========================================================
   RESET
========================================================= */

* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;
}


html {
	scroll-behavior: smooth;
}


/* body {
	background: var(--off-white);

	color: var(--text);

	font-family:
		"Inter",
		sans-serif;

	-webkit-font-smoothing: antialiased;

	-moz-osx-font-smoothing: grayscale;
} */

body {
	background: var(--off-white);

	color: var(--text);

	font-family:
		"Space Grotesk",
		sans-serif;

	-webkit-font-smoothing: antialiased;

	-moz-osx-font-smoothing: grayscale;
}


a {
	color: inherit;

	text-decoration: none;
}


button,
input,
textarea,
select {
	font: inherit;
}


/* =========================================================
   NAVBAR
========================================================= */

.site-header {
	position: fixed;

	top: 0;
	left: 0;
	right: 0;

	z-index: 100;

	padding: 20px 40px;
}


.nav-container {
	max-width: 1400px;

	margin: 0 auto;

	height: 64px;

	display: flex;

	align-items: center;

	justify-content: space-between;

	padding:
		0 8px 0 20px;

	border:
		1px solid
		var(--border);

	border-radius: 100px;

	background:
		rgba(
			255,
			253,
			249,
			0.9
		);

	backdrop-filter:
		blur(18px);

	-webkit-backdrop-filter:
		blur(18px);

	box-shadow:
		0 8px 30px
		rgba(
			43,
			29,
			26,
			0.06
		);
}


/* =========================================================
   BRAND
========================================================= */

.brand {
	display: flex;

	align-items: center;

	gap: 12px;

	color: var(--maroon);

	font-family:
		"Space Grotesk",
		sans-serif;

	font-weight: 700;

	letter-spacing: 0.08em;
}


.brand-mark {
	width: 34px;

	height: 34px;

	display: grid;

	place-items: center;

	border-radius: 50%;

	background:
		var(--yellow);

	color:
		var(--maroon);

	font-size: 12px;

	font-weight: 700;
}


.brand-name {
	font-size: 14px;

	white-space: nowrap;
}

.nav-logo {
	display: block;

	width: 190px;
	height: auto;

	object-fit: contain;
}

@media (max-width: 600px) {

	.nav-logo {
		width: 145px;
	}

}


/* =========================================================
   DESKTOP NAV
========================================================= */

.desktop-nav {
	display: flex;

	align-items: center;

	gap: 32px;

	margin-left: auto;

	margin-right: 32px;
}


.desktop-nav a {
	position: relative;

	font-size: 13px;

	font-weight: 500;

	color: var(--text);

	transition:
		color 0.25s ease;
}


.desktop-nav a::after {
	content: "";

	position: absolute;

	left: 0;

	bottom: -7px;

	width: 0;

	height: 1px;

	background:
		var(--yellow);

	transition:
		width 0.25s ease;
}


.desktop-nav a:hover {
	color:
		var(--maroon);
}


.desktop-nav a:hover::after {
	width: 100%;
}


/* =========================================================
   NAV CTA
========================================================= */

.nav-cta {
	height: 46px;

	display: flex;

	align-items: center;

	justify-content: center;

	gap: 10px;

	padding:
		0 18px;

	border-radius: 100px;

	background:
		var(--maroon);

	color:
		var(--cream);

	font-size: 13px;

	font-weight: 700;

	white-space: nowrap;

	transition:
		transform 0.25s ease,
		background 0.25s ease;
}


.nav-cta:hover {
	transform:
		translateY(-2px);

	background:
		var(--maroon-dark);
}


.nav-cta span {
	color:
		var(--yellow);

	font-size: 16px;
}


/* =========================================================
   MOBILE MENU
========================================================= */

/* .mobile-menu-button {
	width: 44px;

	height: 44px;

	display: none;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	gap: 5px;

	border: 0;

	border-radius: 50%;

	background:
		var(--yellow);

	cursor: pointer;
}


.mobile-menu-button span {
	width: 17px;

	height: 1.5px;

	background:
		var(--maroon);
} */


/* =========================================================
   MOBILE CONTACT BUTTON
========================================================= */

.mobile-menu-button {
	height: 44px;

	display: none;

	align-items: center;
	justify-content: center;

	gap: 8px;

	padding: 0 16px;

	border: 0;
	border-radius: 100px;

	background: var(--maroon);

	color: var(--cream);

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size: 11px;

	font-weight: 700;

	text-decoration: none;

	white-space: nowrap;

	cursor: pointer;

	transition:
		transform 0.25s ease,
		background 0.25s ease;
}


.mobile-menu-button span {
	color: var(--yellow);

	font-size: 16px;

	transition:
		transform 0.25s ease;
}


.mobile-menu-button:hover {
	background: var(--maroon-dark);

	transform:
		translateY(-2px);
}


.mobile-menu-button:hover span {
	transform:
		translate(2px, -2px);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

	.mobile-menu-button {
		display: inline-flex;
	}

}

@media (max-width: 600px) {
	.nav-brand-mark {
		width: 38px;
		height: 38px;
	}
}

/* =========================================================
   HERO
========================================================= */

.hero {
	position: relative;

	min-height: 100vh;

	display: flex;

	align-items: center;

	overflow: hidden;

	background:
		var(--off-white);

	color:
		var(--text);
}


/* =========================================================
   HERO BACKGROUND
========================================================= */

.hero-background {
	position: absolute;

	inset: 0;

	z-index: 0;
}


/* =========================================================
   UAV SCENE
========================================================= */

.uav-scene {
	position: absolute;

	inset: 0;

	overflow: hidden;

	background:

		radial-gradient(
			circle at 75% 45%,
			rgba(
				232,
				185,
				49,
				0.10
			),
			transparent 25%
		),

		radial-gradient(
			circle at 82% 55%,
			rgba(
				109,
				31,
				47,
				0.07
			),
			transparent 35%
		);
}


/* =========================================================
   ATMOSPHERIC GLOW
========================================================= */

.uav-glow {
	position: absolute;

	width: 650px;

	height: 650px;

	right: 3%;

	top: 50%;

	transform:
		translateY(-50%);

	border-radius: 50%;

	background:

		radial-gradient(
			circle,
			rgba(
				232,
				185,
				49,
				0.13
			) 0%,

			rgba(
				232,
				185,
				49,
				0.035
			) 35%,

			transparent 70%
		);

	filter:
		blur(10px);

	animation:
		glowPulse
		6s
		ease-in-out
		infinite;
}


@keyframes glowPulse {

	0%,
	100% {
		transform:
			translateY(-50%)
			scale(1);

		opacity: 0.7;
	}


	50% {
		transform:
			translateY(-50%)
			scale(1.08);

		opacity: 1;
	}

}


/* =========================================================
   TECHNICAL GRID
========================================================= */

.uav-grid {
	position: absolute;

	inset: 0;

	opacity: 0.42;

	background-image:

		linear-gradient(
			rgba(
				109,
				31,
				47,
				0.035
			) 1px,
			transparent 1px
		),

		linear-gradient(
			90deg,
			rgba(
				109,
				31,
				47,
				0.035
			) 1px,
			transparent 1px
		);

	background-size:
		80px 80px;

	mask-image:
		linear-gradient(
			90deg,
			transparent,
			black 42%,
			black
		);

	-webkit-mask-image:
		linear-gradient(
			90deg,
			transparent,
			black 42%,
			black
		);
}


/* =========================================================
   FLIGHT PATH
========================================================= */

.flight-path {
	position: absolute;

	right: -2%;

	top: 15%;

	width: 70%;

	height: 70%;

	overflow: visible;

	opacity: 0.3;
}


.flight-path path {
	fill: none;

	stroke:
		var(--maroon);

	stroke-width: 1;

	stroke-dasharray:
		5 12;

	animation:
		flightPathMove
		8s
		linear
		infinite;
}


@keyframes flightPathMove {

	to {
		stroke-dashoffset:
			-120;
	}

}


/* =========================================================
   RADAR
========================================================= */

.radar {
	position: absolute;

	right: 19%;

	top: 47%;

	border:
		1px solid
		rgba(
			109,
			31,
			47,
			0.12
		);

	border-radius: 50%;

	transform:
		translate(
			50%,
			-50%
		);

	animation:
		radarPulse
		5s
		ease-out
		infinite;
}


.radar-one {
	width: 180px;

	height: 180px;
}


.radar-two {
	width: 340px;

	height: 340px;

	animation-delay:
		1.2s;
}


.radar-three {
	width: 520px;

	height: 520px;

	animation-delay:
		2.4s;
}


@keyframes radarPulse {

	0% {
		opacity: 0;

		transform:
			translate(
				50%,
				-50%
			)
			scale(0.85);
	}


	20% {
		opacity: 0.6;
	}


	100% {
		opacity: 0;

		transform:
			translate(
				50%,
				-50%
			)
			scale(1);
	}

}

/* =========================================================
   UAV FLIGHT CONTAINER
========================================================= */

.uav-wrapper {
	position: absolute;

	left: 70%;
	top: 45%;

	width: min(620px, 45vw);

	transform: translate(-50%, -50%);

	z-index: 10;

	perspective: 1000px;

	will-change: left, top;
}


/* =========================================================
   UAV
========================================================= */

.uav {
	position: relative;

	width: 100%;

	transform-style: preserve-3d;

	transform-origin: center center;

	will-change: transform;

	filter:
		drop-shadow(
			0 25px 35px
			rgba(
				43,
				29,
				26,
				0.16
			)
		);
}


/* =========================================================
   UAV SVG
========================================================= */

.uav-svg {
	display: block;

	width: 100%;

	height: auto;

	overflow: visible;
}


/* =========================================================
   UAV BODY
========================================================= */

.uav-body {
	fill: var(--cream);

	stroke: var(--maroon);

	stroke-width: 2;

	stroke-linejoin: round;
}


.uav-center {
	fill: var(--off-white);

	stroke: var(--maroon);

	stroke-width: 1.5;
}


.uav-detail {
	fill: none;

	stroke: rgba(
		109,
		31,
		47,
		0.32
	);

	stroke-width: 2;

	stroke-linecap: round;
}


.uav-nose {
	fill: var(--maroon);
}


/* =========================================================
   SENSOR
========================================================= */

.uav-sensor {
	fill: var(--cream);

	stroke: var(--maroon);

	stroke-width: 2;
}


.uav-sensor-core {
	fill: var(--yellow);

	filter:
		drop-shadow(
			0 0 8px
			rgba(
				232,
				185,
				49,
				0.8
			)
		);

	animation:
		sensorPulse
		1.5s
		ease-in-out
		infinite;
}


@keyframes sensorPulse {

	0%,
	100% {
		opacity: 0.45;
	}

	50% {
		opacity: 1;
	}
}


/* =========================================================
   NAVIGATION LIGHTS
========================================================= */

.nav-light {
	fill: var(--yellow);

	filter:
		drop-shadow(
			0 0 10px
			rgba(
				232,
				185,
				49,
				0.9
			)
		);

	animation:
		navBlink
		1.2s
		ease-in-out
		infinite;
}


.nav-light-right {
	animation-delay: 0.6s;
}


@keyframes navBlink {

	0%,
	100% {
		opacity: 0.25;
	}

	50% {
		opacity: 1;
	}
}


/* =========================================================
   ENGINE GLOW
========================================================= */

.engine-glow {
	position: absolute;

	left: 50%;

	bottom: 12%;

	width: 25%;

	height: 10px;

	transform:
		translateX(-50%);

	border-radius: 50%;

	background:
		rgba(
			232,
			185,
			49,
			0.3
		);

	filter: blur(8px);

	opacity: 0.5;

	pointer-events: none;
}


/* =========================================================
   UAV SHADOW
========================================================= */

.uav-shadow {
	position: absolute;

	left: 50%;

	bottom: -7%;

	width: 55%;

	height: 18px;

	transform:
		translateX(-50%);

	border-radius: 50%;

	background:
		rgba(
			43,
			29,
			26,
			0.10
		);

	filter: blur(14px);

	pointer-events: none;

	will-change:
		transform,
		opacity;
}


/* =========================================================
   TELEMETRY
========================================================= */

.telemetry {
	position: absolute;

	z-index: 5;

	font-family:
		"IBM Plex Mono",
		monospace;

	color:
		var(--muted);

	font-size:
		9px;

	letter-spacing:
		0.12em;
}


.telemetry-top {
	right: 8%;

	top: 24%;

	display: flex;

	align-items: center;

	gap: 20px;
}


.telemetry-label {
	color:
		var(--maroon);

	font-weight:
		600;
}


.telemetry-status {
	display: flex;

	align-items: center;

	gap: 7px;
}


.telemetry-status span {
	width: 5px;

	height: 5px;

	border-radius: 50%;

	background:
		var(--yellow);

	box-shadow:
		0 0 8px
		rgba(
			232,
			185,
			49,
			0.7
		);

	animation:
		statusPulse
		1.5s
		ease-in-out
		infinite;
}


@keyframes statusPulse {

	0%,
	100% {
		opacity: 0.35;
	}


	50% {
		opacity: 1;
	}

}


/* =========================================================
   TELEMETRY BOTTOM
========================================================= */

.telemetry-bottom {
	right: 9%;

	bottom: 19%;

	display: flex;

	gap: 30px;

	padding-top: 15px;

	border-top:
		1px solid
		var(--border);
}


.telemetry-item {
	display: flex;

	align-items: baseline;

	gap: 5px;
}


.telemetry-item span {
	color:
		var(--muted);
}


.telemetry-item strong {
	color:
		var(--maroon);

	font-size:
		12px;

	font-weight:
		600;
}


.telemetry-item small {
	color:
		var(--muted);

	font-size:
		7px;
}


/* =========================================================
   COORDINATE MARKERS
========================================================= */

.coordinate-marker {
	position: absolute;

	display: flex;

	align-items: center;

	gap: 7px;

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size:
		8px;

	color:
		var(--muted);

	letter-spacing:
		0.1em;
}


.coordinate-marker span {
	width: 6px;

	height: 6px;

	border:
		1px solid
		var(--maroon);

	border-radius: 50%;
}


.marker-one {
	right: 35%;

	top: 28%;
}


.marker-two {
	right: 14%;

	bottom: 30%;
}


/* =========================================================
   HERO OVERLAY
========================================================= */

.hero-overlay {
	position: absolute;

	inset: 0;

	z-index: 1;

	background:

		linear-gradient(
			90deg,

			rgba(
				247,
				244,
				238,
				1
			) 0%,

			rgba(
				247,
				244,
				238,
				0.98
			) 20%,

			rgba(
				247,
				244,
				238,
				0.84
			) 38%,

			rgba(
				247,
				244,
				238,
				0.32
			) 62%,

			rgba(
				247,
				244,
				238,
				0.04
			) 100%
		);

	pointer-events: none;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {
	position: relative;

	z-index: 20;

	width:
		min(
			1400px,
			calc(
				100% - 80px
			)
		);

	margin: 0 auto;

	padding-top: 100px;
}


/* =========================================================
   EYEBROW
========================================================= */

.hero-eyebrow {
	display: flex;

	align-items: center;

	gap: 12px;

	margin-bottom: 24px;

	color:
		var(--maroon);

	font-size:
		12px;

	font-weight:
		700;

	letter-spacing:
		0.2em;
}


.eyebrow-line {
	width: 42px;

	height: 2px;

	flex-shrink: 0;

	background:
		var(--yellow);
}


/* =========================================================
   TYPEWRITER CURSOR
========================================================= */

.typing-cursor {
	display: inline-block;

	width: 2px;

	height: 0.9em;

	margin-left: 6px;

	vertical-align:
		-0.05em;

	background:
		var(--yellow);

	animation:
		cursorBlink
		0.8s
		steps(1)
		infinite;
}


@keyframes cursorBlink {

	0%,
	50% {
		opacity: 1;
	}


	51%,
	100% {
		opacity: 0;
	}

}


/* =========================================================
   HERO TITLE
========================================================= */

.hero-title {
	max-width: 800px;

	margin: 0;

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size:
		clamp(
			56px,
			7vw,
			104px
		);

	font-weight:
		500;

	line-height:
		0.94;

	letter-spacing:
		-0.055em;
}


.typing-line {
	display: block;

	min-height: 1em;
}


.hero-title-accent {
	color:
		var(--maroon);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.hero-description {
	max-width: 560px;

	margin-top: 32px;

	opacity: 0;

	transition:
		opacity 0.6s ease;

	font-family:
		"Space Grotesk",
		sans-serif;
}


.hero-description p {
	color:
		var(--muted);

	font-size:
		17px;

	line-height:
		1.7;
}


/* =========================================================
   HERO BUTTONS
========================================================= */

.hero-actions {
	display: flex;

	align-items: center;

	gap: 14px;

	margin-top: 40px;

	opacity: 0;

	transform:
		translateY(8px);

	pointer-events: none;

	transition:
		opacity 0.6s ease,

		transform 0.6s
		cubic-bezier(
			0.22,
			1,
			0.36,
			1
		);
}


.hero-actions.visible {
	opacity: 1;

	transform:
		translateY(0);

	pointer-events: auto;
}


/* =========================================================
   BUTTON
========================================================= */

.button {
	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 12px;

	min-height: 52px;

	padding:
		0 22px;

	font-family:
		"Space Grotesk",
		sans-serif;

	border-radius: 4px;

	font-size:
		13px;

	font-weight:
		600;

	transition:
		transform 0.25s ease,
		background 0.25s ease,
		border-color 0.25s ease;
}


.button:hover {
	transform:
		translateY(-2px);
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.button-primary {
	background:
		var(--maroon);

	color:
		var(--cream);

	box-shadow:
		0 8px 20px
		rgba(
			109,
			31,
			47,
			0.14
		);
}


.button-primary:hover {
	background:
		var(--maroon-dark);
}


.button-primary span {
	color:
		var(--yellow);

	font-size:
		16px;
}


/* =========================================================
   SECONDARY BUTTON
========================================================= */

.button-secondary {
	border:
		1px solid
		var(--border);

	background:
		rgba(
			255,
			253,
			249,
			0.72
		);

	color:
		var(--maroon);
}


.button-secondary:hover {
	border-color:
		var(--maroon);

	background:
		var(--cream);
}


/* =========================================================
   HERO BOTTOM
========================================================= */

.hero-bottom {
	position: absolute;

	z-index: 20;

	left: 0;

	right: 0;

	bottom: 32px;

	width:
		min(
			1400px,
			calc(
				100% - 80px
			)
		);

	margin: 0 auto;

	display: flex;

	align-items: center;

	justify-content: space-between;

	font-size:
		10px;

	font-weight:
		600;

	letter-spacing:
		0.18em;

	color:
		var(--muted);
}


.hero-location {
	display: flex;

	align-items: center;

	gap: 9px;
}


.status-dot {
	width: 7px;

	height: 7px;

	flex-shrink: 0;

	border-radius: 50%;

	background:
		var(--yellow);

	box-shadow:
		0 0 12px
		rgba(
			232,
			185,
			49,
			0.45
		);
}


.scroll-indicator {
	display: flex;

	align-items: center;

	gap: 12px;
}


.scroll-arrow {
	color:
		var(--maroon);

	font-size:
		16px;

	animation:
		scrollBounce
		2s
		ease-in-out
		infinite;
}


@keyframes scrollBounce {

	0%,
	100% {
		transform:
			translateY(0);
	}


	50% {
		transform:
			translateY(4px);
	}

}


/* =========================================================
   TABLET
========================================================= */

@media (
	max-width: 1100px
) {

	.desktop-nav {
		gap: 22px;

		margin-right: 20px;
	}


	.desktop-nav a {
		font-size: 12px;
	}


	.hero-title {
		max-width: 700px;
	}


	.uav-wrapper {
		width:
			50vw;
	}

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (
	max-width: 900px
) {

	.site-header {
		padding:
			14px 16px;
	}


	.nav-container {
		height: 58px;

		padding-left:
			14px;
	}


	.desktop-nav,
	.nav-cta {
		display: none;
	}


	.mobile-menu-button {
		display: flex;
	}


	.hero-content {
		width:
			calc(
				100% - 40px
			);

		padding-top:
			80px;
	}


	.hero-title {
		font-size:
			clamp(
				48px,
				11vw,
				76px
			);
	}


	.hero-description p {
		font-size:
			15px;
	}


	.hero-bottom {
		width:
			calc(
				100% - 40px
			);
	}


	.uav-wrapper {
		width:
			55vw;
	}


	.telemetry {
		transform:
			scale(0.8);

		transform-origin:
			right center;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (
	max-width: 600px
) {

	.site-header {
		padding:
			12px;
	}


	.nav-container {
		padding-left:
			12px;

		padding-right:
			7px;
	}


	.brand {
		gap:
			9px;
	}


	.brand-mark {
		width:
			32px;

		height:
			32px;
	}


	.brand-name {
		font-size:
			12px;
	}


	.hero-content {
		width:
			calc(
				100% - 32px
			);

		padding-top:
			70px;
	}


	.hero-eyebrow {
		margin-bottom:
			18px;

		font-size:
			9px;

		letter-spacing:
			0.16em;
	}


	.eyebrow-line {
		width:
			28px;
	}


	.hero-title {
		font-size:
			clamp(
				44px,
				13vw,
				68px
			);

		line-height:
			0.96;

		letter-spacing:
			-0.045em;
	}


	.hero-description {
		margin-top:
			24px;
	}


	.hero-description p {
		font-size:
			14px;

		line-height:
			1.65;
	}


	.hero-actions {
		flex-direction:
			column;

		align-items:
			stretch;

		gap:
			10px;

		max-width:
			300px;

		margin-top:
			30px;
	}


	.button {
		width:
			100%;
	}


	.hero-bottom {
		width:
			calc(
				100% - 32px
			);

		bottom:
			22px;
	}


	.scroll-indicator {
		display:
			none;
	}


	/* UAV */

	.uav-wrapper {
		width:
			85vw;

		opacity:
			0.25;
	}


	.telemetry-top,
	.telemetry-bottom,
	.coordinate-marker {
		display:
			none;
	}


	.flight-path {
		width:
			100%;

		opacity:
			0.15;
	}


	.uav-grid {
		opacity:
			0.18;
	}


	.uav-glow {
		width:
			500px;

		height:
			500px;

		right:
			-30%;

		opacity:
			0.5;
	}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
	prefers-reduced-motion: reduce
) {

	html {
		scroll-behavior:
			auto;
	}


	* {
		animation-duration:
			0.01ms !important;

		animation-iteration-count:
			1 !important;

		transition-duration:
			0.01ms !important;
	}


	.uav-glow,
	.radar,
	.flight-path path,
	.nav-light,
	.uav-sensor-core,
	.telemetry-status span,
	.scroll-arrow {
		animation:
			none;
	}


	.typing-cursor {
		animation:
			none;

		opacity:
			1;
	}

}


/* =========================================================
   ABOUT SECTION
========================================================= */

.about-section {
	position: relative;

	padding:
		150px 0
		130px;

	background:
		var(--cream);

	border-top:
		1px solid
		var(--border);

	border-bottom:
		1px solid
		var(--border);

	overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.about-container {
	width:
		min(
			1400px,
			calc(
				100% - 80px
			)
		);

	margin:
		0 auto;
}


/* =========================================================
   SECTION KICKER
========================================================= */

.section-kicker {
	display: flex;

	align-items: center;

	gap: 12px;

	margin-bottom:
		70px;

	color:
		var(--maroon);

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size:
		20px;

	font-weight:
		600;

	letter-spacing:
		0.18em;
}


.section-kicker-line {
	width:
		38px;

	height:
		2px;

	background:
		var(--yellow);
}


/* =========================================================
   ABOUT GRID
========================================================= */

.about-grid {
	display: grid;

	grid-template-columns:
		1.05fr
		0.95fr;

	gap:
		100px;

	align-items:
		start;
}


/* =========================================================
   HEADING
========================================================= */

.about-heading h2 {
	max-width:
		700px;

	margin:
		0;

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size:
		clamp(
			48px,
			5.5vw,
			78px
		);

	font-weight:
		500;

	line-height:
		0.98;

	letter-spacing:
		-0.05em;

	color:
		var(--text);
    
}


.about-heading h2 span {
	display:
		block;

	color:
		var(--maroon);
}


/* =========================================================
   COPY
========================================================= */

.about-copy {
	max-width:
		600px;

	padding-top:
		8px;
}


.about-copy p {
	margin:
		0 0 22px;

	color:
		var(--muted);

	font-size:
		16px;

	line-height:
		1.8;
}


.about-copy .about-lead {
	color:
		var(--text);

	font-size:
		18px;

	line-height:
		1.65;

	letter-spacing:
		-0.01em;

    text-align: justify;

	font-family:
		"Space Grotesk",
		sans-serif;
}


/* =========================================================
   PRINCIPLE
========================================================= */

.about-statement {
	margin-top:
		42px;

	padding:
		28px 30px;

	border-left:
		3px solid
		var(--yellow);

	background:
		var(--off-white);
        
}


.about-statement span {
	display:
		block;

	margin-bottom:
		12px;

	color:
		var(--muted);

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size:
		9px;

	font-weight:
		600;

	letter-spacing:
		0.18em;
}


.about-statement strong {
	display:
		block;

	max-width:
		470px;

	color:
		var(--maroon);

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size:
		22px;

	font-weight:
		500;

	line-height:
		1.35;

	letter-spacing:
		-0.02em;
}


/* =========================================================
   CAPABILITY STRIP
========================================================= */

.about-capabilities {
	display:
		grid;

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

	margin-top:
		110px;

	border-top:
		1px solid
		var(--border);

	border-bottom:
		1px solid
		var(--border);
}


.about-capability {
	position:
		relative;

	min-height:
		150px;

	display:
		flex;

	flex-direction:
		column;

	justify-content:
		center;

	padding:
		25px 28px;

	border-right:
		1px solid
		var(--border);
}


.about-capability:last-child {
	border-right:
		0;
}


.capability-number {
	margin-bottom:
		20px;

	color:
		var(--yellow);

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size:
		12px;

	font-weight:
		600;
}


.about-capability strong {
	margin-bottom:
		7px;

	color:
		var(--text);

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size:
		21px;

	font-weight:
		600;
}


.about-capability > span:last-child {
	color:
		var(--muted);

	font-size:
		14px;
}


/* =========================================================
   HOVER
========================================================= */

.about-capability {
	transition:
		background 0.3s ease;
}


.about-capability:hover {
	background:
		var(--off-white);
}


/* =========================================================
   TABLET
========================================================= */

@media (
	max-width: 1000px
) {

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

		gap:
			55px;
	}


	.about-copy {
		max-width:
			720px;
	}


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


	.about-capability:nth-child(2) {
		border-right:
			0;
	}


	.about-capability:nth-child(-n + 2) {
		border-bottom:
			1px solid
			var(--border);
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (
	max-width: 600px
) {

	.about-section {
		padding:
			100px 0
			90px;
	}


	.about-container {
		width:
			calc(
				100% - 32px
			);
	}


	.section-kicker {
		margin-bottom:
			45px;
	}


	.about-grid {
		gap:
			40px;
	}


	.about-heading h2 {
		font-size:
			46px;

		line-height:
			1;
	}


	.about-copy .about-lead {
		font-size:
			17px;
	}


	.about-copy p {
		font-size:
			14px;

		line-height:
			1.75;
	}


	.about-statement {
		padding:
			22px;
	}


	.about-statement strong {
		font-size:
			19px;
	}


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

		margin-top:
			75px;
	}


	.about-capability,
	.about-capability:nth-child(2) {
		border-right:
			0;

		border-bottom:
			1px solid
			var(--border);
	}


	.about-capability:last-child {
		border-bottom:
			0;
	}

}

/* =========================================================
   SERVICES / WHAT WE DO
========================================================= */

.services-section {
	position: relative;

	padding: 150px 0 140px;

	background: var(--off-white);

	overflow: hidden;
}


.services-container {
	width:
		min(
			1400px,
			calc(100% - 80px)
		);

	margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.services-header {
	margin-bottom: 80px;
}


.services-heading-row {
	display: grid;

	grid-template-columns:
		1.15fr
		0.85fr;

	gap: 100px;

	align-items: end;
}


.services-heading-row h2 {
	margin: 0;

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size:
		clamp(
			50px,
			6vw,
			82px
		);

	font-weight: 500;

	line-height: 0.94;

	letter-spacing: -0.055em;
}


.services-heading-row h2 span {
	display: block;

	color: var(--maroon);
}


.services-heading-row > p {
	max-width: 520px;

	margin: 0;

	color: var(--muted);

	font-size: 18px;

	line-height: 1.8;
}



/* =========================================================
   SERVICES GRID
========================================================= */

.services-grid {
	display: grid;

	grid-template-columns:
		repeat(2, 1fr);

	border-top:
		1px solid var(--border);

	border-left:
		1px solid var(--border);
}


/* =========================================================
   SERVICE CARD
========================================================= */

.service-card {
	position: relative;

	min-height: 500px;

	padding: 32px;

	border-right:
		1px solid var(--border);

	border-bottom:
		1px solid var(--border);

	background:
		var(--cream);

	overflow: hidden;

	transition:
		background 0.35s ease,
		transform 0.35s ease;
}


.service-card:hover {
	background: var(--off-white);

	z-index: 2;
}


/* =========================================================
   CARD TOP
========================================================= */

.service-card-top {
	display: flex;

	align-items: center;

	justify-content: space-between;
}


.service-number {
	color: var(--yellow);

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 10px;

	font-weight: 600;

	letter-spacing: 0.12em;
}


.service-arrow {
	width: 34px;

	height: 34px;

	display: grid;

	place-items: center;

	border:
		1px solid var(--border);

	border-radius: 50%;

	color: var(--maroon);

	font-size: 15px;

	transition:
		background 0.3s ease,
		color 0.3s ease,
		transform 0.3s ease;
}


.service-card:hover .service-arrow {
	background: var(--maroon);

	color: var(--cream);

	transform:
		translate(2px, -2px);
}


/* =========================================================
   SERVICE ICONS
========================================================= */

.service-icon {
	width: 70px;

	height: 70px;

	margin:
		55px 0 35px;

	position: relative;

	display: flex;

	align-items: center;

	justify-content: center;

	border:
		1px solid var(--border);

	background:
		var(--off-white);
}


/* Enterprise */

.service-icon:not(
	.service-icon-grid
):not(
	.service-icon-ai
):not(
	.service-icon-chip
):not(
	.service-icon-radar
):not(
	.service-icon-platform
) {
	gap: 5px;
}


.service-icon > span {
	display: block;

	width: 8px;

	height: 8px;

	border:
		1px solid var(--maroon);

	background:
		var(--yellow);
}


/* Government */

.service-icon-grid {
	display: grid;

	grid-template-columns:
		repeat(2, 12px);

	grid-template-rows:
		repeat(2, 12px);

	gap: 7px;
}


.service-icon-grid span {
	margin-top: 40px;

	width: 12px;

	height: 12px;

	border:
		1px solid var(--maroon);

	background:
		transparent;
}


.service-icon-grid span:first-child {
	background:
		var(--yellow);
}


/* =========================================================
   AI ICON
========================================================= */

.service-icon-ai {
	border-radius: 50%;

	border-color:
		var(--maroon);
}


.service-icon-ai span {
	position: absolute;

	width: 9px;

	height: 9px;

	border-radius: 50%;

	background:
		var(--yellow);

	border:
		1px solid var(--maroon);
}


.service-icon-ai span:nth-child(1) {
	top: 18px;
	left: 18px;
}


.service-icon-ai span:nth-child(2) {
	top: 30px;
	right: 16px;
}


.service-icon-ai span:nth-child(3) {
	bottom: 16px;
	left: 30px;
}


/* =========================================================
   CHIP ICON
========================================================= */

.service-icon-chip {
	border:
		0;

	background:
		transparent;
}


.chip-core {
	width: 38px;

	height: 38px;

	border:
		2px solid var(--maroon);

	background:
		var(--cream);

	position: relative;
}


.chip-core::after {
	content: "";

	position: absolute;

	inset: 8px;

	background:
		var(--yellow);
}


.service-icon-chip span {
	position: absolute;

	width: 7px;

	height: 16px;

	background:
		var(--maroon);

	border: 0;
}


.service-icon-chip span:nth-child(2) {
	left: 7px;
	top: 27px;
}


.service-icon-chip span:nth-child(3) {
	right: 7px;
	top: 27px;
}


.service-icon-chip span:nth-child(4) {
	left: 27px;
	top: 7px;

	width: 16px;
	height: 7px;
}


.service-icon-chip span:nth-child(5) {
	left: 27px;
	bottom: 7px;

	width: 16px;
	height: 7px;
}


/* =========================================================
   RADAR ICON
========================================================= */

.service-icon-radar {
	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			var(--yellow) 0 3px,
			transparent 4px
		);
}


.service-icon-radar::before,
.service-icon-radar::after {
	content: "";

	position: absolute;

	border:
		1px solid
		var(--maroon);

	border-radius: 50%;
}


.service-icon-radar::before {
	inset: 10px;
}


.service-icon-radar::after {
	inset: 20px;
}


.service-icon-radar span {
	position: absolute;

	width: 1px;

	height: 30px;

	background:
		var(--maroon);

	transform:
		rotate(45deg);

	transform-origin:
		bottom center;
}


/* =========================================================
   PLATFORM ICON
========================================================= */

.service-icon-platform {
	border: 0;

	background: transparent;

	flex-direction: column;

	gap: 5px;

	align-items: flex-start;
}


.service-icon-platform span {
	width: 48px;

	height: 8px;

	background:
		var(--maroon);

	border: 0;
}


.service-icon-platform span:nth-child(2) {
	width: 36px;

	background:
		var(--yellow);
}


.service-icon-platform span:nth-child(3) {
	width: 23px;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.service-card h3 {
	max-width: 390px;

	margin: 0 0 18px;

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size: 31px;

	font-weight: 500;

	line-height: 1.05;

	letter-spacing: -0.035em;
}


.service-card > p {
	max-width: 480px;

	margin: 0 0 28px;

	color: var(--muted);

	font-size: 18px;

	line-height: 1.7;
}


/* =========================================================
   SERVICE LIST
========================================================= */

.service-list {
	display: flex;

	flex-wrap: wrap;

	gap: 7px;
}


.service-list span {
	padding:
		7px 10px;

	border:
		1px solid var(--border);

	color: var(--muted);

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 10px;

	letter-spacing: 0.04em;

	background:
		var(--off-white);

	transition:
		border-color 0.25s ease,
		color 0.25s ease;
}


.service-card:hover .service-list span {
	border-color:
		rgba(
			109,
			31,
			47,
			0.25
		);
}


/* =========================================================
   DEFENCE CARD
========================================================= */

.service-card-defence {
	background:
		var(--maroon);

	color:
		var(--cream);
}


.service-card-defence:hover {
	background:
		var(--maroon-dark);
}


.service-card-defence .service-number {
	color:
		var(--yellow);
}


.service-card-defence .service-arrow {
	color:
		var(--cream);

	border-color:
		rgba(
			255,
			253,
			249,
			0.25
		);
}


.service-card-defence:hover .service-arrow {
	background:
		var(--yellow);

	color:
		var(--maroon);

	border-color:
		var(--yellow);
}


.service-card-defence h3 {
	color:
		var(--cream);
}


.service-card-defence > p {
	color:
		rgba(
			255,
			253,
			249,
			0.68
		);
}


.service-card-defence .service-list span {
	color:
		rgba(
			255,
			253,
			249,
			0.75
		);

	border-color:
		rgba(
			255,
			253,
			249,
			0.18
		);

	background:
		rgba(
			255,
			253,
			249,
			0.05
		);
}


/* =========================================================
   DEFENCE DECORATION
========================================================= */

.service-card-defence::before {
	content: "";

	position: absolute;

	width: 400px;

	height: 400px;

	right: -180px;

	bottom: -180px;

	border:
		1px solid
		rgba(
			255,
			253,
			249,
			0.12
		);

	border-radius: 50%;

	box-shadow:
		0 0 0 60px
		rgba(
			255,
			253,
			249,
			0.025
		),
		0 0 0 120px
		rgba(
			255,
			253,
			249,
			0.02
		);

	pointer-events: none;
}


.service-card-defence::after {
	content: "";

	position: absolute;

	width: 8px;

	height: 8px;

	right: 100px;

	bottom: 90px;

	border-radius: 50%;

	background:
		var(--yellow);

	box-shadow:
		0 0 20px
		var(--yellow);

	animation:
		defencePulse
		2s
		ease-in-out
		infinite;
}


@keyframes defencePulse {

	0%,
	100% {
		opacity: 0.3;

		transform:
			scale(0.8);
	}

	50% {
		opacity: 1;

		transform:
			scale(1);
	}

}


/* =========================================================
   FOOTER STATEMENT
========================================================= */

.services-footer {
	display: flex;

	align-items: center;

	gap: 25px;

	margin-top: 85px;
}


.services-footer-line {
	flex: 1;

	height: 1px;

	background:
		var(--border);
}


.services-footer p {
	flex-shrink: 0;

	margin: 0;

	color:
		var(--muted);

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 12px;

	letter-spacing: 0.08em;

	text-transform: uppercase;
}


.services-footer p span {
	color:
		var(--maroon);
}


/* =========================================================
   TABLET
========================================================= */

@media (
	max-width: 1000px
) {

	.services-heading-row {
		grid-template-columns:
			1fr;

		gap: 35px;
	}


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

}


/* =========================================================
   MOBILE
========================================================= */

@media (
	max-width: 600px
) {

	.services-section {
		padding:
			100px 0
			90px;
	}


	.services-container {
		width:
			calc(
				100% - 32px
			);
	}


	.services-header {
		margin-bottom:
			55px;
	}


	.services-heading-row h2 {
		font-size:
			48px;
	}


	.services-heading-row > p {
		font-size:
			14px;

		line-height:
			1.7;
	}


	.service-card {
		min-height:
			470px;

		padding:
			26px;
	}


	.service-icon {
		margin-top:
			45px;
	}


	.service-card h3 {
		font-size:
			28px;
	}


	.service-card > p {
		font-size:
			13px;
	}


	.services-footer {
		margin-top:
			60px;
	}


	.services-footer-line {
		display:
			none;
	}


	.services-footer p {
		font-size:
			8px;

		text-align:
			center;

		width:
			100%;
	}

}

/* =========================================================
   INDUSTRIES
========================================================= */

.industries-section {
	position: relative;

	padding: 150px 0 140px;

	background: var(--cream);

	border-top:
		1px solid var(--border);

	overflow: hidden;
}


.industries-container {
	width:
		min(
			1400px,
			calc(100% - 80px)
		);

	margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.industries-header {
	margin-bottom: 75px;
}


.industries-heading {
	display: grid;

	grid-template-columns:
		1.15fr
		0.85fr;

	gap: 100px;

	align-items: end;
}


.industries-heading h2 {
	margin: 0;

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size:
		clamp(
			50px,
			6vw,
			82px
		);

	font-weight: 500;

	line-height: 0.95;

	letter-spacing: -0.055em;
}


.industries-heading h2 span {
	display: block;

	color: var(--maroon);
}


.industries-heading p {
	max-width: 500px;

	margin: 0;

	color: var(--muted);

	font-size: 18px;

	line-height: 1.8;
}


/* =========================================================
   INDUSTRY LIST
========================================================= */

.industries-list {
	display: grid;

	grid-template-columns:
		repeat(2, 1fr);

	border-top:
		1px solid var(--border);

	border-left:
		1px solid var(--border);
}


/* =========================================================
   INDUSTRY ITEM
========================================================= */

.industry-item {
	position: relative;

	min-height: 145px;

	display: grid;

	grid-template-columns:
		45px
		1fr
		40px;

	align-items: center;

	gap: 20px;

	padding:
		25px 28px;

	border-right:
		1px solid var(--border);

	border-bottom:
		1px solid var(--border);

	background:
		var(--cream);

	overflow: hidden;

	transition:
		background 0.3s ease,
		padding 0.3s ease;
}


.industry-item:hover {
	background:
		var(--off-white);

	padding-left: 34px;
}


/* =========================================================
   NUMBER
========================================================= */

.industry-number {
	align-self: start;

	padding-top: 3px;

	color:
		var(--yellow);

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 12px;

	font-weight: 600;

	letter-spacing: 0.1em;
}


/* =========================================================
   MAIN
========================================================= */

.industry-main h3 {
	margin: 0 0 7px;

	color:
		var(--text);

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size: 23px;

	font-weight: 500;

	line-height: 1.1;

	letter-spacing: -0.025em;
}


.industry-main p {
	max-width: 410px;

	margin: 0;

	color:
		var(--muted);

	font-size: 14px;

	line-height: 1.6;
}


/* =========================================================
   ARROW
========================================================= */

.industry-arrow {
	width: 34px;

	height: 34px;

	display: grid;

	place-items: center;

	border:
		1px solid var(--border);

	border-radius: 50%;

	color:
		var(--maroon);

	font-size: 14px;

	transition:
		background 0.3s ease,
		color 0.3s ease,
		transform 0.3s ease;
}


.industry-item:hover .industry-arrow {
	background:
		var(--maroon);

	color:
		var(--cream);

	transform:
		translate(
			2px,
			-2px
		);
}


/* =========================================================
   DEFENCE
========================================================= */

.industry-defence {
	background:
		var(--maroon);

}


.industry-defence:hover {
	background:
		var(--maroon-dark);

	padding-left: 34px;
}


.industry-defence .industry-number {
	color:
		var(--yellow);
}


.industry-defence .industry-main h3 {
	color:
		var(--cream);
}


.industry-defence .industry-main p {
	color:
		rgba(
			255,
			253,
			249,
			0.65
		);
}


.industry-defence .industry-arrow {
	color:
		var(--cream);

	border-color:
		rgba(
			255,
			253,
			249,
			0.25
		);
}


.industry-defence:hover .industry-arrow {
	background:
		var(--yellow);

	color:
		var(--maroon);

	border-color:
		var(--yellow);
}


/* =========================================================
   DEFENCE DECORATION
========================================================= */

.industry-defence::before {
	content: "";

	position: absolute;

	width: 280px;

	height: 280px;

	right: -130px;

	top: -130px;

	border:
		1px solid
		rgba(
			255,
			253,
			249,
			0.12
		);

	border-radius: 50%;

	box-shadow:
		0 0 0 40px
		rgba(
			255,
			253,
			249,
			0.02
		),

		0 0 0 80px
		rgba(
			255,
			253,
			249,
			0.015
		);

	pointer-events: none;
}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.industries-bottom {
	display: flex;

	align-items: center;

	gap: 25px;

	max-width: 850px;

	margin:
		80px auto 0;

	padding-top: 30px;

	border-top:
		1px solid var(--border);
}


.industries-bottom-mark {
	width: 38px;

	height: 38px;

	flex-shrink: 0;

	display: grid;

	place-items: center;

	border:
		1px solid var(--border);

	border-radius: 50%;
}


.industries-bottom-mark span {
	width: 8px;

	height: 8px;

	border-radius: 50%;

	background:
		var(--yellow);

	box-shadow:
		0 0 12px
		rgba(
			232,
			185,
			49,
			0.65
		);
}


.industries-bottom p {
	margin: 0;

	color:
		var(--muted);

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size: 17px;

	line-height: 1.5;

	letter-spacing:
		-0.015em;
}


/* =========================================================
   TABLET
========================================================= */

@media (
	max-width: 1000px
) {

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

		gap: 30px;
	}

	.industries-list {
		grid-template-columns:
			1fr;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (
	max-width: 600px
) {

	.industries-section {
		padding:
			100px 0
			90px;
	}


	.industries-container {
		width:
			calc(
				100% - 32px
			);
	}


	.industries-header {
		margin-bottom:
			55px;
	}


	.industries-heading h2 {
		font-size:
			48px;
	}


	.industries-heading p {
		font-size:
			14px;

		line-height:
			1.7;
	}


	.industry-item {
		min-height:
			130px;

		grid-template-columns:
			35px
			1fr
			34px;

		gap:
			12px;

		padding:
			22px 18px;
	}


	.industry-item:hover {
		padding-left:
			22px;
	}


	.industry-main h3 {
		font-size:
			20px;
	}


	.industry-main p {
		font-size:
			11px;
	}


	.industry-arrow {
		width:
			30px;

		height:
			30px;
	}


	.industries-bottom {
		margin-top:
			60px;

		align-items:
			flex-start;
	}


	.industries-bottom p {
		font-size:
			15px;
	}

}


/* =========================================================
   PHILOSOPHY
========================================================= */

.philosophy-section {
	position: relative;

	padding: 170px 0 160px;

	background: var(--maroon);

	color: var(--cream);

	overflow: hidden;
}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.philosophy-section::before {
	content: "";

	position: absolute;

	inset: 0;

	background-image:
		linear-gradient(
			rgba(255, 253, 249, 0.035) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(255, 253, 249, 0.035) 1px,
			transparent 1px
		);

	background-size:
		70px 70px;

	pointer-events: none;
}


.philosophy-section::after {
	content: "";

	position: absolute;

	width: 600px;
	height: 600px;

	right: -300px;
	top: -250px;

	border-radius: 50%;

	border:
		1px solid
		rgba(255, 253, 249, 0.08);

	box-shadow:
		0 0 0 80px
		rgba(255, 253, 249, 0.018),
		0 0 0 160px
		rgba(255, 253, 249, 0.012);

	pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.philosophy-container {
	position: relative;

	z-index: 1;

	width:
		min(
			1400px,
			calc(100% - 80px)
		);

	margin: 0 auto;
}


/* =========================================================
   KICKER
========================================================= */

.philosophy-kicker {
	color: var(--cream);
}


.philosophy-kicker .section-kicker-line {
	background: var(--yellow);
}


/* =========================================================
   INTRO
========================================================= */

.philosophy-intro {
	display: grid;

	grid-template-columns:
		1.15fr
		0.85fr;

	gap: 100px;

	align-items: end;

	margin-bottom: 100px;
}


.philosophy-intro h2 {
	margin: 0;

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size:
		clamp(
			55px,
			7vw,
			96px
		);

	font-weight: 500;

	line-height: 0.9;

	letter-spacing: -0.06em;
}


.philosophy-intro h2 span {
	color: var(--yellow);
}


.philosophy-intro p {
	max-width: 500px;

	margin: 0;

	color:
		rgba(
			255,
			253,
			249,
			0.65
		);

	font-size: 18px;

	line-height: 1.8;
}


/* =========================================================
   PRINCIPLES GRID
========================================================= */

.philosophy-principles {
	display: grid;

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

	border-top:
		1px solid
		rgba(
			255,
			253,
			249,
			0.15
		);

	border-left:
		1px solid
		rgba(
			255,
			253,
			249,
			0.15
		);
}


/* =========================================================
   PRINCIPLE
========================================================= */

.philosophy-principle {
	min-height: 390px;

	padding: 30px;

	border-right:
		1px solid
		rgba(
			255,
			253,
			249,
			0.15
		);

	border-bottom:
		1px solid
		rgba(
			255,
			253,
			249,
			0.15
		);

	transition:
		background 0.3s ease;
}


.philosophy-principle:hover {
	background:
		rgba(
			255,
			253,
			249,
			0.04
		);
}


/* =========================================================
   PRINCIPLE TOP
========================================================= */

.principle-top {
	display: flex;

	align-items: center;

	justify-content: space-between;

	margin-bottom: 75px;
}


.principle-top > span {
	color: var(--yellow);

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 12px;

	font-weight: 600;

	letter-spacing: 0.12em;
}


.principle-symbol {
	width: 30px;
	height: 30px;

	display: grid;

	place-items: center;

	border:
		1px solid
		rgba(
			255,
			253,
			249,
			0.25
		);

	border-radius: 50%;

	color: var(--yellow);

	font-size: 16px;

	transition:
		transform 0.3s ease,
		background 0.3s ease;
}


.philosophy-principle:hover
.principle-symbol {
	transform:
		rotate(45deg);

	background:
		var(--yellow);

	color:
		var(--maroon);
}


/* =========================================================
   PRINCIPLE TITLE
========================================================= */

.philosophy-principle h3 {
	max-width: 240px;

	margin: 0 0 25px;

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size: 28px;

	font-weight: 500;

	line-height: 1.02;

	letter-spacing: -0.035em;
}


/* =========================================================
   PRINCIPLE DESCRIPTION
========================================================= */

.philosophy-principle p {
	max-width: 270px;

	margin: 0;

	color:
		rgba(
			255,
			253,
			249,
			0.55
		);

	font-size: 16px;

	line-height: 1.75;
}


/* =========================================================
   CLOSING
========================================================= */

.philosophy-closing {
	display: flex;

	align-items: center;

	gap: 25px;

	margin-top: 90px;
}


.philosophy-closing-line {
	width: 60px;

	height: 1px;

	background:
		var(--yellow);
}


.philosophy-closing p {
	margin: 0;

	color:
		rgba(
			255,
			253,
			249,
			0.55
		);

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 12px;

	letter-spacing: 0.08em;

	text-transform: uppercase;
}


.philosophy-closing p span {
	color:
		var(--yellow);
}


/* =========================================================
   TABLET
========================================================= */

@media (
	max-width: 1100px
) {

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

		gap: 35px;
	}


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

}


/* =========================================================
   MOBILE
========================================================= */

@media (
	max-width: 600px
) {

	.philosophy-section {
		padding:
			110px 0
			100px;
	}


	.philosophy-container {
		width:
			calc(
				100% - 32px
			);
	}


	.philosophy-intro {
		margin-bottom:
			65px;
	}


	.philosophy-intro h2 {
		font-size:
			52px;
	}


	.philosophy-intro p {
		font-size:
			14px;
	}


	.philosophy-principles {
		grid-template-columns:
			1fr;
	}


	.philosophy-principle {
		min-height:
			350px;

		padding:
			25px;
	}


	.principle-top {
		margin-bottom:
			60px;
	}


	.philosophy-principle h3 {
		font-size:
			27px;
	}


	.philosophy-closing {
		margin-top:
			65px;
	}

}

/* =========================================================
   VISION & MISSION
========================================================= */

.vision-section {
	position: relative;

	padding: 160px 0;

	background: var(--off-white);

	border-top:
		1px solid var(--border);

	overflow: hidden;
}


.vision-container {
	width:
		min(
			1400px,
			calc(100% - 80px)
		);

	margin: 0 auto;
}


/* =========================================================
   BLOCK
========================================================= */

.vision-block {
	display: grid;

	grid-template-columns:
		220px
		1fr;

	gap: 80px;

	padding:
		70px 0;
}


/* =========================================================
   LABEL
========================================================= */

.vision-label {
	display: flex;

	flex-direction: column;

	gap: 14px;

	padding-top: 8px;
}


.vision-label span {
	color: var(--yellow);

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 12px;

	font-weight: 600;

	letter-spacing: 0.12em;
}


.vision-label strong {
	color: var(--maroon);

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 12px;

	font-weight: 600;

	letter-spacing: 0.14em;
}


/* =========================================================
   CONTENT
========================================================= */

.vision-content {
	max-width: 900px;
}


.vision-content h2 {
	margin: 0 0 35px;

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size:
		clamp(
			48px,
			6vw,
			82px
		);

	font-weight: 500;

	line-height: 0.95;

	letter-spacing: -0.055em;

	color: var(--text);
}


.vision-content h2 span {
	display: block;

	color: var(--maroon);
}


.vision-content p {
	max-width: 720px;

	margin: 0;

	color: var(--muted);

	font-size: 18px;

	line-height: 1.8;
}


/* =========================================================
   DIVIDER
========================================================= */

.vision-divider {
	width: 100%;

	height: 1px;

	background:
		var(--border);

	position: relative;
}


.vision-divider::after {
	content: "";

	position: absolute;

	left: 0;

	top: -2px;

	width: 42px;

	height: 4px;

	background:
		var(--yellow);
}


/* =========================================================
   MISSION
========================================================= */

.vision-mission {
	padding-bottom: 55px;
}


.vision-mission .vision-content h2 {
	font-size:
		clamp(
			42px,
			5vw,
			70px
		);
}


.vision-mission .vision-content h2 span {
	color: var(--text);

	opacity: 0.42;
}


/* =========================================================
   STRATEGIC MARKERS
========================================================= */

.vision-markers {
	display: flex;

	align-items: center;

	gap: 45px;

	margin-top: 75px;

	padding-top: 25px;

	border-top:
		1px solid var(--border);
}


.vision-marker {
	display: flex;

	align-items: center;

	gap: 10px;

	color: var(--muted);

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 12px;

	letter-spacing: 0.1em;
}


.vision-marker-dot {
	width: 6px;

	height: 6px;

	border-radius: 50%;

	background:
		var(--yellow);

	box-shadow:
		0 0 10px
		rgba(
			232,
			185,
			49,
			0.45
		);
}


/* =========================================================
   HOVER DETAIL
========================================================= */

.vision-block {
	transition:
		transform 0.4s ease;
}


.vision-block:hover {
	transform:
		translateX(5px);
}


/* =========================================================
   TABLET
========================================================= */

@media (
	max-width: 900px
) {

	.vision-block {
		grid-template-columns:
			150px
			1fr;

		gap: 45px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (
	max-width: 600px
) {

	.vision-section {
		padding:
			100px 0
			90px;
	}


	.vision-container {
		width:
			calc(
				100% - 32px
			);
	}


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

		gap: 30px;

		padding:
			50px 0;
	}


	.vision-label {
		flex-direction:
			row;

		align-items:
			center;

		gap: 15px;
	}


	.vision-content h2 {
		font-size:
			48px;

		margin-bottom:
			25px;
	}


	.vision-content p {
		font-size:
			14px;

		line-height:
			1.75;
	}


	.vision-markers {
		flex-direction:
			column;

		align-items:
			flex-start;

		gap: 18px;

		margin-top:
			50px;
	}

}


/* =========================================================
   WHY IRON BLADE
========================================================= */

.why-section {
	position: relative;

	padding: 150px 0 140px;

	background: var(--cream);

	border-top:
		1px solid var(--border);

	overflow: hidden;
}


.why-container {
	width:
		min(
			1400px,
			calc(100% - 80px)
		);

	margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.why-header {
	margin-bottom: 80px;
}


.why-heading {
	display: grid;

	grid-template-columns:
		1.15fr
		0.85fr;

	gap: 100px;

	align-items: end;
}


.why-heading h2 {
	margin: 0;

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size:
		clamp(
			52px,
			6vw,
			84px
		);

	font-weight: 500;

	line-height: 0.94;

	letter-spacing: -0.055em;

	color: var(--text);
}


.why-heading h2 span {
	display: block;

	color: var(--maroon);
}


.why-heading p {
	max-width: 510px;

	margin: 0;

	color: var(--muted);

	font-size: 18px;

	line-height: 1.8;
}


/* =========================================================
   LIST
========================================================= */

.why-list {
	border-top:
		1px solid var(--border);
}


/* =========================================================
   ITEM
========================================================= */

.why-item {
	position: relative;

	display: grid;

	grid-template-columns:
		80px
		1fr
		180px;

	gap: 40px;

	align-items: center;

	min-height: 170px;

	padding:
		30px 0;

	border-bottom:
		1px solid var(--border);

	transition:
		padding 0.35s ease,
		background 0.35s ease;
}


.why-item:hover {
	padding-left: 18px;

	background:
		var(--off-white);
}


/* =========================================================
   NUMBER
========================================================= */

.why-number {
	color: var(--yellow);

    padding-left: 10px;

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 12px;

	font-weight: 600;

	letter-spacing: 0.1em;
}


/* =========================================================
   CONTENT
========================================================= */

.why-content {
	max-width: 700px;
}


.why-content h3 {
	margin: 0 0 10px;

	color: var(--text);

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size: 30px;

	font-weight: 500;

	line-height: 1;

	letter-spacing: -0.035em;
}


.why-content p {
	max-width: 620px;

	margin: 0;

	color: var(--muted);

	font-size: 16px;

	line-height: 1.7;
}


/* =========================================================
   KEYWORD
========================================================= */

.why-keyword {
	justify-self: end;

    padding-right: 25px;

	color:
		var(--muted);

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 12px;

	font-weight: 600;

	letter-spacing: 0.13em;

	text-align: right;

	transition:
		color 0.3s ease;

}


.why-item:hover .why-keyword {
	color:
		var(--maroon);
}


/* =========================================================
   HIGHLIGHT ITEM
========================================================= */

.why-item-highlight {
	background:
		var(--maroon);
}


.why-item-highlight:hover {
	background:
		var(--maroon-dark);

	padding-left: 18px;
}


.why-item-highlight .why-number {
	color:
		var(--yellow);
}


.why-item-highlight .why-content h3 {
	color:
		var(--cream);
}


.why-item-highlight .why-content p {
	color:
		rgba(
			255,
			253,
			249,
			0.65
		);
}


.why-item-highlight .why-keyword {
	color:
		rgba(
			255,
			253,
			249,
			0.55
		);
}


.why-item-highlight:hover .why-keyword {
	color:
		var(--yellow);
}


/* =========================================================
   CLOSING
========================================================= */

.why-closing {
	display: flex;

	align-items: center;

	gap: 20px;

	margin-top: 70px;
}


.why-closing-number {
	color: var(--yellow);

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 12px;

	font-weight: 600;
}


.why-closing-line {
	width: 50px;

	height: 1px;

	background:
		var(--border);
}


.why-closing p {
	margin: 0;

	color:
		var(--muted);

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 12px;

	letter-spacing: 0.08em;

	text-transform: uppercase;
}


/* =========================================================
   TABLET
========================================================= */

@media (
	max-width: 900px
) {

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

		gap: 30px;
	}


	.why-item {
		grid-template-columns:
			60px
			1fr
			130px;

		gap: 25px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (
	max-width: 600px
) {

	.why-section {
		padding:
			100px 0
			90px;
	}


	.why-container {
		width:
			calc(
				100% - 32px
			);
	}


	.why-header {
		margin-bottom:
			55px;
	}


	.why-heading h2 {
		font-size:
			48px;
	}


	.why-heading p {
		font-size:
			14px;

		line-height:
			1.7;
	}


	.why-item {
		grid-template-columns:
			35px
			1fr;

		gap:
			15px;

		padding:
			28px 0;

		min-height:
			0;
	}


	.why-item:hover,
	.why-item-highlight:hover {
		padding-left:
			8px;
	}


	.why-number {
		align-self:
			start;

		padding-top:
			4px;
	}


	.why-content h3 {
		font-size:
			25px;
	}


	.why-content p {
		font-size:
			12px;
	}


	.why-keyword {
		display:
			none;
	}


	.why-closing {
		margin-top:
			55px;
	}

}


/* =========================================================
   VALUES
========================================================= */

.values-section {
	position: relative;

	padding: 150px 0 140px;

	background: var(--off-white);

	border-top:
		1px solid var(--border);

	overflow: hidden;
}


.values-container {
	width:
		min(
			1400px,
			calc(100% - 80px)
		);

	margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.values-header {
	margin-bottom: 80px;
}


.values-heading {
	display: grid;

	grid-template-columns:
		1.15fr
		0.85fr;

	gap: 100px;

	align-items: end;
}


.values-heading h2 {
	margin: 0;

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size:
		clamp(
			52px,
			6vw,
			84px
		);

	font-weight: 500;

	line-height: 0.94;

	letter-spacing: -0.055em;

	color: var(--text);
}


.values-heading h2 span {
	display: block;

	color: var(--maroon);
}


.values-heading p {
	max-width: 510px;

	margin: 0;

	color: var(--muted);

	font-size: 18px;

	line-height: 1.8;
}


/* =========================================================
   GRID
========================================================= */

.values-grid {
	display: grid;

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

	border-top:
		1px solid var(--border);

	border-left:
		1px solid var(--border);
}


/* =========================================================
   CARD
========================================================= */

.value-card {
	position: relative;

	min-height: 430px;

	display: flex;

	flex-direction: column;

	padding: 30px;

	background: var(--cream);

	border-right:
		1px solid var(--border);

	border-bottom:
		1px solid var(--border);

	overflow: hidden;

	transition:
		background 0.35s ease,
		transform 0.35s ease;
}


.value-card:hover {
	background: var(--cream);

	transform:
		translateY(-4px);

	z-index: 2;
}


/* =========================================================
   TOP
========================================================= */

.value-top {
	display: flex;

	align-items: center;

	justify-content: space-between;
}


.value-number {
	color: var(--yellow);

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 12px;

	font-weight: 600;

	letter-spacing: 0.1em;
}


.value-symbol {
	width: 34px;

	height: 34px;

	display: grid;

	place-items: center;

	border:
		1px solid var(--border);

	border-radius: 50%;

	color: var(--maroon);

	font-size: 15px;

	transition:
		background 0.3s ease,
		color 0.3s ease,
		transform 0.3s ease;
}


.value-card:hover .value-symbol {
	background: var(--maroon);

	color: var(--cream);

	transform:
		rotate(12deg);
}


/* =========================================================
   CONTENT
========================================================= */

.value-content {
	margin-top: auto;
}


.value-content h3 {
	margin: 0 0 18px;

	color: var(--text);

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size: 34px;

	font-weight: 500;

	line-height: 1;

	letter-spacing: -0.04em;
}


.value-content p {
	max-width: 250px;

	margin: 0;

	color: var(--muted);

	font-size: 14px;

	line-height: 1.75;
}


/* =========================================================
   BACKGROUND WORD
========================================================= */

.value-word {
	position: absolute;

	right: 0px;

	bottom: -8px;

	color:
		rgba(
			109,
			31,
			47,
			0.035
		);

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size: 72px;

	font-weight: 700;

	line-height: 1;

	letter-spacing: -0.08em;

	pointer-events: none;

	transition:
		color 0.3s ease;
}


.value-card:hover .value-word {
	color:
		rgba(
			109,
			31,
			47,
			0.07
		);
}


/* =========================================================
   DARK CARD
========================================================= */

.value-card-dark {
	background:
		var(--maroon);

	color:
		var(--cream);
}


.value-card-dark:hover {
	background:
		var(--maroon-dark);
}


.value-card-dark .value-symbol {
	color:
		var(--cream);

	border-color:
		rgba(
			255,
			253,
			249,
			0.25
		);
}


.value-card-dark:hover .value-symbol {
	background:
		var(--yellow);

	color:
		var(--maroon);

	border-color:
		var(--yellow);
}


.value-card-dark .value-content h3 {
	color:
		var(--cream);
}


.value-card-dark .value-content p {
	color:
		rgba(
			255,
			253,
			249,
			0.62
		);
}


.value-card-dark .value-word {
	color:
		rgba(
			255,
			253,
			249,
			0.035
		);
}


.value-card-dark:hover .value-word {
	color:
		rgba(
			255,
			253,
			249,
			0.07
		);
}


/* =========================================================
   DECORATIVE LINE
========================================================= */

.value-card::before {
	content: "";

	position: absolute;

	left: 30px;

	top: 88px;

	width: 32px;

	height: 1px;

	background:
		var(--border);
}


.value-card-dark::before {
	background:
		rgba(
			255,
			253,
			249,
			0.2
		);
}


/* =========================================================
   BOTTOM
========================================================= */

.values-bottom {
	display: flex;

	align-items: center;

	justify-content: center;

	gap: 20px;

	margin-top: 75px;

	color:
		var(--muted);

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 12px;

	font-weight: 600;

	letter-spacing: 0.14em;
}


.values-bottom-line {
	width: 70px;

	height: 1px;

	background:
		var(--border);
}


/* =========================================================
   TABLET
========================================================= */

@media (
	max-width: 1050px
) {

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

		gap: 30px;
	}


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

}


/* =========================================================
   MOBILE
========================================================= */

@media (
	max-width: 600px
) {

	.values-section {
		padding:
			100px 0
			90px;
	}


	.values-container {
		width:
			calc(
				100% - 32px
			);
	}


	.values-header {
		margin-bottom:
			55px;
	}


	.values-heading h2 {
		font-size:
			48px;
	}


	.values-heading p {
		font-size:
			14px;

		line-height:
			1.7;
	}


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


	.value-card {
		min-height:
			370px;

		padding:
			26px;
	}


	.value-content h3 {
		font-size:
			31px;
	}


	.value-content p {
		font-size:
			12px;
	}


	.value-word {
		font-size:
			60px;
	}


	.values-bottom {
		gap:
			12px;

		font-size:
			7px;
	}


	.values-bottom-line {
		width:
			30px;
	}

}

/* =========================================================
   LOOKING AHEAD
========================================================= */

.looking-section {
	position: relative;

	padding: 170px 0 120px;

	background: var(--maroon);

	color: var(--cream);

	overflow: hidden;
}


/* =========================================================
   TECHNICAL GRID
========================================================= */

.looking-grid {
	position: absolute;

	inset: 0;

	background-image:
		linear-gradient(
			rgba(255, 253, 249, 0.035) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(255, 253, 249, 0.035) 1px,
			transparent 1px
		);

	background-size:
		80px 80px;

	pointer-events: none;
}


/* =========================================================
   ORBITS
========================================================= */

.looking-orbit {
	position: absolute;

	border:
		1px solid
		rgba(
			255,
			253,
			249,
			0.08
		);

	border-radius: 50%;

	pointer-events: none;
}


.looking-orbit-one {
	width: 700px;
	height: 700px;

	right: -350px;
	top: -180px;
}


.looking-orbit-two {
	width: 500px;
	height: 500px;

	right: -250px;
	top: -80px;
}


.looking-orbit-three {
	width: 300px;
	height: 300px;

	right: -150px;
	top: 20px;
}


.looking-orbit-three::after {
	content: "";

	position: absolute;

	width: 8px;
	height: 8px;

	left: 50%;
	top: 0;

	border-radius: 50%;

	background: var(--yellow);

	box-shadow:
		0 0 20px var(--yellow);

	transform:
		translateX(-50%);
}


/* =========================================================
   CONTAINER
========================================================= */

.looking-container {
	position: relative;

	z-index: 2;

	width:
		min(
			1400px,
			calc(100% - 80px)
		);

	margin: 0 auto;
}


/* =========================================================
   KICKER
========================================================= */

.looking-kicker {
	color: var(--cream);
}


/* =========================================================
   MAIN
========================================================= */

.looking-main {
	max-width: 1400px;

	margin-top: 65px;
}


.looking-label {
	display: flex;

	align-items: center;

	gap: 20px;

	margin-bottom: 35px;

	color:
		rgba(
			255,
			253,
			249,
			0.5
		);

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 12px;

	font-weight: 600;

	letter-spacing: 0.14em;
}


.looking-label span:last-child {
	color: var(--yellow);
}


.looking-main h2 {
	max-width: 1400px;

	margin: 0 0 45px;

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size:
		clamp(
			60px,
			8vw,
			115px
		);

	font-weight: 500;

	line-height: 0.88;

	letter-spacing: -0.065em;
}


.looking-main h2 span {
	display: block;

	color: var(--yellow);
}


.looking-main > p {
	max-width: 1400px;

	margin:
		0 0 20px;

	color:
		rgba(
			255,
			253,
			249,
			0.66
		);

	font-size: 18px;

	line-height: 1.8;
}


/* =========================================================
   TECHNOLOGIES
========================================================= */

.looking-technologies {
	display: grid;

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

	margin-top: 100px;

	border-top:
		1px solid
		rgba(
			255,
			253,
			249,
			0.16
		);

	border-bottom:
		1px solid
		rgba(
			255,
			253,
			249,
			0.16
		);
}


.looking-tech {
	min-height: 130px;

	display: flex;

	flex-direction: column;

	justify-content: center;

	gap: 14px;

	padding:
		20px 25px;

	border-right:
		1px solid
		rgba(
			255,
			253,
			249,
			0.16
		);
}


.looking-tech:last-child {
	border-right: 0;
}


.looking-tech span {
	color: var(--yellow);

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 12px;

	font-weight: 600;
}


.looking-tech strong {
	color: var(--cream);

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size: 18px;

	font-weight: 500;

	line-height: 1.2;
}


/* =========================================================
   CTA
========================================================= */

.looking-cta {
	display: flex;

	align-items: flex-end;

	justify-content: space-between;

	gap: 60px;

	margin-top: 110px;

	padding-top: 50px;

	border-top:
		1px solid
		rgba(
			255,
			253,
			249,
			0.16
		);
}


.looking-cta-label {
	display: block;

	margin-bottom: 18px;

	color:
		rgba(
			255,
			253,
			249,
			0.45
		);

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 12px;

	font-weight: 600;

	letter-spacing: 0.15em;
}


.looking-cta h3 {
	max-width: 1400px;

	margin: 0;

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size:
		clamp(
			30px,
			4vw,
			54px
		);

	font-weight: 500;

	line-height: 1;

	letter-spacing: -0.04em;
}


.looking-cta h3 span {
	color: var(--yellow);
}


/* =========================================================
   BUTTON
========================================================= */

.looking-button {
	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 20px;

	min-height: 58px;

	padding:
		0 25px;

	flex-shrink: 0;

	background: var(--yellow);

	color: var(--maroon);

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size: 14px;

	font-weight: 600;

	text-decoration: none;

	transition:
		background 0.3s ease,
		transform 0.3s ease;
}


.looking-button span {
	font-size: 18px;

	transition:
		transform 0.3s ease;
}


.looking-button:hover {
	background: var(--cream);

	transform:
		translateY(-3px);
}


.looking-button:hover span {
	transform:
		translate(3px, -3px);
}


/* =========================================================
   TABLET
========================================================= */

@media (
	max-width: 1000px
) {

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


	.looking-tech:nth-child(2) {
		border-right: 0;
	}


	.looking-tech:nth-child(-n + 2) {
		border-bottom:
			1px solid
			rgba(
				255,
				253,
				249,
				0.16
			);
	}


	.looking-cta {
		align-items:
			flex-start;

		flex-direction:
			column;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (
	max-width: 600px
) {

	.looking-section {
		padding:
			110px 0
			90px;
	}


	.looking-container {
		width:
			calc(
				100% - 32px
			);
	}


	.looking-main {
		margin-top:
			50px;
	}


	.looking-main h2 {
		font-size:
			58px;

		margin-bottom:
			35px;
	}


	.looking-main > p {
		font-size:
			14px;

		line-height:
			1.75;
	}


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

		margin-top:
			70px;
	}


	.looking-tech,
	.looking-tech:nth-child(2) {
		border-right:
			0;

		border-bottom:
			1px solid
			rgba(
				255,
				253,
				249,
				0.16
			);
	}


	.looking-tech:last-child {
		border-bottom:
			0;
	}


	.looking-cta {
		margin-top:
			75px;

		gap:
			35px;
	}


	.looking-cta h3 {
		font-size:
			34px;
	}


	.looking-button {
		width:
			100%;
	}

}


/* =========================================================
   CONTACT
========================================================= */

.contact-section {
	position: relative;

	padding: 150px 0;

	background: var(--cream);

	border-top:
		1px solid var(--border);
}


.contact-container {
	width:
		min(
			1400px,
			calc(100% - 80px)
		);

	margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.contact-header {
	margin-bottom: 85px;
}


.contact-header h2 {
	max-width: 1400px,
	calc(100% - 80px);

	margin:
		25px 0 30px;

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size:
		clamp(
			52px,
			7vw,
			92px
		);

	font-weight: 500;

	line-height: 0.92;

	letter-spacing: -0.06em;

	color: var(--text);
}


.contact-header h2 span {
	display: block;

	color: var(--maroon);
}


.contact-header > p {
	max-width: 900px;

	margin: 0;

	color: var(--muted);

	font-size: 16px;

	line-height: 1.8;
}


/* =========================================================
   GRID
========================================================= */

.contact-grid {
	display: grid;

	grid-template-columns:
		0.7fr
		1.3fr;

	gap: 100px;
}


/* =========================================================
   CONTACT INFO
========================================================= */

.contact-info {
	display: flex;

	flex-direction: column;

	gap: 45px;
}


.contact-info-block {
	display: flex;

	flex-direction: column;

	gap: 10px;
}


.contact-info-block > span {
	color: var(--muted);

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 12px;

	font-weight: 600;

	letter-spacing: 0.14em;
}


.contact-info-block a,
.contact-info-block p {
	margin: 0;

	color: var(--text);

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size: 18px;

	font-weight: 500;

	text-decoration: none;
}


.contact-info-block a {
	transition:
		color 0.25s ease;
}


.contact-info-block a:hover {
	color:
		var(--maroon);
}


/* =========================================================
   STATUS
========================================================= */

.contact-status {
	display: flex;

	align-items: center;

	gap: 10px;

	margin-top: auto;

	padding-top: 25px;

	border-top:
		1px solid var(--border);

	color: var(--muted);

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 12px;

	font-weight: 600;

	line-height: 1.5;

	letter-spacing: 0.1em;
}


.contact-status-dot {
	width: 7px;

	height: 7px;

	flex-shrink: 0;

	border-radius: 50%;

	background:
		var(--yellow);

	box-shadow:
		0 0 12px
		rgba(
			232,
			185,
			49,
			0.6
		);

	animation:
		contactPulse
		2s
		ease-in-out
		infinite;
}


@keyframes contactPulse {

	0%,
	100% {
		opacity: 0.4;
	}

	50% {
		opacity: 1;
	}

}


/* =========================================================
   FORM
========================================================= */

.contact-form {
	display: flex;

	flex-direction: column;

	gap: 28px;

	padding:
		40px;

	background:
		var(--off-white);

	border:
		1px solid var(--border);
}


.form-row {
	display: grid;

	grid-template-columns:
		1fr
		1fr;

	gap: 20px;
}


.form-field {
	display: flex;

	flex-direction: column;

	gap: 10px;
}


.form-field label {
	color:
		var(--muted);

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 12px;

	font-weight: 600;

	letter-spacing: 0.14em;
}


.form-field input,
.form-field select,
.form-field textarea {
	width: 100%;

	box-sizing: border-box;

	border:
		1px solid var(--border);

	outline: none;

	background:
		var(--cream);

	color:
		var(--text);

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size: 14px;

	border-radius: 0;

	transition:
		border-color 0.25s ease,
		box-shadow 0.25s ease;
}


.form-field input,
.form-field select {
	height: 52px;

	padding:
		0 16px;
}


.form-field textarea {
	padding:
		15px 16px;

	resize: vertical;

	min-height: 130px;

	line-height: 1.6;
}


.form-field input::placeholder,
.form-field textarea::placeholder {
	color:
		var(--muted);

	opacity: 0.6;
}


.form-field select {
	cursor: pointer;

	appearance: none;

	background-image:
		linear-gradient(
			45deg,
			transparent 50%,
			var(--maroon) 50%
		),
		linear-gradient(
			135deg,
			var(--maroon) 50%,
			transparent 50%
		);

	background-position:
		calc(100% - 18px) 22px,
		calc(100% - 13px) 22px;

	background-size:
		5px 5px,
		5px 5px;

	background-repeat: no-repeat;
}


.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
	border-color:
		var(--maroon);

	box-shadow:
		0 0 0 3px
		rgba(
			109,
			31,
			47,
			0.06
		);
}


/* =========================================================
   SUBMIT
========================================================= */

.contact-submit {
	display: inline-flex;

	align-items: center;

	justify-content: space-between;

	width: 100%;

	height: 58px;

	padding:
		0 22px;

	margin-top: 5px;

	border: 0;

	background:
		var(--maroon);

	color:
		var(--cream);

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size: 13px;

	font-weight: 600;

	cursor: pointer;

	transition:
		background 0.3s ease,
		transform 0.3s ease;
}


.contact-submit span {
	font-size: 18px;

	transition:
		transform 0.3s ease;
}


.contact-submit:hover {
	background:
		var(--maroon-dark);

	transform:
		translateY(-2px);
}


.contact-submit:hover span {
	transform:
		translate(
			3px,
			-3px
		);
}


/* =========================================================
   TABLET
========================================================= */

@media (
	max-width: 900px
) {

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

		gap: 70px;
	}


	.contact-info {
		display: grid;

		grid-template-columns:
			repeat(2, 1fr);
	}


	.contact-status {
		margin-top: 0;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (
	max-width: 600px
) {

	.contact-section {
		padding:
			100px 0
			90px;
	}


	.contact-container {
		width:
			calc(
				100% - 32px
			);
	}


	.contact-header {
		margin-bottom:
			55px;
	}


	.contact-header h2 {
		font-size:
			50px;

		margin:
			20px 0 25px;
	}


	.contact-header > p {
		font-size:
			14px;

		line-height:
			1.7;
	}


	.contact-grid {
		gap:
			55px;
	}


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

		gap:
			30px;
	}


	.contact-form {
		padding:
			24px;

		gap:
			24px;
	}


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

		gap:
			24px;
	}

}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
	position: relative;

	background: var(--text);

	color: var(--cream);

	overflow: hidden;
}


.footer-container {
	width:
		min(
			1400px,
			calc(100% - 80px)
		);

	margin: 0 auto;
}

.footer-logo-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}


/* =========================================================
   TOP
========================================================= */

.footer-top {
	display: grid;

	grid-template-columns:
		1fr
		1fr;

	gap: 100px;

	padding:
		90px 0
		80px;

	border-bottom:
		1px solid
		rgba(
			255,
			253,
			249,
			0.12
		);
}


/* =========================================================
   BRAND
========================================================= */

.footer-brand {
	max-width: 430px;
}


.footer-logo {
	display: inline-flex;

	align-items: center;

	gap: 14px;

	color: var(--cream);

	text-decoration: none;
}


.footer-logo-mark {
	width: 42px;

	height: 42px;

	display: grid;

	place-items: center;

	background: var(#ffffff);

	color: var(--maroon);

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size: 14px;

	font-weight: 700;

	letter-spacing: -0.05em;
}


.footer-logo-text {
	display: flex;

	flex-direction: column;

	gap: 2px;
}


.footer-logo-text strong {
	font-family:
		"Space Grotesk",
		sans-serif;

	font-size: 17px;

	font-weight: 600;

	letter-spacing: 0.03em;
}


.footer-logo-text small {
	color:
		rgba(
			255,
			253,
			249,
			0.45
		);

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 10px;

	font-weight: 600;

	letter-spacing: 0.16em;
}


.footer-brand > p {
	max-width: 380px;

	margin:
		28px 0 0;

	color:
		rgba(
			255,
			253,
			249,
			0.5
		);

	font-size: 16px;

	line-height: 1.75;
}

.footer-logo-image {
	display: block;

	width: 230px;
	height: auto;

	object-fit: contain;
}

@media (max-width: 600px) {

	.footer-logo-image {
		width: 180px;
	}

}


/* =========================================================
   NAVIGATION
========================================================= */

.footer-navigation {
	display: grid;

	grid-template-columns:
		repeat(2, 1fr);

	gap: 40px;
}


.footer-nav-column {
	display: flex;

	flex-direction: column;

	align-items: flex-start;

	gap: 13px;
}


.footer-nav-title {
	margin-bottom: 12px;

	color: var(--yellow);

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 18px;

	font-weight: 600;

	letter-spacing: 0.14em;
}


.footer-nav-column a {
	color:
		rgba(
			255,
			253,
			249,
			0.55
		);

	font-family:
		"Space Grotesk",
		sans-serif;

	font-size: 14px;

	text-decoration: none;

	transition:
		color 0.25s ease,
		transform 0.25s ease;
}


.footer-nav-column a:hover {
	color: var(--cream);

	transform:
		translateX(4px);
}


/* =========================================================
   BOTTOM
========================================================= */

.footer-bottom {
	display: grid;

	grid-template-columns:
		1fr
		auto
		1fr;

	align-items: center;

	gap: 30px;

	padding:
		30px 0;

	border-top:
		1px solid
		rgba(
			255,
			253,
			249,
			0.08
		);

	color:
		rgba(
			255,
			253,
			249,
			0.4
		);

	font-family:
		"IBM Plex Mono",
		monospace;

	font-size: 12px;

	letter-spacing: 0.08em;
}


.footer-location {
	display: flex;

	align-items: center;

	gap: 8px;

	justify-self: center;
}


.footer-status-dot {
	width: 6px;

	height: 6px;

	border-radius: 50%;

	background:
		var(--yellow);

	box-shadow:
		0 0 10px
		rgba(
			232,
			185,
			49,
			0.5
		);
}


.footer-back-top {
	justify-self: end;
}


.footer-back-top a {
	display: inline-flex;

	align-items: center;

	gap: 10px;

	color:
		rgba(
			255,
			253,
			249,
			0.45
		);

	text-decoration: none;

	transition:
		color 0.25s ease;
}


.footer-back-top a:hover {
	color: var(--yellow);
}


.footer-back-top span {
	color: var(--yellow);

	font-size: 14px;
}


/* =========================================================
   TABLET
========================================================= */

@media (
	max-width: 900px
) {

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

		gap: 60px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (
	max-width: 600px
) {

	.footer-container {
		width:
			calc(
				100% - 32px
			);
	}


	.footer-top {
		padding:
			70px 0
			60px;

		gap:
			50px;
	}


	.footer-navigation {
		grid-template-columns:
			repeat(2, 1fr);

		gap:
			45px 25px;
	}


	.footer-large-text {
		font-size:
			24vw;

		padding-top:
			30px;
	}


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

		gap:
			18px;

		align-items:
			start;
	}


	.footer-location {
		justify-self:
			start;
	}


	.footer-back-top {
		justify-self:
			start;
	}

}

@media (max-width: 600px) {

	.footer-logo-mark img {
		width: 44px !important;
		height: 44px !important;
	}

}