/* ==========================================================================
   LeadTech Inc — site stylesheet
   --------------------------------------------------------------------------
   Register: sober defense supplier, not sci-fi. Surveying anduril.com,
   saronic.com, neros.tech, shield.ai, skydio.com, castelion.com, pdw.ai and
   launchfirestorm.com turns up a consistent house style — near-black ground,
   off-white rather than pure white text, a narrow neutral grey ramp, one flat
   high-visibility accent, hairline rules, hard corners, and almost no motion.
   None of the eight uses glow, scanlines, HUD corner brackets or an abstract
   3D hero. This sheet follows that convention.

   Orange is reserved exclusively for "design target / in development" markers
   so provisional numbers can never be mistaken for delivered capability.

   The logo is protected in two independent ways:
     1. It lives in a solid, opaque header bar that the canvas never reaches.
     2. In the hero it sits inside .identity-plate, which is marked
        [data-keepout] — backdrop.js reads that rect and refuses to draw any
        particle or link inside it. See backdrop.js for the distance field.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */

/* Palette is sampled from the mark itself, not invented. An alpha scan of
   leadtech-logo.png returns a NEUTRAL grey ramp for the brushed metal
   (#707070 / #606060 / #d0d0d0 — r=g=b, no blue cast) and a deep royal blue
   for the star and the TECH wordmark (#0040a0 / #1060c0). So the ground is
   neutral near-black rather than navy, and blue appears only as a flat accent.

   Applied flat throughout: no glow, no neon, no gradient-on-text. That is the
   observed convention across Anduril, Saronic, Neros, Shield AI and PDW —
   near-black base, off-white (never #fff), a narrow grey ramp, and exactly one
   accent used for rules, chips, fills and active states. */
:root {
  /* ground */
  --bg:            #0a0a0b;
  --bg-panel:      #131416;
  --bg-raised:     #1a1c1f;
  --bg-sunken:     #060607;

  /* ink */
  --text:          #edeef0;
  --muted:         #a4a8ad;
  --dim:           #7d828a;

  /* brand */
  --accent:        #1e6fd9;   /* the blue in the star and the TECH wordmark */
  --accent-bright: #5c9fff;
  --accent-soft:   rgba(30, 111, 217, 0.13);
  --steel:         #c4c8cc;   /* the brushed metal of the wings */

  /* Industrial-marking orange. Used for exactly one purpose on this site:
     flagging something designed or planned rather than delivered. Never
     decorative. */
  --target:        #e08a2e;
  --target-soft:   rgba(224, 138, 46, 0.10);

  /* structure */
  --line:          rgba(200, 205, 212, 0.13);
  --line-strong:   rgba(200, 205, 212, 0.26);

  /* canvas field colours, read by backdrop.js */
  --field-dot:     #6e737a;
  --field-link:    #3a3e44;
  --field-accent:  #1e6fd9;
  --field-grid:    #1c1f23;

  /* type */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* metrics */
  --header-h:     68px;
  --measure:      68ch;
  /* Near-square. Rounded cards read consumer-software; the reference set is
     hairline rules and hard corners throughout. */
  --radius:       3px;
  --radius-sm:    2px;
}

/* -------------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.55rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); }
h3 { font-size: clamp(1.12rem, 2vw, 1.35rem); letter-spacing: -0.005em; }
h4 { font-size: 1rem; letter-spacing: 0.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-bright); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 3px;
}

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: 0.45em; }
li:last-child { margin-bottom: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 3rem 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------- canvas field */

#backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}

/* Everything that is not the canvas sits above it. */
.page { position: relative; z-index: 1; }

/* Content pages get a solid floor under the text so the field never competes
   with body copy — the canvas is a hero device, not a page-wide texture. */
.page--solid main { background: var(--bg); }

/* ------------------------------------------------------------------ layout */

.wrap {
  width: min(1180px, calc(100% - 3rem));
  margin-inline: auto;
}

.wrap--narrow { width: min(820px, calc(100% - 3rem)); }

@media (max-width: 640px) {
  .wrap, .wrap--narrow { width: calc(100% - 2rem); }
}

section { padding-block: clamp(3.5rem, 8vw, 6rem); }
section.tight { padding-block: clamp(2rem, 4vw, 2.75rem); }
/* Consecutive sections would otherwise stack two full paddings into a dead
   band; collapse the join. */
section + section { padding-top: 0; }
section.tight + section { padding-top: clamp(1.5rem, 3vw, 2rem); }

/* ------------------------------------------------------------------ header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  /* Deliberately opaque. This is protection #1 for the logo: the animated
     field is behind a solid bar here, so the mark in the nav is always
     rendered against flat colour. */
  background: #0a0a0b;
  border-bottom: 1px solid var(--line);
}

@supports (backdrop-filter: blur(1px)) {
  .site-header {
    background: rgba(10, 10, 11, 0.93);
    backdrop-filter: blur(14px) saturate(140%);
  }
}

.site-header .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; }

.brand img {
  width: auto;
  height: 34px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--text);
}

.brand-sub {
  font-family: var(--font-mono);
  font-size: 0.545rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 2px;
}

/* --------------------------------------------------------------- main nav */

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  width: 42px;
  height: 38px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle:hover { border-color: var(--accent); }

.nav-toggle span {
  position: relative;
  display: block;
  width: 17px;
  height: 1.5px;
  background: currentColor;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 17px;
  height: 1.5px;
  background: currentColor;
}
.nav-toggle span::before { top: -5.5px; }
.nav-toggle span::after  { top:  5.5px; }

.site-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
}
.site-nav li { margin: 0; }

.site-nav a {
  display: block;
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.site-nav a:hover { color: var(--text); background: rgba(200, 205, 212, 0.07); text-decoration: none; }
.site-nav a[aria-current='page'] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }

.site-nav .nav-cta {
  margin-left: 0.5rem;
  border: 1px solid var(--accent);
  color: var(--accent-bright);
  background: var(--accent-soft);
}
.site-nav .nav-cta:hover { background: var(--accent); color: #fff; }

@media (max-width: 1120px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: #0a0a0b;
    border-bottom: 1px solid var(--line);
    padding: 0.5rem 0 1rem;
    /* Collapsed by default; .is-open is set by site.js. */
    display: none;
  }
  .site-nav.is-open { display: block; }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(1180px, calc(100% - 3rem));
    margin-inline: auto;
  }

  .site-nav a {
    padding: 0.85rem 0.6rem;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  .site-nav a[aria-current='page'] { box-shadow: inset 3px 0 0 var(--accent); }
  .site-nav .nav-cta {
    margin: 0.9rem 0.6rem 0;
    text-align: center;
    border-radius: var(--radius-sm);
    border-bottom: 1px solid var(--accent);
  }
}

@media (max-width: 640px) {
  .site-nav ul { width: calc(100% - 2rem); }
  .brand-sub { display: none; }
}

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: clamp(3rem, 8vh, 6rem);
}

/* In a column flex container with align-items:center, children size to
   FIT-CONTENT, not to the container. A child carrying `max-width: 44rem` will
   therefore lay out at 44rem on a 390px phone and overflow the viewport —
   which also pushed the nav toggle off-screen. Cap every hero child at the
   container width. */
.hero > * { max-width: 100%; }

/* Protection #2 for the logo. backdrop.js reads this element's rect and
   subtracts it (plus a feathered margin) from the particle field, so the
   animation approaches and fades rather than crossing the mark. The plate
   itself is also opaque enough to read against anything. */
.identity-plate {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.25rem, 6vw, 3.8rem);
  border: 1px solid var(--line);
  /* Hard corners. Rounded cards and glow read as consumer-software; the
     reference set uses hairline rules and square corners throughout. */
  background: var(--bg);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
}

/* The mark is the homepage masthead, so it carries the h1. Reset the heading
   box so wrapping the image changes nothing visually; the img alt supplies the
   heading's text equivalent. */
.plate-h1 {
  margin: 0;
  line-height: 0;
  font-size: 0;
}

.identity-plate img {
  width: clamp(12rem, 30vw, 19rem);
  margin-inline: auto;
}

.hero-tagline {
  margin: 1.6rem auto 0;
  max-width: min(30rem, 100%);
  font-family: var(--font-mono);
  font-size: clamp(0.66rem, 1.5vw, 0.76rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--steel);
}

.hero-lede {
  margin: 2.4rem auto 0;
  max-width: min(44rem, 100%);
  font-size: clamp(1.05rem, 2.2vw, 1.28rem);
  line-height: 1.6;
  color: var(--muted);
}
.hero-lede strong { color: var(--text); font-weight: 600; }

.hero-actions {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  width: 100%;
}

.hero-scroll {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.78rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.btn:hover { text-decoration: none; }

.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: #06111f; }

.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-bright); background: var(--accent-soft); }

/* -------------------------------------------------------------- page intro */

.page-head {
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.8rem, 7vw, 4.5rem) clamp(2rem, 5vw, 3rem);
  background: var(--bg-sunken);
}

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 0.9rem;
}

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

.lede {
  max-width: var(--measure);
  font-size: clamp(1.02rem, 1.9vw, 1.16rem);
  color: var(--muted);
  line-height: 1.68;
}

/* ------------------------------------------------------------------- cards */

.grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }

/* Platform card photo: bleeds to the card edges above the index line. */
.card-media {
  width: calc(100% + 3.2rem);
  max-width: none;
  margin: -1.6rem -1.6rem 1.2rem;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
  background: var(--bg-sunken);
}
.card { overflow: hidden; }

.card {
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
}

.card h3 { margin-bottom: 0.55rem; }
.card p  { color: var(--muted); font-size: 0.95rem; }
.card ul { color: var(--muted); font-size: 0.95rem; }

.card-index {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

/* --------------------------------------------------------------- stat rows */

.stats {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.stat {
  background: var(--bg-panel);
  padding: 1.5rem 1.4rem;
}

.stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  line-height: 1.5;
}

/* -------------------------------------------------------------- data lists */

/* The CAGE / NAICS / PSC style key-value block that contracting officers scan
   for first. Monospaced values so codes align. */
.datalist {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.55rem 1.6rem;
  margin: 0;
  font-size: 0.92rem;
}

.datalist dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  padding-top: 0.28em;
}

.datalist dd {
  margin: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.datalist dd.prose {
  font-family: var(--font-body);
  font-size: 0.93rem;
  color: var(--muted);
}

@media (max-width: 560px) {
  .datalist { grid-template-columns: 1fr; gap: 0.15rem 0; }
  .datalist dd { margin-bottom: 0.9rem; }
}

/* ------------------------------------------------------------ spec tables */

.spec-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
}

table.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

table.spec caption {
  text-align: left;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}

table.spec th,
table.spec td {
  text-align: left;
  padding: 0.72rem 1.2rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

table.spec tbody tr:last-child th,
table.spec tbody tr:last-child td { border-bottom: 0; }

table.spec thead th {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 500;
  white-space: nowrap;
}

table.spec tbody th {
  font-weight: 500;
  color: var(--muted);
  width: 38%;
  white-space: nowrap;
}

table.spec tbody td {
  font-family: var(--font-mono);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

table.spec tbody td.prose {
  font-family: var(--font-body);
  color: var(--muted);
}

/* ------------------------------------------------------------------ badges */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.26rem 0.62rem;
  border-radius: 2px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* Amber is used for one purpose only across this site: flagging something that
   is designed or planned rather than delivered. */
.badge--target {
  border-color: rgba(216, 163, 63, 0.45);
  background: var(--target-soft);
  color: var(--target);
}

.badge--accent {
  border-color: rgba(43, 127, 232, 0.5);
  background: var(--accent-soft);
  color: var(--accent-bright);
}

/* ------------------------------------------------------------------ notice */

.notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--target);
  border-radius: var(--radius-sm);
  background: var(--target-soft);
  padding: 1.05rem 1.3rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
}

.notice strong { color: var(--text); }

.notice--info {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

/* ---------------------------------------------------------------- platform */

.platform {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
  overflow: hidden;
}

.platform-head {
  padding: 1.7rem clamp(1.2rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
}

.platform-head .designation {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

.platform-head h3 {
  margin: 0.5rem 0 0.6rem;
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.platform-head p { color: var(--muted); max-width: 46rem; margin-bottom: 0; }

.platform-body { padding: clamp(1.2rem, 3vw, 2rem); }

.platform-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* --------------------------------------------------------------- footnotes */

.footnotes {
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--dim);
  line-height: 1.65;
}
.footnotes ol { padding-left: 1.3rem; }
.footnotes li { margin-bottom: 0.5rem; }

/* ------------------------------------------------------------------ footer */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-sunken);
  padding-block: 3rem 2rem;
  font-size: 0.87rem;
}

.footer-grid {
  display: grid;
  gap: 2.2rem;
  grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  margin-bottom: 2.5rem;
}

.footer-grid h4 {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1rem;
}

.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 0.55rem; }
.footer-grid a { color: var(--muted); }
.footer-grid a:hover { color: var(--text); }

.footer-brand img { height: 42px; width: auto; margin-bottom: 1rem; }
.footer-brand p { color: var(--dim); font-size: 0.85rem; max-width: 26rem; }

.footer-legal {
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.6rem;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.76rem;
  color: var(--dim);
}

.footer-codes {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}

.export-notice {
  margin-top: 1.4rem;
  font-size: 0.72rem;
  line-height: 1.65;
  color: #5c6c82;
  max-width: 62rem;
}

/* ------------------------------------------------------------------- forms */

.form-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

.field .req { color: var(--target); }

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  /* 16px minimum: anything smaller makes iOS Safari zoom the viewport on
     focus, which throws the layout. */
  font-size: 16px;
  color: var(--text);
  background: var(--bg-sunken);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  width: 100%;
}

.field textarea { min-height: 9rem; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field-hint { font-size: 0.78rem; color: var(--dim); }

/* ------------------------------------------------------------------ utility */

.muted { color: var(--muted); }
.dim   { color: var(--dim); }
.mono  { font-family: var(--font-mono); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.8rem; }
.mt-2 { margin-top: 1.6rem; }
.mt-3 { margin-top: 2.4rem; }
.mt-4 { margin-top: 3.2rem; }
.mb-0 { margin-bottom: 0; }

.divider-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1.6rem;
}
.divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ------------------------------------------------------------- photo hero */
/* Home hero: one graded photograph of the VTOL concept, text on the dark left
   third. Replaces the particle canvas on the home page — the sector convention
   is a single product image, not an abstract field. The image is a concept
   rendering and is captioned as one on the page; never present it as a
   photograph of a built aircraft. */

.hero--photo {
  isolation: isolate;
  min-height: min(calc(100svh - var(--header-h)), 54rem);
  align-items: stretch;
  justify-content: center;
  text-align: left;
  padding-block: clamp(3rem, 9vh, 6rem) clamp(4rem, 9vh, 6rem);
  overflow: hidden;
}

.hero-media,
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}
.hero-media img { object-fit: cover; object-position: 72% 55%; }

/* Left-to-right scrim for the copy, plus a floor fade into the page. */
.hero--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(10, 10, 11, 0) 26%),
    linear-gradient(90deg, rgba(10, 10, 11, 0.93) 0%, rgba(10, 10, 11, 0.80) 30%,
                           rgba(10, 10, 11, 0.30) 56%, rgba(10, 10, 11, 0) 74%);
}

.hero-content { position: relative; }
.hero-content > * { max-width: min(40rem, 100%); }

.hero--photo h1 {
  font-size: clamp(2.2rem, 5vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 0;
}

.hero--photo .hero-lede { margin: 1.5rem 0 0; color: #c9ccd1; }
.hero--photo .hero-actions { justify-content: flex-start; }
.hero--photo .hero-scroll { margin-top: clamp(2rem, 5vh, 3rem); }

.hero-caption {
  position: absolute;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vh, 1.6rem);
  margin: 0;
  max-width: 24rem;
  text-align: right;
}

/* Tablets and phones: the scrim cannot hold a paragraph over the aircraft once
   the viewport narrows, so the photo becomes a banner and the copy sits on
   solid ground beneath it. 16:9 banner on tablets, 4:3 crop on phones. */
@media (max-width: 1024px) {
  .hero--photo {
    min-height: 0;
    padding-block: 0 2.5rem;
  }
  .hero-media {
    position: relative;
    display: block;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-bottom: -2rem;
  }
  .hero-media img { position: absolute; object-position: 62% 55%; }
  .hero--photo::before {
    bottom: auto;
    height: calc(100vw * 0.5625);
    background: linear-gradient(to top, var(--bg) 0%, rgba(10, 10, 11, 0) 38%);
  }
  .hero-caption {
    position: static;
    order: 1;
    text-align: left;
    max-width: none;
    width: min(1180px, calc(100% - 3rem));
    margin: 1.8rem auto 0;
  }
}
@media (max-width: 720px) {
  .hero-media { aspect-ratio: 4 / 3; margin-bottom: -2.5rem; }
  .hero-media img { object-position: 50% 50%; }
  .hero--photo::before { height: calc(100vw * 0.75); }
  .hero-caption { width: calc(100% - 2rem); }
}

/* ----------------------------------------------------------- media caption */

.media-caption {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--dim);
}
.media-caption .badge { margin-right: 0.5rem; vertical-align: 0.05em; }

/* --------------------------------------------------------- concept gallery */

.concept-gallery {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  background: var(--line);
  border-block: 1px solid var(--line);
}

.concept-gallery figure {
  position: relative;
  margin: 0;
  grid-column: span 2;
  background: var(--bg-sunken);
  overflow: hidden;
}
.concept-gallery figure.wide { grid-column: 1 / -1; }

.concept-gallery a { display: block; color: inherit; }
.concept-gallery a:hover { text-decoration: none; }

.concept-gallery img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.3s ease;
  filter: saturate(0.92);
}
.concept-gallery figure.wide img { aspect-ratio: 21 / 9; }
.concept-gallery figure.half { grid-column: span 3; }
.concept-gallery figure.half img { aspect-ratio: 4 / 3; }
.concept-gallery figure.pair { grid-column: span 3; }
.concept-gallery figure.pair img { aspect-ratio: 16 / 10; }
.concept-gallery figure.wide.solo img { aspect-ratio: 16 / 9; }

.concept-gallery a:hover img,
.concept-gallery a:focus-visible img { transform: scale(1.025); filter: none; }

@media (prefers-reduced-motion: reduce) {
  .concept-gallery img { transition: none; }
  .concept-gallery a:hover img { transform: none; }
}

.concept-gallery figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.6rem 0.9rem 0.7rem;
  background: linear-gradient(to top, rgba(6, 6, 7, 0.88), rgba(6, 6, 7, 0));
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
}

@media (max-width: 760px) {
  .concept-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .concept-gallery figure,
  .concept-gallery figure.half { grid-column: span 1; }
  .concept-gallery figure.wide,
  .concept-gallery figure.pair { grid-column: 1 / -1; }
  .concept-gallery figure.wide img,
  .concept-gallery figure.pair img { aspect-ratio: 16 / 9; }
  /* One tile shape on phones so mixed 3:2 and 1:1 tiles never leave a gap. */
  .concept-gallery figure:not(.wide):not(.pair) img { aspect-ratio: 4 / 3; }
  .concept-gallery figcaption { padding: 1.2rem 0.6rem 0.5rem; font-size: 0.54rem; letter-spacing: 0.1em; }
}

.gallery-note {
  padding: 0.9rem clamp(1.2rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
}

/* ------------------------------------------------------- showcase (home) */

.showcase {
  position: relative;
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-sunken);
}
.showcase img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.showcase-body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 1rem clamp(1rem, 2.5vw, 1.5rem);
  border-top: 1px solid var(--line);
}

.showcase-link {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent-bright);
  white-space: nowrap;
}
.showcase:hover { text-decoration: none; border-color: var(--line-strong); }
.showcase:hover .showcase-link { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------- feature strip */

.features {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.feature { padding: 1.4rem 1.4rem 1.5rem; background: var(--bg-panel); }
.feature h3 { font-size: 1.02rem; margin-bottom: 0.45rem; }
.feature p { font-size: 0.9rem; color: var(--muted); margin: 0; }
.feature .badge { margin-top: 0.8rem; }

/* ------------------------------------------------------------ jump links */

.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.jump a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
}
.jump a span {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  color: var(--accent-bright);
}
.jump a:hover { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; }

/* ---------------------------------------------------------------- lightbox */

.lightbox {
  width: min(96vw, 1600px);
  max-height: 94vh;
  padding: 0;
  border: 1px solid var(--line-strong);
  background: var(--bg-sunken);
  color: var(--text);
}
.lightbox::backdrop { background: rgba(4, 4, 5, 0.9); }
.lightbox img { width: 100%; max-height: calc(94vh - 3.2rem); object-fit: contain; }
.lightbox-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 0.9rem;
  border-top: 1px solid var(--line);
}
.lightbox-bar button {
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}
.lightbox-bar button:hover { border-color: var(--accent); color: var(--accent-bright); }

@media print {
  #backdrop, .site-header, .nav-toggle, .hero-scroll, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .platform, .stat, .spec-table-wrap { border-color: #999; background: #fff; }
}

/* ==========================================================================
   2026-11 rebuild: three divisions (AI software, 3D printing, drone parts).
   Same register as the rest of the sheet: hairlines, hard corners, one blue
   accent, orange only for "planned / in development".
   ========================================================================== */

/* ------------------------------------------------------------ text hero */

.hero--text {
  min-height: 0;
  align-items: flex-start;
  text-align: left;
  padding-block: clamp(4rem, 11vh, 7.5rem) clamp(3rem, 7vh, 5rem);
  border-bottom: 1px solid var(--line);
  background:
    
    var(--bg);
}
.hero--text .hero-content { width: min(1180px, calc(100% - 3rem)); margin-inline: auto; }
.hero--text h1 { max-width: 19ch; margin-bottom: 0; }
.hero--text .hero-lede { margin: 1.5rem 0 0; }
.hero--text .hero-actions { justify-content: flex-start; }
@media (max-width: 640px) { .hero--text .hero-content { width: calc(100% - 2rem); } }

/* Division index under the home hero: three hairline columns, each a link. */
.divisions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
}
.division {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.35rem 1.4rem 1.5rem;
  color: var(--text);
  background: var(--bg-panel);
  transition: background-color 0.16s ease;
}
.division + .division { border-left: 1px solid var(--line); }
.division:hover { background: var(--bg-raised); text-decoration: none; }
.division .card-index { margin: 0; }
.division strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.005em; }
.division span.muted { font-size: 0.92rem; line-height: 1.55; }
.division .go { margin-top: auto; padding-top: 0.6rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-bright); }
@media (max-width: 860px) {
  .divisions { grid-template-columns: 1fr; }
  .division + .division { border-left: 0; border-top: 1px solid var(--line); }
}

/* --------------------------------------------------- split section layout */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: center;
}
.split--flip > :first-child { order: 2; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--flip > :first-child { order: 0; }
}

/* ------------------------------------------------- software screenshots */

/* Screenshots of the in-house software. Shown with demo data and a fictional
   brand; the label says so on every frame. */
.shot {
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-sunken);
  overflow: hidden;
}
.shot a { display: block; }
.shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.shot figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.85rem;
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
  color: var(--muted);
}
.shot figcaption .mono { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.shot--phone img { aspect-ratio: 9 / 16; }

.shot-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.shot-strip { display: grid; gap: 1.1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .shot-strip { grid-template-columns: 1fr; } }

/* A software product block on /ai: copy beside a large screenshot. */
.product { padding-block: clamp(2.2rem, 5vw, 3.2rem); border-top: 1px solid var(--line); }
.product:first-of-type { border-top: 0; }
.product h3 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); }
.product ul { color: var(--muted); font-size: 0.95rem; padding-left: 1.1em; }
.product li::marker { color: var(--accent); }
.tag-ai {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid rgba(43, 127, 232, 0.5);
  background: var(--accent-soft);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  color: var(--accent-bright);
  vertical-align: 0.15em;
}

/* ------------------------------------------------------- figures */

/* Photos of real printed parts and the concept renderings. Concept images carry
   the orange "Concept" badge in their caption, as everywhere else on the site. */
.fig {
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-sunken);
  overflow: hidden;
}
.fig img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.fig--tall img { aspect-ratio: 4 / 5; }
.split .fig--tall { width: 100%; max-width: 30rem; justify-self: center; }
.fig figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.85rem;
  border-top: 1px solid var(--line);
  background: var(--bg-panel);
  font-size: 0.82rem;
  color: var(--muted);
}
.fig figcaption.media-caption { justify-content: flex-start; }
.fig figcaption .mono { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }

/* ------------------------------------------------------- process steps */

/* A real sequence (upload → print → ship), so the numbers carry meaning. */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line);
  counter-reset: step;
}
.steps li {
  margin: 0;
  padding: 1.2rem 1.15rem 1.3rem;
  background: var(--bg-panel);
  counter-increment: step;
  font-size: 0.9rem;
  color: var(--muted);
}
.steps li + li { border-left: 1px solid var(--line); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--accent-bright);
  margin-bottom: 0.7rem;
}
.steps strong { display: block; color: var(--text); font-family: var(--font-display); font-size: 1.02rem; margin-bottom: 0.3rem; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  .steps li + li { border-left: 0; border-top: 1px solid var(--line); }
}

/* ----------------------------------------------------------- materials */

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; list-style: none; }
.chips li {
  margin: 0;
  padding: 0.42rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--bg-panel);
  font-size: 0.86rem;
  color: var(--text);
}
.chips li span { color: var(--dim); font-size: 0.78rem; margin-left: 0.35rem; }

/* ------------------------------------------------------------ CTA band */

.cta-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem 2.5rem;
  flex-wrap: wrap;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--bg-panel);
}
.cta-band h2 { margin-bottom: 0.4rem; font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
.cta-band p { color: var(--muted); margin: 0; max-width: 46rem; }
.cta-band .hero-actions { margin-top: 0; width: auto; }

/* Export-control panel: the one place orange marks a future status. */
.compliance {
  border: 1px solid var(--line);
  border-left: 3px solid var(--target);
  background: var(--target-soft);
  padding: clamp(1.4rem, 3.5vw, 2rem);
}
.compliance h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-bottom: 0.6rem; }
.compliance p { color: var(--muted); max-width: var(--measure); }

/* --------------------------------------------------------- quote form */

.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 11rem;
  padding: 1.6rem 1rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-sunken);
  text-align: center;
  color: var(--muted);
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.dropzone strong { color: var(--text); font-family: var(--font-display); font-size: 1.05rem; }
.dropzone .mono { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.dropzone input[type='file'] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
}
.dropzone.is-over, .dropzone:focus-within { border-color: var(--accent); background: var(--accent-soft); }

.file-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.file-list li {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  background: var(--bg-panel);
  font-size: 0.88rem;
  min-width: 0;
}
.file-list .name { overflow-wrap: anywhere; color: var(--text); }
.file-list .size { font-family: var(--font-mono); font-size: 0.72rem; color: var(--dim); white-space: nowrap; }
.file-list button {
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}
.file-list button:hover { border-color: var(--accent); color: var(--accent-bright); }

.check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  background: var(--bg-panel);
  font-size: 0.9rem;
  color: var(--muted);
  cursor: pointer;
}
.check input { width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; accent-color: var(--accent); flex: none; }
.check strong { color: var(--text); }

.form-status {
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--bg-panel);
  font-size: 0.92rem;
  color: var(--text);
}
.form-status.is-error { border-left-color: #d9534f; }
.form-status.is-ok { border-left-color: #3fb27f; }

.quote-aside { display: grid; gap: 1.1rem; align-content: start; }
.quote-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
@media (max-width: 960px) { .quote-layout { grid-template-columns: 1fr; } }

/* Rebuild fixes: hero children may use the full width; left-align button rows
   outside the photo hero; checkbox labels read as sentences, not field labels. */
.hero--text .hero-content > * { max-width: min(46rem, 100%); }
.hero--text .hero-content > .divisions { max-width: none; }
.hero--text + section { padding-top: clamp(3.5rem, 8vw, 6rem); }
.split .hero-actions,
.page-head .hero-actions,
.cta-band .hero-actions,
.product .hero-actions { justify-content: flex-start; }
.field label.check {
  font-family: var(--font-body);
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}


/* Software rows on /ai: copy leads, the (blurred) screenshot stays small. */
.product.split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); }
.product.split--flip { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr); }
.product .shot { width: 100%; max-width: 32rem; justify-self: center; }
@media (max-width: 900px) {
  .product.split, .product.split--flip { grid-template-columns: 1fr; }
}

/* The agent tools image is a wide crop of the tile grid: show it whole. */
#agent-toolkit .shot img { aspect-ratio: auto; object-fit: contain; }

/* Footer contact: the street address is the administrative office. */
.footer-label {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

/* "Parts we've made" display case on /3d-printing. */
.made-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .made-grid { grid-template-columns: 1fr; } }
.made {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-panel);
  overflow: hidden;
}
.made img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 1px solid var(--line); background: #eceef1; }
.made img.made-top { object-position: center top; }
.made-body { padding: 1.2rem 1.35rem 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; }
.made-body .card-index { margin: 0; }
.made-body h3 { margin: 0; }
.made-body p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.made-body .chips { margin-top: 0.4rem; }