/* ==========================================================================
   Northland Automations, LLC — "Drafting Sheet" design system

   Visual language borrowed from engineering drawings and ERP admin screens:
   hairline rules instead of shadows, mono labels for anything the machine
   would name (schema fields, sheet labels, spec codes), Archivo at expanded
   widths for nameplate-style display type, and one accent — machine amber —
   used as a mark, never as decoration.

   The business name is real; the visual brand is not yet. Swap --mark and the .plate
   monogram (plus assets/favicon.svg) once a real logo and brand colour exist.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  --font-display: "Archivo", "Arial Narrow", Helvetica, sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;

  --radius: 2px;
  --hair: 1px;
  --max-width: 1160px;

  /* ---- Light: ink on drafting vellum ---- */
  --bg: #e3e6e1;
  --bg-panel: #f2f3ef;
  --bg-inset: #d8dcd7;
  --fg: #14212e;
  --fg-soft: #465868;
  --fg-faint: #586573;
  --rule: #c2c8c2;
  --rule-hard: #14212e;
  --mark: #e0a017;        /* amber as a fill / marker / rule */
  --mark-text: #8c5703;   /* amber that clears 4.5:1 on both grounds */
  --on-mark: #14212e;

  /* The nameplate keeps its own pair so it stays high-contrast in both
     themes instead of inheriting --fg, which flips to near-white in dark. */
  --plate-bg: #14212e;
  --plate-fg: #e0a017;

  /* The closing panel. Beige and the vellum ground sit at almost identical
     luminance (1.05:1), so the ink border — not the fill — is what makes this
     read as a panel. */
  --cta-bg: #f0ead9;
  --cta-fg: #14212e;
  --cta-fg-soft: #465868;
  --cta-rule: #14212e;
  --cta-lab: #8c5703;

  --btn-edge: #14212e;
}

/* ---- Dark: blueprint negative ---- */
:root[data-theme="dark"] {
  --bg: #0e1822;
  --bg-panel: #16232f;
  --bg-inset: #0a121a;
  --fg: #dfe3de;
  --fg-soft: #9daab4;
  --fg-faint: #8592a0;
  --rule: #2a3b49;
  --rule-hard: #40525f;
  --mark: #e8ae33;
  --mark-text: #e8ae33;
  --on-mark: #0e1822;
  --plate-bg: #e8ae33;
  --plate-fg: #0e1822;
  --cta-bg: #16232f;
  --cta-fg: #dfe3de;
  --cta-fg-soft: #9daab4;
  --cta-rule: #2a3b49;
  --cta-lab: #e8ae33;
  --btn-edge: transparent;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1822;
    --bg-panel: #16232f;
    --bg-inset: #0a121a;
    --fg: #dfe3de;
    --fg-soft: #9daab4;
    --fg-faint: #8592a0;
    --rule: #2a3b49;
    --rule-hard: #40525f;
    --mark: #e8ae33;
    --mark-text: #e8ae33;
    --on-mark: #0e1822;
    --plate-bg: #e8ae33;
    --plate-fg: #0e1822;
    --cta-bg: #16232f;
    --cta-fg: #dfe3de;
    --cta-fg-soft: #9daab4;
    --cta-rule: #2a3b49;
    --cta-lab: #e8ae33;
    --btn-edge: transparent;
  }
}

/* --------------------------------------------------------------------------
   Reset + base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--mark);
  outline-offset: 3px;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 200;
  background: var(--mark);
  color: var(--on-mark);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: var(--space-3) var(--space-5);
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Type roles
   -------------------------------------------------------------------------- */

/* Display: Archivo pushed wide — nameplate, not editorial.
   Width comes from the variable font's wdth axis via standard font-stretch,
   so font matching against the @font-face range works correctly. */
.d1, .d2, .d3 {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 680;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.d1 {
  font-size: clamp(1.95rem, 0.95rem + 2.8vw, 3.05rem);
  line-height: 1;
  text-transform: uppercase;
  font-stretch: 116%;
  font-weight: 720;
  letter-spacing: -0.025em;
  /* line breaks are authored explicitly in the markup, so don't let the
     balancer re-flow them */
  text-wrap: normal;
}

.d2 {
  font-size: clamp(1.7rem, 1.25rem + 1.7vw, 2.55rem);
  line-height: 1.08;
}
.sheet h2.d2 { max-width: 44rem; }

.d3 {
  font-size: 1.12rem;
  line-height: 1.3;
  font-stretch: 104%;
  font-weight: 640;
  letter-spacing: -0.005em;
}

/* Mono utility label — used for anything the system would name */
.lab {
  font-family: var(--font-mono);
  font-size: 0.715rem;
  font-weight: 500;
  letter-spacing: 0.145em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.lede {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: 72ch;
}

/* Body measure caps sit at the top of the comfortable range (~80 characters)
   rather than the middle, because the single left margin leaves the right of
   the page open. Widths live here, not in per-element inline styles. */
.body-copy { color: var(--fg-soft); max-width: 82ch; }
.body-copy + .body-copy { margin-top: var(--space-4); }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: var(--hair) solid var(--rule);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-right: auto;
  flex-shrink: 0;
}

/* Riveted shop nameplate: ink plate, amber monogram, four corner rivets */
.plate {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--plate-bg);
  color: var(--plate-fg);
  font-family: var(--font-mono);
  /* sized for the three-character NLA monogram inside the 3px inset ring —
     the old 0.79rem was set for a two-character mark and crowds the rivets */
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: inset 0 0 0 3px var(--plate-fg);
  background-image:
    radial-gradient(circle at 4px 4px, var(--plate-fg) 0 1px, transparent 1.2px),
    radial-gradient(circle at calc(100% - 4px) 4px, var(--plate-fg) 0 1px, transparent 1.2px),
    radial-gradient(circle at 4px calc(100% - 4px), var(--plate-fg) 0 1px, transparent 1.2px),
    radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), var(--plate-fg) 0 1px, transparent 1.2px);
}
.plate-sm { width: 27px; height: 27px; font-size: 0.6rem; box-shadow: inset 0 0 0 2px var(--plate-fg); }

.brand-name {
  font-family: var(--font-display);
  font-stretch: 108%;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* the full legal name is long enough to wrap on small phones, so this is a
     wrapped line-height rather than 1 */
  line-height: 1.12;
}

/* Below this width "NORTHLAND AUTOMATIONS, LLC" plus the plate, theme toggle and
   burger no longer fit one line, so let the wordmark shrink and wrap instead of
   pushing the nav controls off the edge. */
@media (max-width: 560px) {
  .brand { flex-shrink: 1; min-width: 0; }
  .brand-name { font-size: 0.82rem; }
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-family: var(--font-mono);
  font-size: 0.755rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nav-links a {
  position: relative;
  padding: var(--space-2) 0;
  color: var(--fg-soft);
  transition: color 0.15s;
}
.nav-links a:hover { color: var(--fg); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--mark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s;
}
.nav-links a[aria-current="page"] { color: var(--fg); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: var(--space-3); }

.theme-toggle {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: var(--hair) solid var(--rule);
  color: var(--fg-soft);
  transition: border-color 0.15s, color 0.15s;
}
.theme-toggle:hover { border-color: var(--rule-hard); color: var(--fg); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

.nav-toggle {
  display: none;
  width: 34px;
  height: 34px;
  border: var(--hair) solid var(--rule);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.nav-toggle span { display: block; width: 15px; height: 1.5px; background: var(--fg); transition: transform 0.2s, opacity 0.2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-links {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg-panel);
    border-bottom: var(--hair) solid var(--rule);
    padding: var(--space-2) var(--space-5) var(--space-5);
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: var(--space-4) 0; border-bottom: var(--hair) solid var(--rule); }
  .nav-links a::after { display: none; }
  .nav-links a[aria-current="page"] { color: var(--mark-text); }
  .nav .btn { display: none; }
  .nav-toggle { display: flex; }
}

/* --------------------------------------------------------------------------
   Buttons — squared, mono, mechanical
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.7rem 1.15rem;
  border: var(--hair) solid transparent;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.btn::after {
  content: "";
  width: 14px;
  height: 1.5px;
  background: currentColor;
  transition: width 0.18s;
}
.btn:hover::after { width: 22px; }

.btn-primary { background: var(--mark); color: var(--on-mark); border-color: var(--btn-edge); }
.btn-primary:hover { background: var(--fg); color: var(--mark); }

.btn-ghost { color: var(--fg); border-color: var(--rule-hard); }
.btn-ghost:hover { background: var(--fg); color: var(--bg); }

.btn-lg { font-size: 0.8rem; padding: 0.95rem 1.5rem; }

/* --------------------------------------------------------------------------
   Sheet layout — the spine of the whole site.
   Section label hangs in the left margin against a hairline, drawing-sheet
   style. Collapses to a stacked label above content on narrow screens.
   -------------------------------------------------------------------------- */
.sheet {
  border-top: var(--hair) solid var(--rule);
  padding: var(--space-8) 0;
}
.sheet-inset { background: var(--bg-panel); }

/* One left margin for the whole site. The section label used to hang in a
   12.5rem rail, which pushed every heading and paragraph a quarter of the way
   into the page while the hero started at the container edge — two different
   left margins, and the body copy read as floating. Label now sits above its
   content and everything shares one edge. */
.sheet-grid { display: block; }

.sheet-mark {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.sheet-mark::before {
  content: "";
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  background: var(--mark);
  transform: translateY(-1px);
}

.sheet-head { max-width: 58rem; }
.sheet-head .lede { margin-top: var(--space-5); }



/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  /* One variable drives both the artwork height and the space reserved for it,
     so the buildings can never climb into the buttons at any viewport. */
  --skyline-h: clamp(190px, 26vw, 380px);
  position: relative;
  overflow: hidden;
  /* isolation confines the photo's mix-blend-mode to this section. Without it
     the blend group is the document root and every sticky-header repaint
     re-blends the entire page against the image. */
  isolation: isolate;
  border-bottom: var(--hair) solid var(--rule);
  padding: var(--space-7) 0 calc(var(--skyline-h) + var(--space-6));
}
.hero > .container { position: relative; z-index: 1; }

/* Minneapolis. assets/minneapolis.jpg, supplied by the client and confirmed by
   them to carry no licensing restrictions.

   The photograph is already monochrome, so rather than lay it on top of the
   palette it is blended into it: multiply on the light theme darkens the vellum
   only where the city is dark, which reads like an image printed onto the
   drawing sheet; screen does the mirror job on the dark theme. A gradient mask
   fades the top away so the band never reaches the text. */
.skyline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--skyline-h);
  background-image: url("../assets/minneapolis.jpg");
  background-size: cover;
  background-position: 42% 38%;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.55;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 100%);
}

:root[data-theme="dark"] .skyline { mix-blend-mode: screen; opacity: 0.4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .skyline { mix-blend-mode: screen; opacity: 0.4; }
}

.hero-title .line { display: block; }
.hero-title .line-mark { color: var(--mark-text); }

.hero-copy { margin-top: var(--space-5); max-width: 66ch; color: var(--fg-soft); font-size: 1.2rem; line-height: 1.6; }
.hero-actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* --------------------------------------------------------------------------
   Photo caption — the figure caption for the skyline band. Sits in the gap
   between the hero's bottom hairline and the first .sheet's top hairline, so
   it reads as a captioned plate on a drawing. Dotted leader is the same
   repeating gradient .trace-step uses.
   -------------------------------------------------------------------------- */
.figcap-inner {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
}
.figcap-lead {
  flex: 1;
  height: 1px;
  min-width: var(--space-6);
  transform: translateY(-3px);
  background: repeating-linear-gradient(to right, var(--rule) 0 4px, transparent 4px 8px);
}
.figcap-coord {
  font-family: var(--font-mono);
  font-size: 0.715rem;
  font-weight: 500;
  letter-spacing: 0.145em;
  color: var(--fg-faint);
  white-space: nowrap;
}

/* Label and coordinates together overrun the container on small phones, so
   drop the leader and let the two halves stack. */
@media (max-width: 560px) {
  .figcap-inner { flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
  .figcap-lead { display: none; }
}

/* --------------------------------------------------------------------------
   SIGNATURE — the ERP query trace.
   A plain-English question resolving into real ERP object/field reads. This is
   literally what the firm's MCP tooling does; it is labelled illustrative so
   it never reads as a client result.
   -------------------------------------------------------------------------- */
.trace {
  position: relative;
  background: var(--bg-panel);
  border: var(--hair) solid var(--rule-hard);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-5) var(--space-5);
}
.trace-rows li:last-child { border-bottom: 0; }
/* Corner registration ticks — used on the signature card and nowhere else. */
.trace::before, .trace::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  border: 2px solid var(--mark);
  pointer-events: none;
}
.trace::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.trace::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.trace-tag {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-mark);
  background: var(--mark);
  padding: 2px 7px;
}

.trace-block { padding-bottom: var(--space-5); }
.trace-ask {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 560;
  font-size: 1.16rem;
  line-height: 1.34;
  margin-top: var(--space-2);
}
.trace-step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: var(--hair) solid var(--rule);
  border-bottom: var(--hair) solid var(--rule);
}
.trace-step .lab { color: var(--mark-text); }
.trace-step::after {
  content: "";
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(to right, var(--rule) 0 4px, transparent 4px 8px);
}

.trace-rows { font-family: var(--font-mono); font-size: 0.795rem; }
.trace-rows li {
  display: grid;
  grid-template-columns: 8.5rem auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: var(--hair) dotted var(--rule);
}
.trace-obj { font-weight: 600; letter-spacing: 0.01em; }
.trace-op { color: var(--mark-text); font-weight: 500; }
.trace-fields { color: var(--fg-faint); overflow-wrap: anywhere; }

@media (max-width: 420px) {
  .trace-rows li { grid-template-columns: 1fr; gap: 2px; }
}

/* --------------------------------------------------------------------------
   Sourced figures table — replaces stat cards. These are cited survey
   numbers; tabular is the honest, scannable form for them.
   -------------------------------------------------------------------------- */
.figures { width: 100%; border-collapse: collapse; text-align: left; }
.figures caption {
  text-align: left;
  padding-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.715rem;
  letter-spacing: 0.145em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.figures th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
  padding: 0 var(--space-5) var(--space-3) 0;
  border-bottom: var(--hair) solid var(--rule-hard);
  vertical-align: bottom;
}
.figures td {
  padding: var(--space-5) var(--space-5) var(--space-5) 0;
  border-bottom: var(--hair) solid var(--rule);
  vertical-align: top;
}
.figures tr:last-child td { border-bottom: 0; }

.fig-num {
  width: 9.5rem;
  font-family: var(--font-display);
  font-stretch: 106%;
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mark-text);
  white-space: nowrap;
}
.fig-find { font-weight: 500; }
.fig-find span { display: block; margin-top: var(--space-2); font-weight: 400; color: var(--fg-soft); font-size: 0.97rem; line-height: 1.55; }
.fig-src {
  width: 13rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--fg-faint);
}

@media (max-width: 780px) {
  .figures thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .figures tr { display: block; padding: var(--space-5) 0; border-bottom: var(--hair) solid var(--rule); }
  .figures tr:last-child { border-bottom: 0; }
  .figures td { display: block; width: auto; padding: 0; border: 0; }
  .fig-find { margin-top: var(--space-2); }
  .fig-src { margin-top: var(--space-4); }
}

/* --------------------------------------------------------------------------
   Capability index — services as a parts catalogue, not a card grid
   -------------------------------------------------------------------------- */
.index { border-top: var(--hair) solid var(--rule-hard); }
.index-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-6);
  /* every row carries the left border so the featured row's amber rule does
     not shift its content out of alignment with the rest */
  border-left: 3px solid transparent;
  padding: var(--space-6) 0 var(--space-6) var(--space-5);
  border-bottom: var(--hair) solid var(--rule);
  transition: background 0.18s;
}
.index-row:hover { background: var(--bg-panel); }
.index-code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--fg-faint);
  padding-top: 0.2rem;
}
.index-row--lead { border-left-color: var(--mark); }
.index-row--lead .index-code { color: var(--mark-text); }

.index-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.index-flag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-mark);
  background: var(--mark);
  padding: 2px 7px;
}
.index-desc { margin-top: var(--space-3); color: var(--fg-soft); max-width: 86ch; }

.spec { margin-top: var(--space-5); display: grid; gap: var(--space-2); }
.spec li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.795rem;
  line-height: 1.5;
  color: var(--fg-soft);
}
.spec li::before { content: "—"; color: var(--mark-text); }

/* Platform rack — the ERP systems we integrate with, set as plain text rather
   than vendor logos: naming a platform is fair use, reproducing its mark is a
   trademark question we don't need to have. */
.rack { margin-top: var(--space-5); padding-top: var(--space-5); border-top: var(--hair) dotted var(--rule); }
.rack-list { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rack-list li {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--fg-soft);
  border: var(--hair) solid var(--rule);
  padding: 3px 9px;
}
.rack-list .rack-more { border-style: dashed; color: var(--fg-faint); }

@media (max-width: 640px) {
  .index-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding-left: var(--space-4); }
}

/* --------------------------------------------------------------------------
   Process — a dimension line. Order is real information here, so it is the
   one place numbering earns its keep.
   -------------------------------------------------------------------------- */
.dim { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.dim-step {
  position: relative;
  padding: var(--space-6) var(--space-5) 0 0;
  border-top: 2px solid var(--rule-hard);
}
.dim-step::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 2px;
  height: 13px;
  background: var(--mark);
}
.dim-n {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--mark-text);
}
.dim-step h3 { margin-top: var(--space-3); }
.dim-step p { margin-top: var(--space-3); color: var(--fg-soft); font-size: 0.97rem; line-height: 1.55; }

/* --------------------------------------------------------------------------
   Founder records — stamped plates, not gradient circles
   -------------------------------------------------------------------------- */
/* One record per founder, laid out wide: identity plate on the left, the
   account of the work on the right. Three narrow columns crushed the bio
   measure to ~30 characters. */
.crew { display: grid; gap: var(--space-5); }
.crew-card {
  background: var(--bg-panel);
  border: var(--hair) solid var(--rule);
  border-top: 3px solid var(--rule-hard);
  border-radius: var(--radius);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.crew-stamp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

@media (max-width: 760px) {
  .crew-card { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .crew-stamp {
    flex-direction: row;
    align-items: center;
    padding-bottom: var(--space-4);
    border-bottom: var(--hair) solid var(--rule);
  }
}
.crew-initials {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--plate-bg);
  color: var(--plate-fg);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.crew-role { margin-top: 3px; }
/* Personal LinkedIn profiles. There is no company page yet — deliberately, so
   don't add one to the footer or nav until asked. */
.crew-link {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--fg-soft);
  border-bottom: 2px solid var(--mark);
  padding-bottom: 2px;
  transition: color 0.15s;
}
.crew-link:hover { color: var(--mark-text); }
.crew-bio { max-width: 90ch; color: var(--fg-soft); font-size: 0.97rem; line-height: 1.6; }
.crew-tags { margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--hair) dotted var(--rule); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.crew-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--fg-soft);
  border: var(--hair) solid var(--rule);
  padding: 2px 7px;
}

/* --------------------------------------------------------------------------
   Reach — contact channels
   -------------------------------------------------------------------------- */
.reach { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: var(--space-6); }
.reach-item { border-top: 2px solid var(--rule-hard); padding-top: var(--space-5); }
.reach-value {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-stretch: 104%;
  font-weight: 620;
  font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.4rem);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.reach-value a { border-bottom: 2px solid var(--mark); transition: color 0.15s; }
.reach-value a:hover { color: var(--mark-text); }
.reach-note { margin-top: var(--space-3); color: var(--fg-soft); font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   CTA — a bordered panel on the sheet. Light theme: beige paper with an ink
   rule. Dark theme: the raised panel tone. Left-aligned like everything else.
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  background: var(--cta-bg);
  color: var(--cta-fg);
  border: 2px solid var(--cta-rule);
  border-radius: var(--radius);
  padding: var(--space-7) var(--space-6);
}
.cta-inner { max-width: 64rem; }
.cta .lab { color: var(--cta-lab); }
.cta-title { margin-top: var(--space-4); }
.cta-copy { margin-top: var(--space-4); color: var(--cta-fg-soft); max-width: 76ch; }
.cta-actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cta .btn-ghost { color: var(--cta-fg); border-color: var(--cta-rule); }
.cta .btn-ghost:hover { background: var(--cta-fg); color: var(--cta-bg); }

/* --------------------------------------------------------------------------
   Footer — a drawing title block
   -------------------------------------------------------------------------- */
.foot { border-top: 2px solid var(--rule-hard); padding: var(--space-7) 0 var(--space-5); }
.foot-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }

.block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius);
}
.block-cell { padding: var(--space-4); border-right: var(--hair) solid var(--rule); }
.block-cell:last-child { border-right: 0; }
.block-cell p { margin-top: var(--space-2); font-size: 0.94rem; line-height: 1.5; }
/* The email address is a single unbreakable token that can outgrow a
   title-block cell at narrower container widths. The markup carries a <wbr>
   after the @ to steer the break somewhere sensible; this is the backstop. */
.block-cell a { display: block; overflow-wrap: anywhere; }
.block-cell a:hover { color: var(--mark-text); }

@media (max-width: 720px) {
  .block-cell { border-right: 0; border-bottom: var(--hair) solid var(--rule); }
  .block-cell:last-child { border-bottom: 0; }
}

.foot-bottom {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--fg-faint);
}
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--space-5); text-transform: uppercase; }
.foot-nav a:hover { color: var(--fg); }

/* --------------------------------------------------------------------------
   Motion — one orchestrated hero load, then quiet scroll reveals
   -------------------------------------------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.load { animation: rise 0.62s cubic-bezier(0.22, 0.68, 0.24, 1) both; }
.load-1 { animation-delay: 0.04s; }
.load-2 { animation-delay: 0.14s; }
.load-3 { animation-delay: 0.24s; }

[data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Narrow-screen rhythm
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .sheet { padding: var(--space-7) 0; }
  /* padding-top only — the base rule's padding-bottom is what reserves room
     for the photo band, and a shorthand here would wipe it out. */
  .hero { padding-top: var(--space-6); }
  .cta { padding: var(--space-7) var(--space-5); }
}