/* Omni AssuranceView QC — lab-facing site
   Marble / navy / antique gold / green / bronze.

   Measured contrast against the grounds actually used (WCAG 2.1):

     navy   #132A47 on marble #F7F6F2   13.39:1   body text, headings
     ink    #15202E on marble           15.20:1   long-form text
     green  #1C6B47 on marble            5.99:1   pass indicators
     bronze #8A6420 on marble            4.95:1   eyebrows, small labels
     gold   #C9A227 on marble            2.24:1   FAILS — never sets type here
     gold   #C9A227 on navy  #132A47      5.99:1   gold type, on navy only
     navy   #132A47 on gold  #C9A227      5.99:1   primary button label
     white            on green #1C6B47    6.47:1
     white            on navy             14.48:1

   The one rule that governs the whole sheet: antique gold carries type only
   where navy is behind it. On marble, gold is reserved for rules, borders and
   button fills, and bronze takes the small type instead. The logo is exempt --
   it is artwork, not text -- and it now ships with a real alpha channel, so it
   sits on navy without the white plate the opaque original forced. */

:root {
  --marble: #F7F6F2;
  --marble-2: #EFEDE7;
  --marble-3: #E6E3DB;
  --line: #DEDAD0;
  /* Reserved for bands that carry the logo. Must stay exactly #FFFFFF. */
  --plate: #FFFFFF;

  --navy: #132A47;
  --navy-deep: #0D1E33;
  --navy-line: #2A4160;
  --navy-muted: #9DAEC4;

  --gold: #C9A227;
  --gold-light: #E3C766;
  --gold-faint: rgba(201, 162, 39, .28);

  --bronze: #8A6420;
  --bronze-deep: #6B4E18;

  --green: #1C6B47;
  --green-light: #5FD3A0;
  --green-wash: #EDF5F0;

  --flag: #A8480A;
  --flag-wash: #FCF3EC;

  --ink: #15202E;
  --ink-2: #2B3A4D;
  --muted: #55606D;

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

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

/* Marble ground. Anisotropic turbulence gives the veining its direction; the
   alpha row of the colour matrix is what keeps it faint. It is deliberately
   near the threshold of visibility -- this sits behind dense numeric tables,
   and texture that competes with a digit has failed at its job. */
body {
  margin: 0;
  background-color: var(--marble);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.0018' numOctaves='5' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.37 0 0 0 0 0.36 0 0 0 0 0.33 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23v)'/%3E%3C/svg%3E");
  background-attachment: fixed;
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--bronze); }
a:hover { color: var(--bronze-deep); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: #fff; padding: 12px 16px; z-index: 50; border: 1px solid var(--line); }

.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 40px; }
@media (max-width: 720px) { .wrap { padding-inline: 16px; } }

/* --- header: white plate, gold hairline ---
   Pure #FFFFFF, not marble. The logo ships on an opaque white background, so
   the band carrying it has to match that white exactly; marble is 5 points off
   and that is enough to render the mark as a pale rectangle. The gold rule
   underneath is what separates the plate from the marble ground, and navy
   enters as type rather than as the band itself. */
.topbar { background: var(--plate); border-bottom: 2px solid var(--gold); }
.topbar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding-block: 15px; }
.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.brand img { width: 258px; max-width: 100%; height: auto; display: block; }
.nav { flex: 999 1 300px; min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 24px; }
/* .nav a would otherwise out-specify .btn (0,1,1 beats 0,1,0) and repaint the
   button label, which is unreadable on the gold fill. */
.nav a:not(.btn) { font-size: 13.5px; text-decoration: none; color: var(--navy); }
.nav a:not(.btn):hover { color: var(--bronze); }
.btn {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .03em; text-decoration: none;
  color: var(--navy); background: var(--gold); border-radius: 3px; padding: 11px 18px;
  min-height: 44px; display: inline-flex; align-items: center; font-weight: 500;
  border: 1px solid var(--gold);
}
.btn:hover { background: var(--gold-light); color: var(--navy-deep); border-color: var(--gold-light); }
.btn-ghost { color: var(--navy); background: transparent; border: 1px solid var(--bronze); }
.btn-ghost:hover { background: var(--marble-2); color: var(--navy-deep); border-color: var(--bronze-deep); }

/* --- section furniture --- */
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); }
h1, h2 { font-weight: 500; letter-spacing: -.012em; text-wrap: balance; margin: 0; color: var(--navy); }
h1 { font-size: clamp(30px, 4.4vw, 45px); line-height: 1.12; }
h2 { font-size: clamp(23px, 3vw, 29px); line-height: 1.25; }
.lede { margin: 0; font-size: 16.5px; line-height: 1.62; color: var(--ink-2); max-width: 58ch; }

/* --- hero --- */
.hero { border-bottom: 1px solid var(--line); background: rgba(239, 237, 231, .72); }
.hero .wrap { display: flex; flex-wrap: wrap; gap: 52px; padding-block: 64px 58px; }
.hero-copy { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- recorded run card --- */
.runcard { flex: 1 1 400px; min-width: 0; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 4px; padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; }
.runcard h3 { margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.verdict { background: var(--marble); border: 1px solid var(--line); border-radius: 3px; padding: 13px 15px; display: flex; flex-direction: column; gap: 6px; }
.verdict.ok { border-left: 3px solid var(--green); background: var(--green-wash); }
.verdict.no { border-left: 3px solid var(--flag); background: var(--flag-wash); }
.verdict-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.verdict-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; }
.verdict.ok .verdict-tag { color: var(--green); }
.verdict.no .verdict-tag { color: var(--flag); }
.verdict-r2 { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.verdict-big { font-family: var(--mono); font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--navy); }
.verdict-note { font-size: 12px; color: var(--muted); line-height: 1.5; }
.runcard-foot { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; border-top: 1px solid var(--line); padding-top: 13px; }

/* --- evidence band: deep navy, gold eyebrow, green for what passed --- */
.evidence { background: var(--navy-deep); color: #fff; border-block: 2px solid var(--gold); }
.evidence .eyebrow { color: var(--gold-light); }
.evidence h2 { color: #fff; }
.evidence .wrap { padding-block: 46px; display: flex; flex-direction: column; gap: 24px; }
.evidence-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px; }
.evidence-when { font-family: var(--mono); font-size: 11.5px; color: var(--navy-muted); }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 860px) { .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .metrics { grid-template-columns: minmax(0, 1fr); } }
.metric { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.metric b { font-family: var(--mono); font-size: 32px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--green-light); }
.metric span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-muted); }
.metric small { font-size: 12.5px; color: var(--navy-muted); line-height: 1.5; }
.evidence-foot { border-top: 1px solid var(--navy-line); padding-top: 18px; font-size: 13.5px; color: var(--navy-muted); line-height: 1.65; max-width: 80ch; }
.evidence-foot code { font-family: var(--mono); color: var(--gold-light); }

/* --- routines --- */
.section { padding-block: 60px; }
.section-head { display: flex; flex-direction: column; gap: 10px; max-width: 70ch; margin-bottom: 28px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 820px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
.card { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--bronze); border-radius: 4px; padding: 24px 26px; display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.card-title { display: flex; align-items: baseline; gap: 11px; }
.card-id { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--bronze); letter-spacing: .08em; }
.card-name { font-size: 17px; font-weight: 500; color: var(--navy); }
.card p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.62; }
.card-gate { font-family: var(--mono); font-size: 11.5px; color: var(--muted); line-height: 1.5; border-top: 1px solid var(--line); padding-top: 10px; }

/* --- refusals --- */
.refusals { background: rgba(239, 237, 231, .72); border-block: 1px solid var(--line); }
.refusals .wrap { display: flex; flex-wrap: wrap; gap: 46px; padding-block: 60px; }
.refusals-intro { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 13px; }
.refusals-list { flex: 999 1 420px; min-width: 0; }
.refusal { display: flex; gap: 13px; align-items: flex-start; padding-block: 13px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.refusal:last-child { border-bottom: none; }
.refusal svg { flex: none; margin-top: 3px; }

/* --- steps --- */
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .grid-4 { grid-template-columns: minmax(0, 1fr); } }
.step { background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--gold-faint); border-radius: 4px; padding: 20px 22px; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.step-n { font-family: var(--mono); font-size: 11px; color: var(--bronze); letter-spacing: .1em; }
.step b { font-size: 15.5px; font-weight: 500; line-height: 1.3; color: var(--navy); }
.step small { font-size: 12.5px; color: var(--muted); line-height: 1.55; }

.contact { background: var(--navy); border: 1px solid var(--navy); border-left: 3px solid var(--gold); border-radius: 4px; padding: 26px 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 28px; }
.contact p { flex: 999 1 380px; min-width: 0; margin: 0; font-size: 15px; color: #E8EDF4; line-height: 1.6; }
.contact .btn-ghost { color: #E8EDF4; border-color: var(--navy-muted); }
.contact .btn-ghost:hover { background: var(--navy-deep); color: var(--gold-light); border-color: var(--gold); }

/* --- footer: white plate, matching the header it bookends ---
   White for the same reason the header is: the logo sits here too. */
footer { background: var(--plate); border-top: 2px solid var(--gold); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; padding-block: 38px; }
.foot-brand { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.foot-brand img { width: 230px; max-width: 100%; height: auto; display: block; }
.foot-brand p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.foot-legal { flex: 999 1 380px; min-width: 0; font-size: 12.5px; color: var(--muted); line-height: 1.65; }
.foot-legal b { color: var(--navy); font-weight: 600; }
.foot-legal code { font-family: var(--mono); color: var(--bronze); }