/* ---------- Header ----------
   One row on wide screens: brand, the start page's sections, and the one
   link that leaves the page. Below 1080px the sections drop to a second row.
   The header stays in view so the section marker can be seen while reading.
   The only orange in it is the wordmark's, which belongs to the logo. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--navy);
  border-bottom: 1px solid var(--navy-line);
}

/* Anchor jumps land below the sticky header, not under it. */
html { scroll-padding-top: 5rem; }

.site-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand sections page";
  align-items: center;
  column-gap: var(--s-8);
  padding-block: var(--s-3);
}

/* Brand: the logo mark beside the typographic wordmark, in the proportions
   of the brand kit's lockup: capitals at 57.5% of the mark's height, the gap
   at 38%, tracking 0.04em. The mark is decorative, the wordmark is the link
   text. The image itself is set once, as --logo in tokens.css. */
.brand {
  --mark: 2rem;   /* the guide's minimum height for the lockup on screen */
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--mark) * 0.38);
  text-decoration: none;
}
.brand-mark {
  display: block;
  flex: none;
  height: var(--mark, 2rem);
  aspect-ratio: var(--logo-ratio);
  background: var(--logo) center / contain no-repeat;
}
.brand-mark--footer { height: 2.5rem; margin-bottom: var(--s-4); }

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--mark) * 0.836);   /* Saira's capitals are 0.688em */
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
}
.wordmark span { color: var(--accent); }

/* Section links: a table of contents for the start page. The one being read
   is marked by scripts/nav.js with aria-current. */
.nav-sections {
  grid-area: sections;
  justify-self: end;
  position: relative;
  display: flex;
  gap: var(--s-6);
  list-style: none;
  padding: 0;
}
.nav-sections a,
.nav-page {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.nav-sections a {
  position: relative;
  display: block;
  padding-block: var(--s-2);
  color: var(--text-muted);
}
.nav-sections a:hover,
.nav-sections a[aria-current] { color: var(--text); }
.nav-sections a[aria-current]::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--text);
}

/* The only link that leaves the page, set apart from the section links. */
.nav-page {
  grid-area: page;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
}
.nav-page:hover,
.nav-page[aria-current='page'] {
  border-color: var(--text);
  background: var(--navy-panel);
}

@media (max-width: 1080px) {
  html { scroll-padding-top: 7rem; }
  .site-nav {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand page"
      "sections sections";
    row-gap: var(--s-2);
    padding-block: var(--s-3) 0;
  }
  /* On a phone the section links scroll sideways inside the header rather
     than wrapping into a third row. */
  .nav-sections {
    justify-self: stretch;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav-sections::-webkit-scrollbar { display: none; }
}

/* Narrow phones: the wordmark stacks into two lines as tall as the mark, so
   the brand and the page link still share the first row. */
@media (max-width: 560px) {
  .wordmark { font-size: 0.9375rem; }
  .wordmark span { display: block; margin-top: 0.15em; }
  .nav-sections { gap: var(--s-4); }
}

/* ---------- Hero. Centred, mission first, with the schematic under it. ---------- */

.hero .wrap { text-align: center; }
.hero .label { display: block; margin-bottom: var(--s-4); }
.hero h1 { max-width: 20ch; margin: 0 auto var(--s-6); }
.hero .lead { max-width: 46ch; margin: 0 auto var(--s-4); }
.hero-note { max-width: 54ch; margin-inline: auto; color: var(--text-muted); }

/* ---------- Schematic of detect, deploy, intercept ----------
   Line drawing, no photograph. The interceptor's run is the one orange on
   this screen. The labels are dropped on phones, where they
   would be too small to read; the three steps further down carry them. */

.conops { max-width: 75rem; margin: var(--s-12) auto 0; }
.conops svg { width: 100%; }
.conops figcaption { margin-top: var(--s-2); }

.c-surface, .c-seabed { fill: none; stroke: var(--text-muted); stroke-width: 1.5; opacity: 0.55; }
.c-hatch { stroke: var(--text-muted); stroke-width: 1; opacity: 0.3; }
.c-cable { stroke: var(--text); stroke-width: 3; stroke-linecap: round; opacity: 0.8; }
.c-asset rect, .c-asset path,
.c-usv path, .c-usv rect { fill: var(--navy); stroke: var(--text); stroke-width: 1.5; stroke-linejoin: round; }
.c-asset line { stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; }
.c-usv line { stroke: var(--text); stroke-width: 1.5; }
.c-track circle { fill: var(--text-muted); }
.c-ring { fill: none; stroke: var(--text-muted); stroke-dasharray: 2 4; opacity: 0.7; }
.c-heading { stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 1 5; stroke-linecap: round; }
.c-heading--beyond { opacity: 0.35; }
.c-contact { fill: var(--navy); stroke: var(--text); stroke-width: 2; }
.c-run { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 5; }
.c-intercept { fill: none; stroke: var(--accent); stroke-width: 2; }
.c-label { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; fill: var(--text-muted); }
.c-num { fill: var(--text); }

@media (max-width: 640px) {
  .c-label { display: none; }
  .conops { margin-top: var(--s-8); }
}

/* ---------- Numbered steps ----------
   The intercept step carries this screen's one orange: it names what we do,
   and it matches the orange run in the schematic. */

.step {
  border-top: 2px solid var(--line-strong);
  padding-top: var(--s-4);
}
.step--accent { border-top-color: var(--accent); }
.step .num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--s-3);
}
.step h3 { margin-bottom: var(--s-2); }
.step p { color: var(--text-muted); font-size: 1rem; }

/* ---------- Pull quote ---------- */

.pull {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
  border-left: 2px solid var(--line-strong);
  padding-left: var(--s-6);
  max-width: 40ch;
}

/* ---------- Media frame for the drone animation ----------
   Fixed aspect so the layout does not move when the file arrives.
   The empty state is deliberately plain: a flat fill, since the brand guide
   rules out textures and gradients. No stock render goes in here. */

.media-frame {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--navy-line);
  border-radius: var(--r-md);
  background: var(--navy-panel);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s-6);
}
/* The vehicle stage runs edge to edge: on a 16:9 desktop screen the model
   can fill the width of the screen. No border or radius at the screen edge. */
.media-frame--full {
  border: 0;
  border-radius: 0;
}
.media-frame p {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  max-width: none;
}
.media-caption {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--s-3);
}

/* ---------- People ---------- */

.team-grid {
  display: grid;
  gap: var(--s-8) var(--s-6);
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 860px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Portrait placeholder at the ratio the photographs will be cropped to.
   A flat block: no initials, no avatar, no texture. */
.portrait {
  aspect-ratio: 4 / 5;
  margin-bottom: var(--s-4);
  border-radius: var(--r-md);
  background: var(--navy-panel);
}

.person h3 { text-transform: none; letter-spacing: 0; font-size: 1.0625rem; }
.person .role {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--s-1);
}
.person p { color: var(--text-muted); font-size: 1rem; margin-top: var(--s-3); }

/* ---------- Form ---------- */

.field { display: block; margin-bottom: var(--s-6); }
.field > span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}
/* The form sits on the page without a panel, so the fields carry their own
   edge. --line-strong keeps that edge at 3:1 against the navy. */
.field input,
.field textarea {
  width: 100%;
  background: var(--navy-panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: var(--s-3);
}
.field input:focus, .field textarea:focus { border-color: var(--accent); }
.field textarea { min-height: 9rem; resize: vertical; }

/* The send button is the contact screen's one orange. */
.btn {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--navy);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-6);
  cursor: pointer;
  transition: background 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

/* Form status. Errors must be visible, never swallowed. */
.form-status {
  margin-top: var(--s-4);
  border-left: 2px solid var(--line-strong);
  padding: var(--s-3) var(--s-4);
  background: var(--navy-panel);
  font-size: 0.9375rem;
}
.form-status[hidden] { display: none; }
.form-status.is-error { border-left-color: var(--error); }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--navy-line);
  padding-block: var(--s-12);
  color: var(--text-muted);
  font-size: 0.9375rem;
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  justify-content: space-between;
}
.site-footer p { max-width: none; }