/* ==========================================================================
   Evidence Systems: evidencesystems.co.za
   Follows the Visual Identity Guide v01 and DESIGN.md. Every colour, font,
   size, space and radius lives in :root below; components use the tokens.
   ========================================================================== */

/* Fonts ------------------------------------------------------------------
   Display: the guide specifies Proxima Nova Black. It is licensed through
   Adobe Fonts, so it is not bundled here. Montserrat Black is self-hosted as
   the stand-in. To switch: add the Adobe Fonts kit <link> in index.html; the
   "proxima-nova" family name below is already first in the stack.
   Body: Inter (variable). Sources: IBM Plex Mono. Both SIL Open Font Licence. */

@font-face {
  font-family: "ES Display";
  src: url("/assets/fonts/montserrat-latin-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour (guide section 03, DESIGN.md section 2) */
  --black: #0B0B0C;          /* logo, headings, body text */
  --white: #FFFFFF;          /* main background */
  --evidence-blue: #1A4BFF;  /* links, sources, citations, on white only */
  --light-blue: #7A9BFF;     /* the same job, on black */
  --paper-grey: #F2F2F2;     /* panels, tables, quiet sections */

  --muted: #55555A;          /* secondary text on white and Paper Grey */
  --line: #DCDCDE;
  --dark-surface: #161618;
  --dark-muted: #A6A6AB;
  --dark-line: #2C2C30;
  --black-hover: #2E2E32;    /* primary button hover */
  --dark-line-hover: #4A4A50; /* card and frame border on hover, on black */
  --dark-bar: #3A3A3F;       /* text bars inside the black claim card of the thread motif */

  /* Type (guide sections 05 and 06, DESIGN.md section 3) */
  --font-display: "proxima-nova", "ES Display", "Arial Black", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-source: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --size-headline: clamp(2.5rem, 7.2vw, 4rem);   /* 40 to 64px: h1 */
  --size-subhead: clamp(1.75rem, 4.4vw, 2.5rem); /* 28 to 40px: h2, .statement */
  --size-title: clamp(1.25rem, 2.2vw, 1.5rem);   /* 20 to 24px: card and item titles */
  --size-lede: clamp(1.125rem, 2vw, 1.25rem);    /* 18 to 20px: lede paragraphs */
  --size-body: 1.125rem;                         /* 18px */
  --size-ui: 1rem;                               /* 16px: buttons, nav, "see all" links, form text */
  --size-small: 0.875rem;                        /* 14px: sources, meta, labels. Nothing smaller */

  /* Display tracking (rule T2): tighter only at 40px and above */
  --tracking-display: -0.035em;  /* 40px and above */
  --tracking-subhead: -0.03em;   /* 28 to 39px */
  --tracking-title: -0.02em;     /* 20 to 27px */

  /* Space (DESIGN.md section 4): every margin, padding and gap is one of these */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-9: 6rem;     /* 96px */
  --space-10: 8rem;    /* 128px */

  /* Shape and layout */
  --radius: 0;
  --wrap: 1200px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4.5rem, 11vw, 8.5rem);
  --measure: 65ch;
  --header-h: 72px;
  --hero-top: clamp(4rem, 11vw, 8.5rem);         /* home hero */
  --hero-bottom: clamp(4rem, 10vw, 7.5rem);
  --page-hero-top: clamp(var(--space-8), 9vw, var(--space-9));     /* inner page heroes: 64 to 96px */
  --page-hero-bottom: clamp(var(--space-7), 7vw, var(--space-8));  /* 48 to 64px */
  --intro-gap: clamp(var(--space-7), 6vw, var(--space-8));         /* intro to content (rule S3): 48 to 64px */
  --card-pad: clamp(var(--space-6), 4vw, var(--space-7));          /* card padding: 32 to 48px */

  /* Motion and depth (DESIGN.md section 6) */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 150ms;
  --dur-panel: 250ms;
  --shadow-panel: 0 12px 24px rgba(11, 11, 12, .08), 0 2px 6px rgba(11, 11, 12, .06); /* open mobile nav only */
}

/* Base ------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }

/* Rule T3: balanced headlines, no orphans in paragraphs */
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

a { color: var(--evidence-blue); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
.section-dark a { color: var(--light-blue); }
a, button, summary { touch-action: manipulation; }

:focus-visible {
  outline: 2px solid var(--evidence-blue);
  outline-offset: 3px;
}
.section-dark :focus-visible { outline-color: var(--light-blue); }

/* Anchor targets clear the sticky header */
[id] { scroll-margin-top: var(--space-9); }

.skip {
  position: absolute;
  left: var(--space-4); top: calc(var(--space-7) * -1);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  background: var(--black);
  color: var(--white);
  text-decoration: none;
}
.skip:focus { top: var(--space-4); }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Shared pieces ---------------------------------------------------------- */

.logo {
  display: inline-block;
  color: var(--black);
  line-height: 0;
}
.wordmark { display: block; width: 168px; height: auto; } /* guide minimum is 120px */

.label {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--size-small);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* Section numbers come from CSS so the headings themselves read cleanly */
main { counter-reset: section; }
.label::before {
  counter-increment: section;
  content: counter(section, decimal-leading-zero);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  max-width: 100%;
  padding: var(--space-3) var(--space-6);
  border: 0; /* also used on <button> (contact: "Show the booking calendar") */
  border-radius: var(--radius);
  font-family: inherit;
  cursor: pointer;
  background: var(--black);
  color: var(--white);
  font-size: var(--size-ui);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--black-hover); }

/* Source line: IBM Plex Mono, Evidence Blue, for the way back to a source */
.source-line {
  font-family: var(--font-source);
  font-size: var(--size-small);
  line-height: 1.5;
}
.source-line a { text-decoration: underline; }
.source-line a:hover { text-decoration-thickness: 2px; }

/* "See all" links: Inter 600 16px, black, underlined, --space-7 above (DESIGN.md section 5).
   .see-all is the class for new ones; the older names below are kept on existing markup. */
.see-all, .all-services {
  margin-top: calc(var(--space-7) - var(--space-3)); /* the link's own 44px target adds the rest */
  font-family: var(--font-body);
  font-size: var(--size-ui);
  font-weight: 600;
  line-height: 1.4;
}
.see-all a, .all-services a,
.link-button {
  color: var(--black);
  font-family: var(--font-body);
  font-size: var(--size-ui);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.see-all a:hover, .all-services a:hover,
.link-button:hover { text-decoration-thickness: 2px; }
/* Touch targets at least 44px tall (DESIGN.md section 8) for links that stand on their own line */
.see-all a, .all-services a, .link-button, .cta-email, .footer-meta address a, .not-found .text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* Links inside a line of text: the same 44px target without moving the text. Vertical padding on an inline
   link widens what can be tapped but not the line box. (Not used in running prose, where lines would overlap.) */
.fix-link a, a.fix-link, .fact-row dd a, .source-line a, a.source-line, .contact-alt a, .contact-email a,
.founder h3 a, .resource-links a, .author-box-name a, .facts dd a {
  padding-block: var(--space-4);
}
/* Logos: 44px tall targets around the wordmark */
.site-header .logo { display: inline-flex; align-items: center; min-height: 44px; }
.logo-lg { padding-block: var(--space-4); margin-block: calc(var(--space-4) * -1); }
.section-dark .see-all a { color: var(--white); }

/* Sections: one rhythm. Every page section is padded by --section-y top and bottom (rule S2).
   Two white sections in a row would read as a double gap, so the second one starts flush. */
.section, .cta, .follow, .service, .platform, .contact-block { padding-block: var(--section-y); }
.section-grey { background: var(--paper-grey); }
.section-dark { background: var(--black); color: var(--white); }
:is(.section, .follow):not(.section-grey, .section-dark) + :is(.section, .follow):not(.section-grey, .section-dark) { padding-top: 0; }

/* Header ----------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}
.header-link {
  color: var(--black);
  font-size: var(--size-ui);
  font-weight: 600;
  text-decoration: none;
  padding: var(--space-2) 0;
}
.header-link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Hero ------------------------------------------------------------------- */

.hero { padding-block: var(--hero-top) var(--hero-bottom); }
/* The white section after the white hero starts flush, like any two white sections */
.hero + .section:not(.section-grey, .section-dark) { padding-top: 0; }

.hero-grid {
  display: grid;
  gap: var(--intro-gap);
  align-items: center;
}

h1, h2, .statement, .work-card h3, .cell h3, .offer h3 {
  font-family: var(--font-display);
  font-weight: 900;
}
h1 { letter-spacing: var(--tracking-display); }
/* Long single words in a 40px headline (findings-to-recommendations) would push past a 320px screen: break them with a hyphen, only when they do not fit */
h1, h2 { overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
h2, .statement { letter-spacing: var(--tracking-subhead); }

.hero h1 {
  font-size: var(--size-headline);
  line-height: 1;
  max-width: 12ch;
}

.lede {
  margin-top: var(--space-5);
  max-width: 36rem;
  font-size: var(--size-lede);
  color: var(--muted);
}

.hero .btn { margin-top: var(--space-6); }

/* Thread motif: blue only for the lines a reader would check and the route back */
/* Left-aligned under the copy below 960px (rule S5), beside it from 960px */
.thread { width: 100%; max-width: 500px; height: auto; justify-self: start; }
.thread .docs rect { fill: var(--white); stroke: var(--line); stroke-width: 1.5; }
.thread .bars rect { fill: var(--paper-grey); }
.thread .marks rect { fill: var(--evidence-blue); }
.thread .lines path {
  fill: none;
  stroke: var(--evidence-blue);
  stroke-width: 1.25;
  stroke-dasharray: 320;
  animation: draw 1.6s var(--ease) .2s both;
}
.thread .lines path:nth-child(2) { animation-delay: .35s; }
.thread .lines path:nth-child(3) { animation-delay: .5s; }
.thread .dots circle { fill: var(--evidence-blue); }
.thread .claim { fill: var(--black); }
.thread .claim-bars rect { fill: var(--dark-bar); }
.thread .claim-mark { fill: var(--white); }

@keyframes draw { from { stroke-dashoffset: 320; } to { stroke-dashoffset: 0; } }

/* What we do ------------------------------------------------------------- */

.statement {
  font-size: var(--size-subhead);
  line-height: 1.1;
  max-width: 24ch;
}

.grid-3 {
  display: grid;
  margin-top: var(--intro-gap);
  border-top: 2px solid var(--black);
}
.cell {
  padding-block: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--line);
}
.cell h3, .offer h3 {
  font-size: var(--size-title);
  line-height: 1.2;
  letter-spacing: var(--tracking-title);
}
.cell p {
  margin-top: var(--space-3);
  max-width: 32ch;
}

/* How we help ------------------------------------------------------------ */

.help-intro {
  max-width: 36rem;
  margin-bottom: var(--intro-gap);
  font-size: var(--size-lede);
  color: var(--muted);
}
.offers { display: grid; gap: var(--space-5); }
.offer {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius);
  padding: var(--card-pad);
}
/* Card text is black: --muted is never for copy longer than two lines in a row of cards (DESIGN.md section 2) */
.offer p {
  margin-top: var(--space-4);
  max-width: var(--measure);
}
.offer-link { margin-top: auto; padding-top: var(--space-5); font-weight: 600; }
.note {
  margin-top: var(--space-6);
  font-size: var(--size-ui);
  color: var(--muted);
}

/* Selected work ---------------------------------------------------------- */

.work { display: grid; gap: var(--space-5); }
.work-card {
  position: relative;
  background: var(--dark-surface);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius);
  padding: var(--card-pad);
  transition: border-color var(--dur-fast) var(--ease);
}
.work-card h3 {
  font-size: var(--size-title);
  line-height: 1.2;
  letter-spacing: var(--tracking-title);
}
.work-card p {
  margin-top: var(--space-4);
  color: var(--dark-muted);
  max-width: 48ch;
}
/* The whole card is the link target */
.work-card h3 a { color: inherit; text-decoration: none; }
.work-card h3 a::after { content: ""; position: absolute; inset: 0; }
.work-card:hover { border-color: var(--dark-line-hover); }
.work-card:hover h3 a { text-decoration: underline; text-decoration-thickness: 2px; }
.work-card:has(a:focus-visible) { outline: 2px solid var(--light-blue); outline-offset: 3px; }
.work-card h3 a:focus-visible { outline: 0; }

/* Who we work with ------------------------------------------------------- */

/* Tags: IBM Plex Mono 14px, 1px border, no fill */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.tags li {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-source);
  font-size: var(--size-small);
  line-height: 1.5;
}

/* Closing CTA ------------------------------------------------------------ */

.cta h2 {
  font-size: var(--size-headline);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  max-width: 16ch;
}
.cta p {
  max-width: 36rem;
  margin-top: var(--space-5);
  font-size: var(--size-lede);
  color: var(--muted);
}

/* Closing call to action: button to /contact/, email kept as text */
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-6);
}
.cta-email { font-weight: 600; overflow-wrap: anywhere; }

/* Follow the build ------------------------------------------------------- */

.follow-grid { display: grid; gap: var(--space-6); align-items: end; }
.follow h2 {
  font-size: var(--size-subhead);
  line-height: 1.1;
}
.follow p {
  margin-top: var(--space-5);
  max-width: 52ch;
  color: var(--muted);
}

.social { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.social a {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  border: 1.5px solid var(--black);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--black);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.social a:hover { background: var(--black); color: var(--white); }
.social svg { width: 26px; height: 26px; fill: currentColor; }
/* Hide any social link set back to a "#" placeholder */
.social li:has(> a[href="#"]) { display: none; }

/* Footer ----------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--space-8) var(--space-6);
  font-size: var(--size-ui);
  color: var(--muted);
}
.footer-grid { display: grid; gap: var(--space-6); }

/* Part of the primary logo lockup (tagline above the wordmark): sized with the wordmark, not the type scale */
.tagline {
  margin-bottom: var(--space-4);
  color: var(--black);
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.logo-lg .wordmark { width: clamp(220px, 60vw, 420px); }

.footer-meta .footer-nav a { text-decoration: none; }
.footer-meta .footer-nav a:hover { text-decoration: underline; }

/* Footer link row: a plain row with --space-5 gaps, no separators. Each link is a 48px tall target. */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-5);
  margin-bottom: var(--space-2);
}
.footer-nav a {
  padding-block: var(--space-3);
  color: var(--black);
  font-weight: 600;
}
.footer-meta .footer-nav a:hover { text-decoration-thickness: 2px; text-underline-offset: 3px; }

.link-button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.link-button[hidden] { display: none; }
.footer-cookies { margin-bottom: var(--space-5); }

.legal {
  margin-top: var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: var(--size-small);
}

/* Breakpoints ------------------------------------------------------------ */

@media (min-width: 720px) {
  .work { grid-template-columns: repeat(2, 1fr); }
  /* Two offers a row, the third across the row, until there is room for three (rule S4) */
  .offers { grid-template-columns: repeat(2, 1fr); }
  .offer:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .follow-grid { grid-template-columns: 1fr auto; gap: var(--space-7); }
}

@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.1fr 1fr; }
  .thread { justify-self: end; }

  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .cell { padding-inline: 0 var(--space-6); border-bottom: 0; }
  .cell + .cell { padding-left: var(--space-6); border-left: 1px solid var(--line); }

  .offers { grid-template-columns: repeat(3, 1fr); }
  .offer:last-child:nth-child(odd) { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
  }
}

/* Page not found ---------------------------------------------------------- */

.not-found { min-height: 60vh; }
.not-found .source-line { color: var(--muted); margin-bottom: var(--space-4); }
.not-found .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-6);
}
.not-found .actions .btn { margin-top: 0; }
.text-link { font-weight: 600; overflow-wrap: anywhere; }

/* Clients, partners and projects ---------------------------------------- */

.orgs-intro {
  max-width: 36ch;
  font-family: var(--font-display);
  font-size: var(--size-subhead);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: var(--tracking-subhead);
  text-wrap: balance;
}
.logos {
  --logo-scale: 0.8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6) var(--space-7);
  margin-top: var(--intro-gap);
  padding-block: clamp(var(--space-6), 5vw, var(--space-7));
  border-block: 1px solid var(--line);
}
.logos img {
  display: block;
  width: calc(var(--w) * var(--logo-scale) * 1px);
  max-width: 100%;
  height: auto;
  opacity: .85;
}
/* 720 to 959px: two even rows (four and three) instead of a lone logo on a third row */
@media (min-width: 720px) {
  .logos { --logo-scale: 1; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: var(--space-7) var(--space-6); }
}
/* From 960px: one bar. Each item's share of the row is proportional to its logo's width (--w),
   so the logos shrink together instead of wrapping, up to 85% of full size on wide screens. */
@media (min-width: 960px) {
  .logos { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: clamp(var(--space-4), 2.5vw, var(--space-6)); }
  .logos li { flex: var(--w) 1 0; min-width: 0; display: flex; justify-content: center; }
  .logos li:first-child { justify-content: flex-start; }
  .logos li:last-child { justify-content: flex-end; }
  .logos img { width: 100%; max-width: calc(var(--w) * 0.85px); }
}

/* Header navigation ------------------------------------------------------ */

/* Desktop: text links and the button in a row. Below 960px the same links sit in a
   <details> menu, so navigation works with JavaScript off. */
.site-nav { display: none; }
.nav-list { display: flex; align-items: center; gap: var(--space-6); }
.header-link { white-space: nowrap; }
.header-link[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

.btn-sm { min-height: 44px; padding: var(--space-2) var(--space-4); white-space: nowrap; }
/* The header button marks the contact page with the same underline as the text links */
.btn[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

.nav-menu summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-1);
  font-size: var(--size-ui);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.nav-menu summary::-webkit-details-marker { display: none; }
/* Three bars drawn as hard-edged lines (not a visual gradient) */
.nav-menu summary::after {
  content: "";
  width: 18px; height: 12px;
  margin-left: var(--space-2);
  background: linear-gradient(var(--black) 0 0) top / 100% 2px no-repeat,
              linear-gradient(var(--black) 0 0) center / 100% 2px no-repeat,
              linear-gradient(var(--black) 0 0) bottom / 100% 2px no-repeat;
}
.nav-close, .nav-menu[open] .nav-open { display: none; }
.nav-menu[open] .nav-close { display: inline; }
.nav-menu[open] summary::after {
  background: linear-gradient(var(--black) 0 0) center / 100% 2px no-repeat;
}
.nav-panel {
  position: absolute;
  left: 0; right: 0; top: 100%;
  padding: var(--space-2) var(--gutter) var(--space-5);
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-panel);
}
.nav-panel-link {
  display: block;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  color: var(--black);
  font-size: var(--size-body);
  font-weight: 600;
  text-decoration: none;
}
.nav-panel-link[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav-panel .btn { width: 100%; margin-top: var(--space-5); }

/* Six header items need more room than four did, so the row starts at 960px */
@media (min-width: 960px) {
  .site-nav { display: block; }
  .nav-menu { display: none; }
}

/* Case studies ----------------------------------------------------------- */

.case-hero { padding-block: var(--page-hero-top) var(--page-hero-bottom); }
/* A white section straight after the white page hero: together they make one --section-y gap */
.case-hero + .section:not(.section-grey, .section-dark) { padding-top: calc(var(--section-y) - var(--page-hero-bottom)); }
.crumbs { color: var(--muted); margin-bottom: var(--space-5); }
.crumbs a { text-decoration: underline; }

.case-hero h1 {
  font-size: var(--size-headline);
  line-height: 1;
  max-width: 20ch;
}

/* Fact panel: Paper Grey, like a record card */
.facts {
  display: grid;
  margin: var(--intro-gap) 0 0;
  padding: var(--card-pad);
  background: var(--paper-grey);
  border-top: 2px solid var(--black);
}
.facts div {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.facts div:last-child { border-bottom: 0; }
.facts dt {
  font-family: var(--font-source);
  font-size: var(--size-small);
  color: var(--muted);
}
.facts dd { margin: 0; font-size: var(--size-ui); }

/* The body ends a full section's distance above whatever follows (rule S2) */
.case-body { counter-reset: section; padding-bottom: var(--section-y); }
.case-body > .case-section:last-child { padding-bottom: 0; }
.case-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding-block: clamp(var(--space-6), 5vw, var(--space-7));
  border-top: 1px solid var(--line);
}
.case-section:first-child { border-top: 0; }
/* After a black band (the platform showcase) the body starts a full section's distance from the edge */
.section-dark + .case-body > .case-section:first-child { padding-top: var(--section-y); }
.case-section .label { margin-bottom: var(--space-3); }

.prose { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); max-width: var(--measure); overflow-wrap: break-word; }
.case-section > * { min-width: 0; }
.prose-lead p {
  font-size: var(--size-title);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* Lists, figures and links in a case section share the prose column's right edge */
.built { display: grid; max-width: var(--measure); border-top: 2px solid var(--black); }
.case-section > :is(.figures, .resource-links, .tags), .case-related > .resource-links { max-width: var(--measure); }
.built li {
  position: relative;
  padding: var(--space-3) 0 var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--line);
}
/* Short rule as the item marker, centred on the first line */
.case-section > .built li:last-child { border-bottom: 0; } /* the next section's hairline closes the list */
.built li::before {
  content: "";
  position: absolute;
  left: 0; top: calc(var(--space-3) + .75em);
  width: var(--space-3); height: 2px;
  background: var(--black);
}

/* Two figures a row until 960px, then as many 15rem columns as fit (eight one-per-row figures made a very long phone page) */
.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.figures li {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: clamp(var(--space-4), 3vw, var(--space-5));
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.figure-value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--size-subhead);
  line-height: 1;
  letter-spacing: var(--tracking-subhead);
  font-variant-numeric: tabular-nums;
}
.figure-label { font-size: var(--size-ui); line-height: 1.4; }
.figures li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.figures-note { margin-top: var(--space-4); color: var(--muted); }

/* Limits: the same callout as the quick answer */
.limits {
  max-width: var(--measure);
  padding: var(--space-5);
  border-left: 3px solid var(--black);
  background: var(--paper-grey);
}

.quote blockquote { margin: 0; }
.quote p {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--size-subhead);
  line-height: 1.1;
  letter-spacing: var(--tracking-subhead);
  max-width: 30ch;
}
.quote figcaption { margin-top: var(--space-4); color: var(--muted); }

.pager {
  display: grid;
  padding-bottom: var(--section-y);
}
.pager-link {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--line);
  color: var(--black);
  font-size: var(--size-ui);
  font-weight: 600;
  text-decoration: none;
}
.pager-link .source-line { color: var(--muted); font-weight: 400; }
.pager-link:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.pager-link { align-content: start; }
/* "All case studies" is a see-all link: underlined at rest */
.pager-all { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Index list */
.case-list-section { padding-bottom: var(--section-y); }
.case-list { border-top: 2px solid var(--black); counter-reset: none; }
/* Rows stack on small screens (a topic label sits above the title); numbered rows keep the number in its own column */
.case-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2) var(--space-5);
  padding-block: clamp(var(--space-5), 4vw, var(--space-6));
  border-bottom: 1px solid var(--line);
  color: var(--black);
  text-decoration: none;
}
.case-num { color: var(--muted); }
.case-list-section { padding-top: calc(var(--section-y) - var(--page-hero-bottom)); }
.case-main { display: grid; gap: var(--space-3); }
.case-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--size-title);
  line-height: 1.2;
  letter-spacing: var(--tracking-title);
  max-width: 34ch;
  text-wrap: balance;
}
.case-meta { color: var(--muted); font-size: var(--size-ui); max-width: 60ch; }
/* No arrows on links (DESIGN.md section 7): the row's title underline is the hover state */
.case-row:hover .case-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.case-row .case-title { display: block; }

@media (min-width: 720px) {
  .facts { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-6); }
  .facts div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }

  .case-section { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-2) var(--space-7); }
  /* Everything after the label stays in the content column (the figures note used to drop under the label) */
  .case-section > :not(.label) { grid-column: 2; }
  .case-section .label { margin-bottom: 0; padding-top: var(--space-1); }

  .pager { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  .pager-all { grid-column: 2; text-align: center; }
  .pager-next { text-align: right; grid-column: 3; }

  .case-list-section .case-row { grid-template-columns: var(--space-7) minmax(0, 1fr); align-items: start; }
  .case-list-section .case-num { padding-top: var(--space-1); }
  /* Inside a case section (author page) the label column already exists: the topic stays above the title */
  .case-section .case-row:has(> .case-num) { grid-template-columns: minmax(0, 1fr); }
  .case-section .case-row:has(> .case-num) .case-num { padding-top: 0; }
}
@media (min-width: 960px) {
  /* A topic label gets its own column only when there is room for it */
  .case-row:has(> .case-num) { grid-template-columns: 14rem minmax(0, 1fr); align-items: start; }
  .case-row:has(> .case-num) .case-num { padding-top: var(--space-1); }
  .case-list-section .case-row { grid-template-columns: var(--space-7) minmax(0, 1fr); }
  .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .figures li:last-child:nth-child(odd) { grid-column: auto; }
  .figures li:last-child:nth-child(3n+2) { grid-column: span 2; }
  .figures li:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .facts { grid-template-columns: repeat(3, 1fr); }
  .facts div:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line); }
  .facts div:nth-last-child(-n+3):nth-child(3n+1),
  .facts div:nth-last-child(-n+2):nth-child(3n+2) { border-bottom: 0; }
}

/* Services --------------------------------------------------------------- */

.services-intro { display: grid; gap: var(--space-4); margin-top: var(--space-5); max-width: 44rem; }
.services-intro .lede { margin-top: 0; }
.services-hero .btn { margin-top: var(--space-6); }

.fix-list { display: grid; border-top: 2px solid var(--black); }
.fix-list li {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--line);
}
.fix-list p { color: var(--muted); max-width: 52ch; }
.fix-list strong { color: var(--black); }
/* "See the work" and "Read the guide": a row of links with a gap, no middle dot (DESIGN.md section 7) */
.fix-link { justify-self: start; display: flex; flex-wrap: wrap; column-gap: var(--space-5); }
.fix-link > span[aria-hidden] { display: none; }

.service { border-top: 1px solid var(--line); }
.section-grey + .service { border-top: 0; }
.service-grid { display: grid; gap: var(--space-5); }
/* Service headings, also on "Other ways we work", which uses the same head and body columns */
.service h2:not(.label), .service-head h2:not(.label) {
  font-size: var(--size-subhead);
  line-height: 1.1;
}
.service-lead {
  margin-top: var(--space-4);
  max-width: 36rem;
  font-size: var(--size-title);
  line-height: 1.4;
  letter-spacing: -0.01em;
}
/* One paragraph rhythm in the service column; headings, lists and fact rows get extra space above */
.service-body { display: grid; gap: var(--space-4); align-content: start; max-width: 46rem; }
.service-body > :is(.sub-label, .fact-row, .built, .scoped) { margin-top: var(--space-4); }
.service-body > .sub-label + .built { margin-top: 0; }
.service-body > p { max-width: var(--measure); }
.service-body h3 {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--size-title);
  line-height: 1.2;
  letter-spacing: var(--tracking-title);
}
.sub-label {
  margin-top: var(--space-3);
  font-size: var(--size-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.service-body .built { max-width: none; }

.fact-row {
  display: grid;
  margin: var(--space-2) 0;
  padding: var(--space-1) var(--space-5);
  background: var(--paper-grey);
  border-top: 2px solid var(--black);
}
.fact-row div { display: grid; align-content: start; gap: var(--space-1); padding-block: var(--space-4); }
.fact-row div + div { border-top: 1px solid var(--line); }
.fact-row dt { font-family: var(--font-source); font-size: var(--size-small); color: var(--muted); }
/* Same value type as the fact panel: Inter 16px */
.fact-row dd { margin: 0; font-size: var(--size-ui); font-variant-numeric: tabular-nums; }

.scoped { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.scoped li { color: var(--muted); }
.scoped strong { color: var(--black); }
.quiet { color: var(--muted); }
.small-print { font-size: var(--size-small); color: var(--muted); }

.steps { display: grid; counter-reset: step; border-top: 2px solid var(--black); }
.steps li {
  counter-increment: step;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-source);
  font-size: var(--size-small);
}
.steps strong { display: block; margin-bottom: var(--space-2); color: var(--black); font-size: var(--size-title); line-height: 1.2; }

.faq-section { padding-top: 0; }
/* A head that holds only the section label: the grid gap already gives label-to-content space */
.service-head > .label:only-child { margin-bottom: 0; }
.faq { border-top: 2px solid var(--black); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-5);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: var(--size-title); line-height: 1; font-weight: 400; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { padding-bottom: var(--space-5); max-width: var(--measure); color: var(--muted); }


@media (min-width: 720px) {
  .fix-list { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-8); }

  /* A fixed first column, so Duration, Term and Price line up across the three services */
  .fact-row { grid-template-columns: 16rem minmax(0, 1fr); column-gap: var(--space-6); }
  .fact-row div + div { border-top: 0; }

  /* Two steps a row from 720px, all four from 960px (rule S4) */
  .steps { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-8); }
}
@media (min-width: 960px) {
  .service-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); }
  .service-head { position: sticky; top: calc(var(--header-h) + var(--space-6)); align-self: start; }
  .steps { grid-template-columns: repeat(4, 1fr); column-gap: var(--space-6); border-bottom: 1px solid var(--line); }
  .steps li { border-bottom: 0; }
}

/* The services page mixes numbered labels with service headings, so drop the numbers there */
.services .label::before { content: none; }

/* Cookie consent (built by /assets/consent.js) ----------------------------- */

.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: var(--black);
  color: var(--white);
  border-top: 1px solid var(--dark-line);
}
.consent[hidden] { display: none; }
.consent-inner {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-5);
}
.consent-text { font-size: var(--size-ui); max-width: 60ch; }
.consent-text a { padding-block: var(--space-4); color: var(--light-blue); white-space: nowrap; }
.consent :focus-visible { outline-color: var(--light-blue); }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
/* Accept and Decline carry equal weight */
.consent-btn {
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  border: 1.5px solid var(--white);
  border-radius: var(--radius);
  background: transparent;
  color: var(--white);
  font: inherit;
  font-size: var(--size-ui);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.consent-btn:hover { background: var(--white); color: var(--black); }
@media (min-width: 720px) {
  .consent-inner { grid-template-columns: 1fr auto; align-items: center; gap: var(--space-6); }
  .consent-actions { grid-template-columns: auto auto; }
  .consent-btn { min-width: 7.5rem; }
}

/* Privacy page */
.updated { margin-top: var(--space-5); color: var(--muted); }
.table-scroll { overflow-x: auto; }
/* Same table as .article-table: Paper Grey header row */
.cookie-table { width: 100%; border-collapse: collapse; font-size: var(--size-ui); font-variant-numeric: tabular-nums; }
.prose p:has(> .link-button) { margin-top: var(--space-5); }
.cookie-table th, .cookie-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.cookie-table th { background: var(--paper-grey); font-family: var(--font-source); font-size: var(--size-small); font-weight: 400; color: var(--muted); border-bottom: 2px solid var(--black); }
.prose code { font-family: var(--font-source); font-size: .9em; }
/* Stacked cards until 960px: in the two-column case section at 768px the four columns were too narrow */
@media (max-width: 959px) {
  .cookie-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cookie-table, .cookie-table tbody, .cookie-table tr, .cookie-table td { display: block; }
  .cookie-table tr { padding-block: var(--space-3); border-top: 2px solid var(--black); }
  .cookie-table td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 0; overflow-wrap: anywhere; }
  .cookie-table td::before { content: attr(data-label); font-family: var(--font-source); font-size: var(--size-small); color: var(--muted); }
}

/* Contact ---------------------------------------------------------------- */

.contact-block { border-top: 1px solid var(--line); }
.contact-grid { display: grid; gap: var(--space-5); }
.contact-block h2 {
  font-size: var(--size-subhead);
  line-height: 1.1;
}
.contact-main { display: grid; gap: var(--space-4); align-content: start; max-width: 48rem; }
.contact-intro { max-width: 36rem; color: var(--muted); font-size: var(--size-lede); }
.booking-load { padding-inline: var(--space-5); }

/* The address is the main way in: prominent, but always on one line (sized to the viewport, not the type scale) */
.contact-email {
  font-weight: 700;
  font-size: clamp(1.0625rem, 4.4vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
@media (max-width: 339px) { .contact-email { font-size: .9375rem; } }
.contact-email a { text-decoration-thickness: 2px; text-underline-offset: 6px; }
.contact-email-block .sub-label { margin-top: var(--space-5); }

.booking-frame iframe { display: block; width: 100%; min-height: 700px; border: 0; }
.booking-placeholder {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--card-pad);
  border-radius: var(--radius);
  background: var(--paper-grey);
}
.booking-placeholder .small-print { margin: 0; }

.company h2 { font-size: var(--size-small); font-family: var(--font-body); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
/* The hero hairline sits midway: a full section gap above it as below it */
.case-hero:has(+ .contact-block) { padding-bottom: var(--section-y); }
.company-details { color: var(--muted); font-size: var(--size-ui); }

@media (min-width: 960px) {
  .contact-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-8); }
}
.contact-alt { margin-top: var(--space-5); font-size: var(--size-ui); color: var(--muted); }
.contact-alt a { font-weight: 600; white-space: nowrap; }

/* Second hero paragraph: who we work with, in buyer terms */
.hero .lede-follow { margin-top: var(--space-4); }

/* Platform showcase -------------------------------------------------------
   A "Live platform" band for case studies with a public portal: browser
   frame with the main screenshot, actions, a strip of view cards and a note.
   Copy the section markup and change the content to reuse it (README).
   .chain is the evidence chain list; .tag-live marks work with a live portal. */

.platform-label { color: var(--dark-muted); margin-bottom: var(--space-5); }
.platform h2 {
  font-size: var(--size-subhead);
  line-height: 1.1;
}
.platform-intro {
  margin-top: var(--space-5);
  max-width: 44rem;
  color: var(--dark-muted);
  font-size: var(--size-lede);
}

.platform-frame {
  display: block;
  margin-top: var(--intro-gap);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius);
  background: var(--dark-surface);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.platform-frame:hover { border-color: var(--dark-line-hover); }
.platform-bar {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--dark-line);
  color: var(--dark-muted);
  font-family: var(--font-source);
  font-size: var(--size-small);
  line-height: 1.4;
}
.platform-frame img,
.platform-view img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  object-position: top;
}

.platform-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-6);
}
/* On black the primary button inverts: white fill, black text */
.platform .btn { background: var(--white); color: var(--black); }
.platform .btn:hover { background: var(--paper-grey); }
.section-dark .platform-actions .source-line { margin-top: 0; overflow-wrap: anywhere; }

/* Views: a scroll-snap strip on small screens, three columns from 720px */
.platform-views {
  display: flex;
  gap: var(--space-5);
  margin: var(--intro-gap) calc(var(--gutter) * -1) 0;
  padding: 0 var(--gutter) var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
}
.platform-view {
  position: relative;
  flex: 0 0 80%;
  scroll-snap-align: start;
  background: var(--dark-surface);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease);
}
.platform-view img { border-bottom: 1px solid var(--dark-line); }
.platform-view h3 {
  margin: var(--space-5) var(--space-6) 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--size-title);
  line-height: 1.2;
  letter-spacing: var(--tracking-title);
}
.platform-view h3 a { color: var(--white); text-decoration: none; }
.platform-view h3 a::after { content: ""; position: absolute; inset: 0; }
.platform-view h3 a:focus-visible { outline: 0; }
.platform-view:has(a:focus-visible) { outline: 2px solid var(--light-blue); outline-offset: 3px; }
.platform-view p {
  margin: var(--space-2) var(--space-6) var(--space-6);
  color: var(--white);
  font-size: var(--size-ui);
  line-height: 1.45;
}
.platform-view:hover { border-color: var(--dark-line-hover); }
.platform-view:hover h3 a { text-decoration: underline; text-decoration-thickness: 2px; }

.section-dark .platform-note { margin-top: var(--space-5); color: var(--dark-muted); max-width: 60ch; }

@media (min-width: 720px) {
  .platform-views {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
}

@media (min-width: 960px) {
  .platform-views { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Evidence chain: how a figure travels from source to portal */
.chain {
  display: grid;
  margin-top: var(--space-3);
  border-top: 2px solid var(--black);
}
.chain li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) 0 var(--space-5);
}
.chain-value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--size-subhead);
  line-height: 1;
  letter-spacing: var(--tracking-subhead);
  font-variant-numeric: tabular-nums;
}
.chain-label { color: var(--muted); font-size: var(--size-ui); line-height: 1.35; }
.chain-arrow {
  position: absolute;
  left: 0; bottom: calc(var(--space-3) * -1);
  font-size: var(--size-title);
  line-height: 1;
  transform: rotate(90deg);
}
/* Four across only from 960px: below that the figures would not fit their columns */
@media (min-width: 960px) {
  .chain { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .chain li { padding: var(--space-4) var(--space-6) 0 0; }
  /* Centred on the figure: top padding plus half the figure's line box */
  .chain-arrow { left: auto; right: var(--space-4); top: calc(var(--space-4) + var(--size-subhead) / 2); bottom: auto; transform: translateY(-50%); }
}

/* Marks a case study whose portal is public. Not blue: the row or card is already the link. */
.tag-live {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border: 1px solid currentColor;
  border-radius: var(--radius);
  font-family: var(--font-source);
  font-size: var(--size-small);
  line-height: 1.4;
  white-space: nowrap;
}
/* Own line under the meta line */
.case-main .tag-live { justify-self: start; color: var(--black); border-color: var(--line); }
.work-card .tag-live { margin-top: var(--space-4); color: var(--white); border-color: var(--dark-line-hover); }

/* Resources ---------------------------------------------------------------
   Index, topic pages and articles, all generated by scripts/build-resources.mjs.
   Cards reuse the paper-grey record-card look; articles are one readable column. */

/* A card grid, like offers and work cards: no rule above it (a 2px rule opens lists and fact panels) */
.resource-cards { display: grid; gap: var(--space-5); }
.resource-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--card-pad);
  background: var(--paper-grey);
}
.section-grey .resource-card { background: var(--white); }
.resource-card h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--size-title);
  line-height: 1.2;
  letter-spacing: var(--tracking-title);
}
.resource-card h3 a { color: var(--black); text-decoration: none; }
.resource-card h3 a::after { content: ""; position: absolute; inset: 0; }
.resource-card:hover h3 a { text-decoration: underline; text-decoration-thickness: 2px; }
.resource-card p { max-width: 52ch; }
.resource-card .source-line { color: var(--muted); }
.resource-card-pillar { background: var(--black); color: var(--white); }
.resource-card-pillar h3 a { color: var(--white); }
.resource-card-pillar .source-line { color: var(--dark-muted); }
.resource-card:has(a:focus-visible) { outline: 2px solid var(--evidence-blue); outline-offset: 3px; }
.resource-card h3 a:focus-visible { outline: 0; }
.resource-section .case-list { margin-top: 0; }
.resource-all { display: grid; gap: var(--space-6); border-top: 2px solid var(--black); padding-top: var(--space-6); }
.resource-all h3 { font-family: var(--font-display); font-weight: 900; font-size: var(--size-title); line-height: 1.2; letter-spacing: var(--tracking-title); margin-bottom: var(--space-3); }
.resource-all ul li { border-bottom: 1px solid var(--line); }
.resource-all a { display: block; padding-block: var(--space-3); color: var(--black); font-size: var(--size-ui); font-weight: 600; text-decoration-thickness: 1px; }
.resource-all a:hover { text-decoration-thickness: 2px; }

@media (min-width: 720px) {
  .resource-cards { grid-template-columns: repeat(2, 1fr); }
  .resource-card-pillar { grid-column: 1 / -1; }
  .resource-all { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-8); }
}
/* Topic pages: the pillar spans the row; an odd number of guides under it never leaves one card alone */
@media (min-width: 720px) and (max-width: 959px) {
  .resource-cards:has(> .resource-card-pillar) > :last-child:nth-child(even) { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  /* The four topics stay two by two (rule S4: no four-column grids, and four in three would leave one alone) */
  .resource-cards:not(.resource-topics) { grid-template-columns: repeat(3, 1fr); }
  /* Pillar plus four guides: two by two under the pillar */
  .resource-cards:has(> .resource-card-pillar):has(> :nth-child(5):last-child) { grid-template-columns: repeat(2, 1fr); }
}

/* Article */
.article-hero h1 { max-width: 24ch; }
/* Quick answer: Paper Grey, 3px black left rule, Inter 18px */
.quick-answer {
  max-width: 46rem;
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-left: 3px solid var(--black);
  background: var(--paper-grey);
}
.quick-answer p { font-size: var(--size-body); }
.quick-answer .quick-answer-label { margin-bottom: var(--space-2); font-size: var(--size-small); color: var(--muted); }
.article-meta { margin-top: var(--space-5); color: var(--muted); }

/* A full section gap above the Related reading hairline, as below it */
.article-wrap { padding-bottom: var(--section-y); }
.who-for {
  max-width: 46rem;
  padding: var(--space-5) 0;
  border-block: 1px solid var(--line);
  margin-bottom: clamp(var(--space-6), 5vw, var(--space-7));
}
.who-for-label {
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--size-small);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.who-for p { color: var(--muted); }

.prose-article { max-width: 46rem; }
.prose-article > * + * { margin-top: var(--space-4); }
.prose-article h2 {
  margin-top: clamp(var(--space-7), 6vw, var(--space-8));
  font-size: var(--size-subhead);
  line-height: 1.1;
}
.prose-article h3 {
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--size-title);
  line-height: 1.2;
  letter-spacing: var(--tracking-title);
}
.prose-article h2 + * { margin-top: var(--space-4); }
.prose-article h3 + * { margin-top: var(--space-3); }
.prose-article ul, .prose-article ol { padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.prose-article ul { list-style: square; }
.prose-article ol { list-style: decimal; }
.prose-article li::marker { color: var(--muted); }
.prose-article blockquote { margin: var(--space-5) 0 0; padding-left: var(--space-5); border-left: 2px solid var(--black); }
.prose-article code { font-family: var(--font-source); font-size: .9em; }
.prose-article pre.template {
  overflow-x: auto;
  padding: var(--space-5);
  background: var(--paper-grey);
  border-top: 2px solid var(--black);
  font-size: var(--size-small);
  line-height: 1.6;
  white-space: pre;
}
.prose-article pre.template code { font-size: inherit; }
.table-scroll:focus-visible, .prose-article pre.template:focus-visible { outline: 2px solid var(--evidence-blue); outline-offset: 3px; }
/* Wide tables (five or more columns) scroll instead of crushing; from 960px they use the container width, past the text column */
.article-table:has(th:nth-child(5)) { min-width: 60rem; }
@media (min-width: 960px) {
  .prose-article > .table-scroll:has(th:nth-child(5)) { width: min(var(--wrap), calc(100vw - var(--gutter) * 2)); }
}
/* Two-column tables: one first-column width on every table of a page */
.article-table:not(:has(th:nth-child(3))) th:first-child { width: 33%; }
/* Tables: full width inside .table-scroll, Paper Grey header row, tabular numerals */
.article-table { width: 100%; border-collapse: collapse; font-size: var(--size-ui); font-variant-numeric: tabular-nums; }
.article-table th, .article-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.article-table th {
  background: var(--paper-grey);
  font-family: var(--font-source);
  font-size: var(--size-small);
  font-weight: 400;
  color: var(--muted);
  border-bottom: 2px solid var(--black);
}
.article-faq h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--size-body); line-height: 1.4; letter-spacing: 0; }
.article-faq p { color: var(--muted); }
.article-sources { margin-top: clamp(var(--space-7), 6vw, var(--space-8)); }
.article-sources .sources { padding-left: 0; list-style: none; gap: var(--space-3); }
.article-sources .sources li { font-size: var(--size-ui); color: var(--muted); overflow-wrap: anywhere; }

.related { border-top: 1px solid var(--line); }
.related-label {
  margin-bottom: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--size-small);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.related-list .case-row { grid-template-columns: 1fr; }
.related-list { max-width: 46rem; }

/* About */
.tagline-inline { font-weight: 600; }
.founders { display: grid; gap: var(--space-7); border-top: 2px solid var(--black); padding-top: var(--space-5); }
.founder { display: grid; gap: var(--space-3); align-content: start; max-width: 32rem; }
.founder h3 { font-family: var(--font-display); font-weight: 900; font-size: var(--size-title); line-height: 1.2; letter-spacing: var(--tracking-title); }
.founder-role { color: var(--muted); }
.founder-photo { width: 100%; max-width: 16rem; aspect-ratio: 1; object-fit: cover; background: var(--paper-grey); }
.placeholder {
  display: grid;
  place-items: center;
  border: 1px dashed var(--muted);
  color: var(--muted);
  font-family: var(--font-source);
  font-size: var(--size-small);
}
.placeholder-text { padding: var(--space-2) var(--space-3); border: 1px dashed var(--muted); color: var(--muted); font-family: var(--font-source); font-size: var(--size-small); }
/* Two founders side by side only from 960px: in the content column at 768px each would be 178px wide */
@media (min-width: 960px) { .founders { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-8); } }
/* Profile links are actions, not sources: Inter, like "see all" links */
.founder .source-line:not(.founder-role), .booking-fallback { font-family: var(--font-body); font-size: var(--size-ui); font-weight: 600; }
.founder h3 a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Author page (/about/romanos-boraine/) and the "About the author" box at the end of every article.
   The page photo uses .founder-photo; the profile links use .resource-links; the article list uses .case-row. */
.author-role { margin-top: var(--space-3); color: var(--muted); }
.author-photo { display: block; height: auto; margin-top: var(--space-6); }
.author-articles { margin-top: 0; }
.author-box {
  max-width: 46rem;
  margin-top: clamp(var(--space-7), 6vw, var(--space-8));
  padding: var(--card-pad);
  background: var(--paper-grey);
}
.author-box .related-label { margin-bottom: var(--space-4); }
/* Photo above the text on phones; beside it from 720px */
.author-box-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
@media (min-width: 720px) { .author-box-card { grid-template-columns: 80px minmax(0, 1fr); } }
.author-box-photo { display: block; width: 80px; height: 80px; border-radius: var(--radius); object-fit: cover; }
.author-box-text { display: grid; gap: var(--space-2); }
.author-box-name { font-family: var(--font-display); font-weight: 900; font-size: var(--size-title); line-height: 1.2; letter-spacing: var(--tracking-title); }
.author-box-name a { color: var(--black); }
.author-box-text .source-line { color: var(--muted); }
.author-box-text > p:not(.source-line) { font-size: var(--size-ui); }
/* "More about Romanos" and "LinkedIn" are actions: a row of Inter links with a gap, no middle dot */
.author-box-text > .source-line:last-child { display: flex; flex-wrap: wrap; column-gap: var(--space-5); font-family: var(--font-body); font-size: var(--size-ui); font-weight: 600; }
.author-box-text > .source-line:last-child .sep { display: none; }
.resources-byline { margin-top: var(--space-5); color: var(--muted); }

/* Home page Resources strip: three cards, so the third spans the row while the grid has two columns */
.home-resources .resource-cards { margin-top: 0; }
@media (min-width: 720px) and (max-width: 959px) {
  .home-resources .resource-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Case study "Related reading": two Resources guides above the pager */
.case-related { padding-bottom: var(--space-8); }
/* Same two columns as the case body above it: label left, links right */
@media (min-width: 720px) {
  .case-related { display: grid; grid-template-columns: 14rem minmax(0, 1fr); column-gap: var(--space-7); align-items: start; }
  .case-related .related-label { margin-bottom: 0; padding-top: var(--space-1); }
}
.resource-links { display: grid; border-top: 2px solid var(--black); }
.resource-links li { padding-block: var(--space-3); border-bottom: 1px solid var(--line); }
.resource-links a { font-weight: 600; font-size: var(--size-ui); }
.case-section > .resource-links li:last-child { border-bottom: 0; }
/* Case studies index: one-line summary under each title */
.case-summary { color: var(--muted); font-size: var(--size-ui); max-width: 60ch; }
.company-line { font-size: var(--size-title); line-height: 1.4; letter-spacing: -0.01em; }