/* ─────────────────────────────────────────────────────────────
   Plumbline Systems — The Evidence Instrument
   Shared stylesheet for /, /small-business, /privacy and 404.
   Sizes are rem/em so text scaling reflows the layout; breakpoints
   are em for the same reason (37.5em = 600px, 60em = 960px at the
   default text size).
   ───────────────────────────────────────────────────────────── */

/* ── fonts: self-hosted, latin subset (licenses in /fonts/) ── */
@font-face{
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Archivo 700 at normal width: the small-caps label style only (.eyebrow, the limits labels, the capture notes) */
@font-face{
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/archivo-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── tokens ─────────────────────────────────────────────────── */
:root{
  --gun:        #101716;
  --ivory:      #F4EFE4;
  --ivory-deep: #EAE3D6;
  --ink:        #18201E;
  --ink-muted:  #48504B;
  --ivory-soft: #D8CFC1;
  --brass:      #C69A53;
  --brass-dark: #765923;
  --btn-top:    #D9B679;
  --btn-bottom: #B78C45;

  --rule-light: rgb(24 32 30 / .18);   /* hairline on ivory */
  --rule-dark:  rgb(244 239 228 / .16); /* hairline on gunmetal */

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --ui:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --frame: 1280px;
  --gutter: 20px;
  --focus: var(--ink);
}
@media (min-width: 37.5em){ :root{ --gutter: 32px; } }
@media (min-width: 68em){ :root{ --gutter: 48px; } }

/* ── base ───────────────────────────────────────────────────── */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--ivory);
  color: var(--ink-muted);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
img, svg{ display: block; max-width: 100%; }
a{ color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure{ margin: 0; }
ul, ol{ padding: 0; list-style: none; }
[hidden]{ display: none !important; }

::selection{ background: var(--brass); color: var(--gun); }

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

.skip{
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--btn-top); color: var(--gun);
  padding: .75rem 1rem; font-family: var(--ui); font-size: .9375rem;
}
.skip:focus{ left: 8px; top: 8px; }

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

/* dark surfaces share text colours and the focus colour */
.dark{
  --focus: var(--btn-top);
  background: var(--gun);
  color: var(--ivory-soft);
}

/* ── type roles ─────────────────────────────────────────────── */
.eyebrow{
  font-family: var(--ui);
  font-stretch: 100%;
  font-weight: 700;
  font-size: .8125rem;
  line-height: 1.5;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass-dark);
}
.dark .eyebrow{ color: var(--brass); }

.h-section{
  font-family: var(--serif);
  font-weight: 400;
  font-size: min(clamp(1.9375rem, 1.45rem + 2.2vw, 2.875rem), 16vw);
  line-height: 1.1;
  letter-spacing: -.012em;
  color: var(--ink);
  text-wrap: balance;
}
.dark .h-section{ color: var(--ivory); }

.lede{
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  line-height: 1.4;
  color: var(--ink);
}

.prose{ max-width: 42rem; }
.prose + .prose{ margin-top: 1em; }

.text-link{
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--brass-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.text-link:hover{ text-decoration-thickness: 2px; }
.dark .text-link{ color: var(--ivory); text-decoration-color: var(--brass); }

/* ── actions ────────────────────────────────────────────────── */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  min-height: 3rem;
  padding: .7rem min(1.6rem, 6vw);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.25;
  color: var(--gun);
  text-decoration: none;
  text-align: center;
  background: linear-gradient(180deg, var(--btn-top), var(--btn-bottom));
  border: 1px solid var(--brass-dark);
  border-radius: 2px;
  cursor: pointer;
}
.btn:hover{ background: linear-gradient(180deg, #E3C590, #C39A54); }
.btn:active{ background: var(--btn-bottom); }
.btn .arw{ flex: none; }
.dark .btn{ border-color: transparent; }

.link-quiet{
  display: inline-flex; align-items: center;
  min-height: 2.75rem;
  font-size: 1.0625rem;
  color: var(--ivory);
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 1px;
  text-underline-offset: .35em;
}
.link-quiet:hover{ text-decoration-thickness: 2px; }

/* ── header ─────────────────────────────────────────────────── */
.site-header{ border-bottom: 1px solid var(--rule-dark); }
.header-inner{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0 1.25rem;
  min-height: 4rem; /* compact on a phone, so the opening reaches its art sooner */
  padding-block: .5rem;
}

.wordmark{
  display: inline-flex; align-items: center; gap: .75rem;
  min-height: 2.75rem;
  text-decoration: none;
  font-family: var(--ui);
  font-variation-settings: "wdth" 82;
  font-weight: 600;
  font-size: min(.875rem, 4.4vw);
  line-height: 1.35;
  letter-spacing: .28em;
  max-width: 100%;
  text-transform: uppercase;
  color: var(--ivory);
}
.wordmark svg{ flex: none; width: 2.25rem; height: 2.125rem; }
.wordmark span{ width: min-content; } /* two lines on a phone leaves room for the menu */

.menu-link{
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 2.75rem; padding-inline: .25rem;
  font-family: var(--ui);
  font-variation-settings: "wdth" 100;
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ivory);
}
.menu-link svg{ width: 1.375rem; height: 1.375rem; }

.site-nav{
  display: none;
  flex-basis: 100%;
  padding-block: .5rem 1rem;
  border-top: 1px solid var(--rule-dark);
  margin-top: .5rem;
}
/* open without JavaScript via :target; with it via .is-open */
.site-nav:target, .site-nav.is-open{ display: block; }
.site-nav ul{ display: flex; flex-direction: column; }
.site-nav a{
  display: flex; align-items: center;
  min-height: 3rem;
  font-size: 1.125rem;
  color: var(--ivory);
  text-decoration: none;
}
.site-nav a:hover{ text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: .35em; }
.site-nav .nav-action a{
  display: inline-flex; justify-content: center;
  margin-top: .5rem; padding: .55rem 1.25rem;
  color: var(--gun);
  background: var(--ivory);
  border-radius: 2px;
}
.site-nav .nav-action a:hover{ background: #fff; text-decoration: none; }

@media (min-width: 48em){
  .header-inner{ min-height: 4.5rem; }
  .wordmark{ font-size: min(1.0625rem, 4.4vw); letter-spacing: .3em; gap: .875rem; }
  .wordmark svg{ width: 2.75rem; height: 2.625rem; }
  .wordmark span{ width: auto; }
}
/* the full nav needs about 1016px beside the wordmark; below that the menu button stays */
@media (min-width: 66em){
  .menu-link{ display: none; }
  .site-nav, .site-nav:target, .site-nav.is-open{
    display: block; flex-basis: auto;
    padding: 0; margin: 0; border: 0;
  }
  .site-nav ul{ flex-direction: row; align-items: center; gap: .5rem 2.25rem; }
  .site-nav a{ min-height: 2.75rem; font-size: 1.0625rem; }
  .site-nav .nav-action a{ margin-top: 0; }
}

/* ── 1. hero ────────────────────────────────────────────────── */
/* Source order is the phone order: eyebrow, headline, the short statement, the primary action,
   the art and its caption, then the traceability sentence and the secondary link.
   From 37.5em the two copy wrappers dissolve and their children are placed on the hero grid, so
   the second sentence sits under the first and the secondary link sits beside the primary action.
   Nothing focusable is reordered: the tab order is the source order at every width. */
.hero-copy{ padding: 1.5rem var(--gutter) 1.5rem; }
.hero-more{ padding: .75rem var(--gutter) 2rem; }
.hero-h1{
  margin-top: 1rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: min(clamp(2.75rem, 1.6rem + 5.2vw, 4.25rem), 19vw);
  line-height: 1.03;
  letter-spacing: -.02em;
  color: var(--ivory);
}
.hero-sub, .hero-sub2{
  max-width: 31rem;
  font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.3125rem);
  line-height: 1.45;
  color: var(--ivory-soft);
}
.hero-sub{ margin-top: 1.25rem; }
.hero-actions{ margin-top: 1.5rem; }
.hero-more .link-quiet{ margin-top: .5rem; }

.hero-art{ position: relative; }
.hero-art img{
  width: 100%; height: auto;
  aspect-ratio: 2 / 1;
  object-fit: contain;
}
.hero-cap{
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem var(--gutter) .875rem;
  font-family: var(--mono);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--ivory-soft);
}
.hero-cap::before{
  content: ""; flex: none;
  width: 1.5rem; height: 1px; background: var(--brass);
}

@media (min-width: 37.5em){
  /* tablet: all the copy, the two actions side by side, then the art band */
  .hero-copy, .hero-more{ display: contents; }
  .hero-grid{
    display: grid;
    grid-template-columns: var(--gutter) auto minmax(0, 1fr) var(--gutter);
  }
  .hero-copy > *, .hero-more > *{ grid-column: 2 / 4; }
  .hero-copy > .eyebrow{ grid-row: 1; margin-top: 3.25rem; }
  .hero-h1{ grid-row: 2; }
  .hero-sub{ grid-row: 3; }
  .hero-sub2{ grid-row: 4; margin-top: .125rem; }
  .hero-copy > .hero-actions{ grid-row: 5; grid-column: 2; margin-top: 1.75rem; }
  .hero-more > .link-quiet{
    grid-row: 5; grid-column: 3;
    justify-self: start; align-self: end;
    margin: 0 0 .125rem 1.75rem;
  }
  .hero-art{ grid-row: 6; grid-column: 1 / -1; margin-top: 2.75rem; }
}
@media (min-width: 60em){
  .hero-grid{
    grid-template-columns: var(--gutter) auto minmax(0, 1fr) 56%;
    grid-template-rows: 1fr repeat(5, auto) 1fr;
    max-width: var(--frame);
    margin-inline: auto;
  }
  .hero-copy > .eyebrow{ grid-row: 2; margin-top: 0; }
  .hero-h1{ grid-row: 3; margin-right: 2rem; font-size: min(4.75rem, 5.9vw); }
  .hero-sub{ grid-row: 4; margin-right: 2rem; }
  .hero-sub2{ grid-row: 5; margin-right: 2rem; }
  .hero-copy > .hero-actions, .hero-more > .link-quiet{ grid-row: 6; }
  .hero-art{ grid-column: 4; grid-row: 1 / -1; margin-top: 0; }
  .hero-art img{ aspect-ratio: 4 / 3; }
  /* the edge blend sits on the image, never on the copy */
  .hero-art picture{ display: block; position: relative; }
  .hero-art picture::after{
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, var(--gun) 0%, rgb(16 23 22 / 0) 9%);
  }
  .hero-cap{ justify-content: flex-end; }
}
@media (min-width: 60em) and (min-width: 1281px){
  .hero-art picture::after{
    background:
      linear-gradient(90deg, var(--gun) 0%, rgb(16 23 22 / 0) 9%),
      linear-gradient(270deg, var(--gun) 0%, rgb(16 23 22 / 0) 7%);
  }
}

/* ── bands on ivory ─────────────────────────────────────────── */
/* Each band is spaced for what it holds; there is no single band padding.
   From 60em the ivory bands share one three-column measure, so their rules line up down the page. */
.band--deep{ background: var(--ivory-deep); }
.eyebrow + .h-section{ margin-top: .875rem; }

/* ── 2. approach — orientation, then on to the software ─────── */
.approach{ padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.steps{ margin-top: 1.125rem; }
.step{
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0 1rem;
  padding-block: 1rem;
  border-top: 1px solid var(--rule-light);
}
.step:last-child{ padding-bottom: 0; }
.step-icon{ width: 2rem; height: 2rem; margin-top: .125rem; color: var(--brass-dark); }
.step-h{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 1.3rem + .9vw, 1.9375rem);
  line-height: 1.15; letter-spacing: -.01em;
  color: var(--ink);
}
.step p{ margin-top: .25rem; font-size: 1.0625rem; line-height: 1.5; max-width: 34rem; }

@media (min-width: 52em){
  .steps{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.75rem; }
  .step{
    display: block;
    padding: .25rem 2.5rem .25rem;
    border-top: 0;
    border-left: 1px solid var(--rule-light);
  }
  .step:first-child{ padding-left: 0; border-left: 0; }
  .step:last-child{ padding-right: 0; padding-bottom: .25rem; }
  .step-mark{ display: flex; align-items: center; gap: 1rem; margin-bottom: .875rem; }
  .step-mark::after{ content: ""; width: 3.5rem; height: 1px; background: var(--brass-dark); }
  .step-icon{ margin-top: 0; }
  .step p{ margin-top: .375rem; max-width: 22rem; }
}

/* ── 3. evidence — the stage ────────────────────────────────── */
.evidence{ padding-block: clamp(2.5rem, 5vw, 3.25rem) clamp(2.75rem, 5vw, 3.5rem); border-top: 1px solid var(--rule-light); }
.evidence-head .lede{ margin-top: .625rem; }
.evidence-intro{ margin-top: 1rem; max-width: 36rem; }
@media (min-width: 60em){
  .evidence-head{
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 0 4rem; align-items: end;
  }
  .evidence-intro{ margin-top: 0; font-size: 1.0625rem; line-height: 1.55; }
}

/* the limits: compact notes, two columns from 60em */
.limits{ margin-top: 1.75rem; }
.limits-list{ margin-top: .625rem; border-bottom: 1px solid var(--rule-light); }
.limit{ padding-block: .6875rem; border-top: 1px solid var(--rule-light); }
.limit dt{
  font-family: var(--ui); font-stretch: 100%; font-weight: 700;
  font-size: .8125rem; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass-dark);
}
/* on a phone the label runs in at the head of its note */
.limit dt, .limit dd{ display: inline; }
.limit dt{ margin-right: .5rem; }
.limit dd{ font-size: 1.0625rem; line-height: 1.5; color: var(--ink); }
@media (min-width: 37.5em){
  .limit{ display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0 1.25rem; }
  .limit dt, .limit dd{ display: block; }
  .limit dt{ margin-right: 0; padding-top: .25rem; }
}
@media (min-width: 60em){
  .limits-list{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4rem; }
}

/* The evidence stage: a crop of a real capture of the console, mounted on the gunmetal of the
   opening, with four short notes that say what the reader is looking at. The console is shown as
   it is; only the mount belongs to this page. Two crops (see tools/console-capture.json): a
   narrower one edge to edge on a phone, the full width of the report list from 37.5em.
   The numbered markers are HTML over the image, positioned as percentages of the crop showing. */
.capture-wrap{ margin-top: 1.75rem; }
.capture-frame{
  margin-inline: calc(-1 * var(--gutter)); /* edge to edge on a phone, like the hero art */
  padding: .5rem 0;
  background: var(--gun);
  border-top: 2px solid var(--brass);
}
.capture-shot{ position: relative; }
.capture-shot img{ width: 100%; height: auto; background: #F5F8FB; }
/* on a phone the crop is cut at the right; the fade says the lines run on */
.capture-shot::after{
  content: ""; position: absolute; inset: 0 0 0 auto; width: 2.5%; pointer-events: none;
  background: linear-gradient(90deg, rgb(255 255 255 / 0), #fff);
}
.pin{
  position: absolute; left: var(--x); top: var(--y);
  display: grid; place-items: center;
  /* sized to the image they sit on, which does not grow with text size; capped so they stay on it */
  --pin: min(1.375rem, 7vw);
  width: var(--pin); height: var(--pin); margin: calc(var(--pin) / -2) 0 0 calc(var(--pin) / -2);
  border-radius: 50%;
  background: var(--brass); color: var(--gun);
  box-shadow: 0 0 0 2px var(--gun);
  font-family: var(--mono); font-size: min(.8125rem, 4.2vw); line-height: 1;
}
/* console-capture:start - written by tools/console-capture.py from tools/console-capture.json; edit it there */
.capture-shot img{ aspect-ratio: 1060 / 706; }
.pin--count{ display: grid; --x: 24.91%; --y: 5.10%; }
.pin--report{ display: grid; --x: 3.21%; --y: 31.87%; }
.pin--terms{ display: grid; --x: 3.21%; --y: 52.69%; }
.pin--status{ display: grid; --x: 28.68%; --y: 17.99%; }
@media (min-width: 37.5em){
  .capture-shot img{ aspect-ratio: 1416 / 790; }
  .pin--count{ display: grid; --x: 21.89%; --y: 15.19%; }
  .pin--report{ display: grid; --x: 5.65%; --y: 39.11%; }
  .pin--terms{ display: grid; --x: 5.65%; --y: 57.72%; }
  .pin--status{ display: grid; --x: 24.72%; --y: 26.71%; }
}
/* console-capture:end */
.capture-cap{
  margin-top: .75rem;
  font-family: var(--mono); font-size: .8125rem; line-height: 1.6;
  color: var(--ink-muted);
}
.capture-cap .text-link{ font-family: var(--serif); font-size: 1rem; }
.capture-notes{ margin-top: 1.125rem; counter-reset: note; border-bottom: 1px solid var(--rule-light); }
.capture-note{
  position: relative;
  padding: .6875rem 0 .6875rem 2.25rem;
  border-top: 1px solid var(--rule-light);
  counter-increment: note;
}
.capture-note::before{
  content: counter(note);
  position: absolute; left: 0; top: .6875rem;
  display: grid; place-items: center;
  width: 1.375rem; height: 1.375rem;
  border-radius: 50%;
  background: var(--brass); color: var(--gun);
  font-family: var(--mono); font-size: .8125rem; line-height: 1;
}
.capture-note h3{
  font-family: var(--ui); font-stretch: 100%; font-weight: 700;
  font-size: .8125rem; line-height: 1.7; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass-dark);
}
.capture-note p{ margin-top: .125rem; font-size: 1.0625rem; line-height: 1.5; color: var(--ink); }

@media (min-width: 37.5em){
  .capture-frame{ margin-inline: 0; padding: .625rem; }
  .capture-shot::after{ content: none; }
  .pin{ --pin: min(1.5rem, 4vw); }
  .capture-notes{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; }
}
@media (min-width: 60em){
  /* the crop beside its notes */
  .capture-wrap{ display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 3rem; align-items: start; }
  .capture-notes{ display: block; margin-top: 0; }
}

/* ── 4. scope — a pair, status first ────────────────────────── */
.scope{ padding-block: clamp(2.5rem, 5vw, 3.5rem); border-top: 2px solid var(--brass); }
.offers{ margin-top: 1.5rem; }
.offer{ padding-block: 1.375rem; border-top: 1px solid var(--rule-light); }
.offer:last-child{ padding-bottom: 0; }
.offer-status{
  display: flex; align-items: center; gap: .625rem;
  font-family: var(--mono); font-size: .8125rem; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink);
}
.offer-status::before{
  content: ""; flex: none;
  width: .625rem; height: .625rem; border-radius: 50%;
  border: 1.5px solid var(--brass-dark);
}
.offer-status--live::before{ background: var(--brass-dark); }
.offer-h{
  margin-top: .5rem;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 1.35rem + .7vw, 1.8125rem);
  line-height: 1.2; letter-spacing: -.01em; color: var(--ink);
}
.offer-text{ margin-top: .5rem; font-size: 1.0625rem; line-height: 1.55; max-width: 34rem; }
@media (min-width: 37.5em) and (max-width: 59.99em){
  .offers{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; }
  .offer:last-child{ padding-bottom: 1.375rem; }
}
@media (min-width: 60em){
  .scope-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scope-grid > .h-section{ align-self: start; }
  .offers{ display: contents; }
  .offer, .offer:last-child{
    padding: .25rem 2.5rem .25rem;
    border-top: 0;
    border-left: 1px solid var(--rule-light);
  }
  .offer:last-child{ padding-right: 0; }
}

/* ── 5. about — short because the approved content is short ─── */
.about{ padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.about-body{ margin-top: 1rem; }
.about-body p + p{ margin-top: .5rem; max-width: 40rem; }
@media (min-width: 60em){
  .about-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .about-body{
    grid-column: 2 / span 2;
    margin-top: 0; padding: .25rem 0 .25rem 2.5rem;
    border-left: 1px solid var(--rule-light);
  }
}

/* ── 6. enquiry ─────────────────────────────────────────────── */
/* Source order is the phone order: heading and introduction, the form, then the other ways to reach
   us. From 60em the heading and the contact lines share the left column and the form takes the right. */
.invite{ padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.invite .lede{ margin-top: .75rem; color: var(--ivory-soft); }
.invite-expect{ margin-top: .625rem; max-width: 29rem; font-size: 1.0625rem; }
.invite-form{ margin-top: 1.75rem; }
.invite-alt{ margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--rule-dark); max-width: 36rem; }
.invite-contact{ font-size: 1.0625rem; }
/* long addresses may break anywhere; the wordmark must not (it sizes itself by its longest word) */
.text-link, .site-footer a:not(.wordmark), .site-nav a{ overflow-wrap: anywhere; }
.invite-note{ margin-top: .5rem; max-width: 36rem; font-size: 1rem; }

/* enquiry form */
.enquiry{ max-width: 44rem; }
.field{ margin-top: 1.25rem; }
.field:first-of-type{ margin-top: 0; }
.field label{
  display: block;
  font-family: var(--ui); font-variation-settings: "wdth" 100; font-weight: 600;
  font-size: .9375rem; line-height: 1.4; letter-spacing: .02em;
  color: var(--ivory);
}
.field .hint{ display: block; margin-top: .125rem; font-family: var(--serif); font-weight: 400; font-size: 1rem; letter-spacing: 0; color: var(--ivory-soft); }
.field input, .field textarea{
  display: block; width: 100%;
  margin-top: .5rem;
  min-height: 3rem;
  padding: .625rem .875rem;
  font: inherit; font-size: 1.125rem; line-height: 1.45;
  color: var(--ivory);
  background: #1A2322;
  border: 1px solid #8C948E;
  border-radius: 2px;
}
.field textarea{ min-height: 8.5rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible{ outline-offset: 2px; border-color: var(--btn-top); }
.field [aria-invalid="true"]{ border-color: #F2B8A8; border-width: 2px; }
.field-error{
  display: flex; gap: .5rem; align-items: baseline;
  margin-top: .5rem;
  font-size: 1rem; line-height: 1.45;
  color: #F6C7BA;
  overflow-wrap: anywhere;
}
.field-error::before{ content: "!"; flex: none; font-family: var(--ui); font-weight: 600; }
.hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enquiry .btn{ margin-top: 1.5rem; border: 0; }
.enquiry .btn[disabled]{ opacity: .6; cursor: progress; }
.enquiry .invite-note{ margin-top: .875rem; }
.form-status{
  padding: 1rem 1.125rem;
  border-left: 2px solid var(--brass);
  background: #1A2322;
  color: var(--ivory);
}
.enquiry:not([hidden]) + .form-status{ margin-top: 1.25rem; }
.form-status--error{ border-left-color: #F2B8A8; }
.form-status:focus-visible{ outline-offset: 2px; }

@media (min-width: 37.5em){
  /* name and business email share a row where they fit */
  .field-row{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; align-items: start; }
  .field-row .field{ margin-top: 0; }
}
@media (min-width: 60em){
  .invite-grid{
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr; gap: 0 4rem;
  }
  .invite-head{ grid-column: 1; grid-row: 1; }
  .invite-form{ grid-column: 2; grid-row: 1 / span 2; margin-top: .5rem; }
  .invite-alt{ grid-column: 1; grid-row: 2; align-self: start; }
  .enquiry{ max-width: none; }
}

/* ── 7. footer ──────────────────────────────────────────────── */
.site-footer{ border-top: 1px solid var(--rule-dark); padding-block: 2.5rem 3rem; font-size: 1.0625rem; }
.footer-grid{ display: grid; gap: 1.75rem; }
.footer-brand p{ margin-top: .75rem; }
.footer-links{ display: flex; flex-direction: column; }
.site-footer a:not(.wordmark){
  display: inline-flex; align-items: center; min-height: 2.75rem;
  color: var(--ivory-soft);
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}
.site-footer a:not(.wordmark):hover{ color: var(--ivory); text-decoration-thickness: 2px; }
.footer-legal{ margin-top: 1.75rem; font-size: 1rem; }
@media (min-width: 52em){
  .footer-grid{ grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 0 3rem; }
}

/* ── text pages (/small-business, /privacy, 404) ────────────── */
.page{ padding-block: clamp(3rem, 8vw, 6rem); }
.page-h1{
  margin-top: .875rem;
  font-family: var(--serif); font-weight: 400;
  font-size: min(clamp(2.375rem, 1.6rem + 3.4vw, 3.75rem), 16vw);
  line-height: 1.06; letter-spacing: -.018em;
  color: var(--ink);
  max-width: 18em;
  text-wrap: balance;
}
.page-body{ margin-top: 1.75rem; }
.page-actions{ margin-top: 2rem; }
.page-actions p{ margin-top: 1rem; }
.page-actions .text-link{ display: inline-flex; align-items: center; min-height: 2.75rem; }
.doc h2{
  margin-top: 2.5rem;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 1.35rem + .7vw, 1.8125rem);
  line-height: 1.2; color: var(--ink);
}
.doc h2 + p{ margin-top: .75rem; }
.doc p + p{ margin-top: 1em; }
.doc p, .doc li{ max-width: 42rem; }
.doc ul{ margin-top: .75rem; padding-left: 1.25rem; list-style: disc; }
.doc li + li{ margin-top: .375rem; }
.doc-meta{ margin-top: 1rem; font-family: var(--mono); font-size: .8125rem; color: var(--ink-muted); }

/* ── /small-business — the offer ────────────────────────────── */
/* Source order is the phone order: headline and introduction, the three offer rows, the action.
   From 60em the headline, introduction and action take the left column and the rows the right. */
.sb-offer{ padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.sb-offer .page-h1{ font-size: min(clamp(2.375rem, 1.6rem + 3vw, 3.375rem), 16vw); max-width: 13em; }
.sb-intro{ margin-top: 1.25rem; max-width: 30rem; font-size: 1.1875rem; line-height: 1.55; color: var(--ink); }
.sb-rows{ margin-top: 2.25rem; }
.sb-list{ margin-top: 1.125rem; border-bottom: 1px solid var(--rule-light); }
.sb-row{ padding-block: 1.125rem; border-top: 1px solid var(--rule-light); }
.sb-row:first-child{ border-top: 2px solid var(--brass); }
.sb-row h2{
  font-family: var(--serif); font-weight: 400;
  font-size: 1.5rem; line-height: 1.25; letter-spacing: -.01em;
  color: var(--ink);
}
.sb-row p{ margin-top: .25rem; font-size: 1.0625rem; line-height: 1.55; }
.sb-note{ margin-top: 1.125rem; max-width: 36rem; font-size: 1rem; line-height: 1.55; }
.sb-action{ margin-top: 2rem; }
@media (min-width: 37.5em){
  .sb-row{ display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: 0 1.5rem; align-items: baseline; }
  .sb-row p{ margin-top: 0; }
}
@media (min-width: 60em){
  .sb-grid{
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr; gap: 0 4rem;
  }
  .sb-head{ grid-column: 1; grid-row: 1; }
  .sb-action{ grid-column: 1; grid-row: 2; }
  .sb-rows{ grid-column: 2; grid-row: 1 / span 2; margin-top: 2.125rem; }
}

/* a phone number never breaks across lines, nor does a hyphenated term marked .nb */
a[href^="tel:"], .nb{ white-space: nowrap; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── /small-business/… — one service each ───────────────────── */
/* The hub's two-column offer layout, with a breadcrumb above the headline and plain sections in place
   of the three rows. Written by tools/service-pages.js. */
.crumbs ol{ display: flex; flex-wrap: wrap; align-items: center; gap: 0 .625rem; font-family: var(--ui); font-size: .9375rem; line-height: 1.4; color: var(--ink-muted); }
.crumbs li{ display: inline-flex; align-items: center; min-height: 2.75rem; }
.crumbs li + li::before{ content: "/"; margin-right: .625rem; color: var(--brass-dark); }
.crumbs a{ display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink); text-decoration: underline; text-decoration-color: var(--brass-dark); text-decoration-thickness: 1px; text-underline-offset: .22em; }
.crumbs a:hover{ text-decoration-thickness: 2px; }
.svc .page-h1{ margin-top: .5rem; }
.svc-sec{ padding-block: 1.375rem; border-top: 1px solid var(--rule-light); }
.svc-sec:first-child{ border-top: 2px solid var(--brass); }
.svc-sec h2{ font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.svc-sec p, .svc-sec ul{ margin-top: .625rem; max-width: 36rem; font-size: 1.0625rem; line-height: 1.55; }
.svc-sec ul:not(.svc-links){ padding-left: 1.25rem; list-style: disc; }
.svc-sec li + li{ margin-top: .375rem; }
.svc-links li + li{ margin-top: 0; }
.svc-links .text-link{ display: inline-flex; align-items: center; min-height: 2.75rem; }
.svc-contact{ margin-top: 1rem; max-width: 26rem; font-size: 1rem; line-height: 1.55; }
/* the hub's rows: a link from each offer to its own page */
.sb-row .text-link{ display: flex; align-items: center; width: fit-content; min-height: 2.75rem; }

/* ── website prices: on the website page and the hub ───────── */
.tiers{ margin-top: .875rem; border-bottom: 1px solid var(--rule-light); }
.tier{ padding-block: .875rem; border-top: 1px solid var(--rule-light); }
.tier dt{ font-family: var(--ui); font-stretch: 100%; font-size: .9375rem; line-height: 1.4; color: var(--ink-muted); }
.tier-price{ font-family: var(--serif); font-size: 2rem; line-height: 1.15; letter-spacing: -.012em; color: var(--ink); }
.tier-price span{ font-size: 1.0625rem; letter-spacing: 0; }
.tier dd + dd{ margin-top: .25rem; max-width: 30rem; font-size: 1.0625rem; line-height: 1.5; }
@media (min-width: 37.5em){
  .tier{ display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: 0 1.5rem; align-items: baseline; }
  .tier dt{ grid-column: 1; grid-row: 1; }
  .tier-price{ grid-column: 1; grid-row: 2; }
  .tier dd + dd{ grid-column: 2; grid-row: 1 / span 2; margin-top: 0; align-self: center; }
}

/* ── service pages and the hub's price band: one row per topic ── */
/* After the two-column opening, each topic is a full-width row: heading left, explanation right,
   on the same 5fr / 7fr columns as the opening from 60em. Stacked below that. */
.svc-rows{ padding-bottom: clamp(3rem, 7vw, 5rem); }
.svc-row{ padding-block: 1.75rem; border-top: 1px solid var(--rule-light); }
.svc-rows > .svc-row:first-child, .sb-band .svc-row{ border-top: 2px solid var(--brass); }
.svc-row > h2{ font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 1.35rem + .6vw, 1.75rem); line-height: 1.2; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.svc-row-body{ margin-top: .75rem; }
.svc-row-body > p, .svc-row-body > ul{ max-width: 40rem; font-size: 1.0625rem; line-height: 1.55; }
.svc-row-body > * + *{ margin-top: .75rem; }
.svc-row-body > ul:not(.svc-links){ padding-left: 1.25rem; list-style: disc; }
.svc-row-body li + li{ margin-top: .375rem; }
.svc-row-body .svc-links li + li{ margin-top: 0; }
.svc-row-body .svc-links .text-link, .svc-row-body > p > .text-link:only-child{ display: inline-flex; align-items: center; min-height: 2.75rem; }
.svc-action{ padding-top: .5rem; }
@media (min-width: 60em){
  .svc-row{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 4rem; align-items: baseline; }
  .svc-row-body{ margin-top: 0; }
}
.sb-band{ padding-block: clamp(1rem, 3vw, 2rem) clamp(2.5rem, 6vw, 4rem); }
.sb-band .tiers{ margin-top: 0; }
.sb-band .tier:first-child{ border-top: 0; padding-top: 0; }

/* the illustrative workflows: numbered steps, clearly labelled as possible applications */
.svc-label{ font-size: 1rem; line-height: 1.5; color: var(--ink-muted); max-width: 36rem; }
.flows{ display: grid; gap: 1rem; margin-top: 1rem; }
.flow{ padding-top: .875rem; border-top: 1px solid var(--rule-light); }
.flow h3{ font-family: var(--serif); font-weight: 400; font-size: 1.25rem; line-height: 1.3; color: var(--ink); }
.flow ol{ margin-top: .5rem; padding-left: 1.375rem; list-style: decimal; font-size: 1.0625rem; line-height: 1.5; }
.flow li + li{ margin-top: .25rem; }
@media (min-width: 48em){
  .flows{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 2rem; }
}

/* ── service pages: a jump list, phone widths only ──────────── */
/* The service pages are long on a phone, where every row is stacked. This lists the page's own
   sections under the introduction. From 48em the rows sit two-up and the list is removed. */
.svc-jump{ margin-top: 1.5rem; padding-top: .875rem; border-top: 1px solid var(--rule-light); }
.svc-jump > p{ font-family: var(--ui); font-stretch: 100%; font-weight: 700; font-size: .8125rem; line-height: 1.5; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-dark); }
.svc-jump ul{ margin-top: .25rem; }
.svc-jump a{
  display: flex; align-items: center; min-height: 2.75rem;
  font-size: 1.0625rem; line-height: 1.4; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--brass-dark);
  text-decoration-thickness: 1px; text-underline-offset: .22em;
}
.svc-jump a:hover{ text-decoration-thickness: 2px; }
@media (min-width: 48em){
  .svc-jump{ display: none; }
}

/* ── the enquiry endpoint's own page, when a submission could not be sent ── */
/* Only reached without JavaScript: it carries the visitor's own message back so it is not lost. */
.kept{ margin-top: 1.5rem; }
.kept label{
  display: block;
  font-family: var(--ui); font-stretch: 100%; font-weight: 700;
  font-size: .8125rem; line-height: 1.5; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass-dark);
}
.kept textarea{
  display: block; width: 100%; max-width: 42rem;
  margin-top: .5rem; min-height: 8rem; padding: .625rem .875rem;
  font: inherit; font-size: 1.0625rem; line-height: 1.5;
  color: var(--ink); background: #FBF8F1;
  border: 1px solid var(--rule-light); border-radius: 2px;
}