/* Shared stylesheet for the service pages. Extracted from the homepage's
   inline styles 24 August 2026; the homepage keeps its own inline copy for
   first-paint speed, these four pages share this cached file. Tokens and
   rules mirror docs/brand.md; if this file and brand.md disagree, brand.md
   wins. */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/IBMPlexSans-var.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/IBMPlexMono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/IBMPlexMono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #F4F4F2;
  --card: #EDEAE3;
  --panel: #FBFBF9;
  --ink: #16181A;
  --muted: #5A5F63;
  --faint: #64696F;
  --line: #D9D8D3;
  --accent: #D45500;
  --accent-text: #B04600;
  --btn-bg: #B04600;
  --btn-ink: #FFFFFF;
  --sel-bg: #B04600;
  --sel-ink: #FFFFFF;
  --f-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101214;
    --card: #1A1D1F;
    --panel: #16191C;
    --ink: #E9EAE6;
    --muted: #A6ABAE;
    --faint: #83898F;
    --line: #24272B;
    --accent: #E9611C;
    --accent-text: #E9611C;
    --btn-bg: #E9611C;
    --btn-ink: #16181A;
    --sel-bg: #E9611C;
    --sel-ink: #16181A;
  }
}
:root[data-theme="dark"] {
  --bg: #101214;
  --card: #1A1D1F;
  --panel: #16191C;
  --ink: #E9EAE6;
  --muted: #A6ABAE;
  --faint: #83898F;
  --line: #24272B;
  --accent: #E9611C;
  --accent-text: #E9611C;
  --btn-bg: #E9611C;
  --btn-ink: #16181A;
  --sel-bg: #E9611C;
  --sel-ink: #16181A;
}

::selection { background: var(--sel-bg); color: var(--sel-ink); }
::-moz-selection { background: var(--sel-bg); color: var(--sel-ink); }

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, figure { margin: 0; }
html { scroll-behavior: smooth; }
/* At rail widths the rail is the page's scroll indicator; the browser's
   own bar would double it. Same rule as the homepage. */
@media (min-width: 1280px) {
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { width: 0; height: 0; display: none; }
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--panel); color: var(--ink); padding: 10px 16px; z-index: 99;
}
.skip:focus { left: 12px; top: 12px; }
.sheet { max-width: 1060px; margin: 0 auto; padding: 0 28px; }

/* ---------- the lockup (geometry per docs/brand.md §2) ---------- */
.lockup {
  display: inline-flex; align-items: center;
  font-weight: 600; font-size: 20px; letter-spacing: 0.08em;
  color: var(--ink); white-space: nowrap; line-height: 1;
}
.lockup .bar {
  display: inline-block;
  width: 0.1117em; height: 0.8725em;
  background: var(--accent);
  flex: none;
}
.lockup .word { padding: 0 0.2443em; }
.lockup .labs {
  font-weight: 400; color: var(--muted);
  letter-spacing: 0.10em; margin-left: 1em;
}

/* ---------- header ---------- */
header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 24px 0 20px; border-bottom: 1px solid var(--line);
}
/* Sticky goes on the WRAPPER, not the header: a sticky element cannot
   travel outside its containing block, and the bare .sheet wrapper is
   exactly the header's own height, so header-level sticky never stuck
   anywhere (UX review, 24 August 2026). */
@media (min-width: 621px) {
  .topbar {
    position: sticky; top: 0; z-index: 50;
    background: var(--bg);
  }
}
.navmail .short { display: none; }
nav { display: flex; gap: 24px; flex-wrap: wrap; }
nav a {
  color: var(--muted); font-family: var(--f-mono);
  font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 0;
}
nav a:hover { color: var(--ink); text-decoration: none; }
nav .navmail { color: var(--accent-text); }
nav .navmail:hover { color: var(--accent-text); text-decoration: underline; }
@media (max-width: 620px) {
  header { flex-direction: column; align-items: flex-start; gap: 14px; }
  nav { gap: 16px; }
  .navmail .full { display: none; }
  .navmail .short { display: inline; }
  /* One link per line on phones: a real tap target each, and no
     interpuncts stranded at line ends. */
  .also .dot { display: none; }
  .also a { display: block; padding: 4px 0; }
}

/* ---------- page hero ----------
   Smaller than the homepage hero: these h1s are working titles, not the
   brand statement, and several run three or four words longer. */
.hero { padding: 52px 0 10px; }
.hero .eyebrow {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-text); margin-bottom: 18px;
}
.hero h1 {
  font-weight: 600;
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.06; letter-spacing: -0.02em;
  text-wrap: balance; max-width: 22ch;
}
.hero h1 .stop { color: var(--accent); }
.hero .lede {
  margin-top: 22px; max-width: 62ch;
  font-size: 17.5px; line-height: 1.62; color: var(--muted);
}
.hero .lede strong { color: var(--ink); font-weight: 600; }

/* ---------- the side rail ----------
   The calibration ruler as a live instrument, same as the homepage: a
   fixed graduated scale in the right margin, one accent tick tracking
   scroll position, section marks that jump on click. Hidden below 1280px,
   where the static dividers carry the language instead. */
.rail {
  position: fixed; right: 24px; top: 120px; bottom: 96px; width: 44px;
  display: none; z-index: 40;
}
.rail .track {
  position: absolute; right: 10px; top: 0; bottom: 0; width: 12px;
  border-right: 1px solid var(--line);
  background-image: repeating-linear-gradient(
    to bottom, var(--line) 0 1px, transparent 1px 28px);
}
.rail .mark {
  position: absolute; right: 26px; transform: translateY(-50%);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--faint); text-decoration: none; padding: 4px 5px;
}
.rail .mark:hover { color: var(--accent-text); text-decoration: none; }
.rail .tick {
  position: absolute; right: 6px; width: 20px; height: 2px;
  background: var(--accent); transform: translateY(-50%);
}
@media (min-width: 1280px) { .rail { display: block; } }

/* ---------- sections and the calibration divider ---------- */
main section { padding: 72px 0 0; scroll-margin-top: 24px; }
.sec-head {
  display: grid; grid-template-columns: 150px 1fr; gap: 24px;
  align-items: baseline; position: relative; padding-bottom: 12px;
}
.sec-head .tag {
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--accent-text);
}
.sec-head h2 { font-weight: 600; font-size: 24px; letter-spacing: -0.015em; text-wrap: balance; }
.sec-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background-image:
    linear-gradient(to bottom, transparent 7px, var(--line) 7px),
    repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 42px);
}

/* ---------- prose ----------
   The 150px label column persists as left margin so body copy shares the
   sector rows' x-axis on desktop. */
.prose { padding-top: 26px; }
.prose > * { margin-left: 174px; }
.prose p { color: var(--muted); font-size: 15.5px; max-width: 72ch; }
.prose p + p { margin-top: 14px; }
.prose p strong { color: var(--ink); font-weight: 600; }
.prose ul { padding-left: 18px; margin-top: 14px; color: var(--muted); font-size: 15.5px; max-width: 66ch; }
.prose li { margin-top: 6px; }
.prose li::marker { color: var(--faint); }
.prose .for {
  margin-top: 18px; font-family: var(--f-mono);
  font-size: 12px; color: var(--faint); letter-spacing: 0.02em;
}
.prose .for b { color: var(--muted); font-weight: 500; }

/* Question-and-answer blocks: the h3 is the question a buyer types. The
   grid borrows the homepage services grid's grammar (two columns, hairline
   cell borders) so the section fills the sheet instead of running down the
   left half. */
.qas { display: grid; grid-template-columns: 1fr 1fr; padding-top: 6px; }
/* Each cell carries a mono index in a mini label column, the homepage
   services grid's grammar: the full-sheet grid reads as aligned because
   the left column visibly holds something (UX review, 24 August 2026). */
.qa {
  display: grid; grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 18px;
  padding: 26px 30px 30px 0; border-bottom: 1px solid var(--line);
}
.qa > * { grid-column: 2; }
.qa .idx {
  grid-column: 1; grid-row: 1;
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: 0.10em; color: var(--faint); padding-top: 3px;
}
.qa:nth-child(2n) { border-left: 1px solid var(--line); padding-left: 30px; padding-right: 0; }
.qa h3 {
  font-weight: 600; font-size: 17px; letter-spacing: -0.01em;
  margin-bottom: 10px; text-wrap: pretty;
}
.qa p { color: var(--muted); font-size: 15px; max-width: 52ch; }
.qa p + p { margin-top: 12px; }
/* Figures carry ink weight so a scanner finds the number without reading
   the sentence; same treatment as .prose p strong. */
.qa p strong { color: var(--ink); font-weight: 600; }
/* An odd count would otherwise leave a half-width rule and a borderless
   empty cell: let a widowed last cell span the sheet. */
.qa:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Evidence rows reuse the homepage's sector row grammar. */
.srow {
  display: grid; grid-template-columns: 150px 1fr; gap: 24px;
  padding: 22px 0; border-top: 1px solid var(--line); align-items: baseline;
}
/* The confidentiality note precedes the rows, so the borderless first row
   is the one AFTER it; without this the note reads as a sector row whose
   label failed to render (UX review, 24 August 2026). */
.confid + .srow { border-top: 0; }
.srow .sname {
  font-family: var(--f-mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text);
}
.srow p { color: var(--muted); font-size: 15px; max-width: 72ch; }
.confid {
  padding: 24px 0 26px; font-size: 13.5px; color: var(--faint);
  max-width: 62ch; line-height: 1.75; margin-left: 174px;
}
.confid b { color: var(--muted); font-weight: 500; }

/* Cross-links to the sibling services, mono. Accent so they read as
   links, matching the homepage's "in detail" treatment. */
.also {
  margin-top: 64px; padding-top: 18px; border-top: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 12.5px; letter-spacing: 0.03em;
  color: var(--faint); line-height: 2.1;
}
.also a { color: var(--accent-text); }
.also a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- contact band ---------- */
.contact {
  margin-top: 72px; background: var(--card);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.contact .inner {
  padding: 48px 0 56px; display: grid; grid-template-columns: 1fr auto;
  gap: 36px; align-items: center;
}
.contact .avail {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px;
}
.contact h2 {
  font-weight: 600; font-size: clamp(27px, 4vw, 41px);
  line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance;
}
.contact .sub { margin-top: 12px; color: var(--muted); font-size: 15.5px; max-width: 52ch; }
.btn {
  display: inline-block; background: var(--btn-bg); color: var(--btn-ink);
  font-weight: 600; font-size: 15px; padding: 14px 24px;
  border-radius: 8px; white-space: nowrap;
}
.btn:hover { text-decoration: none; filter: brightness(1.07); }

/* ---------- footer ---------- */
footer { padding: 42px 0 64px; }
.fgrid { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: start; }
.fid { font-family: var(--f-mono); font-size: 12.5px; color: var(--faint); line-height: 2; }
.fid .co { color: var(--muted); }
.flinks { display: flex; gap: 22px; flex-wrap: wrap; }
.flinks a { font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); padding: 6px 0; }
.flinks a:hover { color: var(--accent-text); }
/* Footer service navigation: at the bottom of a 4,000px page there was
   no route anywhere (UX review, 24 August 2026). */
.fnav {
  margin-top: 24px; font-family: var(--f-mono); font-size: 12.5px;
  letter-spacing: 0.03em; color: var(--faint); line-height: 2.3;
}
.fnav a { color: var(--muted); }
.fnav a:hover { color: var(--accent-text); }
.sisters {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--faint); line-height: 1.9;
}
.sisters a { color: var(--muted); }
.sisters a:hover { color: var(--accent-text); }
.themeseg {
  display: inline-flex; align-items: center; align-self: center;
  padding: 2px; border: 1px solid var(--line); border-radius: 999px;
}
.themeseg button {
  background: none; border: 0; padding: 3px 7px; cursor: pointer;
  display: inline-flex; align-items: center; color: var(--muted);
  border-radius: 999px;
}
.themeseg button:hover { color: var(--accent-text); }
/* The active segment is resolved in CSS from the same html attribute the
   palette reads, so the switch is correct at first paint and in the auto
   (no attribute) state without the script. */
:root:not([data-theme]) .themeseg [data-set="auto"],
:root[data-theme="light"] .themeseg [data-set="light"],
:root[data-theme="dark"] .themeseg [data-set="dark"] {
  color: var(--ink); background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
}

@media (max-width: 880px) {
  .prose > * { margin-left: 0; }
  .confid { margin-left: 0; }
  .qas { grid-template-columns: minmax(0, 1fr); }
  .qa { padding-right: 0; grid-template-columns: minmax(0, 1fr); }
  .qa > *, .qa .idx { grid-column: 1; }
  .qa .idx { grid-row: auto; margin-bottom: 6px; }
  .qa:nth-child(2n) { border-left: 0; padding-left: 0; }
  .srow { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .contact .inner { grid-template-columns: minmax(0, 1fr); }
  .fgrid { grid-template-columns: minmax(0, 1fr); }
  .sec-head { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
}
@media (max-width: 340px) {
  .hero h1 { font-size: 30px; }
  .btn { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}