:root {
  --color-black-void: #000000;
  --color-paper-white: #ffffff;
  --color-smoke: #4d4d4d;
  --color-crimson-heat: #b62b1a;

  --font-sans: 'Inter', 'Manrope', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --text-caption: 12px;
  --text-body: 16px;
  --text-subheading: 20px;
  --text-heading-sm: 47px;
  --text-heading: 79px;
  --text-heading-lg: 106px;
  --text-display: 130px;

  --radius-buttons: 70px;
  --radius-circular: 594px;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  background:var(--color-black-void);
  color:var(--color-paper-white);
  font-family:var(--font-sans);
  line-height:1.3;
}

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

/* --- Top nav --- */
.site-header {
  position:absolute;
  inset:0 0 auto 0;
  z-index:10;
  padding:24px 32px;
}
.site-header::after {
  content:'';
  position:absolute; left:32px; right:32px; top:0; height:1px;
  background:var(--color-paper-white);
}
.nav-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
}
.logo {
  display:flex; align-items:center; gap:8px;
  font-size:var(--text-caption); font-weight:380; letter-spacing:.05em; text-transform:uppercase;
}
.logo .bar { width:1px; height:12px; background:var(--color-paper-white); display:inline-block; }
.nav-links { display:flex; gap:38px; list-style:none; }
.nav-links a {
  font-size:var(--text-caption); font-weight:380; text-transform:uppercase; letter-spacing:.05em;
  opacity:.85;
}
.nav-links a:hover { opacity:1; }
.nav-utility { display:flex; align-items:center; gap:12px; }
.pill {
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--radius-buttons);
  padding:10px 20px;
  font-size:var(--text-caption); font-weight:380; letter-spacing:.05em; text-transform:uppercase;
}
.pill .dot { width:4px; height:4px; border-radius:50%; background:currentColor; }

@media (max-width:860px) {
  .nav-links { display:none; }
}

/* --- Shared background video (one element, fixed behind hero + mission) --- */
.bg-media {
  position:fixed; inset:0; z-index:-1;
}
.bg-media video { width:100%; height:100%; object-fit:cover; }

/* --- Hero --- */
.hero {
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
}
.hero-content {
  position:relative; z-index:2;
  padding:0 32px 90px;
}
.hero-content h1 {
  font-size:clamp(40px, 8vw, var(--text-heading-lg));
  line-height:1.1;
  font-weight:300;
  letter-spacing:-0.025em;
  max-width:900px;
}
.scroll-btn {
  position:absolute; right:80px; bottom:120px; z-index:2;
  width:100px; height:100px; border-radius:50%;
  border:1px solid rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--text-caption); text-transform:uppercase; letter-spacing:.05em;
}

/* --- Mission section --- */
.mission {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:rgba(0,0,0,.55);
}
.mission-circles {
  position:absolute; z-index:1; left:50%; top:50%;
  transform:translate(-60%,-50%);
  width:700px; height:700px;
  opacity:.35;
}
.mission-circles .c {
  position:absolute; border:1px solid var(--color-paper-white); border-radius:50%;
}
.mission-circles .c1 { width:560px; height:560px; left:0; top:70px; }
.mission-circles .c2 { width:560px; height:560px; left:220px; top:70px; }

.mission-content {
  position:relative; z-index:2;
  padding:0 32px;
  max-width:1200px;
  margin:0 auto;
  width:100%;
}
.eyebrow {
  text-transform:uppercase; letter-spacing:.1em; font-size:var(--text-caption);
  color:#cfcfcf; margin-bottom:18px;
}
.mission-content h2 {
  font-size:clamp(36px, 7vw, var(--text-heading));
  font-weight:300; letter-spacing:-0.02em; line-height:1.05;
  max-width:820px;
}
.mission-body {
  margin-top:32px; max-width:420px;
  font-size:var(--text-subheading); font-weight:300; color:#e8e8e8;
}