/* live.zerodevgroup.com public tier: dead-minimal (ADR 0004, Option 4 site-wide).
   Builds on kit.css tokens. Pure black, white type, system font stack only,
   hairline rules, thin outline buttons, wide-tracked small caps for labels.
   No contours, gradients, glows, filled cards or other decoration. */
:root {
  --black: #000;
  --white: #fff;
  --body: #d9d9d9;            /* body copy, ~14:1 on black */
  --label: #9a9a9a;           /* small-caps labels, ~7.4:1 on black */
  --hair: #2b2b2b;            /* 1px rules and cell borders */
  --hair-strong: #6b6b6b;     /* outline chips (non-text, ~3.9:1) */
  --panel-pad: clamp(24px, 6vw, 96px);
  --display: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --nav-h: 64px;
}

html {
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  background: var(--black);
}
body {
  background: var(--black);
  color: var(--body);
  font: 16px/1.6 var(--display);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }

/* Skip link: off-screen until focused, then a plain white chip top-left. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 12px 16px; background: var(--white); color: var(--black);
  font: 700 12px/1 var(--display); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; border-radius: 0;
}
.skip-link:focus { top: 12px; outline: 2px solid var(--white); outline-offset: 3px; }
main:focus { outline: none; }

/* Wide-tracked small caps: every label on the site uses this voice. */
.eyebrow, .nav-brand span, .nav-links a, .btn, .demo, .chip, .more,
.footer, .hero-sub, .steps .card h3::before {
  text-transform: uppercase;
}

/* —— Nav —— */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 32px;
  padding: 0 var(--panel-pad);
  background: var(--black);
  border-bottom: 1px solid transparent;
}
.nav.solid { border-bottom-color: var(--hair); }
.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-brand img { height: 30px; width: auto; display: block; }
.nav-brand span { font: 600 12px/1 var(--display); letter-spacing: .3em; color: var(--white); }
.nav-links { display: flex; gap: 28px; margin-left: auto; list-style: none; padding: 0; margin-block: 0; }
.nav-links a {
  font: 500 11px/1 var(--display); letter-spacing: .22em;
  text-decoration: none; color: var(--label); padding: 8px 0;
  border-bottom: 1px solid transparent;
}
.nav-links a:hover, .nav-links a.active { color: var(--white); border-bottom-color: var(--white); }
/* Sign in: a thin outline chip. Leads to the customer area's "not built yet"
   state until the portal exists. */
.nav-toggle {
  display: none; margin-left: auto;
  background: transparent; color: var(--white);
  border: 1px solid var(--hair-strong); border-radius: 0; padding: 8px 12px;
  font: 500 11px/1 var(--display); letter-spacing: .22em; text-transform: uppercase;
}
.nav-toggle:hover { border-color: var(--white); }
@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 8px var(--panel-pad) 16px;
    background: var(--black); border-bottom: 1px solid var(--hair);
  }
  .nav-links.open { display: flex; }
  .nav-links a { display: block; padding: 14px 0; }
}

/* —— Panels —— */
.panel {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + 64px) var(--panel-pad) 96px;
  background: var(--black);
}
.panel + .panel { border-top: 1px solid var(--hair); }
.eyebrow {
  font: 500 11px/1 var(--display); letter-spacing: .32em;
  color: var(--label); margin: 0 0 28px;
}
.display {
  font: 700 clamp(36px, 7.4vw, 120px)/1.0 var(--display);
  letter-spacing: -.01em; text-transform: uppercase; margin: 0; color: var(--white);
  max-width: 15ch;
}
.title {
  font: 700 clamp(30px, 4.4vw, 64px)/1.02 var(--display);
  letter-spacing: -.005em; text-transform: uppercase;
  margin: 0 0 24px; color: var(--white); max-width: 18ch;
}
.lede { font-size: clamp(16px, 1.4vw, 19px); color: var(--body); max-width: 46ch; margin: 24px 0 0; }
.dim { color: var(--label); }

/* Thin outline buttons, all the same: white hairline, white text, fill on hover. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 16px 30px;
  font: 600 11px/1 var(--display); letter-spacing: .24em;
  text-decoration: none; color: var(--white);
  background: transparent; border: 1px solid var(--white); border-radius: 0;
  transition: background .2s, color .2s;
}
.btn:hover { background: var(--white); color: var(--black); }
.btn.ghost, .btn.outline { border-color: var(--white); color: var(--white); }
.btn:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: clamp(36px, 5vw, 64px); }

/* Status chips: outlined small caps, no fills. */
.demo, .chip {
  display: inline-block; vertical-align: middle;
  font: 600 10px/1 var(--display); letter-spacing: .2em;
  padding: 5px 8px; border: 1px solid var(--hair-strong); color: var(--body);
  background: transparent; border-radius: 0;
}
.demo { margin-left: 10px; }

/* —— Hero (Option 4) —— */
.hero { justify-content: center; padding-top: calc(var(--nav-h) + 8vh); padding-bottom: 10vh; }
/* Always exactly two lines, never wrapping: each phrase is its own nowrap
   block, and the size tracks the viewport so the longer line ("BUILT FOR
   SUSTAINMENT.") fits the content width from 320px up. That line measures
   about 12.7em in a bold system sans (Inter Bold); dividing the content
   width by 14 leaves ~10% headroom for wider system faces. */
.hero-title {
  max-width: none;
  font-size: min(120px, calc((100vw - 2 * var(--panel-pad)) / 14));
}
.hero-line { display: block; white-space: nowrap; }
.hero-sub {
  margin: clamp(24px, 3.2vw, 40px) 0 0;
  font: 400 clamp(14px, 1.2vw, 17px)/1.5 var(--display);
  letter-spacing: .16em; color: #b5b5b5;  /* ~10:1 on black */
}
@media (max-width: 520px) {
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn { justify-content: center; }
}

/* —— Hairline grids —— */
.grid {
  display: grid; gap: 1px; margin-top: 56px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  background: var(--hair); border: 1px solid var(--hair);
}
.card { background: var(--black); padding: 36px 32px 40px; }
.card h3 {
  font: 600 14px/1.3 var(--display); letter-spacing: .2em; text-transform: uppercase;
  margin: 0 0 14px; color: var(--white);
}
.card p { margin: 0; color: var(--label); }
/* Discipline label under a card's sentence: small caps, letter-spaced. */
.card .card-tags {
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--hair);
  font: 500 11px/1.6 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--label);
}
/* Five services on a six-column grid: three across, then two wider. Two
   columns on tablets (the last card spans both); one on phones. */
.services-grid { grid-template-columns: repeat(6, 1fr); }
.services-grid .card { grid-column: span 2; }
.services-grid .card:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 1000px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid .card, .services-grid .card:nth-child(n+4) { grid-column: span 1; }
  .services-grid .card:last-child { grid-column: span 2; }
}
@media (max-width: 620px) {
  .services-grid { grid-template-columns: 1fr; }
  .services-grid .card:last-child { grid-column: span 1; }
}

/* —— Map panel ——
   Copy on the left, the map capture in a 1px hairline frame on the right;
   stacked on phones. The caption under it is real text, so it stays legible
   on a phone where the image's own overlay is too small to read. */
.map-panel {
  display: grid; align-content: center; align-items: center;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(32px, 5vw, 80px); row-gap: 16px;
}
.map-copy { grid-column: 1; grid-row: 1; max-width: 560px; }
.map-figure { grid-column: 2; grid-row: 1; width: 100%; margin: 0; }
/* Map captures (site/assets/maps/): 16:10 images in a hairline frame, with
   the approved caption and credit as text underneath. */
img.shot {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
  border: 1px solid var(--hair-strong); background: var(--black);
}
.map-figure figcaption, .showcase-shot figcaption, .showcase-figure figcaption {
  margin-top: 14px; font: 400 14px/1.55 var(--display); color: var(--label); max-width: 72ch;
}
figcaption .credit {
  display: block; margin-top: 6px; font: 500 11px/1.5 var(--display);
  letter-spacing: .12em; color: var(--label);
}
.showcase-shot { margin: 28px 0 0; }
.showcase-figure { margin: 48px 0 0; max-width: 1160px; }
@media (max-width: 900px) {
  .map-panel { grid-template-columns: 1fr; }
  .map-copy, .map-figure { grid-column: 1; }
  .map-figure { grid-row: 2; margin-top: 32px; }
}

/* —— Showcases —— */
.showcase-grid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.showcase {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 36vh; padding: 36px 32px; text-decoration: none;
  background: var(--black);
  transition: background .2s;
}
.showcase:hover { background: #0d0d0d; }
.showcase .demo { align-self: flex-start; margin: 0 0 auto; }
.showcase .showcase-shot + h3 { margin-top: 28px; }
.showcase h3 {
  font: 700 clamp(22px, 2.4vw, 34px)/1.05 var(--display); text-transform: uppercase;
  margin: 32px 0 12px; color: var(--white);
}
.showcase p { margin: 0 0 24px; color: var(--label); max-width: 40ch; }
.showcase .more { font: 600 11px/1 var(--display); letter-spacing: .24em; color: var(--white); }
.showcase:hover .more { text-decoration: underline; text-underline-offset: 6px; }

/* —— Security steps —— */
.steps { counter-reset: step; }
.steps .card h3::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  display: block; font: 500 11px/1 var(--display); letter-spacing: .24em;
  color: var(--label); margin-bottom: 18px;
}

/* —— Contact + footer —— */
.contact .btn { text-transform: none; letter-spacing: .04em; font-size: 14px; font-weight: 500; }
.contact .btn { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 340px) { .contact .btn { font-size: 13px; letter-spacing: .02em; padding-left: 12px; padding-right: 12px; } }
.footer {
  display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center;
  padding: 40px var(--panel-pad); border-top: 1px solid var(--hair);
  font: 500 10px/1.6 var(--display); letter-spacing: .18em; color: var(--label);
  background: var(--black);
}
.footer img { height: 22px; width: auto; }
.footer nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 12px 24px; }
@media (max-width: 640px) { .footer nav { margin-left: 0; } }
.footer a { color: var(--label); text-decoration: none; }
.footer a:hover { color: var(--white); }

/* —— Reveal on scroll: a plain fade, nothing else —— */
.reveal { opacity: 0; transition: opacity .6s ease; }
.reveal.in { opacity: 1; }
.no-js .reveal { opacity: 1; }

/* —— Sub pages (showcases, 404, not-built) —— */
.sub .panel { min-height: 100vh; }
.back { margin-top: 48px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: none !important; opacity: 1 !important; }
  .btn, .showcase { transition: none; }
}

/* Not-built (501) page for /signin and /enrol: the sentence alone, large. */
.not-built .lede { font-size: clamp(18px, 2vw, 26px); color: var(--white); max-width: 36ch; margin: 0; }

/* —— Our stack (/stack/) —— */
.sub-links { display: flex; gap: 28px; margin-left: auto; }
.sub-links a {
  font: 500 11px/1 var(--display); letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; color: var(--label); padding: 8px 0; border-bottom: 1px solid transparent;
}
.sub-links a:hover { color: var(--white); border-bottom-color: var(--white); }
@media (max-width: 620px) { .sub-links { display: none; } }
.stack-intro, .stack-map, .stack-systems, .stack-principles { min-height: 0; }
.stack-intro { padding-top: calc(var(--nav-h) + 12vh); }
.stats {
  display: grid; gap: 1px; margin: 64px 0 0; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  background: var(--hair); border: 1px solid var(--hair);
}
.stats div { background: var(--black); padding: clamp(18px, 2vw, 28px) clamp(16px, 2vw, 28px) clamp(20px, 2.2vw, 32px); }
.stats dt { font: 500 11px/1.4 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--label); }
.stats dd { margin: 14px 0 0; font: 700 clamp(30px, 3.6vw, 52px)/1 var(--display); color: var(--white); font-variant-numeric: tabular-nums; }
.stack-figure { margin: 48px 0 0; }
.stack-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--hair); }
.stack-figure figcaption { margin-top: 16px; font: 500 11px/1.6 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--label); }
.systems-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1280px) { .systems-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .systems-grid { grid-template-columns: 1fr; } }
.system { display: flex; flex-direction: column; }
.system .chips { margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.system .chips .demo { margin-left: 0; }
.status {
  display: inline-block; font: 600 10px/1 var(--display); letter-spacing: .2em; text-transform: uppercase;
  padding: 5px 8px; border: 1px solid var(--white); color: var(--white);
}
.system .role { margin: -6px 0 16px; font: 500 11px/1.4 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--label); }
.system p + p { margin-top: 0; }
.system .facts {
  margin-top: auto; padding-top: 24px; border-top: 1px solid var(--hair);
  font: 500 11px/1.9 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--body);
}
.system > p:not(.chips):not(.role):not(.facts) { margin-bottom: 28px; }

/* —— Showcase v3/v4 (WT, 3 Nov 2026): mission pair, scout boat, stack Amphib image —— */
figcaption .note {
  display: block; margin-top: 6px; font: 500 11px/1.5 var(--display);
  letter-spacing: .12em; text-transform: uppercase; color: var(--label);
}
img.shot.wide { aspect-ratio: 16 / 9; }
.showcase-pair {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px;
  margin-top: 48px; max-width: 1160px; align-items: start;
}
.showcase-pair .showcase-figure { margin: 0; }
.showcase-pair > .card { border: 1px solid var(--hair); height: 100%; }
@media (max-width: 900px) { .showcase-pair { grid-template-columns: minmax(0, 1fr); } }
.system-shot { margin: 0 0 24px; }
.system-shot img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--hair);
}
.facts a { color: var(--white); text-underline-offset: 4px; }
/* Domain cards (Ground today): auto-fit, so a further domain card slots in without a layout change. */
.domain-grid { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); max-width: 1160px; }
.back .btn + .btn { margin-left: 0; }
/* Lead line under a showcase title (Ground): white, a step up from the lede. */
.tagline { margin: 24px 0 0; font: 600 clamp(18px, 1.9vw, 26px)/1.3 var(--display); color: var(--white); max-width: 36ch; }
.tagline + .lede { margin-top: 16px; }
/* Light grey footnote at the foot of a page (Ground: FCRAR heritage). */
.footnote { margin: clamp(48px, 7vw, 96px) 0 0; max-width: 72ch; font: 400 12px/1.6 var(--display); color: var(--label); }
/* —— Team (WT, 3 Nov 2026): five members. Five across on wide screens; three then
   two (wider) on tablets, like the services grid; one column on phones. —— */
.team-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1400px; }
@media (max-width: 1200px) {
  .team-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .team-grid .member { grid-column: span 2; }
  .team-grid .member:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 700px) {
  .team-grid { grid-template-columns: minmax(0, 1fr); }
  .team-grid .member, .team-grid .member:nth-child(n+4) { grid-column: auto; }
}
.member { display: flex; flex-direction: column; }
.member-photo { display: block; margin: 0 0 24px; }
.member-photo img { display: block; width: 100%; max-width: 320px; height: auto; aspect-ratio: 1; border: 1px solid var(--hair); }
.member .chips { margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.member .chips .chip { margin-left: 0; }
.member .role { margin: -6px 0 16px; font: 500 11px/1.4 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--label); }
/* Founder card: a slightly lifted grey sets WT apart from the agent cards. */
.member.founder { background: #0d0d0d; }
/* —— Map showcases (WT t65u, 3 Nov 2026): supporting captures in an auto-fit
   grid, and a phone-sized capture beside its card. —— */
.capture-grid {
  display: grid; gap: 32px; margin-top: 48px; max-width: 1160px;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.capture-grid .showcase-figure { margin: 0; }
img.shot.phone { aspect-ratio: 320 / 693; max-width: 320px; }
.phone-pair { align-items: start; }
.phone-pair > .card { height: auto; }
/* Four showcases: two by two on desktop and tablet, one column on phones. */
@media (min-width: 701px) { .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* —— Founder summary on /team/ (WT t76u): one line, then 'Label · value' lines. —— */
.founder-bio .lede { max-width: 72ch; }
.founder-facts { margin: 40px 0 0; max-width: 72ch; padding-top: 24px; border-top: 1px solid var(--hair); font: 400 15px/1.75 var(--display); color: var(--body); overflow-wrap: anywhere; }
.founder-facts .label { font: 600 11px/1.4 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--white); }
.member.founder a { color: var(--white); text-underline-offset: 4px; }
/* Client names awaiting WT's go to be named publicly: a quiet dotted underline. */