/* Steel Cap Digital - style.v15.0.1.css
   Light reading bands on the v13.1 system (grey paper, white plates, hairline
   rules, numbered registers, spec tables) inside the dark concrete and circuit
   chrome. v14 adds the comparison table, the sample work log, the price-change
   chain, Q&A lists, the enquiry form tick boxes and, in v14.1.0, the free site
   check: a rating-plate report with a test tag on every finding. */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Big Shoulders Display';
  src: url('/assets/fonts/big-shoulders-display-latin-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Big Shoulders Display';
  src: url('/assets/fonts/big-shoulders-display-latin-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --paper: #e9eae4;
  --plate: #ffffff;
  --panel: #e6e7e2;
  --panel-2: #dcded7;
  --ink: #14161a;
  --ink-2: #4c525a;
  --rule: #d8d9d3;
  --rule-strong: #b9bbb4;
  --flag: #d93b0b;
  --flag-deep: #a82c05;

  --display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --measure: 66ch;
  --gutter: 1.5rem;
  --shell: 1120px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  border-top: 4px solid var(--flag);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

/* ---------- Type ---------- */
h1, h2, h3, h4 { margin: 0 0 .6em; font-weight: 700; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
h1, h2 {
  font-family: var(--display);
  letter-spacing: -0.005em;
  line-height: .96;
}
h1 { font-weight: 800; font-size: clamp(2.6rem, 5.6vw, 4.15rem); }
h2 { font-size: clamp(1.95rem, 4.2vw, 3rem); }
h3 { font-size: 1.2rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.005em; }
h4 { font-size: 1rem; font-weight: 600; }
p { margin: 0 0 1.15rem; max-width: var(--measure); }
ul, ol { max-width: var(--measure); padding-left: 1.15rem; }
li { margin-bottom: .5rem; }
strong { font-weight: 600; }
.lede { font-size: clamp(1.1rem, 1.9vw, 1.3rem); line-height: 1.5; color: var(--ink-2); max-width: 62ch; }

a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--flag); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--flag-deep); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .75rem 1rem; text-decoration: none;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ---------- Shell and bands ---------- */
.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); position: relative; }
@media (min-width: 1260px) {
  .band > .shell::before,
  .hero > .shell::before {
    content: ""; position: absolute; left: -2px; top: -1.5rem; bottom: -1.5rem;
    width: 1px; background: var(--rule-strong);
  }
  .band > .shell::after,
  .hero > .shell::after {
    content: ""; position: absolute; left: -5px; top: -1.5rem;
    width: 7px; height: 7px; background: var(--flag);
  }
  .band--ink > .shell::before { background: #3a3f45; }
}

.band { padding: clamp(3rem, 7vw, 5.5rem) 0; background: var(--plate); border-top: 1px solid var(--rule); }
.band:first-of-type { border-top: 0; }
.band--panel { background: var(--paper); border-top-color: var(--rule-strong); border-bottom: 1px solid var(--rule-strong); }
.band--ink { background: var(--ink); color: #f4f4f2; border-top: 0; }
.band--ink h2 { color: #fff; }
.band--ink p, .band--ink .lede { color: #cfd2d4; }
.band--ink a { color: #fff; }
.band--tight { padding: clamp(2.25rem, 4vw, 3.25rem) 0; }

.head { max-width: 62ch; margin-bottom: 2.25rem; }
.head p { color: var(--ink-2); }
.head > h2:first-child::before,
.band > .shell > h2:first-child::before {
  content: ""; display: block; width: 48px; height: 4px;
  background: var(--flag); margin-bottom: 1.1rem;
}

/* ---------- Header / nav ---------- */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: var(--plate);
  border-bottom: 1px solid var(--rule);
}
.site-head-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 68px;
}
.wordmark {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-weight: 800;
  font-size: 1.4rem; line-height: 1; letter-spacing: .01em;
  text-decoration: none; color: var(--ink);
}
.wordmark-mark {
  display: inline-block; width: 30px; height: 25px; flex: none; background: var(--ink);
  -webkit-mask: url('/assets/logo-icon.v11.2.12.png') center / contain no-repeat;
  mask: url('/assets/logo-icon.v11.2.12.png') center / contain no-repeat;
}
.wordmark:hover { color: var(--ink); }

.head-right { display: flex; align-items: center; gap: 1.6rem; }
.nav-list { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; max-width: none; }
.nav-list a {
  text-decoration: none; font-size: .95rem; color: var(--ink-2);
  padding: .35rem 0; border-bottom: 2px solid transparent;
}
.nav-list a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.nav-list a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--flag); }
.nav-list li { margin: 0; }
.site-head .head-cta { padding: .55rem 1rem; font-size: .92rem; }

.nav-toggle {
  display: none; align-items: center; gap: .5rem;
  background: none; border: 1px solid var(--rule-strong); border-radius: 2px;
  font: inherit; font-size: .9rem; color: var(--ink); padding: .5rem .8rem; cursor: pointer;
}
.nav-panel { display: none; }

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .site-nav, .site-head .head-cta { display: none; }
  .nav-panel[data-open="true"] { display: block; border-top: 1px solid var(--rule); background: var(--plate); }
  .nav-panel .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 0 1rem; }
  .nav-panel .nav-list a { display: block; padding: .8rem 0; border-bottom: 1px solid var(--rule); font-size: 1.05rem; }
  .nav-panel .nav-list a[aria-current="page"] { border-bottom-color: var(--flag); }
  .nav-panel .nav-list .nav-cta a { color: var(--flag-deep); font-weight: 600; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; font: inherit; font-weight: 600; font-size: 1rem;
  padding: .85rem 1.4rem; border-radius: 2px; text-decoration: none; cursor: pointer;
  border: 2px solid var(--flag); background: var(--flag); color: #fff;
}
.btn:hover { background: var(--flag-deep); border-color: var(--flag-deep); color: #fff; }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--line:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.band--ink .btn--line { color: #fff; border-color: #fff; }
.band--ink .btn--line:hover { background: #fff; color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.75rem 0 0; }

/* ---------- Hero ---------- */
.hero { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem); background: var(--plate); }
.hero-rule { width: 72px; height: 5px; background: var(--flag); margin-bottom: 1.75rem; }
.hero h1 { max-width: 24ch; margin-bottom: 1.5rem; }
.hero h1 span { display: block; }
.hero .lede { max-width: 58ch; }
.hero-facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
  margin-top: 2.75rem; padding-top: 1.25rem; border-top: 1px solid var(--rule);
  font-size: .95rem; color: var(--ink-2); max-width: 900px;
}
.hero-facts p { margin: 0; max-width: none; }
@media (max-width: 700px) { .hero-facts { grid-template-columns: 1fr; gap: .5rem; } }

.hero--cover h1 { font-size: clamp(2.4rem, 3.6vw, 3.25rem); max-width: none; }
.hero--cover .hero-grid { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
@media (max-width: 1000px) { .hero--cover .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

.index { border-top: 2px solid var(--ink); padding-top: .75rem; }
.index h2 {
  font-family: var(--body); font-size: .9rem; font-weight: 600; line-height: 1.4;
  letter-spacing: .01em; color: var(--ink-2); margin-bottom: .5rem;
}
.index ol { list-style: none; margin: 0; padding: 0; max-width: none; }
.index li {
  display: grid; grid-template-columns: 1.9rem 1fr; align-items: baseline;
  border-top: 1px solid var(--rule); padding: .5rem 0; margin: 0; font-size: .96rem;
}
.index li span { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--flag); }
.index li a { text-decoration: none; border-bottom: 1px solid transparent; }
.index li a:hover { border-bottom-color: var(--flag); color: var(--flag-deep); }
.index li:last-child { border-bottom: 1px solid var(--rule); }

/* ---------- Register (numbered, hairline) ---------- */
.reg { margin: 0; padding: 0; list-style: none; max-width: none; border-bottom: 1px solid var(--rule); }
.reg > li {
  display: grid; grid-template-columns: 4.25rem 1fr; gap: 0 1rem;
  border-top: 1px solid var(--rule); padding: 1.6rem 0; margin: 0;
  scroll-margin-top: 90px;
}
.reg-num {
  font-family: var(--display); font-weight: 800; font-size: 2.35rem; line-height: .9;
  color: var(--flag); padding-top: .1rem;
}
.reg-body h3 { margin-bottom: .45rem; }
.reg-body p { color: var(--ink-2); margin-bottom: 0; }
.reg-body p + p { margin-top: .8rem; }
.reg-body .promise { color: var(--ink); font-weight: 600; }
.reg-body .proof { border-left: 3px solid var(--flag); padding-left: .9rem; color: var(--ink); }
@media (max-width: 620px) {
  .reg > li { grid-template-columns: 1fr; gap: .35rem; }
  .reg-num { font-size: 1.6rem; }
}

/* ---------- Spec table (term / description) ---------- */
.spec { border-bottom: 1px solid var(--rule); }
.spec-row {
  display: grid; grid-template-columns: 15rem 1fr; gap: 0 2rem;
  border-top: 1px solid var(--rule); padding: 1.25rem 0;
}
.spec-term { font-weight: 600; }
.spec-def { color: var(--ink-2); }
.spec-def p { margin: 0; }
.spec-def p + p { margin-top: .8rem; }
@media (max-width: 720px) {
  .spec-row { grid-template-columns: 1fr; gap: .3rem; }
}

/* ---------- Flagged list ---------- */
.flags { list-style: none; padding: 0; max-width: var(--measure); }
.flags li { position: relative; padding-left: 1.5rem; }
.flags li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; background: var(--flag);
}

/* ---------- Two-column prose ---------- */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 3.5rem; }
@media (max-width: 820px) { .cols { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- Entries (work index, live tools) ---------- */
.entry { border-top: 1px solid var(--rule); padding: 2rem 0; }
.entry:last-of-type { border-bottom: 1px solid var(--rule); }
.entry h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1; margin-bottom: .5rem; }
.entry .meta { font-size: .9rem; color: var(--ink-2); margin-bottom: .9rem; }

/* ---------- Figures ---------- */
.figures {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem 2rem;
  border-top: 2px solid var(--ink); padding-top: 1.25rem; margin: 2.5rem 0 2rem;
}
.figures div { border-left: 3px solid var(--flag); padding-left: 1rem; }
.figures .n {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: clamp(3rem, 6vw, 4.75rem); line-height: .85; letter-spacing: -0.01em; margin-bottom: .55rem;
}
.figures p { margin: 0; max-width: none; font-size: .95rem; color: var(--ink-2); }
.shell > .figures:first-child { margin-top: 0; }
@media (max-width: 820px) { .figures { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .figures { grid-template-columns: 1fr; } }

/* ---------- Comparison table ---------- */
.compare { width: 100%; border-collapse: collapse; margin: .5rem 0 1.5rem; font-size: 1rem; }
.compare caption { text-align: left; font-size: .9rem; color: var(--ink-2); padding-bottom: .75rem; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 1rem 1.25rem 1rem 0; border-top: 1px solid var(--rule); }
.compare thead th { border-top: 0; border-bottom: 2px solid var(--ink); padding-bottom: .7rem; font-size: .92rem; font-weight: 600; color: var(--ink-2); }
.compare thead th.us { color: var(--ink); }
.compare tbody th { font-weight: 600; width: 24%; }
.compare td { color: var(--ink-2); width: 38%; }
.compare td.us { color: var(--ink); font-weight: 600; border-left: 3px solid var(--flag); padding-left: 1rem; }
.compare thead th.us { border-left: 3px solid var(--flag); padding-left: 1rem; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
@media (max-width: 720px) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare tr { border-top: 1px solid var(--rule); padding: 1rem 0; }
  .compare tbody th, .compare td { border: 0; padding: 0; }
  .compare tbody th { margin-bottom: .5rem; width: auto; }
  .compare td { width: auto; }
  .compare td { padding: .2rem 0 .2rem 1rem; border-left: 3px solid var(--rule-strong); margin-top: .4rem; }
  .compare td.us { border-left-color: var(--flag); padding-left: 1rem; }
  .compare td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--ink); }
  .compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
  .compare tbody tr:last-child { border-bottom: 1px solid var(--rule); }
}

/* ---------- Sample work log ---------- */
.worklog { width: 100%; border-collapse: collapse; background: var(--plate); border: 1px solid var(--rule-strong); font-size: .97rem; font-variant-numeric: tabular-nums; }
.worklog caption { caption-side: bottom; text-align: left; font-size: .88rem; color: var(--ink-2); padding-top: .7rem; }
.worklog th, .worklog td { text-align: left; vertical-align: top; padding: .85rem 1rem; border-top: 1px solid var(--rule); }
.worklog thead th { border-top: 0; border-bottom: 2px solid var(--ink); font-size: .88rem; font-weight: 600; color: var(--ink-2); background: var(--plate); }
.worklog td.date { white-space: nowrap; color: var(--ink-2); width: 6.5rem; }
.worklog td.line { white-space: nowrap; width: 8rem; font-weight: 600; }
.worklog td.line.free { color: var(--flag-deep); }
@media (max-width: 640px) {
  .worklog thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .worklog, .worklog tbody, .worklog tr, .worklog td { display: block; width: 100%; }
  .worklog tr { border-top: 1px solid var(--rule); padding: .75rem 1rem; }
  .worklog tbody tr:first-child { border-top: 0; }
  .worklog td { border: 0; padding: 0; width: auto; }
  .worklog td.date, .worklog td.line { display: inline-block; width: auto; font-size: .88rem; }
  .worklog td.date { margin-right: .75rem; }
  .worklog td.work { margin-top: .25rem; }
  .worklog caption { padding-left: 0; }
}

/* ---------- Chain (a real sequence, left to right) ---------- */
.chain { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; counter-reset: chain; }
.chain li { position: relative; margin: 0; padding: 1.4rem 1.1rem 0 0; border-top: 2px solid var(--ink); font-size: .95rem; color: var(--ink-2); }
.chain li::before {
  counter-increment: chain; content: counter(chain);
  position: absolute; top: -.95rem; left: 0;
  background: var(--plate); color: var(--flag); padding-right: .5rem;
  font-family: var(--display); font-weight: 800; font-size: 1.6rem; line-height: 1;
}
.band--panel .chain li::before { background: var(--paper); }
.chain li strong { display: block; color: var(--ink); margin-bottom: .2rem; }
@media (max-width: 900px) {
  .chain { grid-template-columns: 1fr; }
  .chain li { border-top: 0; border-left: 2px solid var(--ink); padding: 0 0 1.25rem 1.6rem; }
  .chain li::before { top: 0; left: -.7rem; padding: 0 0 .2rem; font-size: 1.35rem; }
  .chain li:last-child { padding-bottom: 0; }
}

/* ---------- Q&A ---------- */
.qa { max-width: 72ch; border-bottom: 1px solid var(--rule); }
.qa-item { border-top: 1px solid var(--rule); padding: 1.4rem 0; }
.qa-item h2 { font-family: var(--body); font-size: 1.15rem; font-weight: 600; line-height: 1.35; margin-bottom: .45rem; letter-spacing: -0.005em; }
.qa-item h2::before { display: none; }
.qa-item p { color: var(--ink-2); margin: 0; }

/* ---------- Quote ---------- */
.quote { margin: 2rem 0; padding: 0 0 0 1.25rem; border-left: 3px solid var(--flag); max-width: 60ch; }
.quote p { font-size: 1.2rem; line-height: 1.5; color: var(--ink); margin-bottom: .5rem; }
.quote footer { font-size: .92rem; color: var(--ink-2); }

/* ---------- Case study ---------- */
.prose { max-width: var(--measure); }
.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 2rem; }
.prose ul { padding-left: 1.15rem; }
.note { font-size: .9rem; color: var(--ink-2); }

/* ---------- Form ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; max-width: 640px; }
.field { display: flex; flex-direction: column; }
.field--wide { grid-column: 1 / -1; }
label, .legend { font-size: .92rem; font-weight: 600; margin-bottom: .35rem; }
input, select, textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--plate);
  border: 1px solid var(--rule-strong); border-radius: 2px; padding: .7rem .75rem; width: 100%;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--flag); }
textarea { min-height: 140px; resize: vertical; }
fieldset.checks { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.checks legend { padding: 0; margin-bottom: .5rem; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem 1.25rem; }
.check { display: flex; align-items: flex-start; gap: .55rem; font-weight: 400; font-size: .97rem; margin: 0; cursor: pointer; }
.check input { width: 1.1rem; height: 1.1rem; margin: .22rem 0 0; padding: 0; flex: none; accent-color: var(--flag); }
.hint { font-size: .85rem; color: var(--ink-2); margin: .3rem 0 0; }
.field-error { font-size: .85rem; color: var(--flag-deep); margin-top: .3rem; display: none; }
.field-error.is-visible { display: block; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--flag-deep); }
.form-note { font-size: .9rem; color: var(--ink-2); margin-top: 1rem; }
.form-alert { display: none; border-left: 4px solid var(--flag); background: var(--panel); padding: 1rem; margin-top: 1rem; }
.form-alert.show { display: block; }
.form-hidden { display: none; }
.form-success { display: none; border-left: 4px solid var(--ink); background: var(--panel); padding: 1.5rem; }
.form-success.show { display: block; }
.hp { position: absolute; left: -9999px; }
@media (max-width: 620px) { .form-grid, .check-grid { grid-template-columns: 1fr; } }

/* ---------- Contact details ---------- */
.contact-list { list-style: none; padding: 0; margin: 0 0 2rem; }
.contact-list li { border-top: 1px solid var(--rule); padding: .9rem 0; margin: 0; }
.contact-list li:last-child { border-bottom: 1px solid var(--rule); }
.contact-list .k { font-size: .88rem; color: var(--ink-2); display: block; }
.contact-list .v { font-size: 1.15rem; font-weight: 600; }

/* ---------- Footer ---------- */
.site-foot { background: var(--plate); border-top: 4px solid var(--ink); padding: 3rem 0 2rem; font-size: .95rem; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
.site-foot h4 { font-size: .9rem; margin-bottom: .75rem; }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin-bottom: .45rem; }
.site-foot a { text-decoration: none; color: var(--ink-2); }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }
.foot-bottom {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .875rem; color: var(--ink-2);
}
.foot-bottom p { margin: 0; max-width: none; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; gap: 1.75rem; } }

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .8rem; }
.mt-2 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.narrow { max-width: var(--measure); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Dark chrome (v14.0.2) ----------
   Header, page heroes, ink bands and footer go back to the black, concrete
   and circuit-trace feel of the earlier site. Reading bands stay light. */
:root {
  --black: #111214;
  --line-dark: #2c3036;
  --text-dark: #d6d9dc;
  --muted-dark: #a3a8ae;
  --flag-bright: #ff5a1f;
}

.site-head { background: var(--black); border-bottom-color: var(--line-dark); }
.wordmark, .wordmark:hover { color: #fff; }
.wordmark-mark { background: #fff; }
.wordmark-accent { color: #e8440a; }
.nav-list a { color: var(--muted-dark); }
.nav-list a:hover { color: #fff; border-bottom-color: #5a6068; }
.nav-list a[aria-current="page"] { color: #fff; border-bottom-color: var(--flag-bright); }
.nav-toggle { border-color: #4a4f56; color: #fff; }
@media (max-width: 960px) {
  .nav-panel[data-open="true"] { background: var(--black); border-top-color: var(--line-dark); }
  .nav-panel .nav-list a { border-bottom-color: var(--line-dark); }
  .nav-panel .nav-list a[aria-current="page"] { border-bottom-color: var(--flag-bright); }
  .nav-panel .nav-list .nav-cta a { color: var(--flag-bright); }
}

.hero, .band--ink {
  background-color: var(--black);
  background-image: url('/assets/circuit-strong.v14.0.2.svg'), url('/assets/circuit-animated.v14.0.3.svg'), url('/assets/concrete-dark.v14.0.2.webp');
  background-size: 600px 600px, 600px 600px, cover;
  background-position: 0 0, 0 0, center;
  background-repeat: repeat, repeat, no-repeat;
  color: var(--text-dark);
}
/* The orange current in the circuit layer runs only when the device allows motion. */
@media (prefers-reduced-motion: reduce) {
  .hero, .band--ink {
    background-image: url('/assets/circuit-strong.v14.0.2.svg'), url('/assets/concrete-dark.v14.0.2.webp');
    background-size: 600px 600px, cover;
    background-position: 0 0, center;
    background-repeat: repeat, no-repeat;
  }
}
.hero { border-bottom: 1px solid var(--line-dark); }
.hero h1 { color: #fff; }
.hero .lede { color: var(--text-dark); }
.hero a:not(.btn) { color: #fff; }
.hero .btn--line, .band--ink .btn--line { background: transparent; color: #fff; border-color: #fff; }
.hero .btn--line:hover, .band--ink .btn--line:hover { background: #fff; color: var(--ink); border-color: #fff; }
.hero-facts { border-top-color: var(--line-dark); color: var(--muted-dark); }
.index { border-top-color: #fff; }
.index h2 { color: var(--muted-dark); }
.index li { border-top-color: var(--line-dark); }
.index li:last-child { border-bottom-color: var(--line-dark); }
.index li span { color: var(--flag-bright); font-size: 1.2rem; }
.index li a { color: #fff; }
.index li a:hover { color: var(--flag-bright); border-bottom-color: var(--flag-bright); }
@media (min-width: 1260px) {
  .hero > .shell::before, .band--ink > .shell::before { background: #3a3f45; }
}

.site-foot {
  background-color: var(--black);
  background-image: url('/assets/concrete-dark.v14.0.2.webp');
  background-size: cover;
  background-position: center bottom;
  border-top: 4px solid var(--flag);
  color: var(--text-dark);
}
.site-foot h4 { color: #fff; }
.site-foot p { color: var(--muted-dark); }
.site-foot a { color: var(--text-dark); }
.site-foot a:hover { color: #fff; text-decoration-color: var(--flag-bright); }
.foot-logo { display: block; width: 168px; height: auto; margin: 0 0 1.1rem; }
.foot-bottom { border-top-color: var(--line-dark); color: var(--muted-dark); }
@media (max-width: 760px) { .foot-logo { width: 140px; } }

/* ---------- Free site check (v14.1.0) ----------
   The report header is an equipment rating plate and every finding carries a
   test tag. Everything else sits on the existing register and spec patterns. */
[hidden] { display: none !important; }

:root {
  --tag-good: #2b6b3e;
  --tag-look: #f2b705;
  --tag-fix: #d93b0b;
  --tag-info: #d4d6d0;
  --steel-1: #e1e4e0;
  --steel-2: #c4c8c4;
  --steel-edge: #9aa09d;
  --rivet: #858b88;
}

@media (max-width: 1180px) and (min-width: 961px) {
  .head-right, .nav-list { gap: 1.05rem; }
}

/* The input: one heavy instrument */
.probe { margin-top: 2.25rem; max-width: 660px; }
.probe-label { display: block; font-size: .95rem; font-weight: 600; margin-bottom: .5rem; }
.probe-row { display: flex; align-items: stretch; }
.probe-row input {
  flex: 1 1 auto; min-width: 0; font-size: 1.2rem; padding: 1rem 1.1rem;
  border: 2px solid var(--ink); border-right: 0; border-radius: 2px 0 0 2px;
  background: #fff; color: var(--ink);
}
.probe-row input::placeholder { color: #737980; }
.probe-row input[aria-invalid="true"] { border-color: var(--flag-deep); }
.probe-btn { border-radius: 0 2px 2px 0; font-size: 1.05rem; padding: 1rem 1.5rem; white-space: nowrap; }
.probe-btn[disabled] { cursor: progress; background: var(--flag-deep); border-color: var(--flag-deep); }
.probe-error { display: none; margin: .65rem 0 0; font-size: .95rem; font-weight: 600; color: var(--flag-deep); }
.probe-error.is-visible { display: block; }
.probe-note { margin: 1rem 0 0; }
.hero .probe-label { color: #fff; }
.hero .probe-row input { border-color: #fff; }
.hero .probe-row input[aria-invalid="true"] { border-color: var(--flag-bright); }
.hero .probe-row input:focus-visible { outline-color: var(--flag-bright); }
.hero .probe-error { color: var(--flag-bright); }
@media (max-width: 540px) {
  .probe-row { flex-direction: column; }
  .probe-row input { border-right: 2px solid var(--ink); border-radius: 2px; }
  .hero .probe-row input { border-color: #fff; }
  .probe-btn { border-radius: 2px; margin-top: .6rem; }
}

/* Home page entry point */
.check-teaser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1.75rem 4rem; align-items: center; }
.check-teaser h2::before { content: ""; display: block; width: 48px; height: 4px; background: var(--flag); margin-bottom: 1.1rem; }
.check-teaser > div > p { color: var(--ink-2); margin-bottom: 0; }
.check-teaser .probe { margin-top: 0; }
@media (max-width: 880px) { .check-teaser { grid-template-columns: 1fr; } }

/* The rating plate */
.report-band { scroll-margin-top: 72px; }
.plate {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.75rem 2.75rem; align-items: end;
  padding: clamp(1.6rem, 3vw, 2.3rem) clamp(1.6rem, 3.5vw, 2.8rem);
  color: var(--ink);
  border: 1px solid var(--steel-edge); border-radius: 5px;
  background:
    radial-gradient(circle at 15px 15px, var(--rivet) 0 3.5px, rgba(255,255,255,.75) 4.2px, transparent 5px),
    radial-gradient(circle at calc(100% - 15px) 15px, var(--rivet) 0 3.5px, rgba(255,255,255,.75) 4.2px, transparent 5px),
    radial-gradient(circle at 15px calc(100% - 15px), var(--rivet) 0 3.5px, rgba(255,255,255,.75) 4.2px, transparent 5px),
    radial-gradient(circle at calc(100% - 15px) calc(100% - 15px), var(--rivet) 0 3.5px, rgba(255,255,255,.75) 4.2px, transparent 5px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, rgba(0,0,0,.02) 1px 3px),
    linear-gradient(180deg, var(--steel-1), var(--steel-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(0,0,0,.08);
}
.plate h2 {
  font-size: clamp(2.1rem, 5vw, 3.5rem); font-weight: 800; color: #1d2125;
  margin-bottom: 1.1rem; overflow-wrap: anywhere; text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.plate-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.75rem; margin: 0; }
.plate-fields div { border-top: 1px solid rgba(20, 22, 26, .2); padding-top: .4rem; }
.plate-fields dt { font-size: .82rem; color: #434950; }
.plate-fields dd { margin: 0; font-weight: 600; font-size: .98rem; overflow-wrap: anywhere; }
.plate-tally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin: 0; }
.tally { display: flex; flex-direction: column-reverse; justify-content: flex-end; border-top: 6px solid; padding-top: .6rem; }
.tally dd {
  margin: 0; font-family: var(--display); font-weight: 800; line-height: .85;
  font-size: clamp(2.7rem, 6vw, 4.1rem); color: #1d2125; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.tally dt { font-size: .86rem; color: #3b4147; margin-top: .4rem; }
.tally--good { border-top-color: var(--tag-good); }
.tally--look { border-top-color: var(--tag-look); }
.tally--fix { border-top-color: var(--tag-fix); }
@media (max-width: 780px) {
  .plate { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .plate-fields { grid-template-columns: 1fr; }
}

/* The finding to start with */
.first-fix { margin: 2rem 0 0; padding: 1.3rem 1.6rem 1.45rem; background: var(--black); color: var(--text-dark); border-left: 6px solid var(--flag-bright); }
.first-fix-k { font-size: .9rem; color: var(--muted-dark); margin: 0 0 .4rem; }
.first-fix h3 { color: #fff; font-family: var(--display); font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.3rem); line-height: 1; margin-bottom: .55rem; }
.first-fix p:last-child { margin: 0; color: var(--text-dark); max-width: 72ch; }

/* Findings, grouped like the spec table, each with a test tag */
.report-groups { margin-top: 2.75rem; border-bottom: 1px solid var(--rule); }
.rg { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: .25rem 2rem; border-top: 2px solid var(--ink); padding: 1.1rem 0 1.5rem; }
.rg h3 { font-family: var(--display); font-weight: 800; font-size: 1.7rem; line-height: 1; margin: .3rem 0 0; }
.rg-list { list-style: none; margin: 0; padding: 0; max-width: none; }
.ck { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0 1.1rem; align-items: start; margin: 0; padding: .85rem 0; border-top: 1px solid var(--rule); }
.ck:first-child { border-top: 0; padding-top: .3rem; }
.ck-title { margin: 0; font-weight: 600; color: var(--ink); }
.ck-detail { margin: .2rem 0 0; color: var(--ink-2); font-size: .97rem; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .rg { grid-template-columns: 1fr; }
  .rg h3 { margin-bottom: .5rem; }
}
.tag {
  position: relative; display: inline-flex; align-items: center;
  width: 5.6rem; height: 1.9rem; padding: 0 .55rem 0 1.45rem; margin-top: .05rem;
  font-size: .84rem; font-weight: 600; line-height: 1;
  border-radius: 1rem 2px 2px 1rem;
}
.tag::before {
  content: ""; position: absolute; left: .55rem; top: 50%;
  width: .46rem; height: .46rem; margin-top: -.23rem; border-radius: 50%;
  background: var(--plate); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .35);
}
.tag--good { background: var(--tag-good); color: #fff; }
.tag--look { background: var(--tag-look); color: var(--ink); }
.tag--fix { background: var(--tag-fix); color: #fff; }
.tag--info { background: var(--tag-info); color: var(--ink); }

/* While a part is still being read: current running along a wire */
.ck--pending .ck-title { color: var(--ink-2); font-weight: 400; }
.ck-wire { position: relative; display: block; height: 3px; margin-top: .75rem; background: var(--rule); overflow: hidden; }
.ck-wire::after {
  content: ""; position: absolute; top: 0; left: -35%; width: 35%; height: 100%;
  background: var(--flag); animation: ck-current 1.15s ease-in-out infinite;
}
@keyframes ck-current { to { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .ck-wire::after { animation: none; left: 0; width: 100%; background: var(--rule-strong); }
}

.report-cta { margin-top: 2.75rem; max-width: 72ch; }
.report-cta h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 3.8vw, 2.6rem); line-height: 1; margin-bottom: .7rem; }
.report-cta .note { margin-top: 1.25rem; }

/* ---------- v15.0.0 ----------
   Real work on the page: screenshots in browser and phone frames, work cards,
   a steel spec plate for figures, dated timelines, the three-channel band,
   tool chips and the case study gallery. All on the existing tokens. */

/* A case study under Work marks Work in the nav */
.nav-list a[aria-current="true"] { color: #fff; border-bottom-color: #5a6068; }

/* Footer: four columns */
.foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
@media (max-width: 960px) and (min-width: 761px) {
  .foot-grid { grid-template-columns: repeat(3, 1fr); }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 400px) { .foot-grid { grid-template-columns: 1fr; } }

/* Browser and phone frames */
.browser { margin: 0; background: #1b1d21; border: 1px solid #33373d; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.browser-bar { display: flex; align-items: center; gap: .35rem; height: 26px; padding: 0 .7rem; background: #24272c; border-bottom: 1px solid #33373d; }
.browser-bar span { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #4a4f56; }
.browser-bar .browser-url {
  width: auto; height: auto; border-radius: 2px; background: #15171a; color: #a3a8ae;
  font-size: .72rem; line-height: 1; padding: .3rem .65rem; margin-left: .55rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser img { width: 100%; height: auto; }
.phone { margin: 0; background: #0b0c0e; border: 6px solid #0b0c0e; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.phone img { width: 100%; height: auto; border-radius: 16px; }

/* Desktop and phone together */
.duo { position: relative; padding: 0 9% 7% 0; }
.duo .phone { position: absolute; right: 0; bottom: 0; width: 23%; }
@media (max-width: 560px) { .duo .phone { border-width: 4px; border-radius: 14px; } .duo .phone img { border-radius: 10px; } }
.showcase { padding: clamp(1.25rem, 4vw, 3rem); background-color: var(--black);
  background-image: url('/assets/circuit-strong.v14.0.2.svg'), url('/assets/concrete-dark.v14.0.2.webp');
  background-size: 600px 600px, cover; background-position: 0 0, center; border-bottom: 4px solid var(--flag); }
.showcase-cap { margin: 1.1rem 0 0; font-size: .92rem; color: var(--ink-2); }

/* Work cards (home) */
.wcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
@media (max-width: 860px) { .wcards { grid-template-columns: 1fr; } }
.wcard { display: flex; flex-direction: column; background: var(--plate); border: 1px solid var(--rule-strong); }
.wcard-media {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 10; padding: clamp(1rem, 3vw, 1.75rem); overflow: hidden;
  background-color: var(--black);
  background-image: url('/assets/circuit-strong.v14.0.2.svg'), url('/assets/concrete-dark.v14.0.2.webp');
  background-size: 600px 600px, cover; background-position: 0 0, center;
  border-bottom: 4px solid var(--flag);
}
.wcard-media .browser { width: 100%; }
.wcard-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.5rem 1.75rem; }
.wcard-meta { font-size: .9rem; color: var(--ink-2); margin-bottom: .45rem; }
.wcard h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 3vw, 2.4rem); line-height: 1; margin-bottom: 1rem; }
.wcard h3 a { text-decoration: none; }
.wcard h3 a:hover { color: var(--flag-deep); }
.wcard-stat { display: flex; align-items: baseline; gap: .9rem; border-left: 3px solid var(--flag); padding-left: .9rem; margin: 0 0 1rem; max-width: none; }
.wcard-stat .n { flex: none; font-family: var(--display); font-weight: 800; font-size: 2.7rem; line-height: .9; }
.wcard-stat .t { font-size: .95rem; color: var(--ink-2); line-height: 1.35; }
.wcard-body > p { color: var(--ink-2); }
.wcard-body > p.wcard-link { margin: auto 0 0; padding-top: .3rem; color: var(--ink); }

/* Work rows (work index): media beside the story */
.wrows { display: grid; gap: 2.5rem; }
.wrow { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); background: var(--plate); border: 1px solid var(--rule-strong); }
.wrow .wcard-media { aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: 4px solid var(--flag); }
.wrow .wcard-body { padding: clamp(1.5rem, 3vw, 2.25rem); }
@media (max-width: 860px) {
  .wrow { grid-template-columns: 1fr; }
  .wrow .wcard-media { aspect-ratio: 16 / 10; border-right: 0; border-bottom: 4px solid var(--flag); }
}
.earlier { margin-top: 3rem; }
.earlier h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }

/* Steel spec plate (figures inside a dark media panel) */
.mini-plate {
  width: min(100%, 26rem); padding: 1.35rem 1.6rem 1.5rem; color: var(--ink);
  border: 1px solid var(--steel-edge); border-radius: 5px;
  background:
    radial-gradient(circle at 13px 13px, var(--rivet) 0 3px, rgba(255,255,255,.75) 3.7px, transparent 4.4px),
    radial-gradient(circle at calc(100% - 13px) 13px, var(--rivet) 0 3px, rgba(255,255,255,.75) 3.7px, transparent 4.4px),
    radial-gradient(circle at 13px calc(100% - 13px), var(--rivet) 0 3px, rgba(255,255,255,.75) 3.7px, transparent 4.4px),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), var(--rivet) 0 3px, rgba(255,255,255,.75) 3.7px, transparent 4.4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, rgba(0,0,0,.02) 1px 3px),
    linear-gradient(180deg, var(--steel-1), var(--steel-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(0,0,0,.08), 0 18px 40px rgba(0,0,0,.4);
}
.mini-plate-k { margin: 0 0 .2rem; font-size: .78rem; color: #434950; letter-spacing: .02em; }
.mini-plate-title { margin: 0 0 .9rem; font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1; color: #1d2125; text-shadow: 0 1px 0 rgba(255,255,255,.55); }
.mini-plate dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.25rem; margin: 0; }
.mini-plate dl div { border-top: 1px solid rgba(20, 22, 26, .2); padding-top: .4rem; }
.mini-plate dt { font-size: .78rem; color: #434950; }
.mini-plate dd { margin: 0; font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1; color: #1d2125; font-variant-numeric: tabular-nums; }
.mini-plate dd span { display: block; margin-top: .2rem; font-family: var(--body); font-weight: 400; font-size: .76rem; line-height: 1.3; color: #434950; }

/* The three channels */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.5rem; border-top: 2px solid var(--ink); }
.trio > div { padding: 1.4rem 0 0; }
.trio h3 { font-family: var(--display); font-weight: 800; font-size: 1.75rem; line-height: 1; margin-bottom: .6rem; }
.trio h3 a { text-decoration: none; }
.trio h3 a:hover { color: var(--flag-deep); }
.trio p { color: var(--ink-2); font-size: 1rem; }
.trio p:last-child { margin-bottom: 0; color: var(--ink); }
@media (max-width: 860px) {
  .trio { grid-template-columns: 1fr; border-top: 0; }
  .trio > div { border-top: 1px solid var(--rule); padding: 1.25rem 0; }
  .trio > div:first-child { border-top: 2px solid var(--ink); }
}

/* Tool chips */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; max-width: none; }
.chips li { margin: 0; padding: .35rem .75rem; border: 1px solid var(--rule-strong); background: var(--plate); font-size: .9rem; }
.band--panel .chips li { background: var(--plate); }

/* Case study gallery */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 2rem; }
.gallery figure { margin: 0; }
.gallery figcaption { margin-top: .85rem; font-size: .93rem; color: var(--ink-2); max-width: 54ch; }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr; } }

/* A logo on a dark tile */
.logo-tile { margin: 1.25rem 0 1.75rem; padding: clamp(1.5rem, 4vw, 2.4rem); background: var(--black); border-left: 4px solid var(--flag); max-width: var(--measure); }
.logo-tile img { width: min(100%, 440px); height: auto; }
.logo-tile figcaption { margin-top: 1rem; font-size: .9rem; color: var(--muted-dark); }

/* Dated timeline, on the chain pattern */
.chain--5 { grid-template-columns: repeat(5, 1fr); }
.chain--dated li { padding-top: 1.55rem; }
.chain--dated li::before { content: attr(data-date); counter-increment: none; top: -.8rem; font-size: 1.15rem; font-weight: 700; letter-spacing: .01em; }
@media (max-width: 900px) {
  .chain--5 { grid-template-columns: 1fr; }
  .chain--dated li { padding: 0 0 1.25rem 1.4rem; }
  .chain--dated li::before { position: static; display: block; padding: 0 0 .15rem; background: none; }
  .band--panel .chain--dated li::before { background: none; }
}

/* Three figures in a row */
.figures--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .figures--3 { grid-template-columns: 1fr; } }
.figures + .note { margin-top: -1rem; }

/* Inner hero with buttons */
.hero .btn-row { margin-top: 2rem; }