/* November 2026 update: dark header, hero, About, services and experience sections from the Web materials designs. Loaded after style.css. */

/* ---------- Header ---------- */
.site-header {
	background: rgba(7, 31, 56, 0.86);
	border-bottom-color: rgba(255, 255, 255, 0.14);
}
.site-header__logo {
	height: 52px;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
	background: var(--on-brand);
}
.nav-toggle.is-active span {
	background: transparent;
}
.nav-submenu__item {
	min-width: 0;
}
@media (min-width: 1025px) {
	.site-nav > .site-nav__link,
	.nav-item > .site-nav__link {
		color: var(--on-brand);
	}
	.site-nav > .site-nav__link:hover,
	.nav-item:hover > .site-nav__link {
		color: var(--accent);
	}
}
.site-nav.is-open .mt-btn {
	display: inline-flex;
	margin-top: var(--space-4);
}

/* ---------- Hero ---------- */
.hero {
	min-height: max(680px, 100vh);
	padding: 132px 0 var(--space-8);
	display: flex;
	align-items: center;
	background: var(--surface-brand);
}
.hero .wrap {
	position: relative;
	z-index: 1;
}
.hero__photo {
	inset: 0;
}
.hero__bg {
	background:
		linear-gradient(
			90deg,
			rgba(7, 31, 56, 0.7) 0%,
			rgba(7, 31, 56, 0.5) 30%,
			rgba(7, 31, 56, 0) 54%
		),
		linear-gradient(180deg, rgba(7, 31, 56, 0.35) 0%, rgba(7, 31, 56, 0) 30%);
}
.hero__content {
	max-width: 660px;
}
.hero__title {
	margin: 0 0 var(--space-5);
	color: var(--on-brand);
	font: 800 clamp(44px, 5.6vw, 80px) / 1.04 var(--font-sans);
	letter-spacing: -0.025em;
	text-shadow: 0 2px 24px rgba(7, 31, 56, 0.45);
}
.hero__title-accent {
	color: var(--accent);
}
.hero__lede {
	color: var(--on-brand);
	max-width: 480px;
	text-shadow: 0 1px 12px rgba(7, 31, 56, 0.6);
}
.hero__actions {
	margin-bottom: 0;
}

/* ---------- About ---------- */
.about-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: var(--space-7);
	align-items: center;
	margin-bottom: var(--space-8);
}
.about-intro .eyebrow {
	margin-bottom: var(--space-3);
}
.about-title {
	margin: 0 0 var(--space-5);
	font: 800 clamp(34px, 4vw, 48px) / 1.1 var(--font-sans);
	letter-spacing: -0.02em;
}
.about-intro p.body {
	color: var(--ink-muted);
	margin-bottom: var(--space-4);
}
.about-media img {
	width: 100%;
	height: auto;
	clip-path: polygon(24% 0, 100% 0, 100% 100%, 2% 100%);
}
.value-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4) var(--space-6);
	margin-top: var(--space-6);
}
.value-item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font: 700 14px/20px var(--font-sans);
	max-width: 150px;
}
.value-item .mt-icon {
	color: var(--accent-text);
}
.about-split {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: var(--space-7);
	margin-bottom: var(--space-7);
}
.about-split > div:last-child {
	border-left: 1px solid var(--border);
	padding-left: var(--space-7);
}
.about-split .eyebrow {
	margin-bottom: var(--space-3);
}
.about-split .heading-2 {
	margin-bottom: var(--space-3);
}
.about-split__lede {
	color: var(--ink-muted);
	margin-bottom: var(--space-5);
}
.service-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-3);
}
.service-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-3);
	padding: var(--space-5) var(--space-3);
	text-align: center;
	text-decoration: none;
	font: 700 14px/20px var(--font-sans);
	color: var(--ink);
	background: var(--surface-subtle);
	border-radius: var(--radius-md);
	transition: background 0.15s;
}
.service-tile:hover {
	background: var(--info-bg);
}
.service-tile .mt-icon {
	color: var(--accent-text);
}
.check-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin-top: var(--space-5);
}
.check-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
}
.check-list__mark {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: var(--radius-pill);
	background: var(--accent-text);
	color: var(--on-brand);
	display: grid;
	place-items: center;
}
.feature-strip {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5);
	padding: var(--space-5) var(--space-6);
	background: var(--surface-subtle);
	border-radius: var(--radius-md);
}
.feature-strip__item {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}
.feature-strip__item + .feature-strip__item {
	border-left: 1px solid var(--border);
	padding-left: var(--space-5);
}
.feature-strip__item .mt-icon {
	color: var(--accent-text);
}
.feature-strip__item p {
	color: var(--ink-muted);
}
.feature-strip__item .heading-4 {
	color: var(--ink);
}

/* ---------- Technical experience ---------- */
.experience-body strong {
	color: var(--ink);
	font-weight: 700;
}
.experience-badges {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-5);
	margin-top: var(--space-7);
	padding-top: var(--space-6);
	border-top: 1px solid var(--border);
}
.experience-badge {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
}
.experience-badge .mt-icon {
	color: var(--accent-text);
}
.experience-badge .heading-4 {
	margin-bottom: var(--space-1);
}
.experience-badge p.body-sm {
	color: var(--ink-muted);
}

/* ---------- Drone platforms ---------- */
.drone-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-4);
	margin: 0 0 var(--space-3);
}
.drone-grid figure {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}
.drone-grid img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.drone-note {
	color: var(--ink-muted);
	margin-bottom: var(--space-7);
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.hero__bg {
		background: linear-gradient(180deg, rgba(7, 31, 56, 0.72) 0%, rgba(7, 31, 56, 0.6) 100%);
	}
	.about-intro,
	.about-split {
		grid-template-columns: minmax(0, 1fr);
	}
	.about-split > div:last-child {
		border-left: none;
		padding-left: 0;
	}
	.drone-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 768px) {
	.hero {
		min-height: 620px;
		padding: 120px 0 var(--space-8);
	}
	.feature-strip,
	.experience-badges {
		grid-template-columns: minmax(0, 1fr);
	}
	.feature-strip__item + .feature-strip__item {
		border-left: none;
		padding-left: 0;
	}
	.service-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}