/* Typography & base */
:root {
	/* DOW Brand Guide color tokens (replace hexes with exact guide values when confirmed) */
	--color-primary: #121212;      /* Neutral near-black */
	--color-primary-600: #1A1A1A;
	--color-accent: #C5A100;       /* Gold */
	--color-bg: #0A0A0A;           /* Black background */
	--color-surface: #121212;      /* Dark surface */
	--color-surface-2: #0E0E0E;
	--color-text: #F2F2F2;         /* White-ish text */
	--color-muted: #B8B8B8;        /* Muted gray */
	--color-border: #2A2A2A;       /* Hairline */
	--color-light-bg: #F6F4EF;
	--color-light-surface: #FFFCF6;
	--color-light-text: #111111;
	--color-light-muted: #4E4B45;
	--color-light-border: #D7D0C3;
	--color-top-bg: #333333;
	--color-top-surface: #3F3F3F;
	--color-top-surface-2: #383838;
	--color-top-text: #F5F5F5;
	--color-top-muted: #D2D2D2;
	--color-top-border: #4C4C4C;
	--shadow-1: 0 2px 8px rgba(0,0,0,0.25);
	--shadow-2: 0 8px 24px rgba(0,0,0,0.35);

	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;

	--container: 1200px;
	--header-height: 64px;
}

* { box-sizing: border-box; }
html, body {
	margin: 0;
	padding: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: "Public Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	line-height: 1.6;
	overflow-x: hidden;
}

body {
	padding-top: var(--header-height);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--space-5);
}

.section {
	padding: var(--space-8) 0;
}

.section-title {
	font-size: clamp(24px, 3.2vw, 36px);
	margin: 0 0 var(--space-4);
	font-weight: 600;
	letter-spacing: -0.012em;
}

.lead {
	font-size: clamp(16px, 2.1vw, 20px);
	color: var(--color-text);
	max-width: 70ch;
}

.muted { color: var(--color-muted); }

/* Header / Nav */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	backdrop-filter: saturate(180%) blur(12px);
	background: color-mix(in oklab, var(--color-bg), transparent 20%);
	border-bottom: 1px solid var(--color-border);
}

.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-height);
	padding: 0 var(--space-5);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	letter-spacing: 0.4px;
	color: var(--color-text);
}

.brand-mark {
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
}

/* Headings use sleek sans for a Palantir/APS-like look */
h1, h2, h3, h4, h5, h6 {
	font-family: "Public Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.nav-links {
	list-style: none;
	display: none;
	gap: var(--space-5);
	margin: 0;
	padding: 0;
}
.nav-links a {
	color: var(--color-muted);
	font-weight: 500;
}
.nav-links a:hover { color: var(--color-text); }

.burger {
	all: unset;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 8px;
	cursor: pointer;
	border-radius: var(--radius-sm);
}
.burger:hover { background: var(--color-surface); }
.burger-bar {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--color-text);
	border-radius: 1px;
}

.mobile-menu {
	position: absolute;
	top: 100%;
	right: 0;
	width: min(80vw, 360px);
	height: calc(100dvh - var(--header-height));
	background: var(--color-surface-2);
	border-left: 1px solid var(--color-border);
	box-shadow: var(--shadow-2);
	transform: translateX(100%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: transform 220ms ease;
	padding: var(--space-7) var(--space-5);
}
.mobile-menu.open {
	transform: translateX(0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.mobile-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-4);
}
.mobile-menu a {
	color: var(--color-text);
	font-size: 18px;
	font-weight: 600;
}
.mobile-menu a:hover { color: var(--color-accent); }

/* Hero */
.hero {
	position: relative;
	padding: clamp(64px, 12vw, 128px) 0;
	overflow: hidden;
	background: var(--color-top-bg);
}
.hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(1200px 600px at 80% -10%, color-mix(in oklab, var(--color-primary), transparent 65%), transparent 70%),
		linear-gradient(180deg, color-mix(in oklab, var(--color-primary-600), transparent 70%), transparent 30%),
		linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
	z-index: 1;
	pointer-events: none;
}
.hero-content {
	position: relative;
	z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
	.hero-video { display: none; }
	.hero::before {
		background:
			radial-gradient(1200px 600px at 80% -10%, color-mix(in oklab, var(--color-primary), transparent 65%), transparent 70%),
			linear-gradient(180deg, color-mix(in oklab, var(--color-primary-600), transparent 70%), transparent 30%),
			var(--color-top-bg);
	}
}
.hero-title {
	font-size: clamp(32px, 6vw, 64px);
	line-height: 1.1;
	margin: 0 0 var(--space-4);
	font-weight: 700;
	letter-spacing: -0.015em;
}
.hero-subtitle {
	font-size: clamp(16px, 2.2vw, 20px);
	color: var(--color-top-muted);
	max-width: 72ch;
	margin: 0 0 var(--space-6);
}
.hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.value-proposition-frame {
	max-width: 70ch;
	margin-top: var(--space-5);
	padding: clamp(12px, 2vw, 18px);
	border: 1px solid var(--color-top-border);
	border-radius: var(--radius-lg);
	background: linear-gradient(180deg, var(--color-top-surface), var(--color-top-surface-2));
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.value-proposition-image {
	width: 100%;
	height: auto;
	border-radius: calc(var(--radius-lg) - 4px);
}

.eyebrow {
	display: inline-block;
	margin-bottom: var(--space-3);
	color: var(--color-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.section-split {
	display: grid;
	gap: var(--space-5);
	align-items: start;
}

.page-preview-card,
.cta-panel {
	display: grid;
	gap: var(--space-4);
	align-content: start;
}

.page-preview-card .button,
.cta-panel .button {
	justify-self: start;
}

@media (min-width: 900px) {
	.section-split {
		grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
	}
}

/* Buttons */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-weight: 700;
}
.button-primary {
	background: var(--color-accent);
	color: #0B0B0B;
}
.button-primary:hover { filter: brightness(1.05); }
.button-ghost {
	background: transparent;
	color: var(--color-top-text);
	border-color: var(--color-top-border);
}
.button-ghost:hover { border-color: var(--color-text); }

/* Cards / Use-cases */
.grid-2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}
@media (min-width: 900px) {
	.grid-2 { grid-template-columns: 1fr 1fr; }
}
.card {
	background: var(--color-top-surface);
	border: 1px solid var(--color-top-border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}
.card h3 {
	margin: 0 0 var(--space-3);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.checklist {
	list-style: none;
	margin: var(--space-4) 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.checklist li::before {
	content: "✓";
	color: var(--color-accent);
	margin-right: 10px;
}

.hero,
.top-band,
.intro,
.use-cases,
.europe {
	background-color: var(--color-top-bg);
	color: var(--color-top-text);
}

.top-band .section-title,
.intro .section-title,
.use-cases .section-title,
.europe .section-title,
.top-band .lead,
.intro .lead,
.use-cases .lead,
.europe .lead {
	color: var(--color-top-text);
}

.top-band .muted,
.intro .muted,
.use-cases .muted,
.europe .muted {
	color: var(--color-top-muted);
}

.top-band .card {
	background: var(--color-top-surface);
	border-color: var(--color-top-border);
}

.top-band .button-ghost {
	color: var(--color-top-text);
	border-color: var(--color-top-border);
}

/* Europe band */
.europe {
	background:
		linear-gradient(
			180deg,
			var(--color-top-bg) 0%,
			var(--color-top-bg) 58%,
			color-mix(in oklab, var(--color-light-bg), var(--color-top-bg) 72%) 100%
		);
}

.light-band {
	background: var(--color-light-bg);
	color: var(--color-light-text);
}

.light-band + .light-band {
	padding-top: 0;
}

.light-band .section-title,
.light-band .lead,
.light-band label,
.light-band .form-status {
	color: var(--color-light-text);
}

.light-band .muted {
	color: var(--color-light-muted);
}

.light-band .card {
	background: var(--color-light-surface);
	border-color: var(--color-light-border);
	box-shadow: 0 10px 30px rgba(17, 17, 17, 0.08);
}

.light-band .card h3,
.light-band .checklist {
	color: var(--color-light-text);
}

.light-band .button-ghost {
	color: var(--color-light-text);
	border-color: var(--color-light-border);
}

.light-band .button-ghost:hover {
	border-color: var(--color-light-text);
}

.light-band input[type="text"],
.light-band input[type="email"],
.light-band textarea {
	color: var(--color-light-text);
	background: var(--color-light-surface);
	border-color: var(--color-light-border);
}

.light-band .form-status {
	background: color-mix(in oklab, var(--color-accent), white 85%);
	border-color: var(--color-light-border);
}

.page-hero {
	padding: clamp(56px, 10vw, 112px) 0 var(--space-7);
}

.page-hero .lead,
.section-intro {
	max-width: 70ch;
}

/* Team */
.team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-5);
	margin-top: var(--space-5);
}
.person-card {
	display: grid;
	grid-template-rows: auto minmax(2.75rem, auto) minmax(3.25rem, auto) 1fr;
	gap: var(--space-3);
	align-content: start;
}
.avatar-placeholder {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: color-mix(in oklab, var(--color-top-surface-2), black 18%);
	border: 1px solid var(--color-top-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	color: var(--color-top-text);
	letter-spacing: 0.5px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.light-band .avatar-placeholder {
	background: color-mix(in oklab, var(--color-light-text), white 92%);
	border-color: var(--color-light-border);
	color: var(--color-light-text);
}
.person-card .person-name {
	margin: 0;
	line-height: 1.25;
}
.person-card .person-role {
	margin: 0;
	line-height: 1.5;
}
.person-card > p:last-child {
	margin: 0;
}

/* Partners */
.partner-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-5);
	margin-top: var(--space-5);
}

/* Careers */
.jobs-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	margin-top: var(--space-5);
}
@media (min-width: 900px) {
	.jobs-list { grid-template-columns: 1fr 1fr; }
}

.job-card {
	min-height: 160px;
	display: grid;
	align-content: start;
}

/* Contact form */
.contact-form {
	margin-top: var(--space-5);
	max-width: 720px;
}
.form-row {
	display: grid;
	gap: 8px;
	margin-bottom: var(--space-4);
}
label {
	color: var(--color-text);
	font-weight: 600;
}
input[type="text"],
input[type="email"],
textarea {
	width: 100%;
	color: var(--color-text);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 12px 14px;
	outline: none;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}
input:focus, textarea:focus {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent), transparent 75%);
}
.form-actions { margin-top: var(--space-5); }
.form-note { margin-top: var(--space-3); }
.form-status {
	margin-top: var(--space-4);
	padding: 12px 14px;
	border-radius: var(--radius-md);
	background: color-mix(in oklab, var(--color-accent), transparent 85%);
	color: var(--color-text);
	border: 1px solid var(--color-border);
}

/* Footer */
.site-footer {
	border-top: 1px solid var(--color-border);
	background: var(--color-surface-2);
}
.footer-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-5);
	padding: var(--space-6) 0;
}
.footer-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
}

.footer-brand-mark {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
}
.footer-meta {
	display: flex;
	gap: var(--space-4);
	color: var(--color-muted);
	flex-wrap: wrap;
}

/* Desktop nav visibility */
@media (min-width: 900px) {
	.nav-links { display: flex; }
	.burger { display: none; }
	.mobile-menu { display: none; }
}