/* ==========================================================================
   Nexus Connect design system
   Serif-led display, sans body, mono labels. Cool limestone ground, petrol accent.
   Family resemblance to BRIEF; deliberately not the same voice.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/source-serif-4-var.woff2") format("woff2-variations");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/plex-mono-400.woff2") format("woff2");
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* ground + ink */
  /* Ground: cool limestone. Held at OKLCH L .960 with a very low chroma on a
     yellow-green hue, so it reads as architectural stone rather than as either
     warm sand or neutral grey, and sits in the same family as the petrol
     accent without any blue in it. */
  --stone: #f0f3ef;
  --stone-deep: #e1e5de;
  --paper: #fafcfa;
  --ink: #16181a;
  --ink-soft: #3a3f44;
  --grey: #5c6168;        /* 5.58:1 on stone, 4.92:1 on stone-deep */
  --grey-light: #8d939a;  /* 5.74:1 on ink, dark backgrounds only */

  /* rules */
  --line: rgba(22, 24, 26, 0.14);
  --line-soft: rgba(22, 24, 26, 0.07);
  --line-strong: rgba(22, 24, 26, 0.32);
  --line-invert: rgba(240, 243, 239, 0.2);

  /* accent: deep petrol */
  --signal: #0f4c4a;
  --signal-hi: #14635f;
  --signal-tint: rgba(15, 76, 74, 0.07);
  /* Petrol is too dark to read on the ink ground, so reversed contexts take
     the lighter tint of the same hue. */
  --signal-invert: #6cb6ac;

  /* type */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* layout */
  --maxw: 1320px;
  --gutter: clamp(20px, 5vw, 72px);
  --nav-h: 74px;
  --measure: 68ch;
  --measure-tight: 60ch;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- Vertical composition ---------------------------------------------
     Every page is assembled from these nine values and nothing else. Before
     this pass each page type stacked its own paddings, so a page header's
     bottom padding met a section's top padding met a wrapper's own padding,
     and the gap that resulted was nobody's decision. Add a new arbitrary
     margin here and the system stops holding. */
  --space-crumb:   clamp(22px, 2.4vw, 32px);  /* masthead to breadcrumb      */
  --space-eyebrow: clamp(24px, 2.8vw, 38px);  /* breadcrumb to eyebrow       */
  --space-h1:      13px;                      /* eyebrow to H1               */
  --space-lead:    clamp(16px, 1.8vw, 24px);  /* H1 to introduction          */
  --space-open:    clamp(30px, 3.6vw, 54px);  /* introduction to content     */
  --space-section: clamp(32px, 3.8vw, 58px);  /* section to section          */
  --space-band:    clamp(46px, 5.4vw, 84px);  /* full-bleed band padding     */
  --space-close:   clamp(40px, 4.6vw, 70px);  /* last content to closing CTA */
  --anchor-gap:    26px;                      /* masthead to a landed eyebrow*/

  /* list markers, see the marker block in the type section */
  --mark-w: 9px;    /* length of the rule */
  --mark-gap: 22px; /* rule plus the space before the text */
  --mark-rise: 0.28em; /* height above the baseline, set optically */

  color-scheme: light;
}

/* --- Reset ---------------------------------------------------------------- */

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

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

/* Anchor landing.
   The masthead is a sticky bar, so an in-page target has to reserve its height.
   That alone is not enough: a section's own top padding sits between its box
   and its first visible line, so landing the BOX at the right place leaves the
   HEADING 58 to 78px further down, behind a band of nothing. Each rule below
   therefore subtracts the padding the section itself contributes, so what lands
   at --anchor-gap under the masthead is the eyebrow the reader clicked. */
[id] { scroll-margin-top: calc(var(--nav-h) + var(--anchor-gap)); }
.section[id],
.tgrp[id],
.hang__sec[id] { scroll-margin-top: calc(var(--nav-h) + var(--anchor-gap) - var(--space-section)); }
.section--open[id],
.hang__sec:first-child[id],
.section[id][data-flush] { scroll-margin-top: calc(var(--nav-h) + var(--anchor-gap)); }

body {
  margin: 0;
  background: var(--stone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { max-width: 100%; display: block; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- Layout --------------------------------------------------------------- */

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

.section { padding-block: var(--space-section); }
.section--tight { padding-block: var(--space-open); }
/* The block that opens a page owns no top padding: the page header above it
   already spent --space-open. Two paddings meeting is what produced the dead
   bands this pass removed. */
.section--open { padding-block: 0 var(--space-section); }
.section--rule { border-top: 1px solid var(--line); }
.band { background: var(--stone-deep); }
.band-ink { background: var(--ink); color: var(--stone); }
/* Scoped away from .btn so a button on a dark band keeps its own colours.
   .band-ink a would otherwise out-specify .btn--light and paint stone on stone. */
.band-ink a:not(.btn) { color: var(--stone); }

.skip {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 200;
  background: var(--ink);
  color: var(--stone);
  padding: 12px 18px;
  font-size: 14px;
  text-decoration: none;
}
.skip:focus { top: 12px; }


/* --- Page opening --------------------------------------------------------
   One composed screen. Every page below the masthead opens with this block:
   breadcrumb at the top, the proposition centred in the space, and a hairline
   foot carrying a mono descriptor and the scroll cue. The foot is what gives
   the opening a deliberate bottom edge, and the min-height is what stops the
   following section putting a fragment of itself into the first viewport.

   Not 100vh everywhere: the block is a minimum, the content decides the rest,
   and on a tall screen the extra height becomes air between two fixed edges
   rather than a gap nobody chose. */

.open {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: calc(100svh - var(--nav-h));
  isolation: isolate;
}
.open > * { position: relative; z-index: 1; }

/* The line field sits behind everything and is purely decorative. */
.open__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}
/* A soft wash of the ground colour behind the text, so a line can never sit
   close enough to a word to cost it any contrast. */
.open__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    52% 46% at 30% 44%,
    rgba(240, 243, 239, 0.88) 0%,
    rgba(240, 243, 239, 0.58) 44%,
    rgba(240, 243, 239, 0) 76%
  );
}

.open__top { position: relative; z-index: 1; }
.open__body { align-self: center; padding-block: clamp(20px, 3.4vh, 52px); }
.open--top .open__body { align-self: start; padding-top: var(--space-eyebrow); }

/* The foot: a rule, a descriptor, and the cue that the scene has ended. */
.open__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: clamp(14px, 1.8vh, 22px) clamp(18px, 2.6vh, 30px);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--grey);
}
.open__count { color: var(--grey); }
.open__cue { display: inline-flex; align-items: center; gap: 10px; color: var(--signal); }
.open__cue i {
  display: block;
  width: 26px;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  animation: cue 3.4s var(--ease) infinite;
}
@keyframes cue {
  0%, 100% { transform: scaleX(0.45); opacity: 0.5; }
  50%      { transform: scaleX(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .open__cue i { animation: none; transform: scaleX(1); opacity: 1; }
}

/* --- Type ----------------------------------------------------------------- */

.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--grey);
  font-weight: 400;
}
.eyebrow--signal { color: var(--signal); }
/* An eyebrow that is a link (the topic on an Answer) keeps the eyebrow's
   colour and picks up a rule on hover, so it does not read as body-copy link. */
.eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color 0.24s var(--ease); }
.eyebrow a:hover { border-bottom-color: currentColor; }
.eyebrow--invert { color: var(--grey-light); }

.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.35rem, 5.4vw, 4.15rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.1vw, 2.45rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  line-height: 1.15;
  letter-spacing: -0.014em;
  text-wrap: balance;
}
.h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.06rem;
  line-height: 1.35;
  letter-spacing: -0.008em;
}

.lead {
  font-family: var(--serif);
  font-size: clamp(1.12rem, 1.85vw, 1.38rem);
  line-height: 1.48;
  color: var(--ink);
  max-width: var(--measure-tight);
  text-wrap: pretty;
}
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.05em; }
.prose p { color: var(--ink-soft); text-wrap: pretty; }
.prose strong { color: var(--ink); font-weight: 600; }

.measure { max-width: var(--measure); }
.measure-tight { max-width: var(--measure-tight); }

/* --- Stack utility -------------------------------------------------------- */

.stack { display: flex; flex-direction: column; }
.stack-4 { gap: 4px; }
.stack-8 { gap: 8px; }
.stack-12 { gap: 12px; }
.stack-16 { gap: 16px; }
.stack-24 { gap: 24px; }
.stack-32 { gap: 32px; }
.stack-40 { gap: clamp(28px, 3vw, 40px); }
.stack-64 { gap: clamp(40px, 5vw, 64px); }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 16px 24px;
  background: var(--ink);
  color: var(--stone);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.28s var(--ease), color 0.28s var(--ease);
}
.btn:hover { background: var(--signal); color: var(--stone); }
.btn .arw { transition: transform 0.3s var(--ease); }
.btn:hover .arw { transform: translateX(5px); }
.btn--ghost {
  background: none;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.btn--ghost:hover {
  background: none;
  color: var(--signal);
  box-shadow: inset 0 0 0 1px var(--signal);
}
.btn--light { background: var(--stone); color: var(--ink); }
.btn--light:hover { background: var(--signal); color: var(--stone); }
.btn--sm { padding: 12px 18px; font-size: 11px; }

.textlink {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line-strong);
  transition: color 0.24s var(--ease), border-color 0.24s var(--ease);
}
.textlink:hover { color: var(--signal); border-bottom-color: var(--signal); }
.textlink .arw { transition: transform 0.3s var(--ease); }
.textlink:hover .arw { transform: translateX(4px); }

/* --- Navigation ----------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 90;
  height: var(--nav-h);
  background: rgba(240, 243, 239, 0.88);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}
.nav__links { display: flex; align-items: center; gap: clamp(17px, 2vw, 32px); }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: color 0.24s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  height: 1px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.34s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__cta { margin-left: 6px; }
.nav__burger {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 0 10px 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  min-height: 44px;
}
.burger-ico { position: relative; width: 22px; height: 9px; }
.burger-ico span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ink);
  transition: transform 0.35s var(--ease), opacity 0.2s;
}
.burger-ico span:first-child { top: 0; }
.burger-ico span:last-child { bottom: 0; }
.is-open .burger-ico span:first-child { transform: translateY(4px) rotate(45deg); }
.is-open .burger-ico span:last-child { transform: translateY(-4px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: flex;
  flex-direction: column;
  background: var(--stone);
  padding: calc(var(--nav-h) + 16px) var(--gutter) 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.5s var(--ease), visibility 0s linear 0.5s;
}
.menu.is-open {
  transform: none;
  visibility: visible;
  transition: transform 0.5s var(--ease), visibility 0s linear 0s;
}
.menu__list { display: flex; flex-direction: column; margin-top: 12px; }
.menu__list a {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--serif);
  font-size: clamp(1.65rem, 7vw, 2.25rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.menu__sub {
  display: grid;
  grid-template-columns: 1fr;
  padding: 6px 0 14px;
  border-bottom: 1px solid var(--line-soft);
}
.menu__sub a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 46px;
  padding: 8px 0;
  font-family: var(--sans);
  font-size: 15.5px;
  color: var(--ink-soft);
  text-decoration: none;
}
.menu__sub a + a { border-top: 1px solid var(--line-soft); }
.menu__sub a::after {
  content: "";
  flex: none;
  width: 13px;
  height: 9px;
  background: currentColor;
  opacity: 0.4;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M9 1l4 4-4 4M13 5H0' stroke='%23000' stroke-width='1.4' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M9 1l4 4-4 4M13 5H0' stroke='%23000' stroke-width='1.4' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
}
.menu__foot { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; gap: 16px; }

/* The masthead carries five items and a call to action. Measured across
   intermediate widths, the row still fits at 901px but with 24px between the
   lock-up and the first link, which is the flex gap and therefore no slack at
   all. At 1000px there is 75px. So the switch to the menu happens at 1000
   rather than 900: below that width the bar would be cramped rather than full,
   and a cramped masthead is worse than a menu button. */
@media (max-width: 999px) {
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; }
}
@media (min-width: 1000px) {
  .menu { display: none; }
}

/* Without JavaScript the menu cannot be toggled, so it is not an overlay:
   it sits in the flow below the header and every link is reachable. */
html:not(.js) .menu {
  position: static;
  transform: none;
  visibility: visible;
  padding-top: 24px;
  border-bottom: 1px solid var(--line);
}
html:not(.js) .nav__burger { display: none; }
@media (min-width: 1000px) {
  html:not(.js) .menu { display: none; }
}

/* --- Logo ----------------------------------------------------------------- */

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  min-height: 44px;
}
.logo__svg {
  display: block;
  height: 17px;
  width: auto;
}
@media (min-width: 700px) { .logo__svg { height: 19px; } }
.foot .logo__svg { height: 20px; }
/* The brackets are the one part of the lock-up that does not take
   currentColor: they carry the accent, and take the lighter tint of the same
   hue where the ground is ink. */
.logo__bracket { fill: var(--signal); }
.foot .logo__bracket,
.band-ink .logo__bracket { fill: var(--signal-invert); }

/* --- Page contents -------------------------------------------------------
   One list, two presentations. Below 1080px a native <details> disclosure at
   the top of the page; from 1080px a sticky rail in the margin. Only one is
   ever displayed, so only one is in the accessibility tree. */

.railed { display: block; }
.rail { display: none; }

@media (min-width: 1000px) {
  .railed {
    display: grid;
    grid-template-columns: clamp(152px, 14vw, 186px) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 84px);
    align-items: start;
  }
  .rail {
    display: block;
    position: sticky;
    top: calc(var(--nav-h) + 40px);
    max-height: calc(100vh - var(--nav-h) - 80px);
    overflow-y: auto;
  }
  /* Where a rail is present it is the page's index, so the hanging labels
     inside it stand down to plain eyebrows rather than making a second
     column of furniture. */
  .railed .hang__sec { display: block; }
  .railed .hang__label { position: static; margin-bottom: 14px; padding-top: 0; }
}

.rail__title {
  display: block;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
}
.rail__list { display: flex; flex-direction: column; counter-reset: rail; }
.rail .rail__list { margin-top: 13px; }
.rail a {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  line-height: 1.35;
  color: var(--grey);
  text-decoration: none;
  transition: color 0.22s var(--ease);
}
.rail a::before {
  counter-increment: rail;
  content: counter(rail, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--grey);
  transition: color 0.22s var(--ease);
}
.rail a:hover { color: var(--signal); }
/* Current section. Deliberately quiet: the label comes up to full ink and its
   number takes the accent. No bar, no fill, no movement. */
.rail a[aria-current="true"] { color: var(--ink); }
.rail a[aria-current="true"]::before { color: var(--signal); }

/* Narrow screens: a disclosure, not a rail. */
.rail-m {
  border-block: 1px solid var(--line);
  margin-bottom: clamp(26px, 3.2vw, 38px);
}
.rail-m > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 46px;
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--grey);
}
.rail-m > summary::-webkit-details-marker { display: none; }
.rail-m__c { position: relative; padding-right: 22px; color: var(--signal); }
.rail-m__c::before,
.rail-m__c::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 11px;
  height: 1px;
  background: var(--ink);
}
.rail-m__c::after { transform: rotate(90deg); transition: transform 0.28s var(--ease); }
.rail-m[open] .rail-m__c::after { transform: rotate(0deg); }
.rail-m .rail__list { padding-bottom: 8px; }
.rail-m a {
  display: block;
  padding: 10px 0;
  min-height: 40px;
  border-top: 1px solid var(--line-soft);
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: none;
}
.rail-m a:hover { color: var(--signal); }
@media (min-width: 1000px) { .rail-m { display: none; } }

/* --- Editorial list ------------------------------------------------------- */

/* Markers.
   The marker is an inline-block at the head of the first line, hung back into
   the item's left padding, rather than an absolutely positioned box at a fixed
   offset. That means it is aligned to the BASELINE of the first line by
   `vertical-align`, so it tracks the text automatically at every font size,
   line-height and viewport, and it stays correct when the item's first line is
   a 40px tap target rather than a 27px line of prose.
   --mark-rise is the height above the baseline: set optically, between the
   x-height centre and the cap-height centre of the body face, because the eye
   reads the centre of a mixed-case line as sitting below the centre of its
   line box. Verified by measurement in qa/markers.mjs. */
.mark::before,
.list > li::before,
.doc ul > li::before {
  content: "";
  display: inline-block;
  width: var(--mark-w);
  height: 1px;
  margin-right: calc(var(--mark-gap) - var(--mark-w));
  vertical-align: var(--mark-rise);
  background: var(--signal);
}

.list { display: flex; flex-direction: column; max-width: var(--measure); }
.list > li {
  padding: 11px 0 11px var(--mark-gap);
  text-indent: calc(-1 * var(--mark-gap));
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
}
.list > li > * { text-indent: 0; }
.list > li:last-child { border-bottom: none; }

/* --- Definition rows (services / sectors index, problems) ----------------- */

.rows { border-top: 1px solid var(--ink); }
.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
@media (min-width: 760px) {
  .row {
    grid-template-columns: 54px minmax(0, 1.05fr) minmax(0, 1.35fr) auto;
    gap: 0 clamp(20px, 2.6vw, 40px);
    align-items: baseline;
  }
}
.row__n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--grey);
}
.row__t {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.14;
  letter-spacing: -0.014em;
  color: var(--ink);
  transition: color 0.24s var(--ease);
  text-wrap: balance;
}
.row__d { color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }
.row__a { color: var(--grey); transition: transform 0.3s var(--ease), color 0.24s var(--ease); }
a.row:hover .row__t { color: var(--signal); }
a.row:hover .row__a { color: var(--signal); transform: translateX(5px); }

/* --- Accordion (native details/summary) ----------------------------------- */

.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 19px 0;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  transition: color 0.22s var(--ease);
}
.acc__btn::-webkit-details-marker { display: none; }
.acc__btn::marker { content: ""; }
.acc__btn:hover { color: var(--signal); }
.acc__t {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.008em;
  line-height: 1.35;
}
.acc__sign {
  position: relative;
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: 5px;
}
.acc__sign::before,
.acc__sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.32s var(--ease), opacity 0.24s var(--ease);
}
.acc__sign::before { left: 0; right: 0; top: 6px; height: 1px; }
.acc__sign::after { top: 0; bottom: 0; left: 6px; width: 1px; }
.acc__item[open] .acc__sign::after { transform: scaleY(0); opacity: 0; }
.acc__panel { padding: 0 0 22px; max-width: var(--measure); }
.acc__panel p { color: var(--ink-soft); text-wrap: pretty; }

/* --- Figure / pull -------------------------------------------------------- */

.pull {
  border-left: 2px solid var(--signal);
  padding: 2px 0 2px 20px;
  max-width: var(--measure);
}
.pull p { color: var(--ink); }

.callout {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(20px, 2.6vw, 32px);
  max-width: var(--measure);
}

/* --- Facts grid ----------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 700px) { .facts { grid-template-columns: repeat(2, 1fr); column-gap: clamp(24px, 4vw, 64px); } }
.fact { padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.fact dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}
.fact dd { margin: 6px 0 0; color: var(--ink); font-size: 15.5px; line-height: 1.5; }

/* --- Form ----------------------------------------------------------------- */

.form { max-width: 34rem; display: flex; flex-direction: column; gap: 26px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--grey);
}
.field input,
.field textarea {
  width: 100%;
  padding: 11px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  font-size: 16.5px;
  color: var(--ink);
  border-radius: 0;
  transition: border-color 0.24s var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.field input:focus,
.field textarea:focus { border-bottom-color: var(--signal); outline: none; }
.field input:focus-visible,
.field textarea:focus-visible { outline: none; }
.field--error input,
.field--error textarea { border-bottom-color: #94301f; }
.field__err { font-size: 13.5px; color: #94301f; }
.field__hint { font-size: 13.5px; color: var(--grey); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status { font-size: 15.5px; line-height: 1.55; max-width: var(--measure-tight); }
.form__status--ok { color: var(--signal); }
.form__status--err { color: #94301f; }

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

.foot { background: var(--ink); color: var(--stone); }
.foot a:not(.btn) { color: var(--stone); text-decoration: none; }
.foot__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4vw, 48px);
  padding-block: var(--space-band) 30px;
}
@media (min-width: 700px) { .foot__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .foot__grid { grid-template-columns: 1.25fr 1fr 1fr 1.1fr; } }
.foot__h {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-light);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-invert);
}
/* The first footer column carries the mark rather than a label. */
.foot__h .logo { color: var(--stone); min-height: 0; }
.foot__h .logo__svg { height: 20px; }
.foot__where {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(240, 243, 239, 0.78);
  max-width: 30ch;
}
.foot__where + .foot__addr { margin-top: 14px; }
.foot__list { display: flex; flex-direction: column; margin-top: 12px; }
.foot__list a {
  padding: 7px 0;
  font-size: 14.5px;
  color: rgba(240, 243, 239, 0.78);
  transition: color 0.22s var(--ease);
  min-height: 40px;
  display: flex;
  align-items: center;
}
.foot__list a:hover { color: var(--stone); }
.foot__addr { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: rgba(240, 243, 239, 0.78); font-style: normal; }
.foot__addr a {
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding-block: 4px;
}
.foot__brief {
  border-top: 1px solid var(--line-invert);
  padding-block: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
  font-size: 14.5px;
  color: rgba(240, 243, 239, 0.78);
}
.foot__brief a {
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding-block: 4px;
}
.foot__legal {
  border-top: 1px solid var(--line-invert);
  padding-block: 22px 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--grey-light);
}
.foot__legal a {
  color: var(--grey-light);
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding-block: 5px;
}
.foot__legal a:hover { color: var(--stone); }

/* --- Breadcrumbs ---------------------------------------------------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
  padding-top: var(--space-crumb);
}
.crumbs a {
  color: var(--grey);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding-block: 4px;
}
.crumbs a:hover { color: var(--signal); }
.crumbs span[aria-current] {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
}
.crumbs span[aria-current] { color: var(--ink); }

/* --- Page header ---------------------------------------------------------- */

.phead { padding-block: var(--space-eyebrow) var(--space-open); }
.phead .display { margin-top: var(--space-h1); }
.phead > .lead { margin-top: var(--space-lead); }
/* A page header carrying the two-column hero already has its own internal
   rhythm, so it does not add the eyebrow gap twice. */
.phead .hero { margin-top: 0; }

/* --- Hero wordmark -------------------------------------------------------
   The brand as the opening's primary object. Width-driven so it holds the
   measure at any viewport, with a ceiling so it never becomes a banner. */

.heromark {
  display: block;
  width: min(100%, 62ch);
  max-width: 780px;
  height: auto;
  color: var(--ink);
}
.heromark__bracket { fill: var(--signal); }
.hero-h1 { margin: 0; }

.hero-strap {
  margin-top: clamp(22px, 2.8vh, 34px);
  font-family: var(--mono);
  font-size: clamp(11px, 1.05vw, 13px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal);
}
.hero-say {
  margin-top: clamp(20px, 2.8vh, 34px);
  font-family: var(--serif);
  font-size: clamp(1.14rem, 1.65vw, 1.44rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: 46ch;
  text-wrap: pretty;
}
.hero-do { margin-top: clamp(24px, 3.2vh, 40px); }

@media (min-width: 1000px) {
  .heromark { width: min(100%, 720px); }
}

/* --- Named lead ----------------------------------------------------------
   A person set as a small nameplate rather than as a headline, so leadership
   reads as part of the consultancy rather than as the product. */

.lead-in { border-top: 1px solid var(--ink); padding-top: 16px; max-width: 34ch; }
.lead-in__name {
  font-family: var(--serif);
  font-size: clamp(1.24rem, 2vw, 1.55rem);
  line-height: 1.16;
  letter-spacing: -0.014em;
  color: var(--ink);
}
.lead-in__role {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--signal);
}

/* --- Related / next ------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.chip:hover { color: var(--signal); border-color: var(--signal); }

/* --- CTA band ------------------------------------------------------------- */

.cta { padding-block: var(--space-band); }
.cta__in { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 30px); align-items: flex-start; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Two column ----------------------------------------------------------- */

.two { display: grid; grid-template-columns: 1fr; gap: clamp(26px, 3.4vw, 56px); }
@media (min-width: 860px) { .two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.two > * { min-width: 0; }
.two .prose, .two .list { max-width: none; }
/* An asymmetric two-column, for a passage of argument beside a short register
   of facts. */
.two--wide { grid-template-columns: 1fr; }
@media (min-width: 900px) { .two--wide { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 88px); } }

.split-head { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2vw, 28px); }
@media (min-width: 960px) {
  .split-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* --- Legal document type -------------------------------------------------- */

.doc { max-width: var(--measure); }
.doc h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.14;
  letter-spacing: -0.014em;
  margin-top: clamp(34px, 3.6vw, 52px);
  text-wrap: balance;
}
.doc h3 { text-wrap: balance; }
.seg__t, .nrow__t, .strip__t, .pager__t, .h4 { text-wrap: balance; }
.doc h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.02rem;
  margin-top: 28px;
}
.doc p { margin-top: 13px; color: var(--ink-soft); text-wrap: pretty; }
.doc ul { margin-top: 13px; }
.doc ul > li {
  padding: 8px 0 8px var(--mark-gap);
  text-indent: calc(-1 * var(--mark-gap));
  color: var(--ink-soft);
}
.doc ul > li > * { text-indent: 0; }
.doc .flag {
  margin-top: 20px;
  border-left: 2px solid var(--signal);
  padding: 4px 0 4px 18px;
  font-size: 15px;
  color: var(--ink);
}
.doc .flag strong { font-weight: 600; }

/* Standalone links in editorial lists get a real target; links inside a
   sentence keep the WCAG 2.2 inline exception and are left alone. */
.list > li > a:only-child,
.foot__list a,
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}


/* --- Hero ----------------------------------------------------------------
   Asymmetric: the headline takes the wide measure, the supporting paragraph
   and actions sit in a narrower column beside it from 1000px up, so the first
   viewport is a composition rather than a stack. */

.hero { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3vw, 40px); margin-top: clamp(14px, 1.6vw, 20px); }
@media (min-width: 1000px) {
  .hero {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.82fr);
    gap: 0 clamp(32px, 4vw, 72px);
    align-items: start;
  }
  /* the supporting column starts on the headline's first baseline, not above it */
  .hero__side { padding-top: clamp(10px, 1.2vw, 18px); }
}
.hero__side { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 30px); }
/* Inside an opening scene the headline carries more of the screen, so the
   supporting column narrows and the gap between them opens up. */
.hero--open .lead { max-width: 38ch; }
@media (min-width: 1000px) {
  .hero--open { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.88fr); gap: 0 clamp(40px, 5vw, 80px); }
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Hanging-label grid --------------------------------------------------
   The section label sits in a narrow left column beside its content, so the
   left margin carries meaning on every section instead of holding one
   navigation rail at the top and nothing for the rest of the page. */

.hang { display: block; }
.hang__sec { display: block; padding-block: var(--space-section); border-top: 1px solid var(--line); }
.hang__sec:first-child { border-top: none; padding-top: 0; }
.hang__label { display: block; margin-bottom: 14px; }
.hang__body { min-width: 0; }

@media (min-width: 1000px) {
  .hang__sec {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 0 clamp(28px, 3.4vw, 56px);
    align-items: start;
  }
  .hang__label { margin-bottom: 0; padding-top: 5px; position: sticky; top: calc(var(--nav-h) + 26px); }
}

/* --- Large numeral rows (services) --------------------------------------- */

.nrows { border-top: 1px solid var(--ink); }
.nrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title arrow"
    "desc  desc";
  gap: 7px 16px;
  padding: clamp(18px, 2.2vw, 26px) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  align-items: baseline;
}
.nrow__t { grid-area: title; }
.nrow__d { grid-area: desc; }
.nrow__a { grid-area: arrow; }
@media (min-width: 820px) {
  .nrow {
    grid-template-columns: 62px minmax(0, 0.95fr) minmax(0, 1.25fr) auto;
    grid-template-areas: "n title desc arrow";
    gap: 0 clamp(20px, 2.6vw, 44px);
  }
  .nrow__n { grid-area: n; }
  .nrows--plain .nrow {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr) auto;
    grid-template-areas: "title desc arrow";
  }
}
.nrows--plain .nrow__n { display: none; }
.nrow__n {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  color: var(--grey);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
@media (max-width: 819px) { .nrow__n { display: none; } }
.nrow__t {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.1vw, 1.65rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  transition: color 0.24s var(--ease);
  text-wrap: balance;
}
.nrow__d { color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }
.nrow__a { color: var(--grey); transition: transform 0.3s var(--ease), color 0.24s var(--ease); align-self: center; }
a.nrow:hover .nrow__t { color: var(--signal); }
a.nrow:hover .nrow__a { color: var(--signal); transform: translateX(5px); }

/* --- Sector strip (deliberately unlike the service rows) ------------------ */

.strip { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--ink); }
@media (min-width: 760px) { .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 56px); } }
@media (min-width: 1180px) { .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.strip__i {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: clamp(20px, 2.4vw, 28px) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.strip__t {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--ink);
  transition: color 0.24s var(--ease);
}
.strip__d { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }
.strip__m { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); }
a.strip__i:hover .strip__t { color: var(--signal); }

/* --- Numbered segment sequence (sector pages) ---------------------------- */

.segs { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.seg {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0 14px;
  padding: clamp(20px, 2.4vw, 28px) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 700px) { .seg { grid-template-columns: 52px minmax(0, 1fr); gap: 0 20px; } }
.seg__n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--grey);
  padding-top: 6px;
}
.seg__t {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.012em;
}
.seg__d { margin-top: 9px; color: var(--ink-soft); max-width: 62ch; text-wrap: pretty; }

/* --- Schedule ------------------------------------------------------------
   A register of the kinds of work an engagement can be: a mono label naming
   the unit, and a serif line saying what it involves. Used once, on the
   homepage, to show the range of an intervention without claiming a size. */

.sched { border-top: 1px solid var(--ink); }
.sched__r {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  padding: clamp(18px, 2.2vw, 26px) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 760px) {
  .sched__r { grid-template-columns: 168px 1fr; gap: clamp(20px, 2.6vw, 40px); align-items: baseline; }
}
.sched__l {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--signal);
  padding-top: 0.35em;
}
.sched__t {
  font-family: var(--serif);
  font-size: clamp(1.12rem, 1.75vw, 1.42rem);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
  max-width: 58ch;
  text-wrap: pretty;
}

/* --- Statement (a held pause between sections) ---------------------------- */

.display--hero { font-size: clamp(2.3rem, 5vw, 3.85rem); }

.statement {
  font-family: var(--serif);
  font-size: clamp(1.42rem, 2.7vw, 2.05rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  max-width: 26ch;
  text-wrap: balance;
}
.statement em { font-style: normal; color: var(--signal); }
.statement--indent { margin-left: 0; }
@media (min-width: 1000px) { .statement--indent { margin-left: calc(150px + clamp(28px, 3.4vw, 56px)); } }

/* --- Aside (BRIEF, and other quiet asides): rules, not a box ------------- */

.aside {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  padding-block: var(--space-open);
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 940px) {
  .aside { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(28px, 3.4vw, 56px); align-items: start; }
}

/* --- Next / previous pager ------------------------------------------------ */

.pager { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--ink); }
@media (min-width: 760px) { .pager { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pager__i {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(22px, 2.6vw, 32px) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
@media (min-width: 760px) {
  .pager__i + .pager__i { padding-left: clamp(24px, 3vw, 48px); border-left: 1px solid var(--line); }
}
.pager__t {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
  transition: color 0.24s var(--ease);
}
a.pager__i:hover .pager__t { color: var(--signal); }

/* --- Definition list (sub-services on wide screens) ----------------------- */
/* At >=900px the disclosure panels are all open, so the +/- affordance is
   meaningless and is hidden; the block reads as a definition list instead. */
@media (min-width: 900px) {
  .acc__sign { display: none; }
  .acc__btn { cursor: default; padding-bottom: 10px; }
  .acc__btn:hover { color: var(--ink); }
  .acc__item { border-bottom: 1px solid var(--line-soft); }
  .acc__item:last-child { border-bottom: none; }
}

/* ==========================================================================
   ANSWERS
   The knowledge layer. It borrows the site's existing furniture wherever it
   can: the opening scene, the contents rail, the hanging section rhythm, the
   marker list, the callout. What is new here is the index row, the short
   answer block, and two body block types the rest of the site did not need.
   There is no card, no thumbnail and no image slot anywhere in it.
   ========================================================================== */

/* --- Theme jump row (Answers index) --------------------------------------- */

.tset {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding-bottom: clamp(20px, 2.4vw, 28px);
  border-bottom: 1px solid var(--ink);
}
@media (min-width: 760px) {
  .tset { grid-template-columns: 82px minmax(0, 1fr); gap: 0 clamp(20px, 2.6vw, 40px); align-items: start; }
}
.tset__l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
  padding-top: 9px;
}
.tset__s { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.tset__i {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-height: 40px;
  padding: 9px 0;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.22s var(--ease);
}
.tset__i::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  height: 1px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--ease);
}
.tset__i:hover { color: var(--signal); }
.tset__i:hover::after { transform: scaleX(1); }
.tset__c { font-family: var(--mono); font-size: 10px; color: var(--grey); }

/* --- Theme group ---------------------------------------------------------- */

.tgrp { padding-top: var(--space-section); }
.tgrp__h { max-width: 62ch; margin-bottom: clamp(16px, 1.8vw, 22px); }
.tgrp__t { color: var(--ink); }
.tgrp__d { margin-top: 9px; color: var(--grey); font-size: 15.5px; line-height: 1.55; max-width: 58ch; }

/* --- The index row -------------------------------------------------------
   A library is scanned down a column of questions. Number, question, one line
   of summary, and the two pieces of metadata that help someone decide whether
   to open it. Hover insets the row rather than filling it, so the page stays
   quiet while the affordance is unmistakable. */

.alist { border-top: 1px solid var(--ink); }
.alist__it {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas:
    "n    meta"
    "body body";
  gap: 6px 16px;
  padding: clamp(18px, 2.1vw, 24px) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: padding 0.3s var(--ease);
}
.alist__n { grid-area: n; }
.alist__b { grid-area: body; display: block; min-width: 0; }
.alist__m { grid-area: meta; }
.alist__a { display: none; }
@media (min-width: 820px) {
  .alist__it {
    grid-template-columns: 54px minmax(0, 1fr) auto 22px;
    grid-template-areas: "n body meta arrow";
    gap: 0 clamp(18px, 2.4vw, 36px);
    align-items: baseline;
  }
  .alist__a { grid-area: arrow; display: block; color: var(--grey); align-self: center; transition: transform 0.3s var(--ease), color 0.24s var(--ease); }
  .alist__it:hover { padding-inline: clamp(4px, 0.9vw, 12px); }
}
.alist__n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--grey);
  transition: color 0.24s var(--ease);
}
.alist__q {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.18rem, 1.85vw, 1.5rem);
  line-height: 1.16;
  letter-spacing: -0.014em;
  color: var(--ink);
  max-width: 46ch;
  text-wrap: balance;
  transition: color 0.24s var(--ease);
}
.alist__s {
  display: block;
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  max-width: 62ch;
}
.alist__m {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--grey);
  white-space: nowrap;
}
.alist__it:hover .alist__q { color: var(--signal); }
.alist__it:hover .alist__n { color: var(--signal); }
.alist__it:hover .alist__a { color: var(--signal); transform: translateX(5px); }

/* Compact: related answers and the service-page block. No summary line, so
   the row is one line of question and the metadata sits beside it. */
.alist--tight .alist__q { font-size: clamp(1.04rem, 1.4vw, 1.2rem); max-width: 46ch; }
.alist--tight .alist__it { padding: clamp(14px, 1.6vw, 18px) 0; }

/* --- Short answer --------------------------------------------------------
   The whole point of the format: the answer is in the first viewport, beside
   the question. A rule above it rather than a box around it, in keeping with
   everything else on the site. */

.ansbox { border-top: 2px solid var(--ink); padding-top: clamp(14px, 1.6vw, 18px); }
.ansbox__p {
  margin-top: 11px;
  font-family: var(--serif);
  font-size: clamp(1.04rem, 1.45vw, 1.18rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 46ch;
  text-wrap: pretty;
}
.display--ans { font-size: clamp(1.85rem, 3.5vw, 2.9rem); line-height: 1.06; max-width: 19ch; }

/* --- Article body --------------------------------------------------------- */

.asec__t { margin-bottom: clamp(14px, 1.6vw, 18px); }
.abody { max-width: var(--measure); }
.abody > p { color: var(--ink-soft); text-wrap: pretty; }
.abody > p + p { margin-top: 1.05em; }
.abody > * + * { margin-top: clamp(18px, 2vw, 24px); }
.abody > p + p { margin-top: 1.05em; }
.abody a { color: var(--signal); text-decoration: none; border-bottom: 1px solid rgba(15, 76, 74, 0.35); }
.abody a:hover { border-bottom-color: var(--signal); }
.abody .list { max-width: none; }
.abody .statement--sm {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  line-height: 1.24;
  max-width: 34ch;
  color: var(--ink);
  padding-left: clamp(14px, 1.6vw, 20px);
  border-left: 2px solid var(--signal);
}

/* Numbered sequence. Used where order genuinely matters. */
.steps { border-top: 1px solid var(--line); }
.steps__i {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0 14px;
  padding: clamp(15px, 1.7vw, 19px) 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.steps__n { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--signal); }
.steps__b { display: block; min-width: 0; }
.steps__t { display: block; font-family: var(--sans); font-weight: 600; font-size: 15.5px; line-height: 1.35; color: var(--ink); }
.steps__d { display: block; margin-top: 6px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; }

/* Definitions. The term hangs in its own column, echoing the section labels. */
.deflist { border-top: 1px solid var(--line); }
.deflist__i {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding: clamp(15px, 1.7vw, 19px) 0;
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 760px) {
  .deflist__i { grid-template-columns: 158px minmax(0, 1fr); gap: 0 clamp(18px, 2.2vw, 30px); align-items: baseline; }
}
.deflist__t { font-family: var(--sans); font-weight: 600; font-size: 15.5px; line-height: 1.35; color: var(--ink); }
.deflist__d { margin: 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; }

/* Related questions at the foot of an Answer. Always open, always crawlable. */
.aq + .aq { margin-top: clamp(20px, 2.2vw, 28px); padding-top: clamp(20px, 2.2vw, 28px); border-top: 1px solid var(--line-soft); }
.aq__q { font-family: var(--sans); font-weight: 600; font-size: 1rem; line-height: 1.35; color: var(--ink); }
.aq p { margin-top: 9px; color: var(--ink-soft); text-wrap: pretty; }

/* The sector strip is built for a full-width row. In a half-width column its
   three tracks turn a service name into four lines beside an empty track, so
   the Answer's related-service block asks for one item per row instead. */
.strip--one { grid-template-columns: 1fr; }

.byline {
  margin-top: var(--space-section);
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--grey);
}

/* --- Misc ----------------------------------------------------------------- */


.tabnum { font-variant-numeric: tabular-nums; }
.scroll-x { overflow-x: auto; }
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media print {
  .nav, .menu, .foot, .cta, .rail { display: none !important; }
  body { background: #fff; color: #000; }
}