/* ============================================================================
   OPTION C — "SIGNAL"
   The site as a confident consultancy brand. Warm ground, large type, real
   whitespace, copper used as a deliberate accent rather than a rule colour.
   Revised: the marketing-pill eyebrows are gone, replaced by a monospace
   section marker with a copper rule; card shadows are gone in favour of a
   crisp warm hairline (printed report, not floating SaaS card); the 0–4 scale
   is a real ramp; vertical rhythm tightened to cut roughly a page-and-a-half
   off the phone scroll. Mobile-first. Navigation is a fixed bottom tab bar in
   the thumb zone on phones, promoted to a top nav from 48rem. No JavaScript.
   ========================================================================== */

:root {
  --paper:   #FBFAF7;
  --wash:    #F2EFE8;
  /* The hairline is the design: cards, ledger rows, datasheet rows and section
     breaks are all it. At #D8CFBE it measured 1.48:1 on paper and 1.55:1 on a
     white card — below the threshold where a 1px line survives a 1x screen in
     daylight, so the "printed report" reading collapsed into floating text.
     1.80:1 / 1.88:1 is a line you can see without turning the page into a grid. */
  --line:    #C8BCA5;
  --hair:    #948871;
  --ink:     #14181D;
  --ink-2:   #333C46;
  --slate:   #55606B;
  --copper:  #A85C36;   /* fills, bars, the logo mark */
  --copper-d:#8F4A28;   /* copper as TEXT — 6.3:1 on paper */

  --ground:  var(--paper);
  --surface: #FFFFFF;
  --raised:  var(--wash);
  --text:    var(--ink);
  --text-2:  var(--ink-2);
  --muted:   var(--slate);
  --rule:    var(--line);
  --rule-hi: var(--hair);
  --edge:    var(--hair);
  --accent:  var(--copper);
  --accent-ink: var(--copper-d);
  --accent-wash: rgba(168, 92, 54, 0.08);
  --mark-bar: var(--ink);
  --on-accent: #FFFFFF;
  --focus:   var(--ink);
  --shadow: 0 1px 2px rgba(20,24,29,0.04), 0 8px 24px -16px rgba(20,24,29,0.28);

  --f-display: "Syne", "Trebuchet MS", sans-serif;
  --f-body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure: 35rem;
  --page: 70rem;
  --gutter: 1.35rem;
  --tap: 48px;
  --r: 7px;
  --tabbar: 60px;
  /* The desktop masthead band. .head-bar and the nav that overlays it read the
     same token so the two can never drift out of alignment. */
  --headbar: 72px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #14181D; --surface: #1C2128; --raised: #20262E;
    --text: #F0ECE5; --text-2: #D6D1C9; --muted: #A3ADB8;
    /* was #333B45 — 1.43:1 on a surface card, fainter than the light theme's
       already-too-faint line. #414C59 is 2.04:1 on ground, 1.85:1 on surface. */
    --rule: #414C59; --rule-hi: #6B7887; --edge: #6B7887;
    --accent: #DE8858; --accent-ink: #E9A075; --accent-wash: rgba(222, 136, 88, 0.13);
    --mark-bar: #F0ECE5; --on-accent: #14181D; --focus: #F0ECE5;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 28px -18px rgba(0,0,0,0.75);
  }
}
:root[data-theme="dark"] {
  --ground: #14181D; --surface: #1C2128; --raised: #20262E;
  --text: #F0ECE5; --text-2: #D6D1C9; --muted: #A3ADB8;
  --rule: #414C59; --rule-hi: #6B7887; --edge: #6B7887;
  --accent: #DE8858; --accent-ink: #E9A075; --accent-wash: rgba(222, 136, 88, 0.13);
  --mark-bar: #F0ECE5; --on-accent: #14181D; --focus: #F0ECE5;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 28px -18px rgba(0,0,0,0.75);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; background: var(--ground); color: var(--text);
  font-family: var(--f-body); font-size: 1.075rem; line-height: 1.56;
  -webkit-font-smoothing: antialiased;
  /* + 0.6rem so the last line of the footer clears the bar rather than
     touching it, and so a bar that grows by a pixel never covers content. */
  padding-bottom: calc(var(--tabbar) + 0.6rem + env(safe-area-inset-bottom));
}
@media (min-width: 48rem) { body { padding-bottom: 0; } }

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: 0.9rem 1.2rem; font-weight: 700; text-decoration: none;
  border-radius: 0 0 var(--r) 0; }
.skip:focus { left: 0; }

h1, h2, h3 { font-family: var(--f-display); font-weight: 800; margin: 0;
  text-wrap: balance; letter-spacing: -0.022em; }
h1 { font-size: clamp(2.05rem, 8.6vw, 3.3rem); line-height: 1.04; }
h2 { font-size: clamp(1.5rem, 5.6vw, 2.1rem); line-height: 1.12; }
h3 { font-family: var(--f-body); font-weight: 700; font-size: 1.06rem;
  line-height: 1.32; letter-spacing: 0; }
p { margin: 0; }

.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 40rem) { :root { --gutter: 2.25rem; } }
@media (min-width: 64rem) { :root { --gutter: 3rem; } }
.measure { max-width: var(--measure); }

/* ---------- logo ---------- */
/* .lockup-svg carries no width/height attributes: this height rule is the only
   thing sizing the mark. Never remove or zero it. */
.lockup { display: inline-flex; align-items: center; text-decoration: none;
  line-height: 0; min-height: 44px; }
.lockup-svg { height: 3em; width: auto; display: block; }
.lockup--sm { font-size: 14px; }
.lockup--xs { font-size: 13px; }
@media (min-width: 40rem) { .lockup--sm { font-size: 15px; } }

/* ---------- header ---------- */
/* On phones the header carries the lockup and nothing else — navigation lives
   in the tab bar at the other end of the screen. A sticky bar that holds no
   control is 58px of a 844px viewport spent on a logo: with the tab bar that
   is 14% of every screen of a 8,600px page. So it scrolls away on phones and
   only becomes sticky from 48rem, where it is actually carrying the nav.
   position: relative is kept so the absolutely-positioned desktop nav always
   has a containing block. */
.site-head { background: var(--ground); position: relative; z-index: 20;
  border-bottom: 1px solid var(--rule); }
@media (min-width: 48rem) { .site-head { position: sticky; top: 0; } }
.head-bar { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 58px; }

/* mobile: fixed bottom tab bar in the thumb zone */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--surface); border-top: 1px solid var(--edge);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 20px -14px rgba(20,24,29,0.35);
}
.nav-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  padding-inline: 0; }
.nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: var(--tabbar); padding: 0.3rem 0.12rem;
  font-size: 0.71rem; font-weight: 600; letter-spacing: -0.008em;
  color: var(--text); text-decoration: none; text-align: center;
  border-top: 3px solid transparent;
}
/* Below 22rem "Engagements" is the widest label and would wrap, growing the
   bar past --tabbar and eating the bottom of the footer. Shrink the label
   rather than let the bar grow past the space the body reserved for it. */
@media (max-width: 22rem) { .nav a { font-size: 0.63rem; } }
.nav a .tab-l { display: block; line-height: 1.2; }
.nav a[aria-current="page"] { color: var(--accent-ink); border-top-color: var(--accent);
  background: var(--accent-wash); font-weight: 700; }

/* From 48rem the tab bar becomes a top nav laid over the sticky masthead. The
   nav box is click-through (pointer-events) so it can never swallow the logo
   link, and it right-aligns inside the same --page grid as the header, so it
   sits beside the wordmark at every width instead of only one.

   It is anchored with position: fixed, NOT position: absolute. <nav class="nav">
   is a SIBLING that follows </header> — it is not inside .site-head — so
   `position: absolute; inset: 0` had no positioned ancestor to resolve against
   and fell back to the initial containing block: a full-viewport box. With
   align-items: center that parked the five links halfway down the first screen
   (y=376 at 1024x800, y=426 at 1280x900, y=488 at 768x1024), floating over the
   hero copy, and — because an absolutely positioned box scrolls with the
   document — sent them off the top of the window the moment the page moved,
   leaving the sticky header carrying nothing but the logo. Every width from
   48rem up had no navigation at all below the first screen.

   fixed + top:0 is what the "laid over the sticky header" intent needed: it is
   out of flow (so it cannot displace <main>, which is why a negative margin was
   rejected) and it is viewport-anchored (so it tracks the sticky header instead
   of scrolling away). Height is --headbar, the same token .head-bar uses, so
   the links centre on the wordmark. z-index must clear .site-head's 20 — the
   header paints an opaque --ground background and would otherwise cover it. */
@media (min-width: 48rem) {
  .site-head .head-bar { min-height: var(--headbar); }
  .nav { position: fixed; top: 0; left: 0; right: 0; bottom: auto;
    height: var(--headbar); z-index: 25; pointer-events: none;
    display: flex; align-items: center;
    background: none; border-top: 0; box-shadow: none; padding-bottom: 0; }
  .nav-rail { display: flex; justify-content: flex-end; gap: 0.2rem; width: 100%;
    padding-inline: var(--gutter); max-width: var(--page); margin-inline: auto; }
  .nav a { pointer-events: auto;
    flex-direction: row; min-height: var(--tap); padding: 0 0.8rem;
    font-size: 0.88rem; font-weight: 600; letter-spacing: 0;
    color: var(--text); border-top: 0; border-radius: var(--r); background: none; }
  .nav a:hover { color: var(--accent-ink); background: var(--raised); }
  .nav a[aria-current="page"] { background: var(--accent-wash); color: var(--accent-ink);
    box-shadow: inset 0 -2px 0 var(--accent); }
}

/* ---------- sections ---------- */
main { display: block; }
section { padding-block: clamp(2.5rem, 8vw, 4.75rem); }
section + section { border-top: 1px solid var(--rule); }
.hero { padding-block: clamp(2.25rem, 7.5vw, 4.25rem); }

.stack { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.stack.tight { gap: 0.65rem; }
.stack.loose { gap: 1.75rem; }
.cta-stack { gap: 1.1rem; }

/* The lede is the sentence that answers "is this for me". It was the palest
   text on the first screen; --muted is a caption colour, not a promise
   colour. Promoted to --text-2 (about 10:1 on paper). */
.lede { font-size: clamp(1.1rem, 4.25vw, 1.3rem); line-height: 1.47; color: var(--text-2);
  max-width: 41rem; }
.body-copy { color: var(--text-2); }
.body-copy strong { color: var(--text); font-weight: 600; }

/* ---------- a heading inside running prose ----------
   Every other h3 on this site lives inside a card or a numbered ledger row,
   where the container's edge supplies the hierarchy and 1.06rem body-bold is
   plenty. The study's "What we found" is the one h3 standing bare in prose,
   and there it was 1.06rem against 1.075rem body text with 1.75rem above it —
   the same size as the paragraph it introduces, separated by barely more than
   one line of leading. It read as a bolded run-in, so the h2/h3 pair on that
   page read as an accident rather than as two levels. A rule above and a real
   size step make the sub-part deliberate. The rule is the pattern already used
   for stacked disclosures in .panel, not a new device.
   Scoped to a direct child of .stack, which no card or ledger h3 ever is. */
.stack > h3 {
  width: 100%; max-width: var(--measure);
  font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.006em;
  padding-top: 1.5rem; border-top: 1px solid var(--rule);
}

/* ---------- section marker ----------
   Was a soft wash pill. Thirty-seven of them across five pages made the site
   read as template marketing; a mono label on a copper rule reads as a label
   on a document, which is the brand. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.65rem;
  font-family: var(--f-mono);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--accent-ink); margin: 0;
  background: none; padding: 0; border-radius: 0;
}
.eyebrow::before { content: ""; flex: none; width: 1.35rem; height: 2px;
  background: var(--accent); }
.eyebrow.plain { color: var(--muted); background: none; }
.eyebrow.plain::before { background: var(--edge); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 52px; padding: 0.85rem 1.6rem;
  background: var(--accent); color: var(--on-accent);
  border: 1px solid var(--accent); border-radius: var(--r); text-decoration: none;
  font-weight: 700; font-size: 1rem; box-shadow: none;
}
.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink);
  color: var(--on-accent); }
/* Every ghost button on this site is the route from a claim to the evidence
   behind it ("See what is in the engagement", "Read the method", "All eight,
   in full"). A grey hairline made them read as afterthoughts; copper marks
   them as the proof path without competing with the one solid CTA. */
.btn.ghost { background: transparent; color: var(--accent-ink);
  border-color: var(--accent); }
.btn.ghost:hover { border-color: var(--accent-ink); color: var(--text);
  background: var(--accent-wash); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 26rem) { .btn { width: 100%; } }

/* ---------- grids: flat, ruled cards ---------- */
/* Eight audience cards stacked on a phone is a wall. Tighter gap and padding
   below 44rem takes roughly a screen and a half off the home page without
   giving up the ruled-card reading. */
.grid { display: grid; gap: 0.65rem; }
.grid > * { background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r); padding: clamp(1rem, 4vw, 1.55rem); box-shadow: none; }
@media (min-width: 44rem) { .grid { gap: 0.85rem; } }
@media (min-width: 44rem) {
  .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.card .eyebrow { margin-bottom: 0.6rem; }
.card h3 { margin-bottom: 0.4rem; }
.card p { color: var(--text-2); font-size: 0.97rem; }

.cols { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) {
  .cols { gap: 3.5rem; }
  .cols.side { grid-template-columns: 10.5rem minmax(0, 1fr); gap: 0 2.5rem; }
  /* the empty rail becomes a deliberate margin note, not dead space */
  .cols.side > * + * { border-left: 1px solid var(--rule); padding-left: 2.5rem; }
}

/* ---------- numbered list as ledger rows ---------- */
.deliverables { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.deliverables li {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0 1rem;
  padding: 1rem 1.15rem; background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--r);
}
/* The tag column gets a full-height hairline, so D1–D5 and the eight values
   read as the numbered schedule of a document rather than as five cards that
   happen to start with a number. */
.deliverables .tag {
  font-family: var(--f-mono); font-weight: 600; color: var(--accent-ink);
  font-size: 0.92rem; line-height: 1.32; padding: 0.06rem 0.9rem 0 0;
  border-right: 1px solid var(--rule);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.deliverables h3 { margin-bottom: 0.25rem; }
.deliverables p { color: var(--text-2); font-size: 0.96rem; }

/* ---------- bulleted list ---------- */
.plain-list { list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.9rem; }
.plain-list li { padding-left: 1.5rem; position: relative; color: var(--text-2); }
.plain-list li::before { content: ""; position: absolute; left: 0; top: 0.6em;
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--accent); }
.plain-list strong { color: var(--text); font-weight: 700; }
/* Every item in these lists opens with a bolded term and then explains it.
   Inline, the seven commitments and the five confidentiality promises are a
   wall of grey a phone reader skips; as term-over-definition they can be
   scanned in the order a buyer actually reads them, which is terms first. */
.plain-list li > strong:first-child { display: block; margin-bottom: 0.15rem;
  line-height: 1.34; }

/* ---------- 0–4 scale ----------
   A real ramp. Every rung is now visible (the track was 1.29:1 against the
   ground) and the fourth step reads as the top of a climb rather than a
   detached copper lozenge. */
.scale { display: flex; gap: 0.4rem; align-items: stretch; width: 100%; max-width: 30rem; }
.scale .step { flex: 1; display: grid; grid-template-rows: auto 3.1rem auto; gap: 0.45rem; }
.scale .bar { align-self: end; width: 100%; background: var(--edge);
  border-radius: 2px; height: 0.45rem; }
.scale .step:nth-child(2) .bar { height: 1.05rem; }
.scale .step:nth-child(3) .bar { height: 1.7rem; }
.scale .step:nth-child(4) .bar { height: 2.35rem; }
.scale .step:nth-child(5) .bar { height: 3.1rem; }
.scale .step.on .bar { background: var(--accent); }
.scale .n { font-family: var(--f-mono); font-weight: 600; font-size: 0.92rem;
  color: var(--muted); font-variant-numeric: tabular-nums; }
.scale .step.on .n { color: var(--accent-ink); }
.scale .lbl { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; }
.scale .step:first-child .lbl { text-align: left; }
.scale .step.on .lbl { color: var(--text); }
.scale .step:last-child .lbl { text-align: right; }

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0; margin: 0; list-style: none; }
/* The seven frameworks are the single most-checked proof on the services page
   — a reviewer looks for their own framework by name. They were the palest
   thing on it. Mono, full ink, a firmer edge. */
.chips li { font-family: var(--f-mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.01em; color: var(--text);
  border: 1px solid var(--edge); background: var(--surface);
  padding: 0.5rem 0.7rem; border-radius: var(--r); }

/* ---------- panel ---------- */
.panel { background: var(--raised); border: 1px solid var(--rule);
  border-radius: var(--r); padding: clamp(1.3rem, 5vw, 2.1rem); }
/* .panel.accent is the "what happens first" block, and on the engagements
   page it is the last thing on a 6,200px scroll. It has to look like the
   end of the road, not another aside. */
.panel.accent { background: var(--surface); border-color: var(--edge);
  border-left: 5px solid var(--accent); }
.panel.accent .panel-h { color: var(--text); }
.panel .panel-h { font-size: clamp(1.25rem, 4.6vw, 1.45rem); margin-bottom: 0.7rem; }
.panel .panel-eyebrow { margin-bottom: 0.85rem; }
.panel .btn-row { margin-top: 1.3rem; }
.panel p { color: var(--text-2); }
.panel p + p { margin-top: 0.85rem; }
/* The disclosure panels are three separate named disclosures run together as
   one grey block, which is exactly how boilerplate is written and exactly how
   it is skipped. Voluntarily declaring a conflict is a credibility asset for
   this firm, so the three names get to be visible. */
.panel .fineprint > strong:first-child { display: block; color: var(--text);
  font-size: 0.92rem; margin-bottom: 0.1rem; }
.panel .fineprint + .fineprint { margin-top: 1.05rem; padding-top: 1.05rem;
  border-top: 1px solid var(--rule); }

.fineprint { font-size: 0.87rem; line-height: 1.58; color: var(--muted); }
.fineprint strong { color: var(--text); }
/* The boxed, copper-edged .hero .fineprint was built for the home page's
   "Fixed fee. Three to four weeks." — a concrete commitment that earned terms-
   of-business styling. That line has since been cut, and the only .hero
   .fineprint left on the site is "Last reviewed 30 August 2026." on the
   security page. Shrink-wrapping was not enough: it still made a maintenance
   date the loudest, most structured object in that hero, louder than the
   p=reject / security.txt sentence directly above it, which is the actual
   checkable evidence and the entire point of the page. A review date is
   metadata. It gets metadata styling. If a hero ever carries a real commitment
   again, .status-strip is the class for it — it already renders exactly the
   box this rule used to. */
.hero .fineprint { font-size: 0.9rem; }

/* A body paragraph closing a hero — the home page's practitioner byline. Set
   in the same face, size and colour as the lede three items above it and hung
   off the same 1.1rem stack gap as everything else, it read as a fourth
   paragraph of hero copy that had fallen out of the lede, and it ran five
   lines on a phone: the hero ended on grey prose instead of on the action.
   A rule and a step down make it a credential line under the CTAs, which is
   what it is. :last-child keeps it off the security hero, where the equivalent
   paragraph is evidence, not a signature, and is followed by the review date. */
.hero .body-copy:last-child {
  width: 100%; max-width: var(--measure);
  margin-top: 0.55rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 0.97rem; line-height: 1.54;
}

/* ---------- definition rows ---------- */
/* ---------- definition rows ----------
   These carry the densest evidence on the site — the study's population and
   method, the control list on the security page. Bold-label-over-body-text
   made them read as prose in a box. A mono uppercase label against a full-ink
   value reads as a datasheet row, which is what a reviewer is scanning for. */
.kv { display: grid; grid-template-columns: minmax(0,1fr); gap: 0.5rem; margin: 0; }
.kv div { display: grid; grid-template-columns: minmax(0,1fr); gap: 0.3rem;
  padding: 0.85rem 1.1rem; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r); font-size: 0.96rem; }
.kv dt { font-family: var(--f-mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); margin: 0; }
.kv dd { margin: 0; color: var(--text); line-height: 1.5; }
@media (min-width: 46rem) {
  .kv div { grid-template-columns: 11rem minmax(0,1fr); gap: 1.5rem; align-items: baseline; }
}

/* Publication status is the study's credibility in one line: it says the
   author notified the companies before publishing. It was a soft wash pill
   among other soft wash pills; given a copper edge it reads as a stamp on a
   record. */
.status-strip { display: flex; align-items: flex-start; gap: 0.65rem;
  border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  background: var(--raised);
  padding: 0.7rem 1rem; border-radius: 0 var(--r) var(--r) 0; font-size: 0.88rem;
  line-height: 1.44; color: var(--text); font-weight: 600; max-width: 34rem; }
.status-strip .dot { width: 0.5rem; height: 0.5rem; background: var(--accent);
  border-radius: 50%; flex: none; margin-top: 0.42em; }

pre.txt { background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 1rem; overflow-x: auto; font-size: 0.8rem;
  line-height: 1.6; margin: 0; font-family: var(--f-mono); color: var(--text); }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--rule); background: var(--raised);
  padding-block: 2.5rem; }
.foot-grid { display: grid; gap: 1.9rem; }
@media (min-width: 52rem) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } }
.foot-blurb { margin-top: 1rem; max-width: 25rem; }
.foot-h { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 0.5rem; font-weight: 600; }
.site-foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.site-foot ul a { display: flex; align-items: center; min-height: 44px;
  color: var(--text); text-decoration: none; font-size: 0.95rem; }
.site-foot ul a:hover { color: var(--accent-ink); }
/* Home, about and security all end in the footer with no closing action in
   the copy. The contact addresses are the only thing there a reader can act
   on, so they are given the weight of an action instead of sitting at the
   same value as a sitemap link. */
.site-foot ul a[href^="mailto:"] { font-weight: 700; color: var(--accent-ink); }
.colophon { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--rule);
  font-size: 0.8rem; color: var(--muted); display: flex; flex-wrap: wrap;
  gap: 0.4rem 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}