/* Drone Campus microsite. Institutional defence-tech aesthetic:
   deep neutral base, one restrained accent, strong type hierarchy,
   generous spacing, schematic line visuals only. */

/* Variables reconciled to the Drone Campus design-system SSOT. The
   surface/ink/accent values already align; --accent-hi, --text-on-accent and
   --radius are adopted from the SSOT component tokens. --ink-faint (#65727f)
   fails body contrast (3.88:1) and is restricted to decorative/large use only,
   per the SSOT accessibility flag. */
:root {
  --bg: #0c1014;
  --bg-alt: #11171d;
  --panel: #141b22;
  --ink: #e8edf2;
  --ink-dim: #9aa7b4;
  --ink-faint: #65727f;
  --line: #243038;
  --accent: #c6862f;
  --accent-hi: #d8983c;
  --accent-soft: rgba(198, 134, 47, 0.16);
  --text-on-accent: #0c1014;
  --radius: 8px;
  --maxw: 980px;
  --gut: clamp(1.5rem, 5vw, 4rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", "Helvetica Neue", Arial, system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

img { max-width: 100%; }

/* ---- Navigation ---- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--gut);
  background: rgba(12, 16, 20, 0.86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.nav-mark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.nav-logo {
  height: 34px;
  width: auto;
  display: block;
}

.nav-cta {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  padding: 0.55rem 1.05rem;
  border-radius: 2px;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}

.nav-cta:hover { color: var(--ink); border-color: var(--accent); }

/* ---- Hero ---- */
/* The chevron-calm hero image carries its subject (rising chevrons) on the
   RIGHT with calm dark negative space on the LEFT. The copy sits in that left
   negative space, so it is laid full-bleed behind the copy column. A left-to-
   right dark scrim keeps the headline legible over the busier right side at
   narrow widths. */
.hero {
  position: relative;
  border-bottom: 1px solid var(--line);
  padding: clamp(3.5rem, 9vw, 7rem) var(--gut);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url("/assets/img/hero.jpg");
  background-size: cover;
  background-position: center right;
  z-index: 0;
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    var(--bg) 0%,
    rgba(12, 16, 20, 0.92) 30%,
    rgba(12, 16, 20, 0.55) 55%,
    rgba(12, 16, 20, 0.2) 100%
  );
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
}

.hero-copy { max-width: 46ch; }

.hero-title {
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0 0 1.3rem;
}

.hero-sub {
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  line-height: 1.4;
  color: var(--ink);
  font-weight: 400;
  margin: 0 0 1rem;
  max-width: 34ch;
}

.hero-support {
  font-size: 1.02rem;
  color: var(--ink-dim);
  margin: 0 0 2.2rem;
  max-width: 40ch;
}

/* ---- Buttons ---- */
.btn-primary {
  display: inline-block;
  text-decoration: none;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  font-weight: 600;
  color: var(--text-on-accent);
  background: var(--accent);
  padding: 0.85rem 1.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  transition: background 0.2s, transform 0.12s;
}

.btn-primary:hover { background: var(--accent-hi); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 2px;
}

/* ---- Sections ---- */
.section {
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--gut);
  border-bottom: 1px solid var(--line);
}

.section-alt { background: var(--bg-alt); }

/* ---- Sections with a brand visual ---- */
/* A section visual is a quiet background field behind the type, never busy.
   The image sits at low opacity under a heavy scrim so the running copy keeps
   well above the body-contrast bar. The image is decorative (aria-hidden). */
.section-visual { position: relative; overflow: hidden; }

.section-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  z-index: 0;
}

.section-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(12, 16, 20, 0.78) 0%,
    rgba(12, 16, 20, 0.62) 50%,
    rgba(12, 16, 20, 0.82) 100%
  );
}

.section-visual-network .section-bg { background-image: url("/assets/img/section-network.jpg"); }
.section-visual-assembly .section-bg { background-image: url("/assets/img/section-assembly.jpg"); }
.section-visual-texture .section-bg { background-image: url("/assets/img/section-texture.jpg"); }

.section-visual .section-inner { position: relative; z-index: 1; }

.section-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.4rem, 4vw, 3rem);
}

@media (min-width: 760px) {
  .section-inner { grid-template-columns: 0.34fr 0.66fr; }
}

.section-heading {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin: 0;
  position: relative;
  padding-top: 0.2rem;
}

.section-heading::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--accent);
  margin-bottom: 1.1rem;
}

.section-body { max-width: 60ch; }

.section-body p { margin: 0 0 1.2rem; color: var(--ink-dim); }
.section-body p:first-child { color: var(--ink); }
.section-body p:last-child { margin-bottom: 0; }

/* ---- CTA / next step ---- */
.section-cta .cta-block {
  grid-column: 1 / -1;
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem 1.6rem;
}

.cta-aside {
  margin: 0;
  color: var(--ink-dim);
  font-size: 0.96rem;
  max-width: 36ch;
}

.confidentiality {
  grid-column: 1 / -1;
  margin: 1.4rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 0.88rem;
}

/* ---- Footer ---- */
.site-footer {
  padding: 2.6rem var(--gut);
  background: var(--bg);
}

.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer-notice {
  margin: 0;
  color: var(--ink-dim);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}

.footer-contact {
  font-size: 0.85rem;
  color: var(--ink-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}

.footer-contact:hover { color: var(--ink); border-color: var(--accent); }

/* ---- Gate screen ---- */
.gate-body {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.gate {
  text-align: center;
  max-width: 30rem;
}

.gate-mark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 2.4rem;
}

.gate-symbol { width: 64px; height: 64px; display: block; }

.gate-wordmark {
  font-size: 0.9rem;
  letter-spacing: 0.34em;
  font-weight: 600;
  color: var(--ink);
}

.gate-message {
  color: var(--ink-dim);
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 0;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-primary { transition: none; }
}