/* =============================================================================
   DM MEDIA GLOBAL — design system
   One stylesheet for all seven pages. Mobile-first. No external requests.
   Every graphic on this site is generated here or as inline SVG in the page.
   There are no images and there will be none.

   CONTENTS
   01  Tokens
   02  Reset and base
   03  Typography
   04  Layout containers
   05  Drawn devices: grid, mesh, figures, rules, plinths
   06  Header and primary navigation
   07  Footer
   08  Buttons and links
   09  Section patterns
   10  Hero
   11  Cards
   12  Phases — the method rail
   13  Scenarios
   14  Beliefs — the editorial spread
   15  Refusals
   16  Services
   17  Rules list and steps
   18  FAQ
   19  Contact routes and company details
   20  Link list (404)
   21  Prose (privacy, terms)
   22  Call-to-action panel
   23  Motion and scroll reveal
   24  Print
   ============================================================================= */

/* -----------------------------------------------------------------------------
   01  TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces */
  --canvas: #0b0c0e;
  --surface: #101215;
  --surface-2: #14171b;
  --line: #1f2228;
  --line-strong: #2e333b;

  /* Drawing inks. Strokes, ticks and rules — and one outlined numeral, the
     service index, which is drawn rather than read (it is aria-hidden, and
     --draw-strong is 3.58:1 on canvas, above the 3:1 large-text floor).
     Never used as the ink of text that has to be read. */
  --draw: #454b56;
  --draw-strong: #626a76;

  /* Ink — all ratios measured against --canvas #0b0c0e */
  --ink: #f2f4f7;          /* headings                 17.9:1 */
  --body: #dce0e6;         /* body copy                14.4:1 */
  --legal: #c3c9d2;        /* company details block    11.8:1 */
  --muted: #a8afba;        /* labels, meta, captions    9.0:1 */

  /* One vivid accent */
  --accent: #ff5a2b;       /* on canvas                 6.3:1 */
  --accent-bright: #ff7048;
  --accent-dim: rgba(255, 90, 43, 0.42);
  --accent-wash: rgba(255, 90, 43, 0.1);
  --accent-faint: rgba(255, 90, 43, 0.055);

  /* Type */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Weights. Only three: the system font stack renders nothing between
     600 and 700, so a 650 step is a step that is never seen. */
  --w-normal: 400;
  --w-medium: 600;
  --w-bold: 700;

  /* Modular type scale, fluid where it needs to be.
     --fs-read and up carry argument. --fs-base is the legal measure, one step
     below it. --fs-sm and down are labels and meta. */
  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  /* 17px. The argument body: one deliberate step above the legal prose, which
     stays at --fs-base. Not --fs-md — that clamps to 19px and would collide
     with the section subtitles and the closing panel. */
  --fs-read: 1.0625rem;
  --fs-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-lg: clamp(1.125rem, 1.02rem + 0.55vw, 1.375rem);
  --fs-xl: clamp(1.25rem, 1.08rem + 0.85vw, 1.75rem);
  --fs-2xl: clamp(1.625rem, 1.2rem + 1.9vw, 2.625rem);
  --fs-3xl: clamp(2.25rem, 1.4rem + 4.1vw, 4.5rem);

  /* Two line-heights. 1.65 for reading, 1.5 for anything --fs-lg or larger. */
  --lh-body: 1.65;
  --lh-tight: 1.5;

  /* Spacing — 4px base */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;

  /* Rhythm */
  --section-y: clamp(3.5rem, 2.2rem + 5.5vw, 7rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --maxw: 1200px;
  --maxw-narrow: 46rem;
  --radius: 0;
  --sticky-top: 7rem;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.18s;
}

/* -----------------------------------------------------------------------------
   02  RESET AND BASE
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

svg {
  display: block;
}

ul,
ol {
  padding-left: 1.15em;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-7) 0;
}

::selection {
  background: var(--accent);
  color: #0b0c0e;
}

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

/* The skip link parks focus on <main>. That focus must not draw a ring the
   visitor never asked for, but a real keyboard focus on it still should. */
main:focus {
  outline: none;
}

main:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

#content {
  scroll-margin-top: var(--sticky-top);
}

/* Accessibility helpers ---------------------------------------------------- */

/* Reserved utility, intentionally unreferenced. This is the canonical
   screen-reader-only pattern; every page currently manages without it because
   nothing on the site needs a label the eye does not already get. It stays so
   that the next person to need one reaches for the correct implementation
   instead of inventing display:none. Do not delete as "dead CSS". */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: var(--gutter);
  z-index: 100;
  transform: translateY(-120%);
  padding: 0.7rem 1.1rem;
  background: var(--accent);
  color: #0b0c0e;
  font-size: var(--fs-sm);
  font-weight: var(--w-bold);
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

/* -----------------------------------------------------------------------------
   03  TYPOGRAPHY
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  color: var(--ink);
  font-weight: var(--w-bold);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-3xl);
  line-height: 1.04;
  letter-spacing: -0.034em;
}

h2 {
  font-size: var(--fs-2xl);
  line-height: 1.12;
  letter-spacing: -0.024em;
}

h3 {
  font-size: var(--fs-xl);
  line-height: 1.22;
  letter-spacing: -0.016em;
}

h4 {
  font-size: var(--fs-md);
  line-height: 1.3;
  letter-spacing: -0.008em;
}

p {
  margin: 0 0 var(--s-4);
}

p:last-child {
  margin-bottom: 0;
}

strong,
b {
  color: var(--ink);
  font-weight: var(--w-medium);
}

small {
  font-size: var(--fs-sm);
}

.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
  color: var(--body);
  max-width: 58ch;
  text-wrap: pretty;
}

/* A page-level orientation line, not a component label: it is the first thing
   a stranger reads above a 72px h1, so it takes the --fs-xs step. --fs-2xs is
   reserved for labels sitting inside a component. */
.eyebrow {
  display: block;
  margin: 0 0 var(--s-4);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.label {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.nowrap {
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   04  LAYOUT CONTAINERS
   -------------------------------------------------------------------------- */

.wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow {
  max-width: calc(var(--maxw-narrow) + var(--gutter) * 2);
}

/* -----------------------------------------------------------------------------
   05  DRAWN DEVICES
   Everything in this block is generated: gradients, masks, hairlines, ticks.
   These are the site's illustrations.
   -------------------------------------------------------------------------- */

/* Film grain over the whole page. Inline SVG turbulence, no network request. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Hairline studio grid, faded with a radial mask. */
.texture-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(125% 100% at 8% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(125% 100% at 8% 0%, #000 0%, transparent 72%);
}

.texture-grid--right {
  -webkit-mask-image: radial-gradient(110% 100% at 92% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(110% 100% at 92% 0%, #000 0%, transparent 70%);
}

/* Soft atmospheric wash. Two stops only, both nearly invisible. */
.texture-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58rem 30rem at 88% -12%, var(--accent-faint), transparent 62%),
    radial-gradient(46rem 26rem at 0% 108%, rgba(122, 150, 232, 0.055), transparent 68%);
}

/* Sheet rules — the two vertical hairlines that frame the page like a drawing
   sheet. Only where there is real margin outside the content column. */
@media (min-width: 78em) {
  .hero,
  .page-header,
  .section,
  .cta {
    --sheet: 1px;
  }

  .hero::before,
  .page-header::before,
  .section::before,
  .cta::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: var(--maxw);
    transform: translateX(-50%);
    border-inline: var(--sheet) solid var(--line);
    pointer-events: none;
    z-index: 0;
  }
}

/* Drawn figures. Every inline SVG plate on the site inherits these strokes,
   so one language covers the monogram, the measure bar, the numeral and the
   document plate. */
.figure {
  position: relative;
  pointer-events: none;
}

.figure svg {
  width: 100%;
  height: auto;
}

.figure .ring,
.figure .glyph {
  stroke: var(--draw);
  fill: none;
}

.figure .guide {
  stroke: var(--line-strong);
  fill: none;
}

.figure .glyph-strong {
  stroke: var(--draw-strong);
  fill: none;
}

.figure .node {
  fill: var(--accent);
}

.figure .arc-accent {
  stroke: var(--accent-dim);
  fill: none;
}

/* The display numeral on 404. */
.figure--numeral {
  max-width: 40rem;
  margin-bottom: var(--s-7);
  -webkit-mask-image: linear-gradient(105deg, #000 55%, rgba(0, 0, 0, 0.45));
  mask-image: linear-gradient(105deg, #000 55%, rgba(0, 0, 0, 0.45));
}

/* A drawn frame with corner ticks. Used where a block has to read as a
   deliberately set specimen rather than a box. */
.plinth {
  position: relative;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 45%),
    var(--surface);
}

.plinth::before,
.plinth::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
}

.plinth::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--draw-strong);
  border-left: 2px solid var(--draw-strong);
}

.plinth::after {
  right: -1px;
  bottom: -1px;
  border-right: 2px solid var(--draw-strong);
  border-bottom: 2px solid var(--draw-strong);
}

/* -----------------------------------------------------------------------------
   06  HEADER AND PRIMARY NAVIGATION
   -------------------------------------------------------------------------- */

.site-header {
  position: relative;
  z-index: 50;
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-6);
  padding-block: var(--s-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding-block: 0.5rem;
  text-decoration: none;
  color: var(--ink);
}

.brand__mark {
  flex: 0 0 auto;
  width: 38px;
  height: auto;
}

.brand__mark .glyph {
  stroke: var(--ink);
  transition: stroke var(--dur) var(--ease);
}

.brand__mark .tick {
  fill: var(--accent);
}

.brand:hover .brand__mark .glyph {
  stroke: var(--accent);
}

.brand__name {
  font-size: var(--fs-xs);
  font-weight: var(--w-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}

/* Three links, always visible, at every width. No toggle, no JavaScript. */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-5);
}

.site-nav a {
  position: relative;
  font-size: var(--fs-sm);
  color: var(--muted);
  text-decoration: none;
  padding-block: 0.75rem;
  transition: color var(--dur) var(--ease);
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.site-nav a:hover {
  color: var(--ink);
}

.site-nav a:hover::after {
  transform: scaleX(1);
}

.site-nav a[aria-current="page"] {
  color: var(--ink);
}

.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

@media (min-width: 48em) {
  .site-header {
    position: sticky;
    top: 0;
  }

  .site-header__inner {
    padding-block: var(--s-4);
  }

  .brand__mark {
    width: 44px;
  }

  .brand__name {
    font-size: var(--fs-sm);
  }

  .site-nav {
    gap: 0 var(--s-6);
  }

  .site-nav a {
    font-size: var(--fs-base);
  }
}

/* -----------------------------------------------------------------------------
   07  FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-block: var(--s-6);
}

/* A drawn baseline: the sheet closes the way it opened. */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 8px;
  background-image: repeating-linear-gradient(
    to right,
    var(--line-strong) 0 1px,
    transparent 1px 40px
  );
  pointer-events: none;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-6);
}

.site-footer__copy {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-5);
}

.site-footer__nav a {
  font-size: var(--fs-sm);
  color: var(--muted);
  text-decoration: none;
  padding-block: 0.7rem;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.site-footer__nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* -----------------------------------------------------------------------------
   08  BUTTONS AND LINKS
   -------------------------------------------------------------------------- */

a {
  color: var(--ink);
}

.text-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-dim);
  padding-bottom: 1px;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.text-link:hover {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--w-medium);
  letter-spacing: 0.005em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.btn--primary {
  background: var(--accent);
  color: #0b0c0e;
}

.btn--primary:hover {
  background: var(--accent-bright);
}

.btn:active {
  transform: translateY(1px);
}

/* Text link with a drawn arrow. The arrow is CSS, not a glyph. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-base);
  font-weight: var(--w-medium);
  color: var(--ink);
  text-decoration: none;
  padding-block: 0.85rem;
  transition: color var(--dur) var(--ease);
}

.link-arrow::after {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--accent);
  transition: width var(--dur) var(--ease);
}

.link-arrow:hover {
  color: var(--accent);
}

.link-arrow:hover::after {
  width: 2.25rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-6);
}

/* -----------------------------------------------------------------------------
   09  SECTION PATTERNS
   -------------------------------------------------------------------------- */

.section {
  position: relative;
  padding-block: var(--section-y);
  /* clip, not hidden: `hidden` would make this a scroll container and kill the
     sticky heads in .service and .phase. */
  overflow: clip;
}

/* A banded section is a sheet of drafting paper: the grid is ruled onto it
   rather than washed over it. */
.section--band {
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.026) 1px, transparent 1px)
      0 0 / 64px 64px,
    linear-gradient(to bottom, rgba(255, 255, 255, 0.026) 1px, transparent 1px)
      0 0 / 64px 64px,
    var(--surface);
  border-block: 1px solid var(--line);
}

/* The head spans the whole sheet and is opened by a rule, so the space beside
   a short heading reads as margin rather than as a missing photograph. */
.section__head {
  position: relative;
  max-width: none;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-strong);
  margin-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
}

.section__head h2 {
  max-width: 24ch;
  margin-bottom: var(--s-4);
}

/* The section subtitles carry argument, so they are body colour, not meta. */
.section__head p {
  margin: 0;
  color: var(--body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  max-width: 56ch;
}

/* A head that carries a second column instead of a hole beside it. */
.section__head--split {
  display: grid;
  gap: var(--s-5);
}

.section__note {
  margin: 0;
  font-size: var(--fs-read);
  line-height: var(--lh-body);
  color: var(--body);
  max-width: 56ch;
}

@media (min-width: 60em) {
  .section__head--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-8);
    align-items: start;
  }

  .section__note {
    padding-left: var(--s-7);
    border-left: 1px solid var(--line);
  }
}

.section__outro {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-strong);
  max-width: 64ch;
  color: var(--body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

/* -----------------------------------------------------------------------------
   10  HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: clip;
  border-bottom: 1px solid var(--line);
}

.hero__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(48rem 26rem at 4% -18%, var(--accent-wash), transparent 66%),
    radial-gradient(40rem 24rem at 96% 8%, rgba(122, 150, 232, 0.06), transparent 64%);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  padding-block: clamp(3rem, 2rem + 7vw, 7rem);
}

.hero__copy h1 {
  margin-bottom: var(--s-5);
  max-width: 17ch;
}

.hero__copy .lead {
  max-width: 56ch;
}

/* The construction drawing of the monogram. It is the only piece of art on
   this site that has a subject, so every width gets the whole drawing —
   letters included. Small screens get it smaller, never stripped: a ring and
   a crosshair with nothing inside them is not a smaller drawing, it is an
   empty one. The plate is therefore sized so the letters stay legible rather
   than sized to leave the copy room. */
/* The letters of the monogram. An unstyled SVG group is visible by default, so
   this rule changes nothing today — it is here to state the contract, because
   the whole point of the note above is that the letters are never hidden. */
.hero__plate .detail {
  display: block;
}

.hero__plate {
  position: relative;
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}

.hero__plate svg {
  width: 100%;
  max-width: 320px;
  height: auto;
  -webkit-mask-image: radial-gradient(92% 92% at 50% 50%, #000 54%, transparent 96%);
  mask-image: radial-gradient(92% 92% at 50% 50%, #000 54%, transparent 96%);
}

@media (min-width: 44em) {
  .hero__plate svg {
    max-width: 420px;
  }
}

@media (min-width: 62em) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    align-items: center;
    gap: var(--s-8);
  }

  .hero__plate {
    padding-top: 0;
    padding-left: var(--s-7);
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .hero__plate svg {
    max-width: none;
    -webkit-mask-image: radial-gradient(96% 96% at 50% 50%, #000 56%, transparent 98%);
    mask-image: radial-gradient(96% 96% at 50% 50%, #000 56%, transparent 98%);
  }
}

/* -----------------------------------------------------------------------------
   11  CARDS
   -------------------------------------------------------------------------- */

/* Hairline-gapped grid: the 1px gaps are the background showing through.
   The one true grid moment on the site. */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  padding: var(--s-6) var(--s-5);
  min-width: 0;
}

.section--band .card {
  background: var(--surface);
}

/* A drawn corner tick. Static: these cards are not links and must not
   signal that they are. */
.card::before {
  content: "";
  position: absolute;
  top: var(--s-5);
  left: 0;
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--draw-strong);
  border-left: 1px solid var(--draw-strong);
  pointer-events: none;
}

.card__index {
  display: block;
  margin-bottom: var(--s-4);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.card h3 {
  font-size: var(--fs-lg);
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin-bottom: var(--s-3);
}

.card p {
  margin: 0;
  font-size: var(--fs-read);
  line-height: var(--lh-body);
  color: var(--body);
  max-width: 64ch;
}

@media (min-width: 40em) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card {
    padding: var(--s-7) var(--s-6);
  }

  .card::before {
    top: var(--s-6);
  }
}

/* -----------------------------------------------------------------------------
   12  PHASES — the method, drawn as a rail
   -------------------------------------------------------------------------- */

.phases {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--s-6);
  display: grid;
  gap: var(--s-7);
}

/* The rail itself. It stops short of the last node so the line reads as a
   run that ends rather than a border that was left on. */
.phases::before {
  content: "";
  position: absolute;
  top: 0.7rem;
  bottom: 3rem;
  left: 3px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    var(--draw-strong),
    var(--line-strong) 82%,
    transparent
  );
}

.phase {
  position: relative;
  min-width: 0;
}

/* The node on the rail. */
.phase::before {
  content: "";
  position: absolute;
  top: 0.45rem;
  left: calc(var(--s-6) * -1);
  width: 7px;
  height: 7px;
  background: var(--canvas);
  border: 1px solid var(--draw-strong);
}

.section--band .phase::before {
  background: var(--surface);
}

.phase__head {
  margin-bottom: var(--s-4);
}

.phase__num {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.phase__title {
  font-size: var(--fs-xl);
  margin-bottom: var(--s-2);
}

.phase__when {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--legal);
}

.phase__when .label {
  color: var(--muted);
  margin-right: 0.35em;
}

.phase__body p {
  max-width: 64ch;
  font-size: var(--fs-read);
  line-height: var(--lh-body);
}

/* "You receive:" — the deliverable is the substance of this section, and one
   of the five things on the site allowed to wear the accent. */
.deliverable {
  margin: var(--s-5) 0 0;
  padding: var(--s-4) 0 var(--s-4) var(--s-5);
  border-left: 2px solid var(--accent);
  background: linear-gradient(90deg, var(--accent-faint), transparent 60%);
  color: var(--ink);
  font-size: var(--fs-read);
  line-height: var(--lh-body);
  max-width: 64ch;
}

.deliverable .label {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--accent);
}

@media (min-width: 56em) {
  .phases {
    gap: var(--s-8);
    padding-left: var(--s-7);
  }

  .phases::before {
    left: 5px;
    bottom: 4rem;
  }

  .phase {
    display: grid;
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    gap: var(--s-6);
    align-items: start;
  }

  .phase::before {
    left: calc(var(--s-7) * -1);
    width: 11px;
    height: 11px;
    top: 0.5rem;
  }

  /* The head column tracks the body instead of leaving a hole beside it. */
  .phase__head {
    position: sticky;
    top: var(--sticky-top);
    margin-bottom: 0;
  }

  .phase__title {
    font-size: var(--fs-lg);
  }
}

/* Wide: the deliverable takes a column of its own. It is the payload of the
   phase, and giving it the third column both says so and finishes the row.

   The head column and the gap are both cut here, and the deliverable's own
   inset is reduced, so that the two prose columns keep the measure they had
   at 16px now that they are set at 17px. Three columns in a 1072px rail
   cannot reach 60 characters; they can refuse to get shorter. */
@media (min-width: 76em) {
  .phase {
    grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-5);
  }

  /* A division rule across the whole sheet, so each phase is a band rather
     than a paragraph floating beside a rail. */
  .phase::after {
    content: "";
    position: absolute;
    top: -2rem;
    left: calc(var(--s-7) * -1);
    right: 0;
    height: 1px;
    background: var(--line);
  }

  .phase__body p {
    max-width: none;
  }

  .deliverable {
    margin-top: 0;
    max-width: none;
    padding-left: var(--s-4);
  }
}

/* -----------------------------------------------------------------------------
   13  SCENARIOS — "four situations we recognise"
   The scenario sentence is the most human writing on the page, so it is set
   as a statement rather than as a card caption.
   -------------------------------------------------------------------------- */

.scenarios {
  display: grid;
  gap: var(--s-7);
  counter-reset: scenario;
}

/* The case mark. A situation opens on a hairline whose first 48mm are drawn
   heavy — the drafting convention for "this length is the one under
   discussion". It is the scenario's own form, and unlike a grid ratio it is
   still there when the grid collapses to one column. */
.scenario {
  position: relative;
  min-width: 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.scenario::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 48px;
  height: 3px;
  background: var(--draw-strong);
  pointer-events: none;
}

.scenario h3 {
  font-size: var(--fs-2xl);
  line-height: 1.14;
  letter-spacing: -0.022em;
  margin-bottom: var(--s-4);
  max-width: 22ch;
}

.scenario p {
  margin: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--body);
  max-width: 62ch;
}

@media (min-width: 56em) {
  .scenarios {
    gap: var(--s-8);
  }

  .scenario {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: var(--s-6) var(--s-8);
    align-items: start;
    padding-top: var(--s-6);
  }

  .scenario h3 {
    margin-bottom: 0;
    max-width: 18ch;
  }
}

/* -----------------------------------------------------------------------------
   14  BELIEFS — the editorial spread
   -------------------------------------------------------------------------- */

/* The beliefs get a rail too, but a held one rather than a run one: where the
   method's rail is continuous and its nodes are filled squares — five steps
   taken in order — this rail is dashed and its nodes are open diamonds. Six
   positions, held at once, in no sequence. Drawn rather than implied by a
   grid ratio, so the section still has a form of its own at 390px. */
.beliefs {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--s-5);
  display: grid;
  gap: var(--s-7);
}

.beliefs::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 1px;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--line-strong) 0 5px,
    transparent 5px 11px
  );
}

.belief {
  position: relative;
  min-width: 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.belief::before {
  content: "";
  position: absolute;
  left: calc(var(--s-5) * -1);
  top: calc(var(--s-5) + 0.62em);
  width: 7px;
  height: 7px;
  border: 1px solid var(--draw-strong);
  background: var(--canvas);
  transform: rotate(45deg);
  pointer-events: none;
}

.section--band .belief::before {
  background: var(--surface);
}

.belief__claim {
  font-size: var(--fs-xl);
  line-height: 1.22;
  letter-spacing: -0.018em;
  margin-bottom: var(--s-4);
  max-width: 30ch;
}

.belief p {
  margin: 0;
  color: var(--body);
  max-width: 60ch;
  font-size: var(--fs-read);
  line-height: var(--lh-body);
}

@media (min-width: 52em) {
  .beliefs {
    padding-left: var(--s-6);
  }

  .belief {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    gap: var(--s-6) var(--s-7);
    padding-top: var(--s-6);
    align-items: start;
  }

  .belief::before {
    left: calc(var(--s-6) * -1);
    top: calc(var(--s-6) + 0.62em);
  }

  .belief__claim {
    margin-bottom: 0;
  }
}

@media (min-width: 72em) {
  .beliefs {
    gap: var(--s-8);
  }
}

/* -----------------------------------------------------------------------------
   15  REFUSALS — "what we will not do"
   A different shape again: a drawn cross beside each refusal.
   -------------------------------------------------------------------------- */

.refusals {
  display: grid;
  gap: var(--s-6);
}

.refusal {
  position: relative;
  min-width: 0;
  padding: var(--s-5) 0 0 var(--s-6);
  border-top: 1px solid var(--line);
}

/* The cross: two 1px rules, drawn, no glyph. */
.refusal::before,
.refusal::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--s-5) + 0.55em);
  width: 13px;
  height: 1px;
  background: var(--draw-strong);
}

.refusal::before {
  transform: rotate(45deg);
}

.refusal::after {
  transform: rotate(-45deg);
}

.refusal h3 {
  font-size: var(--fs-lg);
  line-height: 1.25;
  margin-bottom: var(--s-3);
  max-width: 24ch;
}

.refusal p {
  margin: 0;
  font-size: var(--fs-read);
  line-height: var(--lh-body);
  color: var(--body);
  max-width: 58ch;
}

@media (min-width: 52em) {
  .refusals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-7) var(--s-8);
  }
}

/* -----------------------------------------------------------------------------
   16  SERVICES — for services.html
   -------------------------------------------------------------------------- */

.service {
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-strong);
  min-width: 0;
}

.service + .service {
  margin-top: var(--s-8);
}

/* Oversized type used as the illustration. The numeral is the only graphic
   this section needs, and it is drawn from the type itself. It is a figure,
   not a label: every one of them is aria-hidden in the markup, because the
   h3 beside it already carries the service name. The filled fallback below
   therefore only has to clear the 3:1 large-text floor, which --draw-strong
   does at 3.58:1 — --draw would not, at 2.23:1. */
.service__index {
  display: block;
  margin-bottom: var(--s-3);
  font-family: var(--mono);
  font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--draw-strong);
  font-variant-numeric: tabular-nums;
}

/* Outlined rather than filled where the engine can draw it. */
@supports (-webkit-text-stroke: 1px currentColor) {
  .service__index {
    color: transparent;
    -webkit-text-stroke: 1px var(--draw-strong);
  }
}

.service h3 {
  margin-bottom: var(--s-5);
  max-width: 24ch;
}

.service h4 {
  margin-bottom: var(--s-3);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: var(--w-normal);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.service__block + .service__block {
  margin-top: var(--s-6);
}

.service__block p {
  max-width: 64ch;
  font-size: var(--fs-read);
  line-height: var(--lh-body);
}

/* Deliverables — accent tick marks drawn in CSS. On a page whose h1 is
   "What you actually receive", this list is the emphasis. */
.deliverables {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
  max-width: 64ch;
}

.deliverables li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--fs-read);
  line-height: var(--lh-body);
}

.deliverables li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 0.85rem;
  height: 1px;
  background: var(--draw-strong);
}

/* The receipt. Same device as .deliverable on the home page: an accent rail,
   an accent label, a wash that falls away. One accent moment per service
   rather than one per bullet. */
.service__block--receive {
  padding-left: var(--s-5);
  border-left: 2px solid var(--accent);
  background: linear-gradient(90deg, var(--accent-faint), transparent 55%);
}

.service__block--receive h4 {
  color: var(--accent);
}

/* The head is a band across the full width — numeral, title, rule — and the
   body runs beneath it in two measured columns. A narrow head column beside a
   tall body is just a hole where a photograph would have gone. */
@media (min-width: 48em) {
  .service__head {
    display: flex;
    align-items: baseline;
    gap: var(--s-5);
    margin-bottom: var(--s-6);
  }

  .service__index {
    margin-bottom: 0;
    flex: 0 0 auto;
  }

  .service h3 {
    margin-bottom: 0;
    max-width: 20ch;
  }
}

@media (min-width: 72em) {
  .service__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--s-8);
    row-gap: var(--s-6);
    align-items: start;
  }

  .service__block + .service__block {
    margin-top: 0;
  }

  /* "What it is" and "How it runs" stack on the left; "What you receive" —
     the substance of this page — takes the whole right column. */
  .service__block:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .service__block:nth-child(2) {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding-left: var(--s-7);
  }

  .service__block:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }

  .service__block p,
  .deliverables {
    max-width: none;
  }
}

/* -----------------------------------------------------------------------------
   16b  EDITORIAL SPREADS — about.html
   -------------------------------------------------------------------------- */

/* The opening paragraph of an argument, set larger than the rest of it. */
/* The opening paragraph of an argument, set larger than the rest of it. The
   measure is set from the character count, not from the column: at 28px,
   34ch is a 513px pull-quote that runs eleven lines. 46ch is ~58 characters,
   which is a paragraph. */
.standfirst {
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  color: var(--ink);
  max-width: 44ch;
  margin: 0 0 var(--s-6);
  text-wrap: pretty;
}

/* Two measured columns rather than one column and an empty half. */
.prose-cols {
  display: grid;
  gap: var(--s-5);
}

.prose-cols p {
  margin: 0;
  font-size: var(--fs-read);
  line-height: var(--lh-body);
  max-width: 62ch;
}

@media (min-width: 60em) {
  .standfirst {
    letter-spacing: -0.014em;
    max-width: 46ch;
  }

  /* The rule spans the whole sheet, so the change of measure between the
     standfirst and the two columns beneath it reads as a deliberate step
     down rather than as a column that was left unfinished. */
  .prose-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-8);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line-strong);
  }
}

/* The founder section: prose on one side, a drawn plinth on the other.
   Type, rules and the monogram only — never a depicted person. */
.founder {
  display: grid;
  gap: var(--s-7);
  align-items: start;
}

.founder__body p {
  font-size: var(--fs-read);
  line-height: var(--lh-body);
  max-width: 64ch;
}

.founder__figure {
  order: -1;
  max-width: 15rem;
}

@media (min-width: 64em) {
  .founder {
    grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
    gap: var(--s-8);
  }

  .founder__figure {
    order: 0;
    max-width: none;
    position: sticky;
    top: var(--sticky-top);
  }
}

/* -----------------------------------------------------------------------------
   17  RULES LIST AND STEPS
   -------------------------------------------------------------------------- */

.rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-5);
}

.rules li {
  position: relative;
  padding: var(--s-5) 0 0 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-read);
  line-height: var(--lh-body);
  color: var(--body);
  max-width: 64ch;
}

.rules h3 {
  margin-bottom: var(--s-2);
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: var(--w-medium);
  line-height: 1.3;
  letter-spacing: -0.008em;
}

@media (min-width: 60em) {
  .rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-6) var(--s-8);
  }

  .rules li {
    max-width: none;
  }
}

/* Numbered steps — "what happens next" on contact.html */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: var(--s-5);
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 3rem;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--body);
  max-width: 58ch;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.15em;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* The rule that turns the three steps into a drawn run. */
.steps li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 2.1em;
  bottom: calc(var(--s-5) * -1);
  width: 1px;
  background: var(--line-strong);
}

.steps li:last-child::after {
  display: none;
}

@media (min-width: 60em) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-6);
  }

  .steps li {
    padding-left: 0;
    padding-top: var(--s-6);
    border-top: 1px solid var(--line-strong);
  }

  .steps li::before {
    top: var(--s-3);
  }

  .steps li::after {
    display: none;
  }
}

/* -----------------------------------------------------------------------------
   18  FAQ — works with no JavaScript at all
   -------------------------------------------------------------------------- */

.faq {
  border-top: 1px solid var(--line-strong);
  max-width: 70ch;
}

/* The FAQ is 1230px tall and it is the last thing on the page, so a 70ch
   column would leave half the sheet empty for its whole height. The head
   takes the other column and tracks the answers down the page — the same
   device the method rail uses — and the two rules, broken by the gap, open
   the band across the full sheet.

   70em, not 60em: the split only pays for itself once the remaining column
   still holds the answers at their full 66ch. Below 1096px it does not —
   at 960px it would cut them to 435px, which is a worse fault than the void
   it was introduced to remove. Under 70em the FAQ keeps its own measure. */
@media (min-width: 70em) {
  .faq-band > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    gap: var(--s-8);
    align-items: start;
  }

  .faq-band .section__head {
    position: sticky;
    top: var(--sticky-top);
    margin-bottom: 0;
  }

  .faq-band .section__head h2 {
    max-width: none;
  }

  .faq-band .faq {
    max-width: none;
  }
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: var(--w-medium);
  line-height: 1.35;
  letter-spacing: -0.01em;
  transition: color var(--dur) var(--ease);
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question:hover {
  color: var(--accent);
}

/* Plus / minus drawn with two rules. Opening removes the vertical one —
   there is nothing to rotate, so nothing rotates. */
.faq__question::after {
  content: "";
  flex: 0 0 auto;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.4em;
  background:
    linear-gradient(var(--draw-strong), var(--draw-strong)) center / 100% 1px no-repeat,
    linear-gradient(var(--draw-strong), var(--draw-strong)) center / 1px 100% no-repeat;
}

.faq__item[open] .faq__question::after {
  background:
    linear-gradient(var(--ink), var(--ink)) center / 100% 1px no-repeat;
}

.faq__answer {
  padding: 0 0 var(--s-5);
  max-width: 66ch;
}

.faq__answer p {
  font-size: var(--fs-read);
  line-height: var(--lh-body);
  color: var(--body);
}

/* -----------------------------------------------------------------------------
   19  CONTACT ROUTES AND COMPANY DETAILS
   -------------------------------------------------------------------------- */

.contact-plate {
  display: grid;
  gap: var(--s-7);
  align-items: start;
}

.contact-plate__routes,
.contact-plate__aside {
  display: grid;
  gap: var(--s-6);
  align-content: start;
  min-width: 0;
}

/* Each block is a drawn plate: hairline, mono label, then the content. */
.contact-route,
.contact-aside {
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-strong);
  min-width: 0;
}

.contact-route h3,
.contact-aside h3 {
  margin: 0 0 var(--s-3);
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: var(--w-normal);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The page's action, set at heading scale. The clamp is deliberately lower
   than --fs-2xl at the small end: a 24-character address has to fit inside
   320px of usable width at 360px without breaking mid-word. */
.contact-route__value {
  display: inline-block;
  font-size: clamp(1.25rem, 0.85rem + 1.9vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  padding: 0.6rem 0 0.7rem;
  border-bottom: 2px solid var(--accent);
  overflow-wrap: break-word;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.contact-route__value:hover {
  color: var(--accent);
  border-bottom-color: var(--accent-bright);
}

.contact-route p,
.contact-aside p {
  margin: var(--s-4) 0 0;
  font-size: var(--fs-read);
  line-height: var(--lh-body);
  color: var(--body);
  max-width: 56ch;
}

/* "Where we are" — a value line so the block carries the same shape as a
   route without pretending to be a link. */
.contact-aside__value {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 1.3;
  color: var(--ink);
}

/* "What to write" — drawn ticks, in the same language as .deliverables but
   without the accent: a prompt is not a deliverable. */
.contact-prompts {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}

.contact-prompts li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--fs-read);
  line-height: var(--lh-body);
  color: var(--body);
  max-width: 56ch;
}

.contact-prompts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 0.85rem;
  height: 1px;
  background: var(--draw-strong);
}

@media (min-width: 52em) {
  .contact-plate {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--s-7) var(--s-8);
  }
}

/* The company identification block. A data specimen, set on purpose:
   mono, tabular, framed with corner ticks. --legal is 11.8:1 on canvas
   and 10.9:1 on --surface. */
/* Centred, and unconditionally so. Inside .prose the plinth is already the
   full width of the measure, so the auto margins resolve to zero and terms.html
   is untouched; on contact.html, where the band is 1120px wide, they stop a
   736px specimen from sitting stranded against the left rule. This is the
   plate's position in its parent, not its rendering — the component itself
   must stay byte-identical on both pages. */
.company-details {
  padding: var(--s-6) var(--s-5);
  max-width: 46rem;
  margin-inline: auto;
}

.company-details h2,
.company-details h3 {
  font-size: var(--fs-xs);
  font-family: var(--mono);
  font-weight: var(--w-normal);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-5);
}

.detail-list {
  margin: 0;
  display: grid;
  gap: var(--s-4);
}

.detail-list > div {
  display: grid;
  gap: var(--s-1);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.detail-list > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.detail-list dt {
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  color: var(--muted);
  margin: 0;
}

.detail-list dd {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-tight);
  color: var(--legal);
  overflow-wrap: break-word;
}

/* The identifiers themselves read as a specimen. */
.detail-list dd.nowrap {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--ink);
}

@media (min-width: 40em) {
  .company-details {
    padding: var(--s-7) var(--s-6);
  }

  .detail-list > div {
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    gap: var(--s-4);
    align-items: baseline;
  }
}

/* -----------------------------------------------------------------------------
   20  LINK LIST — 404
   -------------------------------------------------------------------------- */

.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
  max-width: 44rem;
}

.link-list li {
  border-bottom: 1px solid var(--line);
}

/* Grid, not wrapping flex. With flex-wrap the row that breaks onto two lines
   was decided by the length of its own description, so at some widths two rows
   sat inline and two stacked — the same component built two ways on one screen.
   Here every row stacks together below 40em and goes inline together above it,
   and the fixed label track keeps the labels aligned down the list. */
.link-list a {
  display: grid;
  grid-template-columns: 1fr;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-5) 0;
  text-decoration: none;
  color: var(--ink);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* transform, not padding: animating padding reflows the row on every hover. */
.link-list a:hover {
  color: var(--accent);
  transform: translateX(0.75rem);
}

.link-list__label {
  font-size: var(--fs-md);
  font-weight: var(--w-medium);
}

@media (min-width: 40em) {
  .link-list a {
    grid-template-columns: 7rem 1fr;
    gap: var(--s-2) var(--s-5);
  }
}

.link-list__desc {
  font-size: var(--fs-base);
  color: var(--muted);
}

/* -----------------------------------------------------------------------------
   21  PROSE — privacy.html, terms.html
   -------------------------------------------------------------------------- */

.page-header {
  position: relative;
  padding-block: clamp(2.5rem, 1.8rem + 3.4vw, 5rem) clamp(2rem, 1.5rem + 2vw, 3.5rem);
  border-bottom: 1px solid var(--line);
  overflow: clip;
}

.page-header h1 {
  max-width: 20ch;
  margin-bottom: var(--s-5);
}

/* For the legal pages, where a full display h1 would shout. */
.page-header--quiet h1 {
  font-size: var(--fs-2xl);
  letter-spacing: -0.024em;
}

.page-header .lead {
  max-width: 60ch;
}

.page-header__meta {
  margin: var(--s-5) 0 0;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* Page headers that carry a drawn figure beside the words. */
.page-header__grid {
  display: grid;
  gap: var(--s-6);
  align-items: end;
}

/* The constraint sits on the drawing, not on the element carrying the rule:
   a hairline that stops 78px short of its own column reads as a divider that
   was cut, and it would be the only one on the site that does. */
.page-header__figure {
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.page-header__figure svg {
  max-width: 17rem;
}

@media (min-width: 62em) {
  .page-header__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
    gap: var(--s-8);
  }

  .page-header__figure {
    padding-top: 0;
    border-top: 0;
  }

  .page-header__figure svg {
    max-width: none;
  }
}

/* The legal pages set their text in a narrow measure, so their plate sits
   inline on small screens and moves into the margin when there is one.
   Same rule as .page-header__figure above: the width cap belongs to the
   drawing, not to the element carrying the hairline, or the hairline stops
   208px into a 350px column and reads as a divider that was cut short. */
.page-header__plate {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.page-header__plate svg {
  max-width: 13rem;
}

/* Once there is margin outside the measure, the plate moves into it. It is
   positioned against .wrap, so the offset is negative: it sits beyond the
   right edge of the text column, not on top of it.

   The margin it moves into is finite and its width is fixed: .wrap--narrow
   caps at 46rem + two 2.5rem gutters = 816px, the sheet rule is drawn at
   ±600px from centre, so there are exactly 192px between the text column and
   the rule. A 160px plate offset by 176px leaves 16px of clearance on both
   sides at every width above 88em. A plate that crosses the sheet edge is
   the one detail in this system that reads as a mistake. */
@media (min-width: 88em) {
  .page-header__plate {
    position: absolute;
    top: 50%;
    right: -11rem;
    width: 10rem;
    margin: 0;
    padding: 0;
    border: 0;
    transform: translateY(-50%);
  }

  .page-header__plate svg {
    max-width: none;
  }
}

/* A measure bar under a page header: seven ticks, one node. Drawn, responsive,
   and present at every width — unlike a photograph. */
.measure-bar {
  position: relative;
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  height: 34px;
  border-top: 1px solid var(--draw-strong);
}

/* Major divisions, hanging below the rule. */
.measure-bar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 18px;
  background-image: repeating-linear-gradient(
    to right,
    var(--line-strong) 0 1px,
    transparent 1px 14.2857%
  );
}

/* Minor divisions, half as long. The element starts half a division in and is
   92.8571% wide, so 15.3846% of it is 14.2857% of the bar: the minor ticks land
   exactly between the major ones at any width. */
.measure-bar::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 7.1429%;
  height: 9px;
  background-image: repeating-linear-gradient(
    to right,
    var(--line) 0 1px,
    transparent 1px 15.3846%
  );
}

.prose {
  max-width: 68ch;
  color: var(--body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

.prose > * + * {
  margin-top: var(--s-4);
}

/* Scoped to the prose's OWN headings, deliberately. The section-divider rule
   belongs to this page's run of text; it must not reach down into a component
   embedded in that run. The company-details plinth is the case that proved it:
   as a descendant selector this block outranked .company-details h2 on source
   order alone, and the same plinth rendered as a 12px mono label on
   contact.html and as a 28px letterspaced slab with a stranded hairline
   inside its own box on terms.html. One component, one rendering. */
.prose > h2 {
  font-size: var(--fs-xl);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.prose > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.prose > h3 {
  font-size: var(--fs-md);
  margin-top: var(--s-6);
}

.prose p {
  margin-bottom: 0;
}

.prose ul,
.prose ol {
  margin-top: var(--s-4);
  padding-left: 1.25rem;
  display: grid;
  gap: var(--s-3);
}

.prose li {
  padding-left: 0.35rem;
}

.prose li::marker {
  color: var(--muted);
}

.prose a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-dim);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  overflow-wrap: break-word;
}

.prose a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.prose strong {
  color: var(--ink);
}

.prose .company-details {
  margin-top: var(--s-7);
  max-width: none;
}

/* -----------------------------------------------------------------------------
   22  CALL-TO-ACTION PANEL
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  overflow: clip;
  border-top: 1px solid var(--line);
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem);
}

.cta__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(44rem 22rem at 10% 120%, var(--accent-wash), transparent 62%),
    radial-gradient(36rem 20rem at 92% -20%, rgba(122, 150, 232, 0.06), transparent 62%);
}

/* A registration mark in the margin: frame, crosshair, ring. Drawn entirely
   in gradients so the closing panel of every page carries a figure without a
   single extra element in the markup.

   It is drawn at EVERY width, never switched off. Below 62em it sits half off
   the bottom corner, which is a smaller drawing rather than an absent one —
   the same principle the hero plate follows. .cta clips, so the bleed can
   never produce a horizontal scrollbar. The ring radii are expressed against
   closest-side so they scale with the box instead of breaking when it shrinks. */
.cta::after {
  content: "";
  position: absolute;
  right: -13%;
  bottom: -16%;
  width: clamp(150px, 46vw, 216px);
  height: clamp(150px, 46vw, 216px);
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(var(--draw), var(--draw)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--draw), var(--draw)) 0 50% / 100% 1px no-repeat,
    radial-gradient(
      circle closest-side at 50% 50%,
      transparent 0 58.8%,
      var(--draw) 58.8% calc(58.8% + 1px),
      transparent calc(58.8% + 1px)
    ),
    radial-gradient(
      circle closest-side at 50% 50%,
      transparent 0 29.2%,
      var(--line-strong) 29.2% calc(29.2% + 1px),
      transparent calc(29.2% + 1px)
    );
  -webkit-mask-image: radial-gradient(78% 78% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(78% 78% at 50% 50%, #000 55%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* The copy always sits above the mark, at every width. */
.cta > .wrap {
  position: relative;
  z-index: 1;
}

@media (min-width: 62em) {
  .cta::after {
    top: 50%;
    right: 9%;
    bottom: auto;
    transform: translateY(-50%);
  }
}

.cta h2 {
  max-width: 20ch;
  margin-bottom: var(--s-5);
}

.cta p {
  max-width: 58ch;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--body);
}

/* -----------------------------------------------------------------------------
   23  MOTION AND SCROLL REVEAL
   Only ever active when the enhancement script has set data-reveal="on".
   With JavaScript off, .reveal has no effect at all.
   -------------------------------------------------------------------------- */

[data-reveal="on"] .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

[data-reveal="on"] .reveal[data-revealed] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-reveal="on"] .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------------------------------------------------------
   24  PRINT — flip to black on white so legal text survives
   -------------------------------------------------------------------------- */

@media print {
  :root {
    --canvas: #fff;
    --surface: #fff;
    --surface-2: #fff;
      --line: #ccc;
    --line-strong: #999;
    --draw: #999;
    --draw-strong: #666;
    --ink: #000;
    --body: #1a1a1a;
    --legal: #000;
    --muted: #444;
    --accent: #8a2e10;
    --accent-dim: #8a2e10;
    --accent-wash: transparent;
    --accent-faint: transparent;
  }

  body {
    background: #fff;
    color: #1a1a1a;
    font-size: 11pt;
  }

  body::after,
  .texture-grid,
  .texture-mesh,
  .hero__wash,
  .cta__wash,
  .hero__plate,
  .measure-bar,
  .page-header__figure,
  .figure {
    display: none !important;
  }

  .site-header,
  .phase__head,
  .service__head {
    position: static;
  }

  a {
    color: #000;
  }

  /* A printed button is inert. Outline it instead of printing near-black
     type on a dark chip. */
  .btn--primary,
  .skip-link {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #000 !important;
  }

  .faq__item {
    break-inside: avoid;
  }

  .faq__answer {
    display: block !important;
  }

  .company-details,
  .phase,
  .card,
  .refusal,
  .scenario {
    break-inside: avoid;
  }
}