/* ------------------------------------------------------------
   JRW — cards redesign (branch: cards-redesign)
   Bone ground kept from v3, lightened a touch (#F3EFE6 → #F8F5EE). Six cells in an open 3×2 grid (hairlines
   between cells only), each with a seeded generative graphic in the
   industry's colour and a dark serif title. Card
   geometry follows the reference: 228×288, 16px radius, graphic
   window 196×120 inset 16px, title bottom-left inset 16px.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Fonts: Timeless Sans and Timeless Serif (Timeless Free Font License: commercial
   use and self-hosting allowed, no attribution; the files may not be renamed,
   modified, redistributed or put in a public repository) and Paper Mono (SIL OFL 1.1,
   fonts/PaperMono-OFL.txt). Serif and Sans are preloaded from the <head>.
   ------------------------------------------------------------ */
/* Timeless Sans and Serif are variable fonts with a Style axis: Sans is STYL 100 (0 is
   Grotesk), Serif is STYL 0 (100 is Text). Every font-family rule sets the matching STYL. */
@font-face { font-family: "Timeless Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("/fonts/TimelessSansVF.woff2") format("woff2"); size-adjust: 105.5%; }   /* matches Inter's x-height (0.546 vs 0.518 of the em), so every sans size reads as before */
@font-face { font-family: "Timeless Serif"; font-style: normal; font-weight: 200 700; font-display: swap; src: url("/fonts/TimelessSerifVF.woff2") format("woff2"); }
@font-face { font-family: "Timeless Serif"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("/fonts/TimelessSerifItalicVF.woff2") format("woff2"); }
@font-face { font-family: "Paper Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/fonts/paper-mono-wght.woff2") format("woff2"); }

:root {
  --content: 1360px;               /* max content width; hero mosaic stays full bleed */
  --gutter: max(40px, calc((100% - var(--content)) / 2));
  --bone: #F8F5EE;
  --ink:  #141311;
  --ink-2: #3A3833;
  --ink-3: #6B675F;                /* 5.2:1 on bone: AA at 12px mono */
  --act: #0877AD;                  /* hover and "changed" colour; a tinted page swaps in its own */
  --font-mono: "Paper Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif: "Timeless Serif", Georgia, serif;
  --font-sans:  "Timeless Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-sans); font-variation-settings: "STYL" 100;
  -webkit-font-smoothing: antialiased;
}
canvas { display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ------------------------------------------------------------
   Nav. A floating pill centred at the top: translucent ivory with a
   blur, hairline edge and soft shadow. Wordmark's four squares take
   the card colours.
   ------------------------------------------------------------ */
.nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  height: 56px;
  width: min(calc(100% - 32px), 700px);
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 10px 0 18px;
  border-radius: 999px;
  background: color-mix(in srgb, #FFFDF8 78%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  box-shadow:
    0 1px 2px rgba(20, 19, 17, .04),
    0 10px 30px -12px rgba(20, 19, 17, .18);
}
.nav__brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.nav__mark {
  display: block;
  width: 20px; height: 20px;
  background: url("/logos/mark-nav.svg") center / contain no-repeat;
}
.nav__mark i { display: none; }
.nav__name {
  font-family: var(--font-sans); font-variation-settings: "STYL" 100;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.02em;
}
.nav__links {
  display: flex;
  gap: 22px;
  margin-left: auto;
}
.nav__links a,
.nav__cta {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
}
.nav__links a:hover { color: var(--ink); }
.nav__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bone);
  transition: background .2s ease;
}
.nav__cta:hover { background: var(--act); }
/* the button is a flex box, which drops the leading space in " a call"; pre keeps it */
.nav__cta-long { white-space: pre; }
/* Below 640 all three links stay: they go a size down and the button reads "Book",
   with "a call" kept for screen readers */
@media (max-width: 640px) {
  .nav__links { gap: 14px; }
  .nav__links a { font-size: 11px; letter-spacing: .06em; padding: 12px 2px; }
  .nav__cta-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* a short label in a 44px-tall button reads as a circle: the pill drops to 34px, centred,
     and an invisible band above and below keeps the 44px tap area */
  .nav__cta { position: relative; min-height: 34px; padding: 0 14px; }
  .nav__cta::after { content: ""; position: absolute; inset: -5px 0; }
}
@media (max-width: 520px) {
  .nav { top: 12px; height: 52px; gap: 16px; padding: 0 9px 0 16px; }   /* 9px right, the same as above and below the button */
  .nav__cta { margin-left: auto; }
}
@media (max-width: 400px) {
  .nav__links { gap: 6px; }
}
@media (max-width: 360px) {
  .nav__name { display: none; }        /* the mark alone; the link keeps its "JRW home" name */
  .nav__links { gap: 6px; }
  .nav__links a { letter-spacing: .02em; }
}

/* ------------------------------------------------------------
   Hero. Text centred in the left half; the finance card's mosaic fills the right
   half of the page, drawn on the bone ground.
   ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 40px var(--gutter);
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);   /* subtle divider before the cards */
}
.hero__art {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  left: 50%;
  pointer-events: none;
}
.hero__art canvas { width: 100%; height: 100%; }
.hero__gen { position: absolute; inset: 0; }            /* an industry graphic filling the half, on the industry pages */
.hero--industry .hero__title { font-size: clamp(36px, 4.4vw, 60px); }
.hero--industry .hero__tag a { color: inherit; text-decoration: none; }
.hero--industry .hero__tag a:hover { color: var(--ink); }
.hero--industry .intro__who { margin-top: 24px; }
.hero--industry .hero__kicker { margin-bottom: 16px; font-family: var(--font-sans); font-variation-settings: "STYL" 100; font-size: 17px; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.hero--industry .hero__lede { margin-top: 18px; }
.hero .btn { margin-top: 32px; }
.hero__text {
  position: relative;
  grid-column: 1;
  max-width: 620px;
  padding-right: 40px;
}
.hero__tag {
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero__title {
  margin: 0;
  font-family: var(--font-serif); font-variation-settings: "STYL" 0;
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero__lede {
  margin: 28px 0 0;
  max-width: 43ch;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-2);
}
/* Stacked below 860px: text first, then the mosaic as a full-width band */
@media (max-width: 860px) {
  .hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
  }
  .hero__text {
    order: 1;
    max-width: none;
    padding: 120px 24px 48px;   /* clears the fixed nav */
  }
  .hero__art {
    order: 2;
    position: relative;
    inset: auto;
    left: auto;
    width: 100%;
    height: min(60vh, 520px);
  }
  .hero__title { font-size: clamp(32px, 9vw, 54px); }
  .hero__lede { font-size: 17px; }
}

/* Stage: the industries grid, full content width, aligned with the hero's margin */
.stage { padding: 96px var(--gutter) 128px; }
.stage__inner { width: 100%; max-width: var(--content); margin: 0 auto; }
.stage__head { margin: 0 0 48px; }
.stage__tag {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stage__title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-serif); font-variation-settings: "STYL" 0;
  font-weight: 400;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* An open grid: a 1px gap shows the grid's hairline colour between cells,
   which gives inner lines only; the grid itself has no border. Cells are
   fluid; the graphic scales with the cell. */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
}
@media (max-width: 763px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
  .stage { padding: 64px 24px 96px; }
}

/* Card */
/* Each card is a subgrid of the row: graphic, title and descriptor sit on
   rows shared with its neighbours, so titles and descriptors line up. */
.card {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 0;
  align-content: start;
  padding: 24px 24px 28px;
  min-height: 0;
  overflow: hidden;
  background: var(--bone);         /* opaque so only the gaps show as lines */
  color: var(--ink);
  cursor: pointer;
}
/* Hover: the title takes the card's colour. No transform, so the grid
   lines stay put. */
.card__title { transition: color .25s ease; }
.card:hover .card__title { color: var(--fg); }

.card__art {
  width: 100%;
  aspect-ratio: 312 / 192;         /* the generators' native proportion */
  overflow: hidden;
  background: var(--bg);
}
.card__art canvas { width: 100%; height: 100%; }

.card__title {
  margin: 40px 0 0;
  align-self: start;
  font-family: var(--font-serif); font-variation-settings: "STYL" 0;
  font-weight: 400;
  font-size: clamp(24px, 2.1vw, 32px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.card__link { position: absolute; inset: 0; z-index: 1; }
.card__desc {
  margin: 10px 0 0;
  align-self: start;
  font-family: var(--font-sans); font-variation-settings: "STYL" 100; font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--ink-3);
}

/* ------------------------------------------------------------
   Industry pages: the hero with the industry's graphic in the right
   half (see .hero--industry above), then the same section language.
   ------------------------------------------------------------ */
.section__inner--intro {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px 80px;
  align-items: center;
}
.tag a { color: inherit; text-decoration: none; }
.tag a:hover { color: var(--ink); }
.intro__who { margin: 28px 0 0; font-family: var(--font-sans); font-variation-settings: "STYL" 100; font-size: 15px; line-height: 1.5; color: var(--ink-3); max-width: 57ch; }
.intro__text { margin: 18px 0 32px; max-width: 55ch; font-size: 18px; line-height: 1.5; color: var(--ink-2); }
/* "How we do it", between the hero and the cards: the intro layout, hairline below only (the hero draws the one above) */
.section--method { border-top: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.facts { margin: 0; padding: 0; list-style: none; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.facts li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}
.facts__num { padding-top: 5px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--ink-3); }
/* A section head with a case study beside the title. The card takes the nav pill's material:
   ivory surface, hairline edge, soft shadow. The whole card is the link. */
.section__head--case { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 80px; align-items: start; }
.case {
  display: grid;
  gap: 12px;
  margin-top: -15px;
  padding: 18px 22px 16px;
  border-radius: 16px;
  background: color-mix(in srgb, #FFFDF8 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow: 0 1px 2px rgba(20, 19, 17, .04), 0 8px 24px rgba(20, 19, 17, .05);
  color: inherit;
  text-decoration: none;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.case__top, .case__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.case__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.case__foot { font-family: var(--font-sans); font-variation-settings: "STYL" 100; font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.case__arrow {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  font-size: 14px; color: var(--ink);
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.case__title { font-family: var(--font-serif); font-variation-settings: "STYL" 0; font-size: clamp(24px, 2.1vw, 30px); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.case__foot { margin-top: 4px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.case__more { white-space: nowrap; }
.case:hover { border-color: color-mix(in srgb, var(--ink) 22%, transparent); box-shadow: 0 1px 2px rgba(20, 19, 17, .05), 0 12px 32px rgba(20, 19, 17, .08); transform: translateY(-1px); }
.case:hover .case__arrow { background: var(--ink); border-color: var(--ink); color: var(--bone); transform: translateX(2px); }
.case:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 860px) {
  .section__head--case { grid-template-columns: minmax(0, 1fr); }
  .case { margin-top: 0; }   /* stacked under the subtitle: no pull-up */
}
@media (prefers-reduced-motion: reduce) {
  .case, .case__arrow { transition: none; }
  .case:hover, .case:hover .case__arrow { transform: none; }
}
/* Case study pages: a compact head with the results in a row, then the same section language */
.section.section--casehead { border-top: 0; padding-top: 148px; }
.section--casehead .hero__tag a { color: inherit; text-decoration: none; }
.section--casehead .hero__tag a:hover { color: var(--ink); }
.title--wide { max-width: 20ch; text-wrap: balance; }
/* the head: text in the left half, a Hairline figure filling the right half (hairline/host.js).
   Isometric line drawings that answer the mouse wherever it is on the page; the palette is the
   page's ink at four weights. A figure's frame keeps empty headroom for what rises under the pointer, so
   the frame is pulled up into the section's padding and the drawing sits level with the text. */
.casehead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: center; }
.figure {
  width: min(100%, 660px);
  aspect-ratio: 400 / 320;          /* the hairline stage's drawing space; reserves the box before host.js mounts the figure, so nothing below shifts */
  justify-self: center;
  margin: -72px 0 -8px;
  --hairline-plate: var(--bone);
  --hairline-hi: var(--ink);
  --hairline-edge: color-mix(in srgb, var(--ink) 42%, var(--bone));
  --hairline-mid: color-mix(in srgb, var(--ink) 27%, var(--bone));
  --hairline-lo: color-mix(in srgb, var(--ink) 15%, var(--bone));
}
.figure[data-figure="gate"] { transform: translateY(-9%); }      /* drawn low in its frame, to leave room for the raised arm */
@media (max-width: 860px) {
  .casehead { grid-template-columns: minmax(0, 1fr); }
  .figure { width: min(100%, 460px); justify-self: start; margin: -40px 0 -8px -8%; }
}
.stats { margin-top: 64px; }
.stat__num { margin: 0; font-family: var(--font-serif); font-variation-settings: "STYL" 0; font-size: clamp(40px, 4.6vw, 64px); line-height: 1; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.prose p { margin: 0 0 16px; max-width: 55ch; font-size: 17px; line-height: 1.5; color: var(--ink); }
.prose p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .section.section--casehead { padding-top: 120px; } }
.section__lede { margin: 24px 0 0; max-width: 45ch; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.list { margin: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.list li { padding: 18px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); font-size: 17px; line-height: 1.5; color: var(--ink); }
.list__note { margin: 20px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.list__note a { color: var(--ink); text-decoration: none; }
.list__note a:hover { color: var(--act); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cell--short { grid-row: span 2; min-height: 0; }
.cell__title--sm { font-size: 22px; }
@media (max-width: 860px) {
  .section__inner--intro { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------
   Sections below the grid: same hairline language. Open grids of
   text cells, three steps, five questions, a close, a footer.
   ------------------------------------------------------------ */
.section {
  padding: 96px var(--gutter) 112px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.section__inner { max-width: var(--content); margin: 0 auto; }
.section__inner--split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px 80px;
  align-items: start;
}
.section__head { margin: 0 0 48px; }
.section__inner--split .section__head { margin: 0; }
.tag {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-serif); font-variation-settings: "STYL" 0;
  font-weight: 400;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.title--lg { font-size: clamp(36px, 4.4vw, 60px); }

.grid {
  display: grid;
  gap: 1px;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
  counter-reset: none;
}
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Each cell spans the grid's rows as a subgrid, so numbers, titles and
   paragraphs sit on shared rows and line up across the row, all from the top. */
.cell {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  align-content: start;
  padding: 24px 24px 32px;
  min-height: 220px;
  background: var(--bone);
}
.grid--2 .cell { grid-row: span 4; }
.cell__num {
  margin: 0;
  padding-bottom: 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.cell__when { color: var(--ink-2); }
.cell__meta .cell__when::before { content: " · "; color: var(--ink-3); }
.cell__title {
  margin: 0;
  align-self: start;
  font-family: var(--font-serif); font-variation-settings: "STYL" 0;
  font-weight: 400;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.cell__text {
  margin: 12px 0 0;
  align-self: start;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
}
.cell__text strong { font-weight: 500; color: var(--ink); }

.faq { margin: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.faq__item { padding: 22px 0 26px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.faq dt {
  font-family: var(--font-serif); font-variation-settings: "STYL" 0;
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.faq dd { margin: 12px 0 0; max-width: 57ch; font-size: 16px; line-height: 1.5; color: var(--ink-2); }

.close__text { margin: 24px 0 32px; max-width: 40ch; font-size: 18px; line-height: 1.5; color: var(--ink-2); }
.close__text a { color: var(--ink); }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bone);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .2s ease;
}
.btn:hover { background: var(--act); }

.footer {
  padding: 28px var(--gutter);
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.footer__inner { max-width: var(--content); margin: 0 auto; display: flex; gap: 24px; justify-content: space-between; flex-wrap: wrap; }
.footer__brand { font-family: var(--font-sans); font-variation-settings: "STYL" 100; font-weight: 600; letter-spacing: .02em; color: var(--ink); text-transform: none; font-size: 14px; }

@media (max-width: 860px) {
  .section__inner--split { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Three cells in two columns leave the last slot empty, and the grid's hairline colour would
   fill it as a grey block. A filler takes the slot instead: the page ground under faint dots. */
@media (min-width: 521px) and (max-width: 860px) {
  .grid--3:has(> :last-child:nth-child(odd))::after {
    content: "";
    grid-row: span 3;                     /* every cell spans three rows, the short ones too */
    background:
      radial-gradient(circle, color-mix(in srgb, var(--ink) 20%, transparent) 0.9px, transparent 1.5px) 0 0 / 12px 12px,
      var(--bone);
  }
}
@media (min-width: 521px) {
  .grid--2:has(> :last-child:nth-child(odd))::after {
    content: "";
    grid-row: span 4;
    background:
      radial-gradient(circle, color-mix(in srgb, var(--ink) 20%, transparent) 0.9px, transparent 1.5px) 0 0 / 12px 12px,
      var(--bone);
  }
}
@media (max-width: 520px) {
  .section { padding: 64px 24px 80px; }
  .grid--3, .grid--2 { grid-template-columns: minmax(0, 1fr); }
  .cell { min-height: 0; }
  .cell__num { padding-bottom: 24px; }
  .footer { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .card__title { transition: none; }
}

/* ------------------------------------------------------------
   Phase 1 SEO additions: visually hidden text, footer about + nav, linked proof cards
   ------------------------------------------------------------ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.footer__inner { align-items: flex-start; }
.footer__about { max-width: 43ch; }
.footer__contact a { display: inline-block; padding: 4px 0; color: var(--ink); text-decoration: none; }
.footer__contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__about p { margin: 10px 0 0; font-family: var(--font-sans); font-variation-settings: "STYL" 100; font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.footer__nav { display: flex; flex-wrap: wrap; gap: 4px 20px; max-width: 560px; }
.footer__nav a { padding: 10px 0; color: var(--ink-3); text-decoration: none; }
.footer__nav a:hover, .footer__nav a:focus-visible { color: var(--ink); }
.footer__copy { padding: 6px 0; }
.cell__title a { display: inline-block; padding: 2px 0; color: inherit; text-decoration: none; }
.cell__title a:hover, .cell__title a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) { .footer__inner { flex-direction: column; gap: 20px; } }

/* ------------------------------------------------------------
   Phase 2: h1 kicker (search phrase inside the heading), skip link,
   keyboard focus, hit areas, anchor offset under the floating nav
   ------------------------------------------------------------ */
.hero__kicker {
  display: block;
  margin: 0 0 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.skip {
  position: absolute; top: -100px; left: 16px; z-index: 20;
  padding: 12px 18px; border-radius: 999px;
  background: var(--ink); color: var(--bone);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { top: 16px; outline: 2px solid var(--bone); outline-offset: -5px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible, .nav__cta:focus-visible, .skip:focus-visible { border-radius: 999px; outline-offset: 4px; }
.card__link:focus-visible { outline: none; }
.card:has(.card__link:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.nav__links a { padding: 12px 4px; }
.hero__tag a { display: inline-block; padding: 10px 0; margin: -10px 0; }   /* 44px hit area without changing the line */
.section, .hero { scroll-margin-top: 88px; }

/* ------------------------------------------------------------
   Audit of 2026-10-20: narrow-phone nav, case bylines, links in ledes
   ------------------------------------------------------------ */
/* Below 400px the brand and the button alone overran the pill by a few pixels */
@media (max-width: 400px) {
  .nav { gap: 8px; padding: 0 9px 0 12px; }
  .nav__cta { padding: 0 12px; }
}
.byline { margin: 6px 0 0; font-family: var(--font-sans); font-variation-settings: "STYL" 100; font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.prose a, .section__lede a, .hero__lede a { color: var(--ink); }
.prose a:hover, .section__lede a:hover { color: var(--act); }
.cell__text a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.cell__text a:hover { color: var(--act); }


/* Industry tint: one colour per page, only on things that already have a job.
   Opt in with class="tint tint--<industry>" on <main>; a tint--<industry> class alone
   just sets the colours, for one element (the calculator buttons on /tools).
   --tint is the card colour; --tint-text is it mixed with ink until it reads as small
   text on bone and under bone text on a button: 5.4:1 or better for every industry. */
.tint--medical       { --tint: #0A90D2; --tint-text: #0D6A98; }
.tint--law           { --tint: #DE9A1E; --tint-text: #835D18; }
.tint--manufacturing { --tint: #E54F10; --tint-text: #AF3F10; }
.tint--logistics     { --tint: #53F399; --tint-text: #2E6F49; }
.tint--finance       { --tint: #524733; --tint-text: #524733; }
.tint--field         { --tint: #5B21B6; --tint-text: #5B21B6; }
.tint { --tint-line: color-mix(in srgb, var(--tint-text) 45%, transparent); --act: var(--tint-text); }
/* link underlines in running text: the link stays ink, the underline takes the colour */
.tint :is(.prose, .section__lede, .hero__lede, .cell__text, .sources, .stat__source, .stat__note, .assume) a {
  text-decoration-line: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--tint-line);
}
.tint :is(.prose, .section__lede, .hero__lede, .cell__text, .sources, .stat__source, .stat__note, .assume) a:hover { color: var(--tint-text); text-decoration-color: currentColor; }
/* the bright stroke of a Hairline figure */
.tint .figure { --hairline-hi: color-mix(in srgb, var(--tint) 50%, var(--tint-text)); }

/* Type roles. Small caps mono does two jobs only:
   labels (breadcrumb, section tags, item numbers, table heads, rating tags), always grey;
   actions (read, open, copy, cite), in the page's or card's industry colour and underlined.
   Details (who, byline, dates, captions, result labels) are sentence case in the body face.
   So colour on a page means one thing: you can click it. */
a.cell__more, a.cell__go, .case__more {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tint-text, var(--ink));
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
a.cell__more:hover, a.cell__go:hover, .case:hover .case__more { color: var(--tint-text, var(--ink)); text-decoration-color: currentColor; }
a.cell__more, a.cell__go { display: inline-block; padding: 6px 0; }
.cell__text a.cell__more { display: table; margin-top: 10px; }   /* its own line under the text, never wrapped onto the end of it */
.cell__go { justify-self: start; align-self: end; margin-top: 10px; }
.cell__meta { margin: 0; padding-bottom: 24px; font-family: var(--font-sans); font-variation-settings: "STYL" 100; font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--ink-3); }

/* Mood colour. Pale tints and the mosaic, on grounds, strips and data only, never on
   text, so it can't be mistaken for the signal colour that marks what you can click. */
/* the footer opens on a strip of the home mosaic, every page */
.footer { border-top: 0; padding-top: 45px; background: url("/img/strip.svg") 0 0 / 1400px 13px repeat-x; }
/* case study results: a pale wash of the industry colour behind the numbers */
.tint .stats > .cell { background: color-mix(in srgb, var(--tint) 5%, var(--bone)); }