/* Accessible Docs: accessible documents
   Two colours: ink and highlighter. One typeface, built for low-vision readers.
   The page should look like a well-made document that has been proofread. */

:root {
  --ink: #111111;
  --paper: #ffffff;
  --grey: #4f4f4f;      /* 8.1:1 on white, 7.4:1 on the tint: passes AAA */
  --line: #111111;
  --tint: #f3f3f1;
  --mark: #7ddfae;      /* mint highlighter: ink on it is 12:1 */
  --pass: #bdf5d8;      /* mint, for passes: ink on it is 16:1 */
  --radius: 12px;
  --pen: #c8102e;       /* proofing marks, 5.9:1 on white */

  --type: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Verdana, Arial, sans-serif;

  --page: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --measure: 62ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--type); font-size: 1.1875rem; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 4px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--ink); outline-offset: 0; background: var(--mark); box-shadow: 0 0 0 6px var(--mark); text-decoration: none; color: var(--ink); }

.wrap { max-width: var(--page); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--mark); color: var(--ink); padding: 12px 18px; font-weight: 700; z-index: 10; }
.skip-link:focus { left: 0; }

h1, h2, h3 { margin: 0; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(2.625rem, 7vw, 5.75rem); font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.875rem, 3.8vw, 3rem); font-weight: 800; letter-spacing: -0.02em; }
h3 { font-size: 1.4375rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.mark { background: linear-gradient(transparent 8%, var(--mark) 8%, var(--mark) 92%, transparent 92%); padding: 0 0.08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.lede { font-size: clamp(1.3125rem, 2vw, 1.5625rem); line-height: 1.45; max-width: 40ch; }
.small { font-size: 1rem; color: var(--grey); }

/* Draft strip */
.draft { background: var(--mark); font-size: 1rem; }
.draft .wrap { padding-top: 8px; padding-bottom: 8px; }

/* Masthead */
.top { border-bottom: 3px solid var(--line); }
.top__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; padding-top: 18px; padding-bottom: 18px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.3125rem; text-decoration: none; letter-spacing: -0.01em; }
.brand svg { width: 34px; height: 34px; fill: currentColor; }
.menu { display: flex; flex-wrap: wrap; gap: 6px 26px; font-size: 1.125rem; }
.menu a { text-decoration: none; font-weight: 700; padding: 4px 0; }
.menu a:hover, .menu a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; }

/* Hero */
.hero { overflow-x: clip; padding: clamp(48px, 9vh, 104px) 0 clamp(56px, 9vh, 96px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
.hero h1 { margin-bottom: 28px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 32px; }
.button { display: inline-block; border-radius: var(--radius); background: var(--ink); color: var(--paper); font-weight: 700; font-size: 1.1875rem; text-decoration: none; padding: 16px 26px; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--mark); }
.button:hover { background: var(--paper); color: var(--ink); }
.button:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--mark); }

/* The proofed page */
.proof { margin: 0 -24px 0 0; justify-self: end; width: calc(100% + 24px); max-width: 620px; }
.proof svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Sections */
.section { padding: clamp(56px, 9vh, 104px) 0; border-top: 3px solid var(--line); }
.section--tint { background: var(--tint); }
.section h2 { margin-bottom: 18px; }
.two { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.prose { max-width: var(--measure); }
.prose h2 { margin: 1.4em 0 0.5em; font-size: clamp(1.5625rem, 2.6vw, 2rem); }
.prose h2:first-child { margin-top: 0; }
.prose ul { margin: 0 0 1em; padding-left: 0; list-style: none; }
.prose li { position: relative; padding-left: 30px; margin-bottom: 0.5em; }
.prose li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 14px; height: 10px; background: var(--mark); outline: 2px solid var(--ink); }
.prose .fails li::before { content: "\00d7"; background: none; outline: 0; color: var(--pen); font-weight: 800; top: 0; width: auto; height: auto; font-size: 1.75rem; line-height: 1; }
.intro { max-width: 46ch; margin-bottom: 40px; font-size: 1.3125rem; }

/* Services */
.offer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--ink); }
.offer li { padding: 28px 32px 32px 0; border-bottom: 1px solid var(--ink); }
.offer li:nth-child(odd) { border-right: 1px solid var(--ink); }
.offer li:nth-child(even) { padding-left: 32px; padding-right: 0; }
.offer h3 { margin-bottom: 10px; }
.offer p { color: var(--grey); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--mark); border: 3px solid var(--ink); font-weight: 800; font-size: 1.5rem; margin-bottom: 16px; }
.steps strong { display: block; font-size: 1.3125rem; margin-bottom: 6px; line-height: 1.25; }

/* Work list */
.worklist { margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--ink); }
.worklist li { border-bottom: 1px solid var(--ink); }
.worklist a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: baseline; padding: 26px 0; text-decoration: none; }
.worklist .t { font-size: clamp(1.625rem, 3.4vw, 2.75rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; justify-self: start; }
.worklist .m { grid-column: 1 / 2; color: var(--grey); font-size: 1.125rem; }
.worklist .go { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 2.125rem; font-weight: 800; }
.worklist a:hover .t { background: var(--mark); }

/* Facts */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.facts strong { display: block; font-size: 1.3125rem; margin-bottom: 6px; }
.facts li { font-size: 1.0625rem; }

/* Case study */
.case-head { padding: clamp(48px, 8vh, 96px) 0 40px; }
.kicker { font-weight: 700; margin-bottom: 18px; }
.case-head h1 { font-size: clamp(2.375rem, 6vw, 4.75rem); margin-bottom: 22px; max-width: 18ch; }
.meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 36px 0 0; border-top: 3px solid var(--ink); }
.meta div { padding: 14px 18px 16px 0; border-bottom: 1px solid var(--ink); }
.meta dt { font-size: 0.9375rem; color: var(--grey); }
.meta dd { margin: 2px 0 0; font-weight: 700; font-size: 1.125rem; }
.figure { margin: 0 0 56px; }
.figure img { width: 100%; border: 3px solid var(--ink); }
.placeholder { aspect-ratio: 16 / 8; display: grid; place-items: center; padding: 24px; text-align: center; border: 3px dashed var(--ink); background: var(--tint); font-weight: 700; }

/* CV */
.cv { margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--ink); }
.cv li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; padding: 18px 0; border-bottom: 1px solid var(--ink); }
.cv h3 { font-size: 1.3125rem; }
.cv .when { color: var(--grey); white-space: nowrap; }
.cv p { grid-column: 1 / -1; margin: 0; }

/* Contact */
.contact { background: var(--ink); color: var(--paper); padding: clamp(56px, 10vh, 112px) 0; }
.contact a { color: var(--paper); }
.contact h2 { font-size: clamp(2.125rem, 5vw, 4rem); max-width: 16ch; margin-bottom: 24px; }
.contact .lede { margin-bottom: 30px; }
.contact__mail { font-size: clamp(1.375rem, 3.2vw, 2.5rem); font-weight: 800; word-break: break-word; text-decoration-color: var(--mark); }
.contact .button { background: var(--mark); color: var(--ink); border-color: var(--mark); box-shadow: none; }
.contact .button:hover { background: var(--paper); border-color: var(--paper); }
.contact__links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 32px; align-items: center; }

.foot { padding: 24px 0 40px; font-size: 1rem; color: var(--grey); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; }
.foot a { color: var(--grey); }

@media (max-width: 960px) {
  .hero__grid, .two { grid-template-columns: minmax(0, 1fr); }
  .proof { justify-self: start; margin: 0; width: 100%; }
  .steps, .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body { font-size: 1.125rem; }
  .offer { grid-template-columns: minmax(0, 1fr); }
  .offer li, .offer li:nth-child(even) { padding: 24px 0; border-right: 0; }
  .steps, .facts { grid-template-columns: minmax(0, 1fr); }
  .cv li { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .button:active { transform: none; } }

/* Text for screen readers only */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Upload form in the contact panel */
.contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.upload { background: var(--paper); color: var(--ink); padding: clamp(22px, 3vw, 36px); border: 3px solid var(--mark); min-width: 0; }
.upload a { color: var(--ink); }
.field { margin-bottom: 22px; min-width: 0; }
.field label { display: block; font-weight: 700; margin-bottom: 6px; }
.optional { font-weight: 400; color: var(--grey); }
.field__hint { font-size: 1rem; color: var(--grey); margin: -2px 0 8px; }
.field input[type="text"], .field input[type="email"], .field textarea {
  width: 100%; font: inherit; font-size: 1.125rem; color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); padding: 10px 12px; border-radius: 0; }
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 0; box-shadow: 0 0 0 6px var(--mark); }
.field [aria-invalid="true"] { border-color: var(--pen); border-width: 3px; }
.field__error { color: var(--pen); font-weight: 700; font-size: 1rem; margin: 8px 0 0; overflow-wrap: anywhere; }
.drop { position: relative; border: 2px dashed var(--ink); background: var(--tint); padding: 22px 16px; text-align: center; }
.drop.is-over { background: var(--mark); border-style: solid; }
.drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop:focus-within { outline: 3px solid var(--ink); box-shadow: 0 0 0 6px var(--mark); }
.drop__text { pointer-events: none; }
.drop__text strong { text-decoration: underline; text-underline-offset: 3px; }
.drop__list { list-style: none; margin: 10px 0 0; padding: 0; }
.drop__list li { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #c9c9c6; font-size: 1rem; }
.drop__name { min-width: 0; overflow-wrap: anywhere; }
.drop__remove { font: inherit; font-size: 0.9375rem; font-weight: 700; background: none; border: 0; padding: 4px 0; color: var(--ink); text-decoration: underline; cursor: pointer; flex-shrink: 0; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.upload__privacy { font-size: 1rem; color: var(--grey); margin: 0 0 18px; }
.upload .button { border-color: var(--ink); box-shadow: 0 5px 0 var(--mark); }
.upload .button:hover { background: var(--paper); color: var(--ink); }
.upload .button[disabled] { opacity: 0.6; cursor: progress; }
.upload__status { margin: 16px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.upload__status:empty { display: none; }
@media (max-width: 960px) { .contact__grid { grid-template-columns: minmax(0, 1fr); } }
.figure--inline { margin: 28px 0 40px; max-width: 560px; }
.figure--inline figcaption { font-size: 1rem; color: var(--grey); margin-top: 10px; }

/* PAC results table */
.table-wrap { overflow-x: auto; border-top: 3px solid var(--ink); }
.results { width: 100%; border-collapse: collapse; font-size: 1.125rem; }
.results caption { text-align: left; font-weight: 700; padding: 14px 0 10px; caption-side: top; }
.results th, .results td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--ink); text-align: left; vertical-align: top; }
.results thead th { font-size: 1rem; color: var(--grey); font-weight: 700; border-bottom: 3px solid var(--ink); }
.results tbody th { font-weight: 400; }
.results .num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; padding-left: 16px; white-space: nowrap; }
.verdicts { display: flex; flex-wrap: wrap; gap: 12px 16px; list-style: none; margin: 28px 0 16px; padding: 0; }
.verdicts li { display: flex; gap: 10px; align-items: center; border: 2px solid var(--ink); padding: 10px 14px; }
.pass { background: var(--pass); border-radius: 4px; padding: 2px 8px; font-weight: 700; }
.pass::before { content: "\2713\00a0"; }
.flag { padding: 2px 8px; font-weight: 700; color: var(--pen); border: 2px solid var(--pen); }
@media (max-width: 480px) {
  .results { font-size: 0.9375rem; }
  .results thead th { font-size: 0.8125rem; }
  .results .num { padding-left: 8px; }
  .results th, .results td { padding-right: 0; }
}
.results tbody th { font-weight: 700; width: 30%; }
.results .tick { white-space: nowrap; font-weight: 700; padding-right: 0; }
.results .tick::before { content: "\2713\00a0"; background: var(--pass); border-radius: 3px; padding: 0 4px; margin-right: 4px; }

/* Pricing */
.prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 20px; padding: 0; list-style: none; border-top: 3px solid var(--ink); }
.prices li { padding: 28px 28px 32px 0; border-bottom: 1px solid var(--ink); min-width: 0; }
.prices li + li { padding-left: 28px; border-left: 1px solid var(--ink); }
.prices h3 { margin-bottom: 10px; }
.price { font-size: clamp(2.375rem, 4.4vw, 3.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1; margin: 0 0 16px; }
.price span { font-size: 1.1875rem; font-weight: 400; letter-spacing: 0; color: var(--grey); }
.prices p { color: var(--grey); }
.prices .price { color: var(--ink); }
.prices .eg { color: var(--ink); font-weight: 700; margin-top: 12px; }
@media (max-width: 860px) {
  .prices { grid-template-columns: minmax(0, 1fr); }
  .prices li, .prices li + li { padding: 24px 0; border-left: 0; }
}
@media (max-width: 480px) {
  .results tbody th { width: auto; }
  .results .tick::before { content: "\2713"; }
}
.prices .price--second { font-size: clamp(1.75rem, 3vw, 2.375rem); margin-top: -4px; }
.prices--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
.includes { max-width: 62ch; margin: 24px 0 12px; }
.eg-line { font-weight: 700; margin-bottom: 12px; }
@media (max-width: 560px) { .prices--two { grid-template-columns: minmax(0, 1fr); } .prices--two li + li { padding-left: 0; border-left: 0; } }

/* Before / after PAC table */
.results--ba tbody th { width: 22%; }
.results--ba td { width: 39%; }
.results .cross, .results .warn { font-weight: 700; }
.results .cross::before { content: "\2717\00a0"; color: var(--pen); }
.results .warn::before { content: "!\00a0"; color: var(--pen); display: inline-block; width: 1em; text-align: center; }
.results--ba .tick { white-space: normal; }
@media (max-width: 480px) {
  .results--ba tbody th, .results--ba td { width: auto; }
}
.table-wrap + .small { margin-top: 16px; }
@media (max-width: 480px) { .results--ba th, .results--ba td { padding-right: 8px; } }
.table-wrap + .table-wrap, .small + .table-wrap { margin-top: 40px; }

/* Case study pictures and downloads */
.figure img { display: block; width: 100%; height: auto; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pair img, .trio img { border: 1px solid var(--ink); }
.pair__label { font-weight: 700; margin: 0 0 8px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.figure figcaption { font-size: 1rem; color: var(--grey); margin-top: 12px; }
@media (max-width: 720px) { .pair, .trio { grid-template-columns: minmax(0, 1fr); } }
.downloads { list-style: none; padding: 0; margin: 16px 0 0; border-top: 3px solid var(--ink); }
.downloads li { border-bottom: 1px solid var(--ink); padding: 14px 0; }
.downloads a { font-weight: 700; overflow-wrap: anywhere; }
.downloads .dl-meta { font-weight: 400; color: var(--grey); }
.prose .downloads li { padding-left: 0; margin-bottom: 0; }
.prose .downloads li::before { content: none; }

/* Included / not included */
.scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 28px 0 20px; border-top: 3px solid var(--ink); }
.scope > div { padding: 24px 28px 24px 0; min-width: 0; }
.scope > div + div { padding-left: 28px; border-left: 1px solid var(--ink); }
.scope h3 { margin-bottom: 10px; }
.scope ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.scope li { padding-left: 26px; position: relative; }
.scope > div:first-child li::before { content: "\2713"; position: absolute; left: 0; font-weight: 700; background: var(--pass); border-radius: 3px; padding: 0 3px; line-height: 1.3; }
.scope > div + div li::before { content: "\2717"; position: absolute; left: 0; font-weight: 700; color: var(--pen); }
.scope p { color: var(--grey); margin: 14px 0 0; }
@media (max-width: 720px) { .scope { grid-template-columns: minmax(0, 1fr); } .scope > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--ink); } }

/* --- accessibility audit, Oct 2026: IBM Equal Access, axe (incl. AAA and best practice), HTML CodeSniffer AAA --- */
fieldset.group { border: 0; margin: 0 0 8px; padding: 0; min-width: 0; }
fieldset.group legend { font-weight: 800; font-size: 1.375rem; padding: 0; margin: 0 0 14px; }
fieldset.group + fieldset.group { margin-top: 30px; }
ul.contact__links, .foot__links { list-style: none; margin: 0; padding: 0; }
ul.contact__links { margin-top: 32px; }
.foot nav { display: contents; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 28px; }
/* AAA target size: standalone links and small buttons at least 44px tall */
.contact__links li, .foot__links a, .contact__links a, .drop__remove { display: inline-flex; align-items: center; min-height: 44px; }
.drop__remove { min-width: 44px; justify-content: center; }
.menu a, .brand { display: inline-flex; align-items: center; min-height: 44px; }
a[href^="mailto:"] { overflow-wrap: anywhere; }
.table-wrap:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--mark); }

/* PAC tables: same column widths in every table, so the Pass ticks line up */
.results:not(.results--ba) { table-layout: fixed; }
.results:not(.results--ba) th:first-child { width: 30%; }
.results:not(.results--ba) th:last-child, .results:not(.results--ba) td:last-child { width: 8.5rem; }
@media (max-width: 480px) {
  .results:not(.results--ba) th:first-child { width: 34%; }
  .results:not(.results--ba) th:last-child, .results:not(.results--ba) td:last-child { width: 5.5rem; }
}

/* About: portrait beside the intro */
.about-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: clamp(24px, 5vw, 64px); align-items: end; }
.portrait { width: 100%; height: auto; border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 8px 8px 0 var(--mark); }
@media (max-width: 760px) { .about-head { grid-template-columns: minmax(0, 1fr); } .portrait { max-width: 240px; grid-row: 1; } }

/* Example pages: a single PDF page beside the results */
.figure--page { max-width: 320px; margin: 20px 0 32px; }
.figure--page img { border: 3px solid var(--ink); }