/* Manola Maintenance — site styles
   Layout: left-aligned engineering-sheet pages; a two-column "spec" grid (label column + body column)
   carries most sections, and the one bold element is the hierarchy sheet in the home hero. */
/* Self-hosted fonts (SIL Open Font License) */
@font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"), url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../fonts/public-sans-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/public-sans-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 400;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 600;
  src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

:root {
  --paper: #f5f7f8;      /* page ground, cool grey */
  --surface: #ffffff;    /* sheets and the header */
  --ink: #14202b;        /* text, from the existing site's ink */
  --ink-2: #4b5966;      /* secondary text */
  --rule: #d4dbe1;       /* hairlines and grid lines */
  --rule-2: #e7ecef;     /* faint banding */
  --rust: #b5472a;       /* Manola brand accent, darkened for contrast */
  --rust-soft: #f6e4dd;
  --rust-strong: #9e3d23; /* rust text on rust-soft backgrounds */
  --on-rust: #ffffff;
  --steel: #22384a;      /* deep band for the closing call to action */
  --on-steel: #eef3f6;
  --ok: #2d6a4f;
  --ok-soft: #dcefe5;
  --warn: #8a5a00;
  --warn-soft: #f6ead0;
  --plate: #d9dee2; --plate-hi: #eef1f3; --plate-lo: #c3cad0; --plate-edge: #a9b2ba; --plate-ink: #1d2a35;
  --logo-bg: transparent; /* the logo is dark artwork; it sits on a light chip in dark mode */

  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Public Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --measure: 66ch;
  --wrap: 1180px;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #10171d; --surface: #172029; --ink: #e5eaee; --ink-2: #a2afba;
    --rule: #2c3945; --rule-2: #1d2731; --rust: #e2774f; --rust-soft: #3a231b; --rust-strong: #e2774f; --on-rust: #1a0d08;
    --steel: #1b2b38; --on-steel: #e5eaee; --ok: #7fc8a3; --ok-soft: #1c3329; --warn: #e3b55a; --warn-soft: #3a2f17; --logo-bg: #e5eaee; --plate: #3a4652; --plate-hi: #4a5866; --plate-lo: #2c3640; --plate-edge: #5b6977; --plate-ink: #e8edf1;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #10171d; --surface: #172029; --ink: #e5eaee; --ink-2: #a2afba;
  --rule: #2c3945; --rule-2: #1d2731; --rust: #e2774f; --rust-soft: #3a231b; --rust-strong: #e2774f; --on-rust: #1a0d08;
  --steel: #1b2b38; --on-steel: #e5eaee; --ok: #7fc8a3; --ok-soft: #1c3329; --warn: #e3b55a; --warn-soft: #3a2f17; --logo-bg: #e5eaee; --plate: #3a4652; --plate-hi: #4a5866; --plate-lo: #2c3640; --plate-edge: #5b6977; --plate-ink: #e8edf1;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
}
img { max-width: 100%; height: auto; }
a { color: var(--rust); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--rust); outline-offset: 2px; border-radius: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--surface); padding: 8px 12px; z-index: 50; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}

/* ---------- type scale (1.25 ratio) ---------- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-stretch: 112%;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); font-weight: 650; }
h3 { font-size: 1.25rem; font-weight: 650; font-stretch: 105%; }
h4 { font-size: 1.05rem; font-weight: 650; font-stretch: 100%; letter-spacing: 0; }
p { margin: 0; max-width: var(--measure); }
.lede { font-size: 1.2rem; line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.muted { color: var(--ink-2); }
.small { font-size: 0.92rem; }
.tag { font-family: var(--f-data); font-size: 0.86em; letter-spacing: 0; }

/* ---------- header ---------- */
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 10; background: var(--surface);
}
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 24px;
  min-height: 68px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none;
  font-family: var(--f-display); font-weight: 700; font-stretch: 110%;
  font-size: 1.12rem; letter-spacing: -0.01em; white-space: nowrap;
}
.brand img { width: 40px; height: 40px; object-fit: contain; }
.brand img { background: var(--logo-bg); border-radius: 4px; padding: 2px; }
.nav { margin-left: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.nav a {
  display: block; padding: 8px 11px; border-radius: 6px;
  color: var(--ink); text-decoration: none; font-size: 0.97rem; font-weight: 500;
}
.nav a:hover { background: var(--rule-2); }
.nav a[aria-current="page"] { color: var(--rust); box-shadow: inset 0 -2px 0 var(--rust); border-radius: 0; }
.nav .nav-cta a {
  background: var(--rust); color: var(--on-rust); margin-left: 8px; padding-inline: 16px; font-weight: 600;
}
.nav .nav-cta a:hover { background: var(--rust); filter: brightness(1.07); }
.nav .nav-cta a[aria-current="page"] { box-shadow: none; border-radius: 6px; color: var(--on-rust); }
.menu-toggle {
  display: none; margin-left: auto;
  font: inherit; font-weight: 600; font-size: 0.95rem;
  background: none; color: var(--ink); border: 1px solid var(--rule); border-radius: 6px;
  padding: 8px 14px; cursor: pointer;
}
@media (max-width: 980px) {
  .menu-toggle { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--surface); border-bottom: 1px solid var(--rule); }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter-r) 16px var(--gutter); }
  .nav a { padding: 12px 4px; border-radius: 0; border-bottom: 1px solid var(--rule-2); }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--rust); padding-left: 12px; }
  .nav .nav-cta a { margin: 12px 0 0; text-align: center; border-radius: 6px; border: 0; }
}

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 10px 20px; border-radius: 6px;
  font: inherit; font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary { background: var(--rust); color: var(--on-rust); }
.btn-primary:hover { filter: brightness(1.07); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-quiet:hover { border-color: var(--ink-2); }
.btn-small { min-height: 38px; padding: 6px 14px; font-size: 0.95rem; }
.site-footer .btn-small { color: var(--ink); text-decoration: none; margin-bottom: 10px; }
.site-footer .btn-small:hover { color: var(--ink); text-decoration: none; }

/* ---------- page head (inner pages) ---------- */
.page-head { padding-block: 64px 48px; border-bottom: 1px solid var(--rule); background: var(--surface); }
.page-head .wrap { display: grid; gap: 18px; }
.crumb { font-size: 0.95rem; color: var(--ink-2); margin: 0; }
.crumb a { color: var(--ink-2); }

/* ---------- home hero ---------- */
.hero { background: var(--surface); border-bottom: 1px solid var(--rule); }
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px; align-items: center; padding-block: 72px 64px;
}
.hero-copy { display: grid; gap: 22px; align-content: start; }
.hero h1 { font-size: clamp(2.2rem, 3.6vw, 3.1rem); font-stretch: 106%; letter-spacing: -0.02em; }
.hero h1 span { display: block; }
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 48px; }
}

/* the hierarchy sheet */
.sheet {
  margin: 0; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px;
  min-width: 0;
}
.sheet-head {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--rule);
  font-size: 0.85rem; color: var(--ink-2);
}
.sheet-head strong { color: var(--ink); font-weight: 600; }
.sheet-scroll { overflow-x: auto; }
.tree { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 520px; }
.tree th {
  text-align: left; font-weight: 600; font-size: 0.8rem; color: var(--ink-2);
  padding: 8px 9px; border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.tree td { white-space: nowrap; padding: 7px 9px; border-bottom: 1px solid var(--rule-2); vertical-align: middle; }
.tree tr:last-child td { border-bottom: 0; }
.tree .lvl { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 0.8rem; white-space: nowrap; width: 1%; }
.tree .tagcell { font-family: var(--f-data); font-size: 0.78rem; white-space: nowrap; }
.tree .desc { font-family: var(--f-data); font-size: 0.78rem; white-space: nowrap; position: relative; }
.tree .desc .i { display: inline-block; }
.tree .d1 .i { padding-left: 0; }
.tree .d2 .i { padding-left: 12px; }
.tree .d3 .i { padding-left: 24px; }
.tree .d4 .i { padding-left: 36px; }
.tree .d5 .i { padding-left: 48px; }
.tree .desc .i::before { content: "└ "; color: var(--ink-2); opacity: 0.55; }
.tree .d1 .i::before { content: ""; }
.tree tr.hl td { background: var(--rust-soft); }
.crit {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 3px;
  font-family: var(--f-data); font-size: 0.78rem; font-weight: 600; border: 1px solid var(--rule);
}
.crit-a { background: var(--rust); color: var(--on-rust); border-color: var(--rust); }
.crit-b { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.crit-c { color: var(--ink-2); }
.ev { font-size: 0.8rem; white-space: nowrap; padding: 2px 7px; border-radius: 999px; }
.ev-walked { background: var(--ok-soft); color: var(--ok); }
.ev-desk { border: 1px dashed var(--ink-2); color: var(--ink-2); }
.fm { font-family: var(--f-data); font-size: 0.78rem; color: var(--rust); white-space: nowrap; }
.sheet figcaption { padding: 10px 14px; border-top: 1px solid var(--rule); font-size: 0.85rem; color: var(--ink-2); }

/* ---------- sections ---------- */
.section { padding-block: 72px; }
.section + .section { border-top: 1px solid var(--rule); }
.section.alt { background: var(--surface); }
.spec { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 56px; }
.spec > * { min-width: 0; }
.spec-label { display: grid; gap: 14px; align-content: start; }
.spec-body { display: grid; gap: 28px; align-content: start; }
@media (max-width: 860px) {
  .spec { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .section { padding-block: 52px; }
}
.prose { display: grid; gap: 16px; }
.prose ul, .list { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; max-width: var(--measure); }
.prose li::marker, .list li::marker { color: var(--rust); }

/* service rows: one rule-separated row each, never cards */
.rows { display: grid; border-top: 1px solid var(--rule); }
.row {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px 32px;
  padding-block: 22px; border-bottom: 1px solid var(--rule);
}
.row > * { min-width: 0; }
.row h3 a { color: var(--ink); text-decoration: none; }
.row h3 a:hover { color: var(--rust); }
@media (max-width: 640px) { .row { grid-template-columns: minmax(0, 1fr); } }

/* sector pair */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--rule); background: var(--surface); }
.pair > div { padding: 28px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.pair > div + div { border-left: 1px solid var(--rule); }
@media (max-width: 760px) {
  .pair { grid-template-columns: minmax(0, 1fr); }
  .pair > div + div { border-left: 0; border-top: 1px solid var(--rule); }
}
.also { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 0; list-style: none; }
.also li { padding: 4px 12px; border: 1px solid var(--rule); border-radius: 999px; font-size: 0.92rem; color: var(--ink-2); background: var(--surface); }

/* case study */
.case { background: var(--surface); border: 1px solid var(--rule); display: grid; }
.case-head { padding: 24px 28px; border-bottom: 1px solid var(--rule); display: grid; gap: 8px; }
.case-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.92rem; color: var(--ink-2); margin: 0; }
.case-meta dt { display: inline; font-weight: 600; color: var(--ink); }
.case-meta dd { display: inline; margin: 0 0 0 4px; }
.case-meta div { display: inline; }
.case-body { padding: 24px 28px; display: grid; gap: 18px; }
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.figures > div { padding: 18px 28px; display: grid; gap: 4px; align-content: start; }
.figures > div + div { border-left: 1px solid var(--rule); }
.figures .n { font-family: var(--f-display); font-stretch: 115%; font-weight: 700; font-size: 1.7rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.figures .n small { font-size: 0.6em; font-weight: 600; color: var(--ink-2); }
.figures p { font-size: 0.92rem; color: var(--ink-2); }
@media (max-width: 720px) {
  .figures { grid-template-columns: minmax(0, 1fr); }
  .figures > div + div { border-left: 0; border-top: 1px solid var(--rule); }
  .case-head, .case-body, .figures > div { padding-inline: 20px; }
}

/* numbered process (a real sequence) */
.steps { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: step; border-top: 1px solid var(--rule); }
.steps > li {
  counter-increment: step; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 20px;
  padding-block: 26px; border-bottom: 1px solid var(--rule);
}
.steps > li::before {
  content: counter(step); grid-row: span 3;
  font-family: var(--f-display); font-stretch: 120%; font-weight: 700; font-size: 1.9rem; line-height: 1; color: var(--rust);
  font-variant-numeric: tabular-nums;
}
.steps > li > * { grid-column: 2; }
.steps h3 { margin-bottom: 6px; }
.steps .out { font-size: 0.94rem; color: var(--ink-2); margin-top: 8px; }
.steps .out strong { color: var(--ink); font-weight: 600; }

/* tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--surface); }
.data { width: 100%; border-collapse: collapse; font-size: 0.96rem; min-width: 560px; }
.data th, .data td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.data thead th { font-size: 0.88rem; color: var(--ink-2); font-weight: 600; border-bottom: 1px solid var(--rule); background: var(--paper); }
.data tbody th { font-weight: 600; white-space: nowrap; }
.data tr:last-child > * { border-bottom: 0; }

/* FAQ */
.faq { display: grid; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; padding: 18px 32px 18px 0; font-family: var(--f-display); font-stretch: 105%;
  font-weight: 650; font-size: 1.1rem; list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-size: 1.4rem; color: var(--rust); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 20px; color: var(--ink-2); }

/* closing call to action */
.closer { background: var(--steel); color: var(--on-steel); }
.closer .wrap { padding-block: 64px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px 56px; align-items: end; }
.closer h2 { color: var(--on-steel); }
.closer p { color: var(--on-steel); opacity: 0.85; }
.closer .btn-quiet { color: var(--on-steel); border-color: color-mix(in srgb, var(--on-steel) 35%, transparent); }
@media (max-width: 820px) { .closer .wrap { grid-template-columns: minmax(0, 1fr); } }

/* standards strip */
.std { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.std li { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--rule); }
.std li { display: grid; gap: 2px; }
.std b { font-family: var(--f-display); font-stretch: 110%; font-weight: 650; font-size: 1.02rem; }
.std span { font-size: 0.88rem; color: var(--ink-2); }

/* contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.form { display: grid; gap: 18px; background: var(--surface); border: 1px solid var(--rule); padding: 28px; }
@media (max-width: 520px) { .form { padding: 20px; } }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 0.95rem; }
.field .hint { font-size: 0.88rem; color: var(--ink-2); }
.field input, .field textarea {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 4px; padding: 11px 12px; width: 100%;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--rust); outline-offset: 0; border-color: var(--rust); }
.field textarea { min-height: 170px; resize: vertical; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 560px) { .two { grid-template-columns: minmax(0, 1fr); } }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 0.9rem; color: var(--ink-2); }
.form-status { font-size: 0.95rem; padding: 10px 12px; border-left: 3px solid var(--rust); background: var(--rust-soft); }
.office { display: grid; gap: 18px; }
.office address { font-style: normal; line-height: 1.7; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* footer */
.site-footer { background: var(--surface); border-top: 1px solid var(--rule); font-size: 0.95rem; }
.site-footer .wrap { padding-block: 44px 36px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 32px; }
.site-footer h2 { font-size: 0.95rem; font-stretch: 100%; font-weight: 650; margin-bottom: 10px; letter-spacing: 0; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { color: var(--rust); text-decoration: underline; }
.site-footer address { font-style: normal; color: var(--ink-2); }
.footer-base { border-top: 1px solid var(--rule-2); }
.footer-base .wrap { padding-block: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; grid-template-columns: none; color: var(--ink-2); font-size: 0.88rem; }
@media (max-width: 780px) { .site-footer .wrap { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
@media print { .site-header, .closer, .menu-toggle { display: none; } body { background: #fff; } }
@media (max-width: 560px) {
  .tree { min-width: 460px; }
  .tree .lvl, .tree th:first-child { display: none; }
  .tree .d2 .i { padding-left: 10px; } .tree .d3 .i { padding-left: 20px; }
  .tree .d4 .i { padding-left: 30px; } .tree .d5 .i { padding-left: 40px; }
}

/* audit fixes */
.tree tr.hl .fm { color: var(--rust-strong); }
.sheet-scroll:focus-visible, .table-wrap:focus-visible { outline: 3px solid var(--rust); outline-offset: 2px; }
.jump { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 0; list-style: none; }
.jump a { display: inline-block; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface);
  color: var(--ink); text-decoration: none; font-size: 0.92rem; }
.jump a:hover { border-color: var(--rust); color: var(--rust); }
.section[id] { scroll-margin-top: 84px; }
.form-status.ok { border-left-color: var(--ok); background: var(--ok-soft); color: var(--ink); }
.notfound { padding-block: 96px; display: grid; gap: 20px; }
.form-status:focus { outline: none; }

/* nameplate figure (Services) */
.plate-fig { margin: 8px 0 0; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 20px 32px; align-items: start; }
.plate-fig > * { min-width: 0; }
.plate {
  position: relative; padding: 22px 24px 20px; border-radius: 6px;
  background: linear-gradient(135deg, var(--plate-hi), var(--plate) 55%, var(--plate-lo));
  border: 1px solid var(--plate-edge); color: var(--plate-ink);
  font-family: var(--f-data); font-size: 0.8rem; letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 var(--plate-hi);
}
.rivet { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--plate-lo); border: 1px solid var(--plate-edge); }
.rivet.tl { top: 8px; left: 8px; } .rivet.tr { top: 8px; right: 8px; } .rivet.bl { bottom: 8px; left: 8px; } .rivet.br { bottom: 8px; right: 8px; }
.plate-maker { font-weight: 600; font-size: 0.95rem; letter-spacing: 0.06em; text-align: center; display: flex; justify-content: center; align-items: center; gap: 6px; }
.plate-sub { text-align: center; font-size: 0.72rem; margin: 4px 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--plate-edge); }
.plate-grid { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--plate-edge); border-left: 1px solid var(--plate-edge); }
.plate-grid > div { padding: 5px 7px; border-right: 1px solid var(--plate-edge); border-bottom: 1px solid var(--plate-edge); min-width: 0; }
.plate-grid > div.wide { grid-column: span 3; display: flex; gap: 10px; align-items: baseline; }
.plate-grid dt { font-size: 0.66rem; opacity: 0.75; }
.plate-grid > div.wide.stack { display: block; }
.plate-grid > div.stack dd { gap: 4px 12px; margin-top: 2px; }
.plate-grid .nw { white-space: nowrap; }
.plate-grid dd { margin: 0; font-weight: 600; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pin {
  display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--rust); color: var(--on-rust); font-family: var(--f-body); font-size: 0.68rem; font-weight: 700; letter-spacing: 0;
}
.plate-map { list-style: none; margin: 0; padding: 0; counter-reset: pin; display: grid; gap: 10px; }
.plate-map li { counter-increment: pin; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 10px; font-size: 0.95rem; }
.plate-map li::before {
  content: counter(pin); grid-row: span 2; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--rust); color: var(--on-rust); font-size: 0.72rem; font-weight: 700; margin-top: 2px;
}
.plate-map b { font-weight: 600; }
.plate-map span { color: var(--ink-2); }
.plate-fig figcaption { grid-column: 1 / -1; font-size: 0.88rem; color: var(--ink-2); }
@media (max-width: 760px) { .plate-fig { grid-template-columns: minmax(0, 1fr); } .plate { max-width: 360px; } }

/* health check findings table */
.findings { min-width: 0; }
.findings td { white-space: normal; vertical-align: top; }
.findings td:first-child { white-space: nowrap; font-weight: 600; }
.findings .num { font-family: var(--f-data); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.findings th:nth-child(2) { text-align: right; }