/* ---- 00-tokens.css ---- */
/* =====================================================================
   Dash Digital Ltd — design tokens (owned by the lead; do not edit in a section file)
   The mark is a "D" monogram: a plum tile, a white D, and a mint dash
   cut across it. Plum and lilac carry the brand; mint is the one bright note
   and is only ever decorative (it never carries text or focus).
   ===================================================================== */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/plus-jakarta-sans.woff2") format("woff2-variations"),
       url("fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader.woff2") format("woff2-variations"),
       url("fonts/newsreader.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-italic.woff2") format("woff2-variations"),
       url("fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* ---- Colour: surfaces & ink ---- */
  --paper:   #FFFFFF;   /* page */
  --mist:    #F7F4FB;   /* alternate band / quiet panel */
  --haze:    #EEE8F5;   /* deeper panel, vignette grounds */
  --ink:     #2A1546;   /* headings, primary text — plum, never pure black */
  --ink-2:   #4A3F5C;   /* body copy */
  --ink-3:   #6E6480;   /* secondary / captions (AA on paper & mist) */
  --line:    #E8E1F0;   /* hairlines, borders */
  --line-2:  #D3C8E2;   /* stronger borders, input outlines */

  /* ---- Colour: brand ---- */
  --plum:   #2A1546;    /* the tile */
  --violet: #5A3A86;    /* links, focus, accents that carry meaning */
  --mint:   #2FD39B;    /* the dash: decorative only */
  --lilac:  #F2EDF8;    /* soft grounds */

  /* ---- Colour: the three companies share the brand (one parent, one look) ---- */
  --img:      var(--violet);
  --img-soft: var(--lilac);
  --quid:     var(--violet);
  --quid-soft:var(--lilac);
  --fact:     var(--violet);
  --fact-soft:var(--lilac);

  /* ---- Type ---- */
  --font-sans:  "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  /* Fluid scale (min @ 360px → max @ 1440px) */
  --t-display: clamp(2.75rem, 1.45rem + 5.8vw, 6.25rem);   /* hero only */
  --t-h2:      clamp(2rem, 1.45rem + 2.45vw, 3.5rem);
  --t-h3:      clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem);
  --t-lead:    clamp(1.1875rem, 1.06rem + 0.55vw, 1.5rem);
  --t-letter:  clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);    /* serif long-form */
  --t-body:    1.0625rem;
  --t-small:   0.9375rem;
  --t-micro:   0.8125rem;

  --lh-tight: 1.02;
  --lh-head:  1.1;
  --lh-body:  1.6;

  --track-display: -0.035em;
  --track-head:    -0.025em;
  --track-ui:      0em;

  /* ---- Layout ---- */
  --max:      1320px;                       /* content max width */
  --gutter:   clamp(1.25rem, 4.2vw, 3.5rem);
  --col-gap:  clamp(1rem, 1.9vw, 1.5rem);   /* the ONE column gap for every 12-column grid on the page */
  /* Page grid: at ≥75em every section uses repeat(12, minmax(0,1fr)) with --col-gap.
     H2s sit in columns 1–4; section content starts at column 5; secondary content at column 9. */
  --section:  clamp(5.5rem, 11vw, 10.5rem); /* vertical rhythm between sections */
  --header-h: 72px;

  /* Spacing scale (4px base) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem;   --s-7: 3rem;  --s-8: 4rem;   --s-9: 6rem;

  /* Radius by hierarchy: large panels > controls > pills */
  --r-xl: 32px;
  --r-lg: 22px;
  --r-md: 12px;
  --r-sm: 8px;
  --r-pill: 999px;

  /* Elevation — used sparingly, only on raised vignette surfaces */
  --shadow-1: 0 1px 2px rgba(42,21,70,.06), 0 2px 6px rgba(42,21,70,.04);
  --shadow-2: 0 2px 4px rgba(42,21,70,.04), 0 12px 32px -8px rgba(42,21,70,.14), 0 32px 64px -24px rgba(42,21,70,.12);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-3: 900ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #120A1B;
    --mist:    #1A1126;
    --haze:    #231731;
    --ink:     #F4EFFA;
    --ink-2:   #CBC0DA;
    --ink-3:   #A194B3;
    --line:    #2C2040;
    --line-2:  #3D2E55;

    --plum:   #2A1546;
    --violet: #B79CFF;
    --mint:   #4BE3B0;
    --lilac:  #241838;

    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 2px 4px rgba(0,0,0,.3), 0 18px 40px -12px rgba(0,0,0,.6);
  }
}

/* ---- 01-base.css ---- */
/* =====================================================================
   Base — reset, element defaults, shared utilities (owned by the lead)
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-ui);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 600;
  line-height: var(--lh-head);
  letter-spacing: var(--track-head);
  text-wrap: balance;
}
p { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
button { font: inherit; color: inherit; }
::selection { background: color-mix(in srgb, var(--img) 22%, transparent); color: var(--ink); }

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

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

/* Accessibility helpers */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 1rem; top: 1rem; z-index: 1000;
  transform: translateY(-200%);
  background: var(--ink); color: var(--paper);
  padding: .7rem 1.1rem; border-radius: var(--r-md);
  font-weight: 600; text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus { transform: none; }

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

/* ---- 10-header.css ---- */
/* =====================================================================
   Header — sticky, quiet. Transparent over the hero; once the page
   scrolls (JS adds .is-scrolled) it becomes solid paper with a hairline,
   so nothing shows through the nav. Without JS it keeps that state.
   Below 760px the nav becomes a disclosure sheet (JS) or a second
   row of links (no JS).
   ===================================================================== */

.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background-color: var(--paper);
  box-shadow: inset 0 -1px 0 var(--line);
  transition:
    background-color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}
.js .hdr:not(.is-scrolled):not(.is-open) {
  background-color: transparent;
  box-shadow: inset 0 -1px 0 transparent;
}

.hdr-bar {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

/* ---- Brand lockup ---- */
.hdr-brand {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .375rem;
  margin-inline: -.375rem;            /* room for the focus ring; the mark stays on the edge */
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-sm);
}
.hdr-mark {
  width: 2rem;
  height: 2rem;                       /* 32px tile: a little taller than the wordmark */
  flex: none;
}
.mark-tile { fill: var(--ink); }
.mark-d    { fill: var(--paper); }
.mark-dash { fill: var(--mint); }
.hdr-wordmark {
  font-size: 1.1875rem;
  font-weight: 620;
  letter-spacing: -0.028em;
  line-height: 1;
  white-space: nowrap;
}

/* ---- Primary nav (desktop) ---- */
.hdr-list {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 2.6vw, 2.75rem);
}
.hdr-link {
  display: block;
  padding: .5rem;
  margin-inline: -.5rem;              /* room for the focus ring; text stays put */
  border-radius: var(--r-sm);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .32em;
  transition:
    color var(--dur-1) ease,
    text-decoration-color var(--dur-1) ease;
}
.hdr-link:hover {
  color: var(--ink);
  text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent);
}

/* The company list only appears inside the small-screen sheet */
.hdr-cos { display: none; }

/* The nav's text sits 1.5px high against the wordmark's: share one baseline */
@media (min-width: 760px) {
  .hdr-nav { margin-top: 3px; }
}

/* ---- Menu button: hidden unless JS is running and the screen is narrow ---- */
.hdr-toggle { display: none; }

@media (max-width: 759.98px) {

  /* No JS: links sit on a second row and scroll sideways if they must */
  html:not(.js) .hdr { height: auto; }
  html:not(.js) .hdr-bar {
    flex-wrap: wrap;
    row-gap: 0;
    padding-block: .875rem .25rem;
  }
  html:not(.js) .hdr-sheet { width: 100%; }
  html:not(.js) .hdr-nav {
    width: calc(100% + 1rem);
    margin-inline: -.5rem;              /* the links' focus-ring room is not clipped */
    padding-inline: .5rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  html:not(.js) .hdr-list { gap: var(--s-5); }

  /* With JS: a quiet text button opens a full-height sheet */
  .js .hdr-toggle {
    display: inline-flex;
    align-items: center;
    height: 2.75rem;                    /* 44px hit area; no outline box */
    padding-inline: .875rem;
    margin-inline-end: -.875rem;        /* the word, not the hit area, sits on the edge */
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    font-size: var(--t-small);
    font-weight: 550;
    letter-spacing: -0.005em;
    color: var(--ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease;
  }
  @media (hover: hover) {
    .js .hdr-toggle:hover { background: var(--mist); }
  }
  .js .hdr-toggle[aria-expanded="true"] { color: var(--ink); }
  .js .hdr-toggle:focus-visible { border-radius: var(--r-md); }

  .js .hdr.is-open {
    background-color: var(--paper);
    box-shadow: inset 0 -1px 0 var(--line);
  }

  /* The sheet: the four sections at the top, the three companies' own
     websites at the foot, each keyed by its dash from the mark. */
  .js .hdr-sheet {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s-4) var(--gutter) max(var(--s-7), env(safe-area-inset-bottom));
    background: var(--paper);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-.5rem);
    transition:
      opacity var(--dur-1) ease,
      transform var(--dur-2) var(--ease-out),
      visibility 0s linear var(--dur-2);
  }
  .js .hdr.is-open .hdr-sheet {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition:
      opacity var(--dur-2) var(--ease-out),
      transform var(--dur-2) var(--ease-out),
      visibility 0s;
  }
  .js .hdr-list {
    display: block;
  }
  .js .hdr-list li { border-bottom: 1px solid var(--line); }
  .js .hdr-link {
    margin-inline: -.75rem;             /* room for the focus ring; text stays on the edge */
    padding: 1.125rem .75rem;
    border-radius: var(--r-md);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: var(--track-head);
    line-height: var(--lh-head);
    color: var(--ink);
    text-underline-offset: .2em;
  }
  .js .hdr-link:focus-visible { outline-offset: -2px; }

  .js .hdr-cos {
    display: block;
    margin-top: auto;                   /* the companies sit at the foot of the sheet */
    padding-top: var(--s-7);
  }
  .js .hdr-co {
    display: grid;
    grid-template-columns: 2.75rem 1fr;   /* same rule column as the hero's company list */
    grid-template-rows: auto auto;
    align-items: center;
    margin-inline: -.75rem;
    padding: .75rem;
    border-radius: var(--r-md);
    color: var(--ink);
    text-decoration: none;
  }
  .js .hdr-co--img,
  .js .hdr-co--quid,
  .js .hdr-co--fact { --c: var(--mint); }
  .js .hdr-co-dash {                    /* equal mint rules: the dash from the tile */
    grid-row: 1;
    width: 1.75rem;
    height: .3125rem;
    border-radius: var(--r-pill);
    background: var(--c);
  }
  .js .hdr-co-name {
    grid-row: 1;
    grid-column: 2;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    line-height: 1.3;
  }
  .js .hdr-co-url {
    grid-row: 2;
    grid-column: 2;
    font-size: var(--t-small);
    line-height: 1.35;
    color: var(--ink-3);
  }
  .js .hdr-co:hover .hdr-co-name { text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 2px; text-underline-offset: .2em; }
  .js .hdr-co:focus-visible { outline-color: var(--c); outline-offset: -2px; }

  html.hdr-locked { overflow: hidden; }
}

/* ---- 20-hero.css ---- */
/* =====================================================================
   Hero — one anchor visual: the monogram tile, large. On wide screens it
   stands at the right of columns 9–12, exactly as tall as the headline
   from its first cap to its last baseline, so headline and tile read as
   one lockup. Below them, a calm row of three links, one per company,
   each keyed by a short mint rule (the dash from the tile).
   ===================================================================== */

.hero {
  padding-block: clamp(2.25rem, .5rem + 5vw, 4.5rem) clamp(3.5rem, 1.5rem + 4vw, 5.5rem);
}

.hero-grid {
  container: hero / inline-size;
  display: flex;
  flex-direction: column;
  --h1: var(--t-display);
  --mk: 10rem;                           /* the tile's side */
}
@media (max-width: 479.98px) {
  /* just small enough that "people can rely on." holds one line */
  .hero-grid { --h1: min(var(--t-display), 9.9vw); }
}

/* ---- The mark: plum tile, paper D, mint dash (dark mode inverts the tile) ---- */
.hero-mark {
  order: 2;
  position: relative;
  width: var(--mk);
  aspect-ratio: 1;
  margin-block: 2.5rem 0;
}
.hero-tile { display: block; width: 100%; height: 100%; }
.hero-tile-bg { fill: var(--ink); }
.hero-tile-d  { fill: var(--paper); }
/* The dash sits where the logo puts it: x 7–27, y 18.5–21.5 of 40 */
.hero-dash {
  --dot: calc(var(--mk) * .075);
  position: absolute;
  left: 17.5%;
  top: 46.25%;
  width: 50%;
  height: 7.5%;
  border-radius: var(--r-pill);
  background: var(--mint);
}
.hero-title { order: 0; }
.hero-lead  { order: 1; }

/* ---- Headline ---- */
.hero-title {
  /* Measure sits between "people can rely on." (8.76em) and
     "products that people" (9.75em), so it always sets
     Small digital / products that / people can rely on. */
  max-width: 9.2em;
  margin-inline-start: -0.06em;          /* optical: p stems sit on the edge, the round S overshoots */
  font-size: var(--h1);
  font-weight: 780;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  word-spacing: .04em;                   /* Plus Jakarta Sans sets tight word spaces at display sizes */
  text-wrap: wrap;
}

/* ---- Lead ---- */
.hero-lead {
  max-width: 44ch;
  margin-top: clamp(1.25rem, .8rem + 1.6vw, 2.25rem);
  margin-inline-start: -0.05em;          /* optical: the D's side bearing */
  font-size: var(--t-lead);
  line-height: 1.45;
  letter-spacing: -0.004em;
  color: var(--ink-2);
}

/* ---- Company index: three calm links ---- */
.hero-index {
  order: 3;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
  border-top: 1px solid var(--line);
}
.hero-co--img  { --c: var(--violet); --i: 0; }
.hero-co--quid { --c: var(--violet); --i: 1; }
.hero-co--fact { --c: var(--violet); --i: 2; }
.hero-co {
  padding-block: .5rem;                  /* the focus ring sits inside the hairlines */
  border-bottom: 1px solid var(--line);
}

/* Narrow: stacked rows, each at least 44px tall, rule beside the name */
.hero-link {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  padding: .5rem .625rem;
  margin-inline: -.625rem;               /* room inside the focus ring; rule and text stay on the edge */
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-sm);
  -webkit-tap-highlight-color: transparent;
}
.hero-rule {
  --dot: .3125rem;
  grid-row: 1;
  display: block;
  width: 1.75rem;                        /* the same for all three */
  height: .3125rem;
  border-radius: var(--r-pill);
  background: var(--mint);
}
.hero-name {
  grid-row: 1;
  grid-column: 2;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.018em;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur-1) ease;
}
.hero-kind {
  grid-row: 2;
  grid-column: 2;
  margin-top: .125rem;
  font-size: var(--t-small);
  line-height: 1.35;
  color: var(--ink-3);
}
/* Leaves the site: the same arrow as the "Visit" links further down,
   after the name, shown only when the link is pointed at or focused.
   Its glyph centres on the name's cap height. */
.hero-ext {
  display: inline-block;
  width: .6em;
  height: .6em;
  margin-inline-start: .3em;
  vertical-align: 0;
  fill: none;
  stroke: var(--c);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: translate(-3px, 3px);
  transition: opacity var(--dur-1) ease, transform var(--dur-2) var(--ease-out);
}

/* Phones: the arrow takes no room, so a long name never wraps to fit it */
@media (max-width: 759.98px) {
  .hero-ext { margin-inline-end: -1em; }
  /* Phones: the header mark and the index rules already carry the brand;
     a second large mark right above the rules would repeat it. */
  .hero-mark { display: none; }
}

@media (hover: hover) {
  .hero-link:hover .hero-name { text-decoration-color: var(--c); }
  .hero-link:hover .hero-ext  { opacity: 1; transform: none; }
}
.hero-link:focus-visible { outline: 2px solid var(--c); outline-offset: -2px; }
.hero-link:focus-visible .hero-name { text-decoration-color: var(--c); }
.hero-link:focus-visible .hero-ext  { opacity: 1; transform: none; }

/* ---- From 760px: page grid. Headline and lead in columns 1–8, the mark
   in 9–12, the three companies across the full width, four columns each. */
@media (min-width: 760px) {
  .hero-grid {
    --col: calc((100cqw - 11 * var(--col-gap)) / 12);
    /* never wider than columns 1–8 allow, so the break never changes */
    --h1: min(var(--t-display), (var(--col) * 8 + var(--col-gap) * 7) / 9.2);
    /* the tile is the headline's height, first cap to last baseline
       (2.785em in Plus Jakarta Sans at this leading), never wider than columns 9–12 */
    --mk: round(min(var(--h1) * 2.785, var(--col) * 4 + var(--col-gap) * 3), 2px);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: start;
  }
  .hero-title { grid-column: 1 / 9; grid-row: 1; }
  .hero-lead  { grid-column: 1 / 9; grid-row: 2; }
  .hero-mark {
    grid-column: 9 / -1;
    grid-row: 1;
    justify-self: end;
    margin-bottom: 0;
    /* centre on the headline's cap-top-to-last-baseline block */
    margin-top: calc(var(--h1) * .173 + (var(--h1) * 2.785 - var(--mk)) / 2);
  }
  .hero-index {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: subgrid;
    margin-top: clamp(3rem, 7svh, 5rem);
    border-top: 0;
  }
  .hero-co {
    grid-column: span 4;
    padding-block: 1.25rem 0;
    border-bottom: 0;
    border-top: 1px solid var(--line);
  }
  .hero-link {
    display: block;
    width: fit-content;
    padding: .25rem 0;
    margin-inline: 0;
  }
  .hero-link:focus-visible { outline-offset: 4px; }
  .hero-rule { margin-bottom: 1.125rem; }
  .hero-name {
    display: block;
    font-size: 1.25rem;
    text-wrap: balance;                  /* tablets: the long name takes two even lines */
  }
  .hero-kind { display: block; margin-top: .25rem; }
}
@media (min-width: 1000px) {
  .hero-name {
    /* the longest name plus its arrow (~14.4em) fits in four columns */
    font-size: min(1.5rem, (var(--col) * 4 + var(--col-gap) * 3) / 14.6);
  }
}
/* Tablets: the long name gets the room it needs, so all three kinds share a line */
@media (min-width: 760px) and (max-width: 999.98px) {
  .hero-co--img { grid-column: span 6; }
  .hero-co--quid,
  .hero-co--fact { grid-column: span 3; }
  .hero-name { text-wrap: nowrap; }
}

/* Landscape screens: the hero fills the first screen, with equal space
   above and below; on short laptops the headline caps by height. */
@media (min-width: 1000px) and (min-aspect-ratio: 1/1) {
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: min(calc(100svh - var(--header-h)), 63rem);
    padding-block: clamp(2.5rem, 9svh - 1rem, 6rem);
  }
  .hero-grid {
    --h1: min(var(--t-display), 10.6svh, (var(--col) * 8 + var(--col-gap) * 7) / 9.2);
  }
  .hero-lead { margin-top: min(clamp(1.25rem, .8rem + 1.6vw, 2.25rem), 4svh); }
}

/* ---- Load: the page's one moment. The tile settles in, then the mint
   dash draws across the D from its left cap; the companies' rules follow
   (done by ~1.2s). No JS or reduced motion: the finished state. ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-tile { animation: hero-settle 520ms var(--ease-out) backwards; }
  .js .hero-dash {
    animation:
      hero-dot 160ms linear 260ms backwards,
      hero-draw 640ms var(--ease-out) 300ms backwards;
  }
  .js .hero-rule {
    animation:
      hero-dot 180ms linear backwards,
      hero-draw 480ms var(--ease-out) calc(640ms + var(--i) * 70ms) backwards;
  }
}
@keyframes hero-settle {
  from { opacity: 0; transform: scale(.96); }
}
@keyframes hero-dot {
  from { opacity: 0; }
}
/* A rounded clip: a circle at the left cap that draws out; its leading end
   stays a true half-circle at every frame, and at rest there is no clip. */
@keyframes hero-draw {
  from { clip-path: inset(0 calc(100% - var(--dot)) 0 0 round 999px); }
  to   { clip-path: inset(0 0 0 0 round 999px); }
}

/* Dark: light-on-dark type reads heavier, so ease the weight back. */
@media (prefers-color-scheme: dark) {
  .hero-title { font-weight: 730; }
  .hero-name  { font-weight: 650; }
}

/* ---- 30-companies.css ---- */
/* =====================================================================
   Companies (#companies) — namespace .co-
   One lead panel (Innovation Management Group) and a pair below it.
   Each panel: dash, name, kind, description, visit link, and a product
   window that runs past the panel edge and is cut by it, like a screen
   seen through a frame.
   ===================================================================== */

.co {
  --co-gap: var(--col-gap);                           /* the page's one column gap */
  --co-pad: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);      /* one padding for all three panels;
                                                        always >= panel radius + 9px */
  --co-bleed: 2.5rem;                                 /* how far a window runs past the cut */
  /* The next section (#why) is also white, so the bottom is shortened to
     keep the white-to-white gap in step with the rest of the page. */
  padding-block: var(--section) calc(var(--section) * .5);
}

/* ---------------------------------------------------------------------
   Section head — on the page's 12-column grid from 75em
   --------------------------------------------------------------------- */
.co-head {
  display: grid;
  row-gap: var(--s-5);
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.co-title { font-size: var(--t-h2); }
.co-intro {
  max-width: 26.5em;
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--ink-2);
}
@media (min-width: 75em) {
  .co-head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: first baseline;
  }
  .co-title { grid-column: 1 / span 4; }
  .co-intro { grid-column: 5 / -1; }
}

/* ---------------------------------------------------------------------
   Panels
   --------------------------------------------------------------------- */
.co-panels,
.co-pair {
  display: grid;
  gap: var(--co-gap);
}

.co-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  padding: var(--co-pad) var(--co-pad) 0;   /* the window runs off the bottom */
  border-radius: var(--r-xl);
  background: var(--co-soft);
  overflow: clip;
  /* Caption ink: --ink-3 is just under AA on the tints, so deepen it a touch */
  --co-kind-ink: color-mix(in srgb, var(--ink-3) 78%, var(--ink));
}
/* The cut line: one hairline around the whole panel, drawn over the window
   where the panel edge crops it, so the panel always reads as one shape. */
.co-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--co-c) 16%, var(--co-soft));
  pointer-events: none;
}
.co-panel--img  { --co-c: var(--img);  --co-soft: var(--img-soft); }
.co-panel--quid { --co-c: var(--quid); --co-soft: var(--quid-soft); }
.co-panel--fact { --co-c: var(--fact); --co-soft: var(--fact-soft); }

/* Identity: dash, name, kind */
.co-id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* The dash from the monogram: mint, the same for every company */
.co-dash {
  display: block;
  width: 1.875rem;
  height: .3125rem;
  border-radius: var(--r-pill);
  background: var(--mint);
  margin-bottom: var(--s-5);
}

.co-name {
  font-size: var(--t-h3);
  line-height: 1.15;
  letter-spacing: -.022em;
  color: var(--ink);
}
.co-lead .co-name {
  font-size: clamp(1.75rem, 1.1rem + 1.9vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -.03em;
}
.co-kind {
  margin-top: var(--s-2);
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--co-kind-ink);
}

.co-desc {
  margin-top: var(--s-5);
  max-width: 30em;
  font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: balance;
}
.co-lead .co-desc {
  max-width: 24em;
  font-size: var(--t-lead);
  line-height: 1.45;
  text-wrap: pretty;
}
.co-nowrap { white-space: nowrap; }

/* Visit link — the one action in each panel */
.co-action { margin-top: var(--s-4); }
.co-visit {
  display: inline-flex;
  align-items: center;
  padding: .4em .375em;
  margin-inline: -.375em;          /* room for the focus ring; text stays on the axis */
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
}
.co-visit-text {
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .32em;
  text-decoration-color: color-mix(in srgb, var(--co-c) 45%, transparent);
  transition: text-decoration-color var(--dur-1) ease, text-decoration-thickness var(--dur-1) ease;
}
.co-visit:hover .co-visit-text {
  text-decoration-color: var(--ink);
  text-decoration-thickness: 2px;
}
.co-visit:focus-visible {
  outline-color: var(--co-c);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.co-visit:focus-visible .co-visit-text { text-decoration-color: var(--co-c); }

/* Touch screens (phones and tablets): a full 44px tap target without
   changing the visual rhythm */
@media (pointer: coarse) {
  .co-action { margin-top: var(--s-2); }
  .co-visit { min-height: 2.75rem; padding-block: .6875rem; }
}
/* Until the padding reaches --r-xl + 9px, use the smaller radius so every
   window edge stays clear of the panel's corner curves */
@media (max-width: 52.99em) {
  .co-panel { border-radius: var(--r-lg); }
}
@media (max-width: 47.99em) {
  .co-lead .co-visit-text { letter-spacing: -.012em; }
}
/* Narrow phones: one size for all three links; the longest domain holds one line */
@media (max-width: 24.3125em) {
  .co-visit { font-size: .875rem; }
}

/* Stage: holds the window and sizes it; the window overshoots the panel's
   bottom edge by --co-bleed and the panel clips it there. */
.co-stage {
  container-type: inline-size;
  min-width: 0;
  margin-top: clamp(var(--s-6), 1rem + 1.6vw, 2.5rem);
  margin-bottom: calc(-1 * var(--co-bleed));
}

/* ---- Lead panel ---- */
/* Stacked: the window starts on the text axis and runs off right and bottom */
.co-lead .co-stage { margin-right: calc(-1 * (var(--co-pad) + var(--co-bleed))); }

/* Two columns: text centred on the left; the window starts on the same x as
   The Fact Desk panel below and runs off the right and bottom edges. */
@media (min-width: 62em) {
  .co-lead {
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: var(--co-pad) 1.5rem auto auto 1fr var(--co-pad);  /* text starts level with the window, not floating mid-panel */
    column-gap: var(--co-gap);
  }
  .co-lead .co-id,
  .co-lead .co-copy   { grid-column: 1; margin-inline: var(--co-pad); }
  .co-lead .co-id     { grid-row: 3; }
  .co-lead .co-copy   { grid-row: 4; }
  .co-lead .co-desc   { margin-top: var(--s-6); }
  .co-lead .co-action { margin-top: var(--s-5); }
  .co-lead            { min-height: 46rem; }      /* clearly the tallest panel: 15% or more */
  .co-lead .co-doc    { --co-vis: 35em; }
  .co-lead .co-stage  {
    grid-column: 2;
    grid-row: 2 / -1;
    margin: 0 calc(-1 * var(--co-bleed)) calc(-1 * var(--co-bleed)) 0;
  }
}

/* ---- Pair: side by side from 760px, rows aligned across both panels ---- */
@media (min-width: 47.5em) {
  .co-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-pair .co-panel {
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .co-pair .co-copy { align-self: start; }
  .co-pair .co-desc { max-width: 27em; }
}

/* =====================================================================
   Windows — abstracted product screens (decorative, aria-hidden)
   Height is set in the window's own em (which scales with its width) for
   the part that shows, plus the bleed that the panel cuts off. The last
   element in each window is a solid shape (the plan, the calculator, the
   check result) that grows to the window's foot, so what the panel edge
   cuts is always a box, never a line of text.
   ===================================================================== */
.co-window {
  --co-surface: var(--paper);
  --co-ph: var(--haze);                     /* chat bubble, tracks */
  --co-well: var(--mist);                   /* recessed areas */
  --co-rule: var(--line);
  --co-edge: color-mix(in srgb, var(--co-c) 20%, var(--co-soft));
  --co-cap: color-mix(in srgb, var(--ink-3) 82%, var(--ink));   /* captions stay AA on the wells */
  --co-tag: var(--co-c);
  --co-ring: var(--line-2);
  --co-vis: 20.25em;                        /* visible height above the cut */
  gap: 1.2em;
  display: flex;
  flex-direction: column;
  height: calc(var(--co-vis) + var(--co-bleed));
  min-height: 100%;                         /* fill the row when the text beside is taller */
  padding: 1.6em 1.6em 0;
  border: 1px solid var(--co-edge);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--co-surface);
  font-size: clamp(.8125rem, 2.7cqi, .90625rem);
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--ink-2);
  overflow: clip;
  user-select: none;
}
.co-lead .co-window { border-radius: var(--r-lg) 0 0 0; }
.co-window ul { list-style: none; padding: 0; }
.co-window > * { flex: none; }
.co-window > :last-child { flex: 1 0 auto; }

/* Dark: windows are lit surfaces a step above their panel, not holes */
@media (prefers-color-scheme: dark) {
  .co-panel { --co-kind-ink: color-mix(in srgb, var(--ink-3) 85%, var(--ink)); }
  /* One lightness for all three grounds; where relative colour is supported,
     one lightness and chroma at each company's true hue */
  .co-panel { --co-soft: color-mix(in srgb, var(--co-c) 14%, var(--paper)); }
  @supports (color: oklch(from red l c h)) {
    .co-panel { --co-soft: oklch(from var(--co-c) .25 .045 h); }
  }
  .co-window {
    --co-surface: color-mix(in srgb, var(--ink) 5%, var(--co-soft));
    --co-ph: color-mix(in srgb, var(--ink) 14%, var(--co-soft));
    --co-well: color-mix(in srgb, var(--ink) 2%, var(--co-soft));
    --co-rule: color-mix(in srgb, var(--ink) 10%, var(--co-soft));
    --co-edge: color-mix(in srgb, var(--ink) 13%, var(--co-soft));
    --co-cap: color-mix(in srgb, var(--ink-3) 80%, var(--ink));
    --co-tag: color-mix(in srgb, var(--co-c) 62%, var(--ink));
    --co-ring: color-mix(in srgb, var(--ink) 30%, var(--co-soft));
  }
}

/* Pair windows size to their content: the last box always shows the same
   tail of empty well above the cut, whatever the line count */
.co-news, .co-scan {
  --co-tail: 1.25em;
  height: auto;
}
.co-news > :last-child,
.co-scan > :last-child { padding-bottom: calc(var(--co-tail) + var(--co-bleed)); }
.co-inset {
  padding: 1em 1.15em;
  border-radius: var(--r-md);
  background: var(--co-well);
}

/* ---- Innovation Management Group: application template ---- */
.co-doc {
  --co-vis: 35em;
  gap: 0;
  padding: 0;
  font-size: clamp(.8125rem, 2.2cqi, .9375rem);
}
.co-doc-bar {
  display: flex;
  align-items: center;
  padding: 1.15em 1.6em;
  border-bottom: 1px solid var(--co-rule);
}
.co-doc-title {
  font-size: 1.08em;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--ink);
  white-space: nowrap;
}
.co-news-topic {
  padding: .4em .8em .42em;
  border-radius: var(--r-pill);
  font-size: max(.82em, .75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
.co-doc-body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 16.5em) minmax(0, 1fr);
}

/* Sidebar: the ten Innovate UK questions, as a checklist */
.co-doc-outline {
  display: flex;
  flex-direction: column;
  padding: 1.6em;
  background: var(--co-well);
}
.co-doc-progress {
  display: flex;
  align-items: center;
  gap: .85em;
  margin-bottom: .9em;
}
.co-doc-track {
  flex: 1;
  height: .3125em;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--co-ph) 70%, var(--line-2));
  overflow: hidden;
}
.co-doc-fill {
  display: block;
  width: 60%;
  height: 100%;
  border-radius: inherit;
  background: var(--img);
}
.co-doc-count {
  font-size: max(.8em, .75rem);
  font-weight: 500;
  color: var(--co-cap);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.co-doc-list {
  display: flex;
  flex-direction: column;
}
.co-doc-item {
  display: flex;
  align-items: center;
  gap: .7em;
  padding-block: .5em;
  text-wrap: balance;
}
.co-tick { flex: none; width: 1.15em; height: 1.15em; overflow: visible; }
.co-doc-item.is-done .co-tick circle { fill: var(--img); }
.co-doc-item.is-done .co-tick path {
  fill: none;
  stroke: var(--co-surface);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.co-tick-ring { fill: none; stroke: var(--co-ring); stroke-width: 1.5; }
.co-doc-item.is-current { color: var(--ink); font-weight: 600; }
.co-doc-item.is-current .co-tick-ring { stroke: var(--img); }
.co-tick-half { fill: var(--img); }
.co-doc-item.is-todo { color: var(--co-cap); }
/* Side by side: the list spreads to fill the tall sidebar, within a cap */
@media (min-width: 62em) {
  .co-doc-list { flex: 1 1 auto; max-height: 30rem; }
  .co-doc-item { flex: 1 1 auto; }
}

/* The section being written: text, milestones, then the plan. Text ends
   well before the bleed; only the plan's well crosses the panel's edges. */
.co-doc-page {
  --co-page-r: calc(var(--co-bleed) + 1.75em);
  display: flex;
  flex-direction: column;
  gap: 1.15em;
  min-width: 0;
  padding: 1.6em var(--co-page-r) 0 1.75em;
}
.co-doc-page > :last-child { flex: 1 0 auto; }
.co-doc-h {
  font-weight: 600;
  color: var(--ink);
}
.co-doc-text {
  margin-top: -.35em;
  font-size: .92em;
  line-height: 1.55;
  color: var(--co-cap);
  text-wrap: balance;
}
.co-caret {
  display: inline-block;
  width: 2px;
  height: 1.3em;
  margin-left: .2em;
  border-radius: 1px;
  background: var(--img);
  vertical-align: -.28em;
}

.co-miles {
  display: grid;
  margin-top: -.1em;
  font-size: .92em;
  color: var(--ink-2);
  white-space: nowrap;
}
.co-miles-h {
  margin-bottom: .45em;
  font-size: max(.82em, .75rem);
  font-weight: 600;
  color: var(--co-cap);
}
.co-mile {
  display: flex;
  align-items: center;
  gap: .8em;
  padding-block: .5em;
  border-top: 1px solid var(--co-rule);
}
.co-mile:last-child { border-bottom: 1px solid var(--co-rule); }
.co-mile-mark {
  flex: none;
  width: .6em;
  height: .6em;
  border-radius: 1.5px;
  background: var(--img);
  transform: rotate(45deg);
}

/* Plan: a labelled work-package column, then a track with gridlines at
   0, 25, 50, 75 and 100%. Lanes are a fixed height; the well below them
   runs on past the cut. Every bar sits well inside the visible edge. */
.co-gantt {
  --co-reserve: 1.5em;
  --co-lanes: 3;
  --co-wp: 3.5em;
  --co-lines: 1px calc(100% + var(--co-bleed) + var(--co-reserve));
  display: grid;
  grid-template-columns: var(--co-wp) minmax(0, 1fr);
  grid-template-rows: auto repeat(var(--co-lanes), 2.25em) 1fr;
  align-items: center;
  margin-right: calc(-1 * var(--co-page-r));
  padding: 1em calc(var(--co-bleed) + max(1.5em, 22px)) calc(var(--co-bleed) + var(--co-reserve)) 1.1em;
  border-radius: var(--r-sm);
  background:
    linear-gradient(var(--co-rule), var(--co-rule)) var(--co-wp) 0 / var(--co-lines) no-repeat,
    linear-gradient(var(--co-rule), var(--co-rule)) calc(var(--co-wp) + (100% - var(--co-wp)) * .25) 0 / var(--co-lines) no-repeat,
    linear-gradient(var(--co-rule), var(--co-rule)) calc(var(--co-wp) + (100% - var(--co-wp)) * .5) 0 / var(--co-lines) no-repeat,
    linear-gradient(var(--co-rule), var(--co-rule)) calc(var(--co-wp) + (100% - var(--co-wp)) * .75) 0 / var(--co-lines) no-repeat,
    linear-gradient(var(--co-rule), var(--co-rule)) 100% 0 / var(--co-lines) no-repeat,
    var(--co-well);
  background-origin: content-box;
}
.co-gantt-corner { grid-column: 1; }
.co-gantt-head {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-self: end;
  padding-bottom: .55em;
  font-size: max(.75em, .75rem);
  font-weight: 500;
  line-height: 1;
  color: var(--co-cap);
  font-variant-numeric: tabular-nums;
}
.co-gantt-head span { padding-left: .55em; }   /* one rule for every label */
.co-lane { display: contents; }
.co-lane--x { display: none; }                 /* WP4–5: side-by-side window only */
.co-gantt-wp {
  grid-column: 1;
  font-size: max(.75em, .75rem);
  font-weight: 500;
  color: var(--co-cap);
  font-variant-numeric: tabular-nums;
}
.co-gantt-bar {
  grid-column: 2;
  display: block;
  height: .6875em;
  border-radius: var(--r-pill);
  background: var(--img);
}
.co-gantt-bar--1 { margin-left: 0;   width: 42%; }
.co-gantt-bar--2 { margin-left: 25%; width: 45%; }
.co-gantt-bar--3 { margin-left: 50%; width: 50%;
  background: color-mix(in srgb, var(--img) 55%, var(--co-well)); }
.co-gantt-bar--4 { margin-left: 50%; width: 30%;
  background: color-mix(in srgb, var(--img) 40%, var(--co-well)); }
.co-gantt-bar--5 { margin-left: 75%; width: 25%;
  background: color-mix(in srgb, var(--img) 28%, var(--co-well)); }
@media (min-width: 62em) {
  .co-lead .co-gantt { --co-lanes: 5; }
  .co-lane--x { display: contents; }
}

/* Stacked (below 62em): the window sizes to the full question list and
   shows the same short tail above the cut as the pair windows; the
   milestones are dropped */
@media (max-width: 61.99em) {
  .co-doc { height: auto; }
  .co-doc-outline { padding-bottom: calc(1.25em + var(--co-bleed)); }
  .co-miles { display: none; }
}
/* Smaller windows (992–1199 side by side, and tablets): a slim sidebar so
   the document column has room; long questions wrap under their tick */
@container (max-width: 600px) {
  .co-doc-body { grid-template-columns: minmax(0, 12.5em) minmax(0, 1fr); }
  .co-doc-outline { padding-inline: 1.3em; font-size: max(.9em, .75rem); }
  .co-doc-item { align-items: flex-start; }
  .co-doc-item .co-tick { margin-top: .1em; }
}
/* Phone-width windows: the outline only, clear of the right-hand bleed */
@container (max-width: 440px) {
  .co-doc-body { grid-template-columns: minmax(0, 1fr); }
  .co-doc-outline { background: none; padding-inline: 1.6em; font-size: 1em; }
  .co-doc-progress { margin-right: calc(var(--co-bleed) + .25em); }
  .co-doc-page { display: none; }
}

/* ---- Quidcast: explainer + calculator with a worked example ---- */
.co-news {
  gap: 1.6em;
  --co-quid-ink: color-mix(in srgb, var(--quid) 78%, var(--ink));   /* AA for small green text */
}
.co-news-story {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5em;
}
.co-news-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.co-news-topic {
  margin-bottom: .9em;
  color: var(--co-quid-ink);
  background: color-mix(in srgb, var(--quid) 11%, var(--co-surface));
}
.co-news-head {
  max-width: 15em;
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.016em;
  color: var(--ink);
  text-wrap: balance;
}
.co-news-thumb {
  flex: none;
  width: 7.5em;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--quid) 8%, var(--co-surface));
}
.co-news-thumb svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.co-news-grid { stroke: color-mix(in srgb, var(--quid) 20%, var(--co-surface)); stroke-width: 1; }
.co-news-step { stroke: var(--quid); stroke-width: 2; }
.co-news-dot  { fill: var(--co-surface); stroke: var(--quid); stroke-width: 2; }

.co-calc-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: .75em;
}
.co-calc-field {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .45em;
  min-width: 0;
}
.co-calc-label {
  font-size: max(.86em, .75rem);
  line-height: 1.25;
  color: var(--ink-2);
}
.co-calc-box {
  padding: .5em .7em;
  border-radius: var(--r-sm);
  background: var(--co-surface);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.co-calc-field.is-active .co-calc-box {
  box-shadow: inset 0 0 0 1.5px var(--quid), 0 0 0 3px color-mix(in srgb, var(--quid) 16%, transparent);
}
.co-calc-result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  margin-top: 1.5em;
  padding-top: 1em;
  border-top: 1px solid var(--co-rule);
}
.co-calc-rlabel { font-weight: 600; color: var(--ink); }
.co-calc-out {
  font-size: 1.3em;
  font-weight: 650;
  letter-spacing: -.015em;
  line-height: 1;
  color: var(--co-quid-ink);
  font-variant-numeric: tabular-nums;
}
@media (prefers-color-scheme: dark) {
  .co-news { --co-quid-ink: var(--quid); }
  .co-calc-box { box-shadow: inset 0 0 0 1px var(--co-edge); }
}
@container (max-width: 340px) {
  .co-window.co-scan { gap: 1.9em; }
  .co-flags-list { gap: .8em; }
  .co-news-thumb { display: none; }
  .co-news-head { max-width: none; }
  .co-calc-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-calc-field--wide { grid-column: 1 / -1; }
}

/* ---- The Fact Desk: suspicious message + check result ---- */

.co-msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5em;
}
.co-msg-from {
  font-size: max(.85em, .75rem);
  font-weight: 500;
  color: var(--co-cap);
}
.co-msg-bubble {
  display: block;
  max-width: 21em;
  padding: .8em 1.05em .85em;
  border-radius: 1.2em 1.2em 1.2em .35em;
  background: var(--co-ph);
  color: var(--ink);
  line-height: 1.45;
}
.co-msg-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  white-space: nowrap;
}
.co-flags-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5em 1em;
  margin-bottom: .7em;
  font-weight: 600;
  color: var(--ink);
}
.co-verdict {
  padding: .38em .75em .4em;
  border-radius: var(--r-pill);
  font-size: max(.8em, .75rem);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: color-mix(in srgb, var(--fact) 72%, var(--ink));
  background: color-mix(in srgb, var(--fact) 12%, var(--co-well));
}
@media (prefers-color-scheme: dark) {
  .co-verdict { color: var(--co-tag); background: color-mix(in srgb, var(--fact) 18%, var(--co-well)); }
}
.co-flags-list { display: grid; gap: .5em; }
.co-flags-list li {
  display: flex;
  align-items: flex-start;
  gap: .7em;
}
.co-flag { flex: none; width: 1.15em; height: 1.15em; margin-top: .1em; }
.co-flag > circle:first-child { fill: color-mix(in srgb, var(--fact) 16%, var(--co-well)); }
.co-flag path {
  fill: none;
  stroke: var(--fact);
  stroke-width: 1.75;
  stroke-linecap: round;
}
.co-flag-dot { fill: var(--fact); }

/* Phone-width pair windows: slimmer side padding so each sign holds one line */
@container (max-width: 300px) {
  .co-news, .co-scan { padding-inline: 1.1em; }
  .co-news .co-inset, .co-scan .co-inset { padding-inline: .95em; }
}

/* ---- 40-letter.css ---- */
/* =====================================================================
   Letter — "Why one company" (#why)
   The page's one long-form moment and the only use of the serif.
   ===================================================================== */
.ltr {
  background: var(--paper);
  padding-block: var(--section);

  --ltr-ink: color-mix(in oklab, var(--ink) 90%, var(--ink-2));
  --ltr-ink-lede: var(--ink);
  --ltr-wght: 400;
  --ltr-lh: 1.46;
}
@media (prefers-color-scheme: dark) {
  .ltr {
    --ltr-ink: color-mix(in oklab, var(--ink-2) 72%, var(--ink));
    --ltr-ink-lede: color-mix(in oklab, var(--ink) 86%, var(--ink-2));
    --ltr-wght: 370;
  }
}

.ltr-grid {
  display: grid;
  /* H2-to-content, shared with #approach. The H2 is trimmed to its baseline,
     so its descent (.2em of the H2) is added back to keep the same gap. */
  row-gap: calc(clamp(2rem, 1.4rem + 2.4vw, 3.5rem) + var(--t-h2) * .2);
}

.ltr-title {
  font-size: var(--t-h2);
  max-width: 9em;
}

/* Optical padding: trim the H2 to its capitals and the sign-off to its
   baseline, so the section's padding runs from ink to edge, as in #approach. */
.ltr-title { text-box: trim-both cap alphabetic; }
.ltr-letter .ltr-sign { text-box: trim-end text alphabetic; }
@supports not (text-box: trim-both cap alphabetic) {
  .ltr { padding-block: calc(var(--section) - .7rem); }
  .ltr-grid { row-gap: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }
}

.ltr-letter {
  max-width: 26.5em;
  font-family: var(--font-serif);
  font-size: var(--t-letter);
  font-weight: var(--ltr-wght);
  font-optical-sizing: auto;
  line-height: var(--ltr-lh);
  letter-spacing: 0;
  color: var(--ltr-ink);
  hanging-punctuation: first allow-end last;
}
.ltr-letter p { text-wrap: pretty; }
/* Paragraphs half a line apart; the standfirst a full line clear of the body. */
.ltr-letter p + p { margin-top: calc(var(--ltr-lh) * .5em); }
.ltr-letter .ltr-lede + p { margin-top: calc(var(--ltr-lh) * 1em); }

.ltr-letter .ltr-lede {
  font-size: 1.16em;
  line-height: 1.36;
  letter-spacing: -0.004em;
  color: var(--ltr-ink-lede);
  text-wrap: balance;
}

/* Sign-off: the company's name in the letter's own voice. No mark — the
   header already carries the logo. */
.ltr-letter .ltr-sign {
  margin-top: calc(var(--ltr-lh) * 1em);   /* a clear line: baselines two lines apart */
  font-style: italic;
  font-weight: 400;
  color: var(--ltr-ink-lede);
}

/* Smallest phones: one step down keeps ~35 characters to the line. */
@media (max-width: 23.75em) {
  .ltr-letter { font-size: 1.1875rem; }
}

@media (min-width: 48em) {
  .ltr { --ltr-lh: 1.45; }
  /* Break after "products", not inside "each of our / products". */
  .ltr-letter .ltr-lede {
    max-width: 19.5em;
    font-size: 1.25em;
    line-height: 1.32;
    text-wrap: pretty;
  }
}

/* Desktop: heading in a left rail; the letter starts on column 5 of the
   page's 12-column grid. Same breakpoint and axis as the principles below. */
@media (min-width: 75em) {
  .ltr-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: first baseline;
  }
  .ltr-title  { grid-column: 1 / span 4; }
  .ltr-letter { grid-column: 5 / -1; }
}

/* ---- 50-principles.css ---- */
/* =====================================================================
   Principles — "How we work" (#approach)
   Four standards, each a heading with one sentence beneath it, set in
   the letter's column and measure (column 5, 636px) so the two read as
   one voice. No rules, numbers, cards or markers: whitespace alone
   separates them, so nothing reads as a table.
   ===================================================================== */
.pr {
  --pr-ground: var(--mist);
  --pr-text-ink: color-mix(in oklab, var(--ink) 90%, var(--ink-2));   /* the letter's body colour */
  --pr-text-wght: 400;
  --pr-name-gap: clamp(1.125rem, .9rem + .7vw, 1.625rem);   /* name baseline to sentence cap height */
  --pr-item-gap: clamp(2.75rem, 2.2rem + 1.8vw, 4rem);      /* last baseline to next name's cap height */
  --pr-pad-top: var(--section);                            /* band edge to H2 cap height */
  --pr-pad-end: var(--section);                            /* last baseline to band edge */

  background: var(--pr-ground);
  padding-block: var(--pr-pad-top) var(--pr-pad-end);
}
@media (prefers-color-scheme: dark) {
  .pr {
    /* The letter's dark body colour and a lighter weight, so light text on
       navy doesn't bloom and the headings stay on top. */
    --pr-text-ink: color-mix(in oklab, var(--ink-2) 72%, var(--ink));
    --pr-text-wght: 380;
  }
}

.pr-grid {
  display: grid;
  /* H2-to-content when stacked. The shared gap is measured between line
     boxes in #why; these boxes are trimmed, so add back the H2's descent and
     the first heading's leading to land on the same optical gap. */
  row-gap: calc(clamp(2rem, 1.4rem + 2.4vw, 3.5rem) + .75rem);
}

.pr-title { font-size: var(--t-h2); }

.pr-list {
  display: grid;
  row-gap: var(--pr-item-gap);
  max-width: 39.75rem;          /* the letter's measure: 26.5em at 24px */
}

.pr-name {
  font-size: clamp(1.3125rem, 1.15rem + .6vw, 1.625rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.pr-text {
  max-width: 32em;
  margin-top: var(--pr-name-gap);
  font-size: 1.1875rem;          /* phones: ~39 characters, no stranded last words at 390 */
  font-weight: var(--pr-text-wght);
  line-height: 1.5;
  color: var(--pr-text-ink);
  text-wrap: pretty;
}

@media (min-width: 48em) {
  .pr-text { font-size: 1.25rem; }
}

/* "pre-ticked" must not break at its hyphen. */
.pr-nw { white-space: nowrap; }

/* Trim every text box to cap height and baseline, so each gap above is
   measured exactly: band edge to H2 capitals, name baseline to sentence
   capitals, last baseline to next name, last baseline to band edge. */
.pr-title,
.pr-name,
.pr-text { text-box: trim-both cap alphabetic; }

/* Browsers without text-box (Firefox): line boxes add the leading back,
   so take it out of the gaps to keep the same optical spacing. */
@supports not (text-box: trim-both cap alphabetic) {
  .pr {
    --pr-name-gap: .4rem;
    --pr-item-gap: clamp(2rem, 1.5rem + 1.4vw, 3rem);
    --pr-pad-top: calc(var(--section) - .7rem);
    --pr-pad-end: calc(var(--section) - .5rem);
  }
  .pr-grid { row-gap: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }
}

/* Desktop: H2 in columns 1–4; the standards in the letter's column from
   column 5, the H2's baseline locked to the first heading's. */
@media (min-width: 75em) {
  .pr-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: first baseline;
  }
  .pr-title { grid-column: 1 / span 4; }
  .pr-list  { grid-column: 5 / -1; }
}

/* ---- 60-company.css ---- */
/* =====================================================================
   Company information + Contact (#company, #contact)
   Two records in the page's register language (shared with #approach):
   a 1px ink rule opens each record, hairlines divide the entries.
   Desktop follows the page grid: titles in columns 1–4, entries from
   column 5, values and the second channel on column 9.
   ===================================================================== */

.cmp {
  --cmp-rule: var(--ink);                  /* opens a record */
  --cmp-hair: var(--line);                 /* divides entries */
  --cmp-key-size: var(--t-small);
  --cmp-val-size: clamp(1.0625rem, 0.97rem + 0.42vw, 1.3125rem);
  --cmp-email-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --cmp-head-gap: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);           /* H2 to content, as #approach */
  /* Without text-box trim (Firefox) line boxes add ~.4rem of air above caps
     and below baselines; --cmp-fix takes it back so the rhythm holds */
  --cmp-fix: 0rem;
  --cmp-bd: 1px;      /* the opening rule's own thickness, taken out of the cap-hang formula */
  --cmp-pad-top: calc(clamp(1.125rem, 1rem + .5vw, 1.375rem) - var(--cmp-fix));   /* rule to cap height */
  --cmp-pad-end: calc(clamp(1.125rem, 1rem + .5vw, 1.375rem) + .375rem - var(--cmp-fix));   /* last baseline to rule */
  --cmp-chan-top: var(--cmp-pad-top);
  /* Resting underline under each address (~1.8:1 light, ~2.3:1 dark) */
  --cmp-underline: color-mix(in srgb, var(--ink) 28%, var(--paper));

  padding-block: var(--section);
}

/* Light rules on a dark ground read heavier than dark rules on paper */
@media (prefers-color-scheme: dark) {
  .cmp {
    --cmp-rule: color-mix(in srgb, var(--ink) 62%, var(--paper));
    --cmp-hair: var(--line-2);   /* matches #approach's dark hairlines */
  }
}
@supports not (text-box: trim-both cap alphabetic) {
  .cmp { --cmp-fix: .4rem; --cmp-bd: 0px; }
}

.cmp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--cmp-head-gap);
}

.cmp-title,
.cmp-contact-title {
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: var(--lh-head);
  letter-spacing: var(--track-head);
}

/* ---- Register ---- */
.cmp-register { border-top: 1px solid var(--cmp-rule); }

.cmp-row {
  padding-block: var(--cmp-pad-top) var(--cmp-pad-end);
  border-bottom: 1px solid var(--cmp-hair);
}

/* Trimmed to cap height and baseline so rule-to-text spacing is exact */
.cmp-key {
  font-size: var(--cmp-key-size);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--ink-3);
  text-box: trim-both cap alphabetic;
}
.cmp-val {
  margin-top: max(0rem, calc(.75rem - 2 * var(--cmp-fix)));
  font-size: var(--cmp-val-size);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
  overflow-wrap: break-word;
  text-wrap: pretty;
  text-box: trim-both cap alphabetic;
}

/* ---- Contact ---- */
.cmp-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--cmp-head-gap);
  margin-top: clamp(2rem, 1rem + 4vw, 3rem);    /* added to the grid gap: a new record */
}

.cmp-channels {
  font-style: normal;
  padding-block: var(--cmp-chan-top) var(--cmp-pad-end);
  border-top: 1px solid var(--cmp-rule);
  border-bottom: 1px solid var(--cmp-hair);
}

.cmp-channel-list {
  display: grid;
  gap: 2rem var(--col-gap);
}

/* The line box is sized to the address so trimming lands on its cap height */
.cmp-channel {
  min-width: 0;
  font-size: var(--cmp-email-size);
  line-height: 1.2;
  text-box: trim-both cap alphabetic;
}

.cmp-email {
  position: relative;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--cmp-underline);
  text-underline-offset: .3em;
  transition:
    text-decoration-color var(--dur-1) ease,
    text-decoration-thickness var(--dur-1) ease;
}
.cmp-email:hover {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}
/* ~45px tap target without moving the layout or the focus ring */
.cmp-email::after {
  content: "";
  position: absolute;
  inset: -.6rem -.25rem;
}
/* Focus: the ring alone carries the state, so ring and underline never
   read as a double line */
.cmp-email:focus-visible {
  text-decoration-color: transparent;
  outline-offset: 4px;
}

.cmp-use {
  margin-top: .875rem;
  font-size: var(--t-body);
  line-height: 1.5;
  letter-spacing: var(--track-ui);
  color: var(--ink-2);
  max-width: 34ch;
}

.cmp-note {
  /* Ends on its baseline, so the section's bottom padding is measured from the last line of type */
  text-box: trim-end cap alphabetic;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 44ch;
  margin-top: calc(1.25rem - var(--cmp-head-gap));   /* a footnote to the record, not a new block */
}

/* ---- Phones: the two channels stack as register rows, divided by a hairline ---- */
@media (max-width: 47.99rem) {
  .cmp-channel-list { gap: 0; }
  .cmp-channel + .cmp-channel {
    margin-top: var(--cmp-pad-end);
    padding-top: var(--cmp-chan-top);
    border-top: 1px solid var(--cmp-hair);
  }
}

/* ---- Tablet and up: page columns; keys and the first channel on column 1,
        values and the second channel on column 7 ---- */
@media (min-width: 48rem) {
  .cmp-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .cmp-title,
  .cmp-register,
  .cmp-contact { grid-column: 1 / -1; }

  .cmp-register,
  .cmp-row,
  .cmp-contact,
  .cmp-channels,
  .cmp-channel-list {
    display: grid;
    grid-template-columns: subgrid;
  }
  .cmp-row,
  .cmp-contact-title,
  .cmp-channels,
  .cmp-channel-list { grid-column: 1 / -1; }

  .cmp-row { align-items: first baseline; }
  .cmp-key { grid-column: 1 / 7; }
  .cmp-val { grid-column: 7 / -1; margin-top: 0; }

  .cmp-channel:nth-child(1) { grid-column: 1 / 7; }
  .cmp-channel:nth-child(2) { grid-column: 7 / -1; }
  .cmp-note { grid-column: 1 / 7; }
}

/* ---- Desktop: titles in columns 1–4; each record from column 5 with its
        title's capitals hanging from the opening rule and its baseline
        locked to the first entry (.745 = Plus Jakarta Sans cap height) ---- */
@media (min-width: 75em) {
  .cmp {
    --cmp-pad-top:  calc(.745 * (var(--t-h2) - var(--cmp-val-size)) - var(--cmp-fix) - var(--cmp-bd));
    --cmp-pad-end:  calc(.745 * (var(--t-h2) - var(--cmp-val-size)) + .5rem - var(--cmp-fix));
    --cmp-chan-top: calc(.745 * (var(--t-h2) - var(--cmp-email-size)) - var(--cmp-fix) - var(--cmp-bd));
  }
  .cmp-grid { align-items: first baseline; row-gap: 0; }

  .cmp-title    { grid-column: 1 / 5; grid-row: 1; }
  .cmp-register { grid-column: 5 / -1; grid-row: 1; }
  .cmp-key { grid-column: 1 / 5; }
  .cmp-val { grid-column: 5 / -1; }

  .cmp-contact {
    grid-row: 2;
    margin-top: var(--s-9);
    row-gap: 0;
    align-items: first baseline;
  }
  .cmp-contact-title { grid-column: 1 / 5; grid-row: 1; }
  .cmp-channels      { grid-column: 5 / -1; grid-row: 1; }
  .cmp-channel:nth-child(1) { grid-column: 1 / 5; }
  .cmp-channel:nth-child(2) { grid-column: 5 / -1; }
  .cmp-note {
    grid-column: 5 / 9;
    grid-row: 2;
    margin-top: 1.25rem;
  }
}

/* Desktop with text-box support: titles trimmed to cap height and baseline
   and top-aligned, so each title's capitals and its opening rule both start
   exactly where the section padding ends; the -1px in the padding formula
   keeps the title's baseline on the first entry's baseline. Without trim
   (Firefox), the first-baseline alignment above does the locking. */
@supports (text-box: trim-both cap alphabetic) {
  @media (min-width: 75em) {
    .cmp-title,
    .cmp-contact-title { text-box: trim-both cap alphabetic; }
    .cmp-grid,
    .cmp-contact { align-items: start; }
  }
}

/* Company number links to the public register: quiet, like the values around it */
.cmp-ch {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  font-variant-numeric: tabular-nums;
  transition: text-decoration-color var(--dur-1) ease;
}
.cmp-ch:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }

/* ---- 70-footer.css ---- */
/* =====================================================================
   Footer (#site-footer)
   The footer is the deepest ground on the page in either scheme.
   Light: an ink (navy) band with paper type; the three company dashes are
   lifted in lightness only, so they keep their hue and chroma on navy.
   Dark: the ink token turns light, so the band drops a step below
   --paper instead, with a firmer rule to close the page.
   ===================================================================== */

.ftr {
  --ftr-bg:   var(--ink);
  --ftr-fg:   var(--paper);
  --ftr-fg-2: color-mix(in srgb, var(--paper) 78%, var(--ink));
  --ftr-fg-3: color-mix(in srgb, var(--paper) 62%, var(--ink));
  --ftr-line: color-mix(in srgb, var(--paper) 15%, var(--ink));
  /* Fallback lift for browsers without relative colour syntax */
  --ftr-img:  color-mix(in oklab, var(--img) 72%, var(--paper));
  --ftr-quid: color-mix(in oklab, var(--quid) 78%, var(--paper));
  --ftr-fact: color-mix(in oklab, var(--fact) 80%, var(--paper));

  background: var(--ftr-bg);
  color: var(--ftr-fg-2);
  padding-top: clamp(3.5rem, 2.6rem + 3vw, 5rem);
  padding-bottom: max(clamp(2.5rem, 1.9rem + 2vw, 4rem), env(safe-area-inset-bottom));
  box-shadow: 0 1px 0 var(--ftr-bg);   /* seals the sub-pixel seam at fractional zoom */
}

@supports (color: oklch(from red l c h)) {
  .ftr {
    --ftr-img:  oklch(from var(--img)  .70 c h);
    --ftr-quid: oklch(from var(--quid) .74 c h);
    --ftr-fact: oklch(from var(--fact) .74 c h);
  }
}

@media (prefers-color-scheme: dark) {
  .ftr {
    --ftr-bg:   var(--paper);
    --ftr-fg:   var(--ink);
    --ftr-fg-2: var(--ink-2);
    --ftr-fg-3: var(--ink-3);
    --ftr-line: var(--line);
    --ftr-img:  var(--img);
    --ftr-quid: var(--quid);
    --ftr-fact: var(--fact);
    border-top: 1px solid var(--line-2);
  }
  @supports (color: oklch(from red l c h)) {
    /* One step below the page ground, chroma nudged so it stays navy rather than black */
    .ftr { --ftr-bg: oklch(from var(--paper) calc(l - .05) calc(c * 1.15) h); }
  }
}

.ftr :focus-visible { outline-color: var(--ftr-fg); }

.ftr-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}

/* ---- Brand ---- */
.ftr-brand {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--ftr-fg);
}
.ftr-mark { width: 2.125rem; height: 2.125rem; flex: none; }
/* On the plum band the tile inverts: paper tile, plum D, mint dash */
.ftr-tile      { fill: var(--ftr-fg); }
.ftr-d         { fill: var(--ftr-bg); }
.ftr-tile-dash { fill: var(--mint); }
.ftr-name {
  font-size: 1.1875rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ~45px tap targets that leave layout and focus rings at text size */
.ftr-co::after {
  content: "";
  position: absolute;
  inset: -.625rem -.25rem;
}

/* ---- Companies ---- */
.ftr-companies {
  grid-column: 1 / -1;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3rem);
}
.ftr-heading {
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--ftr-fg-3);
  margin-bottom: .375rem;   /* + the first link's .625rem margin */
}
.ftr-co-list { display: grid; gap: .15rem; line-height: 1.45; }

/* --slot is the mark's width, so names start where the brand name starts */
.ftr-co {
  --slot: 2.125rem;
  position: relative;
  display: flex;
  margin-block: .625rem;   /* tap target via ::after */
  width: fit-content;
  align-items: center;
  color: var(--ftr-fg);
  text-decoration: none;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
/* One mint dash per company, all equal: the dash from the tile */
.ftr-dash {
  flex: none;
  width: var(--w);
  height: calc(var(--slot) * .15);
  border-radius: var(--r-pill);
  background: var(--c);
  margin-right: calc(var(--slot) - var(--w) + .8rem);
}
.ftr-co--img,
.ftr-co--quid,
.ftr-co--fact { --w: calc(var(--slot) * 0.6); --c: var(--mint); }

.ftr-co-name {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur-1) ease;
}
.ftr-co:hover .ftr-co-name,
.ftr-co:focus-visible .ftr-co-name { text-decoration-color: currentColor; }

/* ---- Legal base ---- */
.ftr-base {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: 1rem;   /* the © line stands apart from the legal sentences */
  margin-top: calc(clamp(2.5rem, 2rem + 2vw, 3.5rem) - .625rem);   /* less the last link's margin */
  padding-top: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);
  border-top: 1px solid var(--ftr-line);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ftr-fg-3);
}
.ftr-legal {
  grid-column: 1 / -1;
  max-width: 72ch;
  overflow-wrap: break-word;
}
.ftr-legal-line { display: block; text-wrap: pretty; }
.ftr-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem 1.5rem;
}
.ftr-copy {
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.ftr-policy {
  position: relative;
  color: var(--ftr-fg-2);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: color var(--dur-1) ease, text-decoration-color var(--dur-1) ease;
}
.ftr-policy:hover { color: var(--ftr-fg); text-decoration-color: currentColor; }
.ftr-policy::after { content: ""; position: absolute; inset: -.75rem -.25rem; }   /* 44px tap target */

/* ---- Tablet and up: brand left, companies right ---- */
@media (min-width: 48rem) {
  .ftr-grid { grid-template-rows: auto auto auto; row-gap: .375rem; }
  .ftr-brand { grid-column: 1 / 7; grid-row: 1; }
  .ftr-companies {
    grid-column: 7 / -1;
    grid-row: 1 / 3;
    margin-top: 0;
    display: grid;
    grid-template-rows: subgrid;
  }
  /* Bottom-aligned, the 15px heading shares the 19px brand name's baseline */
  .ftr-heading { margin-bottom: 0; align-self: end; }
  /* The row gap and the last link's margin already sit above the rule */
  .ftr-base { grid-row: 3; margin-top: calc(clamp(2.5rem, 2rem + 2vw, 3.5rem) - 1rem); }
  .ftr-legal-line { text-wrap: balance; }
}

/* ---- Desktop: brand and legal on column 1, companies and © on column 9,
        the same edges as the register above ---- */
@media (min-width: 75rem) {
  .ftr-brand { grid-column: 1 / 9; }
  .ftr-companies { grid-column: 9 / -1; }
  /* Columns 1–7: a full column of air before © on column 9 */
  .ftr-legal { grid-column: 1 / 8; max-width: none; }
  .ftr-meta  { grid-column: 9 / -1; flex-direction: column; align-items: flex-start; gap: .25rem; }
  .ftr-base  { row-gap: 0; }
}

/* ---- 80-privacy.css ---- */
/* =====================================================================
   Privacy notice page — a plain, readable document on the page grid:
   title in columns 1–4, text from column 5 at the letter's measure.
   ===================================================================== */
.pv {
  padding-block: clamp(3rem, 1.5rem + 5vw, 6rem) var(--section);
}
.pv-title {
  font-size: var(--t-h2);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: var(--track-head);
}
.pv-date {
  margin-top: var(--s-3);
  font-size: var(--t-small);
  color: var(--ink-3);
}

.pv-body {
  max-width: 39.75rem;            /* the letter's measure: ~65 characters */
  margin-top: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.pv-lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink);
}

/* The short version: a quiet panel, mint dashes from the mark */
.pv-short {
  margin-top: var(--s-6);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--r-lg);
  background: var(--mist);
  border: 1px solid var(--line);
}
.pv-body .pv-short-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0;
}
.pv-short-list {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-3) 0 0;
}
.pv-short-list li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--ink);
}
.pv-short-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .78em;
  width: 1rem;
  height: .1875rem;
  border-radius: var(--r-pill);
  background: var(--mint);
}

/* Document rhythm */
.pv-body section + section { margin-top: clamp(2.25rem, 1.8rem + 1.6vw, 3rem); }
.pv-body .pv-short + section { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.pv-body h2 {
  font-size: clamp(1.25rem, 1.15rem + .45vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.pv-body h3 {
  margin-top: var(--s-5);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0;
}
.pv-body h2 + p,
.pv-body h2 + ul,
.pv-body h3 + p { margin-top: var(--s-3); }
.pv-body p + p,
.pv-body p + ul,
.pv-body ul + p { margin-top: var(--s-4); }
.pv-body strong { font-weight: 650; color: var(--ink); }

.pv-body ul:not([role="list"]) {
  padding-left: 1.25em;
}
.pv-body ul:not([role="list"]) li + li { margin-top: var(--s-2); }
.pv-body ul:not([role="list"]) li::marker { color: var(--violet); }

.pv-body a {
  color: var(--violet);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  overflow-wrap: anywhere;
}
.pv-body a:hover { text-decoration-thickness: 2px; }

/* Desktop: the page grid, title in columns 1–4, text from column 5 */
@media (min-width: 75em) {
  .pv {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: start;
  }
  .pv-head { grid-column: 1 / 5; position: sticky; top: calc(var(--header-h) + 2rem); }
  .pv-body { grid-column: 5 / 12; margin-top: 0; }
}

@media (prefers-color-scheme: dark) {
  .pv-short { background: var(--haze); }
}