/* ==========================================================================
   KAKDE RESEARCH — V8
   An institutional research publication with a data desk.

   The reference set stays the financial press (FT, NZZ, Nikkei), but V8 adds
   the register those papers keep for their data journalism: dark plates where
   the figures live, cream paper where the reading happens. The site opens on
   the desk (navy, one real chart, real readouts) and settles onto the page.

   Ground rules carried forward from V5-V6, still binding:
   - Navy is ink and ground, never decoration. Cream is the paper.
   - Emerald is the subject-series colour and almost nothing else.
   - No gold, no red, no orange. Anywhere. Including charts.
   - Headlines at 400. Emphasis comes from size, space and rule-work.
   - No cards, no shadows, no radius, no gradients-as-decoration.
   - Nothing animates that is not a measurement or an orientation cue.
   ========================================================================== */

:root {
  /* --- Paper: four tints of the brand cream. --- */
  --paper:     #F4F0E6;
  --paper-up:  #FAF7EF;
  --paper-dn:  #ECE6D6;
  --stone:     #DDD5C2;

  /* --- Ink and the dark grounds. --- */
  --ink:        #14294B;   /* brand navy: headings, rules, primary action */
  --navy-deep:  #0E1D38;   /* the data desk: hero, dark fields */
  --navy-abyss: #0A1526;   /* closing field and footer */
  --body-c:     #232837;   /* running text: navy-cast charcoal */
  --muted:      #5C6370;   /* secondary type on paper, 5:1+ */

  /* --- On dark. --- */
  --on-dark:       rgba(244, 240, 230, 0.95);
  --on-dark-mid:   rgba(244, 240, 230, 0.72);
  --on-dark-muted: rgba(244, 240, 230, 0.55);

  /* --- The accent. Emerald: chart subjects and a handful of marks. --- */
  --accent:        #0F5F45;   /* 6.7:1 on cream */
  --accent-bright: #58BE96;   /* the same job on navy-deep, 6.9:1 */

  /* --- Rules: the ground colour at low alpha, never a new hue. --- */
  --rule:        rgba(20, 41, 75, 0.14);
  --rule-mid:    rgba(20, 41, 75, 0.30);
  --rule-strong: rgba(20, 41, 75, 0.55);
  --rule-dk:        rgba(244, 240, 230, 0.14);
  --rule-dk-mid:    rgba(244, 240, 230, 0.30);
  --rule-dk-strong: rgba(244, 240, 230, 0.6);

  /* --- Chart series. Fixed order: subject, then comparators, set as a
         lightness ladder so neighbours stay apart for every kind of colour
         vision. Validated computationally: worst adjacent-pair ΔE 17.9
         under CVD simulation, 18.7 unsimulated. The lightest tone sits
         below 3:1 on cream, which is why every multi-series figure carries
         a permanent legend and hover value flags. The dashboard assigns
         peer tones by selection order and caps concurrent peers at three,
         so the ladder never has to hold more than four lines apart. --- */
  --series-india:  var(--accent);
  --series-peer:   #14294B;   /* the navy line */
  --series-peer-2: #4A6FA5;   /* steel */
  --series-peer-3: #A9B7CB;   /* light steel */
  --grid-line: rgba(20, 41, 75, 0.08);
  --zero-line: rgba(20, 41, 75, 0.30);

  /* --- Type. --- */
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale. The ladder is steeper than V6: a research house earns its
     authority at display size or not at all. */
  --t-hero:      clamp(42px, 6.6vw, 96px);
  --t-display:   clamp(36px, 5vw, 72px);
  --t-statement: clamp(26px, 3.2vw, 46px);
  --t-h2:        clamp(28px, 3.4vw, 48px);
  --t-h3:        clamp(19px, 1.6vw, 23px);
  --t-lede:      clamp(17px, 1.35vw, 21px);
  --t-body:      17px;
  --t-small:     14.5px;
  --t-meta:      11.5px;

  /* Space, 8px base. */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 40px;
  --s5: 64px; --s6: 96px; --s7: 144px;

  --container: 1360px;
  --gutter: clamp(20px, 4.5vw, 56px);
  --header-h: 76px;
  --header-h-compact: 60px;

  /* Motion. Two curves, both strong. Micro-interactions 150-220ms,
     reveals 500-800ms, figures own their own clocks. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h-compact) + var(--s3));
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body-c);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  font-feature-settings: 'ss01' 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; }

::selection { background: var(--ink); color: var(--paper); }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.on-dark :focus-visible,
.field-dark :focus-visible,
.field-abyss :focus-visible,
.hero-dark :focus-visible { outline-color: var(--accent-bright); }

.skip-link {
  position: fixed;
  top: -100px;
  left: var(--s2);
  z-index: 200;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-small);
  text-decoration: none;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: var(--s2); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section       { padding-block: clamp(72px, 9vw, 132px); }
.section-tight { padding-block: clamp(48px, 6vw, 88px); }

/* Grounds. One class per field; components inherit their ink from these. */
.field-dn    { background: var(--paper-dn); }
.field-dark  { background: var(--navy-deep);  color: var(--on-dark); }
.field-abyss { background: var(--navy-abyss); color: var(--on-dark); }

.field-dark  h1, .field-dark  h2, .field-dark  h3,
.field-abyss h1, .field-abyss h2, .field-abyss h3 { color: var(--on-dark); }

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

.mono-label {
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.field-dark .mono-label, .field-abyss .mono-label { color: var(--on-dark-muted); }

.section-title {
  font-family: var(--serif);
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  padding-bottom: var(--s3);
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--rule-mid);
}
.field-dark .section-head, .field-abyss .section-head { border-color: var(--rule-dk-mid); }
.section-head .mono-label { margin: 0; }

.section-intro {
  font-size: var(--t-lede);
  line-height: 1.55;
  max-width: 62ch;
  color: var(--body-c);
}
.field-dark .section-intro, .field-abyss .section-intro { color: var(--on-dark-mid); }

.statement-lg {
  font-family: var(--serif);
  font-size: var(--t-statement);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.prose { max-width: 68ch; }
.prose p + p { margin-top: 1.1em; }
.prose ul { padding-left: 1.2em; margin-top: 1em; }
.prose li { margin-bottom: 0.5em; }
.prose h2 {
  font-family: var(--serif);
  font-size: var(--t-h3);
  font-weight: 400;
  color: var(--ink);
  margin: 1.9em 0 0.6em;
}
.field-dark .prose h2, .field-abyss .prose h2 { color: var(--on-dark); }

.updated {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s4);
}

/* ---------- Links and buttons ---------- */

.text-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: calc(100% - 1.2em) 1px;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size 0.25s var(--ease-out);
}
.text-link .arrow {
  display: inline-block;
  transition: transform 0.2s var(--ease-out);
}
.text-link:hover .arrow { transform: translateX(4px); }
/* The hero is a dark ground like the others and has to be named here.
   Left out, the secondary link renders navy ink on navy and measures
   1.24:1, which is invisible rather than subtle. */
.field-dark .text-link, .field-abyss .text-link, .hero-dark .text-link { color: var(--on-dark); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 15px 28px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s var(--ease-out),
              color 0.18s var(--ease-out),
              border-color 0.18s var(--ease-out),
              transform 0.12s var(--ease-out);
}
.btn:active { transform: scale(0.98); }

.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); }

.field-dark .btn-primary, .field-abyss .btn-primary, .hero-dark .btn-primary {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}
.field-dark .btn-primary:hover, .field-abyss .btn-primary:hover, .hero-dark .btn-primary:hover {
  background: var(--paper-up); border-color: var(--paper-up);
}

.btn-outline { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-outline:hover { border-color: var(--ink); }
.field-dark .btn-outline, .field-abyss .btn-outline, .hero-dark .btn-outline { color: var(--on-dark); border-color: var(--rule-dk-mid); }
.field-dark .btn-outline:hover, .field-abyss .btn-outline:hover, .hero-dark .btn-outline:hover { border-color: var(--on-dark); }

/* ==========================================================================
   MASTHEAD
   Transparent over the dark hero on the homepage, cream everywhere else.
   Compacts once the reader is reading. The reserved band never changes
   height, so the page below never moves.
   ========================================================================== */

body { padding-top: var(--header-h); }
body.has-dark-hero { padding-top: 0; }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transition: background-color 0.3s var(--ease-out),
              border-color 0.3s var(--ease-out),
              transform 0.3s var(--ease-out);
}
.header-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  transition: height 0.3s var(--ease-out);
}
.site-header.is-compact .header-inner { height: var(--header-h-compact); }

/* Over the dark hero: no ground of its own. */
.site-header.on-hero {
  background: transparent;
  border-bottom-color: transparent;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
}
.site-header.on-hero .wordmark { color: var(--on-dark); }
.wordmark .mark { display: inline-flex; color: currentColor; }
/* One line, sentence case, serif. A name, set the way the practice would
   set it on a report cover, not a badge in small caps. */
.wordmark-text {
  font-family: var(--serif);
  font-size: 19.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.005em;
  white-space: nowrap;
  transform: translateY(-1px);
}

.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }

.nav-link {
  position: relative;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--body-c);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
}
.site-header.on-hero .nav-link { color: var(--on-dark-mid); }
.site-header.on-hero .nav-link:hover,
.site-header.on-hero .nav-link[aria-current="page"] { color: var(--on-dark); }

.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right 0.25s var(--ease-out);
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { right: 0; }

.nav-item { position: relative; }
.nav-drop::before {
  /* Enlarged hover bridge so the menu does not die in the gap. */
  content: '';
  position: absolute;
  inset: 100% 0 -14px 0;
  display: none;
}
.nav-item.is-open .nav-drop::before { display: block; }

.drop-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: 216px;
  background: var(--paper-up);
  border: 1px solid var(--rule-mid);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s var(--ease-out),
              transform 0.18s var(--ease-out),
              visibility 0.18s;
}
.nav-item.is-open .drop-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.drop-menu a {
  display: block;
  padding: 9px 22px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--body-c);
  text-decoration: none;
  transition: color 0.15s var(--ease-out), background-color 0.15s var(--ease-out);
}
.drop-menu a:hover { color: var(--ink); background: var(--paper-dn); }

.header-right { display: flex; align-items: center; gap: var(--s3); }
.header-cta { padding: 12px 22px; font-size: 14px; }
/* The persistent action stays a filled paper button on the dark hero:
   the one solid mark in the masthead, same job on every ground. */
.site-header.on-hero .header-cta {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.site-header.on-hero .header-cta:hover { background: var(--paper-up); border-color: var(--paper-up); }

/* Mobile toggle: two bars that become a cross. */
.nav-toggle {
  display: none;
  position: relative;
  z-index: 130;
  width: 42px; height: 42px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}
.site-header.on-hero .nav-toggle { color: var(--on-dark); }
.nav-toggle span {
  position: absolute;
  left: 10px; right: 10px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.28s var(--ease-out), top 0.28s var(--ease-out);
}
.nav-toggle span:first-child { top: 17px; }
.nav-toggle span:last-child  { top: 25px; }
.nav-toggle[aria-expanded="true"] { color: var(--on-dark); }
.nav-toggle[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { top: 21px; transform: rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .header-cta { display: none; }

  /* Full-screen navy overlay. The links are the composition. */
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 120;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: calc(var(--header-h) + var(--s4)) var(--gutter) var(--s5);
    background: var(--navy-deep);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease-out), visibility 0.3s;
    /* The page beneath is locked while this is open, so the overlay has to
       be able to scroll itself: with the Firm group expanded on a short
       phone the links run past the fold. Contained, so reaching the end
       does not hand the gesture back to the locked page. */
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-nav.is-open { visibility: visible; opacity: 1; pointer-events: auto; }

  .site-nav > .nav-link,
  .site-nav .nav-drop {
    font-family: var(--serif);
    font-size: clamp(30px, 7.5vw, 40px);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--on-dark);
    padding: 10px 0;
  }
  .site-nav > .nav-link::after, .site-nav .nav-drop::after { display: none; }
  .site-nav .nav-link[aria-current="page"] { color: var(--accent-bright); }

  /* Menu groups sit inline on mobile: no floating panels. */
  .nav-item { width: 100%; }
  .drop-menu {
    position: static;
    transform: none;
    min-width: 0;
    background: none;
    border: 0;
    padding: 0 0 6px 2px;
    opacity: 1;
    visibility: visible;
    display: none;
  }
  .nav-item.is-open .drop-menu { display: block; }
  .drop-menu a { color: var(--on-dark-mid); font-size: 17px; padding: 8px 0; }
  .drop-menu a:hover { color: var(--on-dark); background: none; }

  body.nav-open { overflow: hidden; }
}

/* ==========================================================================
   HERO — the desk
   Dark ground, one thesis, one real chart. The chart is India's nominal GDP
   since 1960: the argument for paying attention, drawn from the record.
   ========================================================================== */

.hero-dark {
  position: relative;
  /* Tonal seam, not decoration: the no-image fallback ground, matching the
     scrim's landing tone so the strip below never meets a hard edge if the
     plate fails to load. */
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy-abyss) 100%);
  color: var(--on-dark);
  padding-top: calc(var(--header-h) + clamp(32px, 5.5vh, 64px));
  padding-bottom: 0;
  overflow: hidden;
  /* Small type sits over a photograph here rather than a flat field, so
     the muted step is lifted. At 0.55 the dateline and the chart's axis
     labels measured under 4.5:1 against the brightest part of the plate. */
  --on-dark-muted: rgba(244, 240, 230, 0.72);
}

/* --- The plate. The image sits under two washes: a horizontal one that
       clears the ground beneath the headline, and a vertical one that
       takes the bottom of the frame to solid abyss before the chart's
       axis labels and the snapshot strip arrive. The img is drawn 14%
       taller than its box so the scroll parallax never shows an edge. --- */
.hero-plate {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-plate img {
  position: absolute;
  left: 0;
  top: -7%;
  width: 100%;
  height: 114%;
  object-fit: cover;
  object-position: 74% 30%;
  filter: grayscale(0.25) brightness(0.94);
}
.hero-plate::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(10, 21, 38, 0.96) 0%,
      rgba(10, 21, 38, 0.9) 34%,
      rgba(11, 23, 42, 0.55) 62%,
      rgba(11, 23, 42, 0.34) 100%),
    linear-gradient(180deg,
      rgba(10, 21, 38, 0.5) 0%,
      rgba(10, 21, 38, 0.17) 20%,
      rgba(10, 21, 38, 0.5) 42%,
      rgba(10, 21, 38, 0.85) 70%,
      rgba(10, 21, 38, 0.985) 88%,
      var(--navy-abyss) 100%);
}
.hero-dark .container { position: relative; z-index: 1; }

.hero-row {
  display: grid;
  grid-template-columns: minmax(0, 4.7fr) minmax(0, 7.3fr);
  gap: var(--s4) var(--s5);
  align-items: start;
  margin-top: clamp(28px, 4vh, 48px);
}

.hero-dateline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px var(--s3);
  margin-bottom: clamp(20px, 3vh, 36px);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.hero-dateline span + span { position: relative; padding-left: var(--s3); }
.hero-dateline span + span::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 1px; height: 11px;
  transform: translateY(-50%);
  background: var(--rule-dk-mid);
}

.hero-dark h1 {
  font-family: var(--serif);
  font-size: var(--t-hero);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.028em;
  text-wrap: balance;
  color: var(--on-dark);
}
.hero-dark h1 em { font-style: italic; color: var(--accent-bright); }

.hero-sub {
  font-size: var(--t-lede);
  line-height: 1.55;
  max-width: 40ch;
  color: var(--on-dark-mid);
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3) var(--s4);
  margin-top: clamp(24px, 3.5vh, 40px);
}

/* The hero figure: readout above, chart below, source under. */
.hero-fig { min-width: 0; }
.hero-readout { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.hero-readout-fig {
  font-family: var(--serif);
  font-size: clamp(44px, 4.6vw, 68px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--on-dark);
  font-variant-numeric: tabular-nums;
}
.hero-readout-meta {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.hero-readout-meta b { color: var(--accent-bright); font-weight: 400; }

.hero-chart { position: relative; margin-top: var(--s2); }
.hero-chart svg { display: block; width: 100%; height: auto; overflow: visible; }

.hero-source {
  margin-top: var(--s2);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--on-dark-muted);
}

/* Snapshot strip below the hero chart */
.strip {
  border-top: 1px solid var(--rule-dk);
  margin-top: clamp(24px, 3.5vh, 48px);
}
.strip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.strip-cell {
  padding: clamp(20px, 2.6vw, 34px) var(--s3) clamp(22px, 2.8vw, 38px) 0;
  border-right: 1px solid var(--rule-dk);
}
.strip-cell + .strip-cell { padding-left: var(--s3); }
.strip-cell:last-child { border-right: 0; padding-right: 0; }
.strip-label {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.strip-value {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1;
  color: var(--on-dark);
  font-variant-numeric: tabular-nums;
}
.strip-value .unit { font-size: 0.55em; color: var(--on-dark-mid); }
.strip-note {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--on-dark-muted);
}
.strip-spark { height: 26px; margin-top: 12px; }
.strip-spark svg { width: 100%; height: 100%; overflow: visible; display: block; }
.strip-spark .spark-line { stroke: var(--on-dark-mid); stroke-width: 1.4; fill: none; }
.strip-spark .spark-end { fill: var(--on-dark-mid); }
.strip-cell.is-subject .strip-spark .spark-line { stroke: var(--accent-bright); }
.strip-cell.is-subject .strip-spark .spark-end { fill: var(--accent-bright); }
.strip-market {
  display: block;
  font-family: var(--serif);
  font-size: 15.5px;
  color: var(--on-dark);
  margin-bottom: 4px;
  letter-spacing: 0;
  text-transform: none;
}
.strip-cell.is-subject .strip-market { color: var(--accent-bright); }

@media (max-width: 760px) {
  .strip-grid { grid-template-columns: repeat(2, 1fr); }
  .strip-cell { border-right: 0; border-bottom: 1px solid var(--rule-dk); padding-left: 0; }
  .strip-cell + .strip-cell { padding-left: 0; }
  .strip-cell:nth-child(odd) { border-right: 1px solid var(--rule-dk); padding-right: var(--s3); }
  .strip-cell:nth-child(even) { padding-left: var(--s3); }
  .strip-cell:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 720px) {
  .strip { margin-top: 40px; }
  .strip-value { font-size: 26px; }
  .strip-market { font-size: 14.5px; }
  .strip-label { font-size: 10.5px; }
  .strip-note { font-size: 10px; }
}
@media (max-width: 380px) {
  .strip-grid { grid-template-columns: 1fr; }
  .strip-cell, .strip-cell:nth-child(odd) { border-right: 0; padding-right: 0; }
  .strip-cell:nth-child(even) { padding-left: 0; }
  .strip-cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule-dk); }
  .strip-cell:last-child { border-bottom: 0; }
}

/* The hero chart draws with cream ink on the dark desk. */
.hero-chart .series-line { stroke: var(--on-dark); stroke-width: 2; }
.hero-chart .series-area { fill: var(--on-dark); }
.hero-chart .axis-label { fill: var(--on-dark-muted); }
.hero-chart .gridline { stroke: var(--rule-dk); }
.hero-chart .zeroline { stroke: var(--rule-dk-mid); }
.hero-chart .annot-note { fill: var(--on-dark-mid); }
.hero-chart .annot-val { fill: var(--on-dark); }
.hero-chart .annot-rule { stroke: var(--rule-dk-mid); }
.hero-chart .annot-dot { fill: var(--accent-bright); }

/* ---------- The snapshot strip: real readouts, honestly dated ----------

   Default strip: full-width below the hero. The inline variant sits
   inside the hero figure so the chart and the four readouts share one
   visual container, both landing above the fold on a 16:9 viewport. */

.strip {
  border-top: 1px solid var(--rule-dk);
  margin-top: clamp(24px, 3.5vh, 48px);
}
.strip.is-inline {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule-dk-mid);
}
.strip.is-full {
  margin-top: 0;
  padding-top: 0;
  background: var(--ink);
  border-top: 1px solid var(--rule-dk);
  border-bottom: 1px solid var(--rule-dk);
}
.strip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.strip.is-inline .strip-grid { column-gap: var(--s2); }
.strip-cell {
  padding: clamp(16px, 1.8vw, 22px) var(--s2) clamp(18px, 2vw, 26px) 0;
  border-right: 1px solid var(--rule-dk);
}
.strip.is-inline .strip-cell { padding-top: var(--s2); padding-bottom: var(--s2); }
.strip-cell + .strip-cell { padding-left: var(--s2); }
.strip-cell:last-child { border-right: 0; padding-right: 0; }
.strip.is-inline .strip-value { font-size: clamp(20px, 1.8vw, 28px); }
.strip.is-inline .strip-spark { height: 22px; margin-top: 8px; }
.strip.is-inline .strip-note { font-size: 9.5px; margin-top: 6px; }
.strip.is-inline .strip-foot {
  padding-top: 10px;
  margin-top: var(--s2);
  font-size: 9.5px;
}
.strip.is-full .container {
  padding-top: 0;
  padding-bottom: 0;
}
.strip.is-full .strip-grid {
  grid-template-columns: repeat(4, 1fr);
}
.strip.is-full .strip-cell {
  padding: clamp(24px, 3vw, 40px) clamp(16px, 3vw, 48px) clamp(22px, 2.5vw, 36px);
  border-right: 1px solid var(--rule-dk);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.strip.is-full .strip-cell:last-child {
  border-right: 0;
}
.strip.is-full .strip-market {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 6px;
  font-weight: 600;
}
.strip.is-full .strip-label {
  display: none;
}
.strip.is-full .strip-value {
  font-size: clamp(28px, 2.4vw, 36px);
  font-weight: 700;
  color: var(--on-dark);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.strip.is-full .strip-value .unit {
  font-size: 0.5em;
  color: var(--on-dark-mid);
  margin-left: 2px;
  font-weight: 500;
}
.strip.is-full .strip-spark {
  height: 32px;
  margin-top: 12px;
}
.strip.is-full .strip-spark .spark-line {
  stroke: var(--on-dark-mid);
  stroke-width: 1.6;
}
.strip.is-full .strip-spark .spark-end {
  fill: var(--on-dark-mid);
}
.strip.is-full .strip-cell.is-subject .strip-market {
  color: var(--accent-bright);
}
.strip.is-full .strip-cell.is-subject .strip-value {
  color: var(--accent-bright);
}
.strip.is-full .strip-cell.is-subject .strip-spark .spark-line {
  stroke: var(--accent-bright);
}
.strip.is-full .strip-cell.is-subject .strip-spark .spark-end {
  fill: var(--accent-bright);
}
.strip.is-full .strip-note {
  font-size: 9px;
  margin-top: 10px;
  color: var(--on-dark-muted);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.strip.is-full .strip-foot {
  padding: 12px 0 20px;
  margin-top: 0;
  border-top: 1px solid var(--rule-dk);
  font-size: 8.5px;
  color: var(--on-dark-muted);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.strip-label {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.strip-value {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1;
  color: var(--on-dark);
  font-variant-numeric: tabular-nums;
}
.strip-value .unit { font-size: 0.55em; color: var(--on-dark-mid); }
.strip-note {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--on-dark-muted);
}
.strip-foot {
  padding: 14px 0 clamp(28px, 4vh, 44px);
  border-top: 1px solid var(--rule-dk);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--on-dark-muted);
}

@media (max-width: 1100px) {
  .hero-row { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 760px) {
  .strip-grid { grid-template-columns: repeat(2, 1fr); }
  .strip-cell { border-right: 0; border-bottom: 1px solid var(--rule-dk); padding-left: 0; }
  .strip-cell + .strip-cell { padding-left: 0; }
  .strip-cell:nth-child(odd) { border-right: 1px solid var(--rule-dk); padding-right: var(--s3); }
  .strip-cell:nth-child(even) { padding-left: var(--s3); }
  .strip-cell:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ==========================================================================
   EDITORIAL INTRODUCTION
   ========================================================================== */

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: var(--s4) var(--s6);
  align-items: start;
}
.intro-mark { padding-top: 10px; }
.intro-body > p + p { margin-top: 1.2em; }
.intro-body .statement-lg { margin-bottom: 0.7em; max-width: 24ch; }
.intro-body > p:not(.statement-lg) { max-width: 62ch; color: var(--body-c); }

@media (max-width: 900px) {
  .intro-grid { grid-template-columns: 1fr; gap: var(--s3); }
}

/* ==========================================================================
   FIGURE SYSTEM
   Charts of real, sourced series. The provenance line is part of the
   component. Works on both grounds.
   ========================================================================== */

.figure { position: relative; margin: 0; }

.figure-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8;
  min-height: 280px;
}
.figure-frame svg { width: 100%; height: 100%; overflow: visible; display: block; }

.figure-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  padding-bottom: var(--s3);
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--rule-mid);
}
.field-dark .figure-head, .field-abyss .figure-head { border-color: var(--rule-dk-mid); }

.figure-title {
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.field-dark .figure-title, .field-abyss .figure-title { color: var(--on-dark); }
.figure-unit {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.field-dark .figure-unit, .field-abyss .figure-unit { color: var(--on-dark-muted); }

.figure-source {
  margin: var(--s3) 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--muted);
  max-width: 88ch;
}
.field-dark .figure-source, .field-abyss .figure-source { color: var(--on-dark-muted); }

.figure-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem var(--s3);
  margin: var(--s2) 0 0;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.field-dark .figure-legend { color: var(--on-dark-mid); }
.figure-legend li { display: flex; align-items: center; gap: 0.5rem; }
.legend-swatch { width: 15px; height: 2px; flex: none; }

.gridline { stroke: var(--grid-line); stroke-width: 1; }
.zeroline { stroke: var(--zero-line); stroke-width: 1; }
.field-dark .gridline { stroke: var(--rule-dk); }
.field-dark .zeroline { stroke: var(--rule-dk-mid); }
.axis-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  fill: var(--muted);
}
.field-dark .axis-label { fill: var(--on-dark-muted); }

.series-line {
  fill: none;
  stroke: var(--series-india);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.series-peer {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.series-area { fill: var(--accent); opacity: 0; }
.field-dark .series-line { stroke: var(--accent-bright); }

/* Annotations: values wear ink, the dot wears the series colour. */
.annot { opacity: 0; transition: opacity 0.45s var(--ease-out); }
.annot.is-on { opacity: 1; }
.annot-dot { fill: var(--accent); r: 3.5; }
.field-dark .annot-dot { fill: var(--accent-bright); }
.annot-rule { stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.field-dark .annot-rule { stroke: var(--rule-dk-mid); }
.annot-val  { font-family: var(--mono); font-size: 14px; fill: var(--ink); }
.field-dark .annot-val { fill: var(--on-dark); }
.annot-note { font-family: var(--sans); font-size: 12.5px; fill: var(--muted); }
.field-dark .annot-note { fill: var(--on-dark-mid); }

/* The hover layer: a crosshair with a value flag. Built by charts.js. */
.figure-hover { position: absolute; inset: 0; }
.hover-rule { stroke: var(--rule-strong); stroke-width: 1; }
.field-dark .hover-rule, .hero-chart .hover-rule { stroke: var(--rule-dk-strong); }
.hover-dot { r: 4; stroke-width: 2; stroke: var(--paper); }
.field-dark .hover-dot, .hero-chart .hover-dot { stroke: var(--navy-deep); }
.figure-tip {
  position: absolute;
  pointer-events: none;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s var(--ease-out), transform 0.15s var(--ease-out);
  z-index: 5;
}
.figure-tip.is-on { opacity: 1; transform: translateY(0); }
.figure-tip .tip-year { color: rgba(244, 240, 230, 0.6); }
.figure-tip .tip-row { display: flex; align-items: center; gap: 8px; }
/* A hairline ring keeps every swatch visible even when its series tone
   matches the tooltip's own ground (the cream line on a cream flag). */
.figure-tip .tip-swatch { width: 10px; height: 2px; box-shadow: 0 0 0 1px rgba(244, 240, 230, 0.45); }
.field-dark .figure-tip .tip-swatch, .hero-chart .figure-tip .tip-swatch { box-shadow: 0 0 0 1px rgba(20, 41, 75, 0.35); }
.field-dark .figure-tip, .hero-chart .figure-tip { background: var(--paper); color: var(--ink); }
.field-dark .figure-tip .tip-year, .hero-chart .figure-tip .tip-year { color: var(--muted); }

/* ---------- The readout ---------- */

.readout { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s4); }
.readout-fig {
  font-family: var(--serif);
  font-size: clamp(52px, 8.5vw, 124px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.readout-fig .unit { font-size: 0.42em; color: var(--muted); letter-spacing: 0; }
.readout-meta {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.readout-year { color: var(--accent); }

/* ---------- Cycle phases ---------- */

.phases {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--rule-mid);
  margin-top: var(--s5);
}
.phase {
  padding: var(--s3) var(--s2) var(--s3) 0;
  border-right: 1px solid var(--rule);
  margin-right: var(--s2);
  opacity: 0.34;
  transition: opacity 0.4s var(--ease-out);
}
.phase:last-child { border-right: 0; margin-right: 0; }
.phase.is-on { opacity: 1; }
.phase-name {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.phase.is-on .phase-name { color: var(--accent); }
.phase-when { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }

/* ---------- The stage: pinned figure, scrolling narrative ---------- */

.stage { position: relative; }
.stage > .container {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s6);
  align-items: start;
}
.stage .phases { grid-column: 1 / -1; }
.stage-sticky { position: sticky; top: calc(var(--header-h-compact) + var(--s4)); z-index: 1; }
.stage-steps { position: relative; z-index: 2; }
.stage-step {
  min-height: 72vh;
  display: flex;
  align-items: center;
  max-width: 42ch;
}
.stage-step p {
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--body-c);
  opacity: 0.25;
  transition: opacity 0.45s var(--ease-out);
}
.stage-step.is-on p { opacity: 1; }

@media (max-width: 1024px) {
  .stage > .container { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .phases { grid-template-columns: repeat(2, 1fr); }
  .phase:nth-child(2n) { border-right: 0; margin-right: 0; }
}
@media (max-width: 720px) {
  .figure-frame { aspect-ratio: 4 / 3; min-height: 240px; }
  .phases { grid-template-columns: 1fr; }
  .phase { border-right: 0; margin-right: 0; border-top: 1px solid var(--rule); padding-block: var(--s2); }
  .stage-sticky { position: static; margin-bottom: var(--s4); }
  .stage-step { min-height: 0; margin-bottom: var(--s4); }
  .stage-step p { opacity: 1; }
}

/* ==========================================================================
   RESEARCH INDEX
   A contents page, not a card grid. The flagship row is larger because the
   work behind it is larger.
   ========================================================================== */

.idx { list-style: none; counter-reset: idx; border-top: 1px solid var(--rule-mid); }
.field-dark .idx { border-color: var(--rule-dk-mid); }

.idx-row {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 200px;
  column-gap: var(--s4);
  row-gap: 6px;
  align-items: baseline;
  padding-block: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--rule);
  transition: background-color 0.25s var(--ease-out);
}
.field-dark .idx-row { border-color: var(--rule-dk); }
.idx-row:hover { background: rgba(20, 41, 75, 0.028); }

.idx-num {
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color 0.25s var(--ease-out);
}
.idx-row:hover .idx-num { color: var(--accent); }

.idx-title {
  font-family: var(--serif);
  font-size: clamp(22px, 2.3vw, 32px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.idx-title a {
  text-decoration: none;
  color: inherit;
}
.idx-title a::after { content: ''; position: absolute; inset: 0; }
.idx-title a:hover { color: var(--accent); transition: color 0.2s var(--ease-out); }

.idx-flag {
  display: inline-block;
  margin-right: 12px;
  padding: 4px 10px 3px;
  vertical-align: middle;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid currentColor;
}

.idx-desc {
  grid-column: 2;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--muted);
  max-width: 58ch;
}
.idx-meta {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.idx-arrow {
  position: absolute;
  right: 0;
  bottom: clamp(24px, 3vw, 36px);
  font-family: var(--sans);
  color: var(--accent);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.idx-row:hover .idx-arrow { opacity: 1; transform: translateX(0); }

.idx-row.is-flagship { padding-block: clamp(32px, 4vw, 52px); }
.idx-row.is-flagship .idx-title { font-size: clamp(28px, 3.4vw, 46px); }

/* Row-level actions (archive page) need to float above the stretched link. */
.idx-actions { position: relative; z-index: 2; margin-top: 10px; display: flex; gap: var(--s3); }

@media (max-width: 860px) {
  .idx-row { grid-template-columns: 44px minmax(0, 1fr); }
  .idx-meta { grid-column: 2; grid-row: auto; flex-direction: row; gap: var(--s2); text-align: left; margin-top: 6px; }
  .idx-arrow { display: none; }
}

/* ==========================================================================
   WHAT THE COVERAGE MISSES
   Editorial rows with a drawn sparkline each. The limit sits beside the
   claim, not under it in small print.
   ========================================================================== */

.uncov { list-style: none; border-top: 1px solid var(--rule-mid); }
.uncov-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px 210px;
  column-gap: var(--s4);
  row-gap: var(--s2);
  align-items: start;
  padding-block: clamp(28px, 3.4vw, 44px);
  border-bottom: 1px solid var(--rule);
}
.uncov-what { grid-column: 1; }
.uncov-name {
  font-family: var(--serif);
  font-size: clamp(20px, 1.9vw, 27px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.5rem;
  max-width: 30ch;
}
.uncov-limit { font-size: var(--t-small); line-height: 1.6; color: var(--muted); max-width: 56ch; }
.uncov-limit b { font-weight: 500; color: var(--body-c); }

.uncov-path {
  margin: var(--s2) 0 0;
  padding-top: var(--s2);
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--body-c);
  max-width: 56ch;
}
.uncov-path .path-key {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

.uncov-move { grid-column: 2; text-align: right; font-variant-numeric: tabular-nums; padding-top: 6px; }
.uncov-from, .uncov-to {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.06em;
  color: var(--muted);
  display: block;
}
.uncov-to { font-size: 21px; letter-spacing: 0; color: var(--ink); margin-top: 0.35rem; }

.uncov-spark { grid-column: 3; height: 52px; padding-top: 10px; }
.uncov-spark svg { width: 100%; height: 100%; overflow: visible; }
.spark-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.uncov-row[data-direction="down"] .spark-line { stroke: var(--rule-strong); }
.spark-end { fill: var(--accent); r: 2.6; }
.uncov-row[data-direction="down"] .spark-end { fill: var(--rule-strong); }

@media (max-width: 1024px) {
  .uncov-row { grid-template-columns: minmax(0, 1fr) 150px; }
  .uncov-spark { grid-column: 1 / -1; grid-row: 2; height: 44px; }
}
@media (max-width: 720px) {
  .uncov-row { grid-template-columns: 1fr; }
  .uncov-move { grid-column: 1; text-align: left; display: flex; gap: var(--s3); align-items: baseline; }
  .uncov-spark { grid-column: 1; grid-row: auto; }
}

/* ==========================================================================
   METHOD — six stages on the dark ground, joined by a drawn rail
   ========================================================================== */

.method { list-style: none; position: relative; }
.method::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--rule-dk);
}
@media (min-width: 900px) { .method::before { display: none; } }
.method-step {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: var(--s3);
  padding-block: clamp(24px, 3vw, 36px);
}
.method-num {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--on-dark-mid);
  background: var(--navy-deep);
  border: 1px solid var(--rule-dk-mid);
  border-radius: 50%;
  transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.method-step.is-on .method-num { color: var(--accent-bright); border-color: var(--accent-bright); }
.method-step h3 {
  font-family: var(--serif);
  font-size: var(--t-h3);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--on-dark);
  margin-bottom: 0.45rem;
  padding-top: 14px;
}
.method-step p { font-size: var(--t-small); line-height: 1.6; color: var(--on-dark-mid); max-width: 58ch; }

@media (min-width: 900px) {
  .method { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); }
  .method-rail { display: none; }
  .method-step { border-top: 1px solid var(--rule-dk); }
  .method-step:nth-child(-n+3) { grid-column: 1; }
  .method-step:nth-child(n+4) { grid-column: 2; }
  .method-step:nth-child(2) { grid-row: 2; }
  .method-step:nth-child(3) { grid-row: 3; }
  .method-step:nth-child(4) { grid-row: 1; }
  .method-step:nth-child(5) { grid-row: 2; }
  .method-step:nth-child(6) { grid-row: 3; }
}

/* ==========================================================================
   CAPABILITIES / SERVICE ROWS
   ========================================================================== */

.svc-rows { list-style: none; border-top: 1px solid var(--rule-mid); }
.field-dark .svc-rows { border-color: var(--rule-dk-mid); }
.svc-row {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 5fr) minmax(0, 5fr) auto;
  column-gap: var(--s4);
  align-items: baseline;
  padding-block: clamp(20px, 2.6vw, 30px);
  border-bottom: 1px solid var(--rule);
  transition: background-color 0.25s var(--ease-out);
}
.field-dark .svc-row { border-color: var(--rule-dk); }
.svc-row:hover { background: rgba(20, 41, 75, 0.028); }
.svc-num {
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.field-dark .svc-num { color: var(--on-dark-muted); }
.svc-row h3 {
  font-family: var(--serif);
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight: 400;
  color: var(--ink);
}
.svc-row h3 a { text-decoration: none; color: inherit; }
.svc-row h3 a::after { content: ''; position: absolute; inset: 0; }
.svc-row h3 a:hover { color: var(--accent); }
.svc-row > p { font-size: var(--t-small); line-height: 1.55; color: var(--muted); max-width: 46ch; }
.svc-row .text-link { position: relative; z-index: 2; }

@media (max-width: 900px) {
  .svc-row { grid-template-columns: 44px minmax(0, 1fr); row-gap: 6px; }
  .svc-row > p { grid-column: 2; }
  .svc-row .text-link { grid-column: 2; }
}

/* ---------- Terms ---------- */

.terms-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule-mid);
}
.term {
  padding: var(--s4) var(--s4) var(--s4) 0;
  border-right: 1px solid var(--rule);
  margin-right: var(--s4);
}
.term:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.term-num { font-family: var(--mono); font-size: var(--t-meta); color: var(--muted); letter-spacing: 0.1em; }
.term h3 {
  font-family: var(--serif);
  font-size: var(--t-h3);
  font-weight: 400;
  color: var(--ink);
  margin: 0.7rem 0 0.5rem;
}
.term p { font-size: var(--t-small); line-height: 1.6; color: var(--muted); }

@media (max-width: 1024px) {
  .terms-grid { grid-template-columns: 1fr 1fr; }
  .term { border-bottom: 1px solid var(--rule); }
  .term:nth-child(2n) { border-right: 0; margin-right: 0; }
  .term:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 640px) {
  .terms-grid { grid-template-columns: 1fr; }
  .term { border-right: 0; margin-right: 0; padding-right: 0; }
  .term:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .term:last-child { border-bottom: 0; }
}

/* ==========================================================================
   THE RESEARCHER
   ========================================================================== */

.who-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  gap: var(--s4) var(--s6);
  align-items: start;
}

/* The byline column. A contributor entry as a publication would set one:
   who wrote this, in what capacity, from where. It replaced a portrait,
   so it has to hold the left column on its own rather than read as the
   caption of a missing picture. */
.who-byline { padding-top: 8px; border-top: 1px solid var(--rule-mid); }
.who-byline .mono-label { display: block; padding-top: var(--s2); }
.byline-name {
  margin-top: var(--s2);
  font-family: var(--serif);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.byline-role {
  margin-top: 0.6rem;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--muted);
}

.who-body .statement-lg { margin-bottom: 0.8em; }
.who-body > p:not(.statement-lg) { max-width: 60ch; margin-top: 1.1em; }
.who-body .signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-lede);
  color: var(--ink);
  border-left: 2px solid var(--accent);
  padding-left: var(--s3);
  margin-top: 1.6em !important;
}

@media (max-width: 900px) {
  .who-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
}

/* ==========================================================================
   CLOSING + CTA — the last dark field
   ========================================================================== */

.closing {
  background: var(--navy-abyss);
  color: var(--on-dark);
  padding-block: clamp(88px, 11vw, 160px) 0;
}
.closing blockquote {
  font-family: var(--serif);
  font-size: var(--t-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 17ch;
  color: var(--on-dark);
}
.closing .attrib {
  margin-top: var(--s3);
  max-width: 52ch;
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--on-dark-mid);
}

.cta-band {
  background: var(--navy-abyss);
  color: var(--on-dark);
  padding-block: clamp(72px, 9vw, 128px);
}
.cta-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  padding-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--rule-dk);
}
.closing + .cta-band { padding-top: clamp(48px, 6vw, 80px); }
.cta-band h2 {
  font-family: var(--serif);
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 18ch;
}
.cta-band p { margin-top: var(--s2); max-width: 46ch; font-size: var(--t-small); line-height: 1.6; color: var(--on-dark-mid); }

/* Light pages get a light-to-dark seam: the band always sits on abyss. */

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  background: var(--navy-abyss);
  color: var(--on-dark-mid);
  border-top: 1px solid var(--rule-dk);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(4, minmax(0, 2fr));
  gap: var(--s5) var(--s4);
  padding-block: clamp(56px, 7vw, 88px) clamp(40px, 5vw, 64px);
}
.footer-brand .wordmark { color: var(--on-dark); margin-bottom: var(--s3); }
.footer-line { font-size: var(--t-small); line-height: 1.7; color: var(--on-dark-muted); }
.footer-line a { color: var(--on-dark-mid); text-decoration: none; }
.footer-line a:hover { color: var(--on-dark); }

.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-head {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin-bottom: 6px;
}
.footer-col a {
  font-size: var(--t-small);
  color: var(--on-dark-mid);
  text-decoration: none;
  width: fit-content;
  transition: color 0.15s var(--ease-out);
}
.footer-col a:hover { color: var(--on-dark); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  padding-block: var(--s3) var(--s4);
  border-top: 1px solid var(--rule-dk);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--on-dark-muted);
}
.footer-bottom p { max-width: 72ch; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   INTERIOR PAGES
   ========================================================================== */

.page-head {
  padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--rule);
}
.page-head h1 {
  font-family: var(--serif);
  font-size: var(--t-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 22ch;
}
.page-lede {
  margin-top: var(--s3);
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--muted);
  max-width: 58ch;
}
.page-lede a { color: var(--ink); }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--s4);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs span[aria-current] { color: var(--ink); }

/* Two figures set side by side: the data desk moment on light pages. */
.fig-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5) var(--s6);
  align-items: start;
}
.fig-duo .figure { min-width: 0; }
@media (max-width: 1024px) { .fig-duo { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Filters (research archive) ---------- */

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--s3);
  margin-bottom: var(--s4);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--rule-mid);
}
.filter-btn {
  position: relative;
  background: none;
  border: 0;
  padding: 8px 2px;
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.18s var(--ease-out);
}
.filter-btn::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: -1px;
  height: 2px;
  background: var(--ink);
  transition: right 0.25s var(--ease-out);
}
.filter-btn:hover { color: var(--ink); }
.filter-btn[aria-pressed="true"] { color: var(--ink); }
.filter-btn[aria-pressed="true"]::after { right: 0; }
.idx-row.is-hidden { display: none; }

/* ---------- Principles / two-up and three-up notes ---------- */

.principles {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 var(--s5);
  border-top: 1px solid var(--rule-mid);
}
.field-dark .principles { border-color: var(--rule-dk-mid); }
.principle { padding-block: var(--s4); border-bottom: 1px solid var(--rule); }
.field-dark .principle { border-color: var(--rule-dk); }
.principle h3 {
  font-family: var(--serif);
  font-size: var(--t-h3);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.principle p { font-size: var(--t-small); line-height: 1.6; color: var(--muted); }
.field-dark .principle p { color: var(--on-dark-mid); }

/* ---------- Service blocks (services page) ---------- */

.service-block { padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid var(--rule-mid); }
.service-block:first-of-type { border-top: 0; padding-top: 0; }
.service-block-head { display: flex; align-items: baseline; gap: var(--s3); }
.service-block-head .svc-num { font-size: var(--t-small); }
.service-block-head h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.service-q {
  margin: var(--s2) 0 var(--s4);
  font-size: var(--t-lede);
  color: var(--muted);
  max-width: 56ch;
}
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4) var(--s5);
}
.svc-part .part-label {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.field-dark .svc-part .part-label { color: var(--accent-bright); }
.svc-part p, .svc-part li { font-size: var(--t-small); line-height: 1.65; color: var(--body-c); }
.field-dark .svc-part p, .field-dark .svc-part li { color: var(--on-dark-mid); }
.svc-part ul { list-style: none; }
.svc-part li { padding-left: 18px; position: relative; margin-bottom: 0.4em; }
.svc-part li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 1px;
  background: var(--accent);
}
.field-dark .svc-part li::before { background: var(--accent-bright); }

@media (max-width: 720px) { .svc-grid { grid-template-columns: 1fr; } }

/* In-page anchor rail for long pages. */
.anchor-rail {
  position: sticky;
  top: calc(var(--header-h-compact) + var(--s3));
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.anchor-rail a {
  font-size: var(--t-small);
  color: var(--muted);
  text-decoration: none;
  padding: 7px 0 7px 16px;
  border-left: 1px solid var(--rule);
  transition: color 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
}
.anchor-rail a:hover { color: var(--ink); }
.anchor-rail a.is-active { color: var(--ink); border-left-color: var(--ink); }
.rail-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
}
@media (max-width: 1024px) {
  .rail-layout { grid-template-columns: 1fr; }
  .anchor-rail { display: none; }
}

/* ---------- Steps (consulting page) ---------- */

.steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4) var(--s4); border-top: 1px solid var(--rule-mid); padding-top: var(--s4); }
.field-dark .steps { border-color: var(--rule-dk-mid); }
.steps-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step-num { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.1em; color: var(--accent); }
.field-dark .step-num { color: var(--accent-bright); }
.step h3 {
  font-family: var(--serif);
  font-size: var(--t-h3);
  font-weight: 400;
  color: var(--ink);
  margin: 0.6rem 0 0.5rem;
}
.step p { font-size: var(--t-small); line-height: 1.6; color: var(--muted); }
.field-dark .step p { color: var(--on-dark-mid); }
@media (max-width: 1024px) { .steps, .steps-6 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .steps, .steps-6 { grid-template-columns: 1fr; } }

/* ---------- Question list (consulting) ---------- */

.question-list { list-style: none; border-top: 1px solid var(--rule-mid); max-width: 880px; }
.question-list li { border-bottom: 1px solid var(--rule); }
.question-list p {
  font-family: var(--serif);
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  padding: clamp(18px, 2.4vw, 28px) 0;
  max-width: 34ch;
}

/* ---------- Notes (insights) ---------- */

.note {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--s2) var(--s5);
  padding-block: clamp(36px, 4.5vw, 56px);
  border-bottom: 1px solid var(--rule);
}
.note:first-of-type { padding-top: 0; }
.note-date {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 10px;
}
.note h2 {
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 24ch;
}
.note-body { margin-top: var(--s3); max-width: 62ch; }
.note-body p { font-size: var(--t-body); line-height: 1.65; color: var(--body-c); }
.note-body p + p { margin-top: 1em; }
.note-body a { color: var(--ink); }
@media (max-width: 860px) { .note { grid-template-columns: 1fr; gap: var(--s1); } .note-date { padding-top: 0; } }

/* ---------- Article (paper page) ---------- */

.progress-bar {
  position: fixed;
  top: 0; left: 0;
  z-index: 110;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
}

.article-head { max-width: 880px; }
.article-theme {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s2);
}
.article-head h1 {
  font-family: var(--serif);
  font-size: clamp(38px, 5.4vw, 76px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.article-subtitle {
  margin-top: var(--s3);
  font-family: var(--serif);
  font-size: var(--t-lede);
  font-style: italic;
  color: var(--muted);
  max-width: 48ch;
}
.article-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--s3);
  margin-top: var(--s3);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.article-byline a { color: var(--ink); text-decoration: none; }

.article-col { max-width: 760px; }
.exec-summary {
  padding: var(--s4);
  background: var(--paper-dn);
  border-left: 2px solid var(--ink);
  margin-bottom: var(--s5);
}
.exec-summary .part-label {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--s2);
}
.exec-summary ul { list-style: none; }
.exec-summary li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 0.6em;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--body-c);
}
.exec-summary li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.65em;
  width: 10px; height: 1px;
  background: var(--accent);
}

.article-body h2 {
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 1.9em 0 0.65em;
}
.article-body > h2:first-child { margin-top: 0; }
.article-body p {
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--body-c);
}
.article-body p + p { margin-top: 1.1em; }

.article-figure {
  margin: var(--s5) 0;
  padding: var(--s4) 0;
  border-top: 1px solid var(--rule-mid);
  border-bottom: 1px solid var(--rule);
}
.chart-caption {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--s3);
}
.chart-rows { display: flex; flex-direction: column; gap: 14px; }
.chart-row { display: grid; grid-template-columns: 92px 1fr 44px; align-items: center; gap: var(--s2); }
.chart-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--muted); }
.chart-bar { height: 18px; background: var(--rule-mid); width: var(--w, 0%); transform-origin: left; }
.chart-row.is-india .chart-bar { background: var(--accent); }
.chart-value { font-family: var(--mono); font-size: var(--t-small); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.chart-source { margin-top: var(--s3); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; color: var(--muted); }

.article-sources { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--rule-mid); }
.article-sources h2 { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); font-weight: 400; margin-bottom: var(--s3); }
.article-sources ul { list-style: none; }
.article-sources li { font-size: var(--t-small); line-height: 1.6; color: var(--muted); padding: 10px 0; border-bottom: 1px solid var(--rule); }

.author-card {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  margin-top: var(--s5);
  padding: var(--s4);
  background: var(--paper-dn);
}
.author-card .mark { color: var(--ink); flex: none; padding-top: 4px; }
.author-card h2 { font-family: var(--serif); font-size: var(--t-h3); font-weight: 400; color: var(--ink); margin-bottom: 0.4rem; }
.author-card p { font-size: var(--t-small); line-height: 1.6; color: var(--muted); }
.author-card p + p { margin-top: 0.7em; }

/* ---------- Forms ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: var(--s5) var(--s6);
  align-items: start;
}
.contact-intro p { max-width: 44ch; }
.contact-intro p + p { margin-top: 1em; }
.contact-alt { font-size: var(--t-small); color: var(--muted); }
.contact-alt a { color: var(--ink); }

.next-steps { list-style: none; margin-top: var(--s4); border-top: 1px solid var(--rule-mid); }
.next-steps li {
  display: flex;
  gap: var(--s3);
  align-items: baseline;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--body-c);
}

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--s3); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s3); }
.field label {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.field .optional { color: var(--muted); letter-spacing: 0.06em; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 14px;
  background: var(--paper-up);
  border: 1px solid var(--rule-mid);
  border-radius: 0;
  font-family: var(--sans);
  font-size: 15.5px;
  color: var(--body-c);
  transition: border-color 0.18s var(--ease-out), background-color 0.18s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--paper-up);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 0.7; }
.form-confirm {
  margin-top: var(--s3);
  padding: var(--s2) var(--s3);
  border-left: 2px solid var(--accent);
  background: var(--paper-dn);
  font-size: var(--t-small);
  color: var(--body-c);
}
.field-dark .form-confirm { background: rgba(244, 240, 230, 0.06); color: var(--on-dark-mid); border-color: var(--accent-bright); }
.field-dark .field label { color: var(--on-dark); }
.field-dark .field input {
  background: rgba(244, 240, 230, 0.05);
  border-color: var(--rule-dk-mid);
  color: var(--on-dark);
}
.field-dark .field input:focus { border-color: var(--on-dark); background: rgba(244, 240, 230, 0.08); }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}

/* ---------- 404 ---------- */

.notfound { min-height: 55vh; display: flex; align-items: center; }
.notfound h1 {
  font-family: var(--serif);
  font-size: var(--t-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.notfound p { margin: var(--s3) 0 var(--s4); color: var(--muted); max-width: 48ch; }

/* On the dark grounds every series steps up in lightness; same fixed order.
   Values chosen against #0E1D38 and checked for adjacent-pair separation. */
.field-dark, .field-abyss, .hero-dark {
  /* Same ladder, re-stepped for the navy ground. All four clear 3:1 here;
     worst adjacent-pair ΔE 19.2 simulated, 21.4 unsimulated. */
  --series-india: var(--accent-bright);
  --series-peer:   #F4F0E6;   /* China: the cream line */
  --series-peer-2: #8FB3E8;   /* US: light steel */
  --series-peer-3: #54719F;   /* Euro area: deep steel */
  --grid-line: rgba(244, 240, 230, 0.10);
  --zero-line: rgba(244, 240, 230, 0.30);
}

/* ==========================================================================
   HERO STRIP SPARKLINES
   Each snapshot cell can carry the shape of its own series: the same
   World Bank observations the value comes from, drawn small.
   ========================================================================== */

.strip-spark { height: 26px; margin-top: 12px; }
.strip-spark svg { width: 100%; height: 100%; overflow: visible; display: block; }
.strip-spark .spark-line { stroke: var(--accent-bright); stroke-width: 1.4; }
.strip-spark .spark-end { fill: var(--accent-bright); }

/* ==========================================================================
   PILLARS — the two working modes set side by side (research / consulting)
   ========================================================================== */

.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--rule-mid);
}
.pillar {
  padding: var(--s4) var(--s5) var(--s4) 0;
  border-right: 1px solid var(--rule);
}
.pillar + .pillar { padding-left: var(--s5); border-right: 0; padding-right: 0; }
.pillar-kicker {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.pillar h3 {
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: var(--s2) 0 var(--s2);
}
.pillar .pillar-claim {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-lede);
  color: var(--accent);
  margin-bottom: var(--s2);
}
.pillar > p { font-size: var(--t-small); line-height: 1.6; color: var(--body-c); max-width: 48ch; }
.pillar ul { list-style: none; margin: var(--s3) 0; }
.pillar li {
  position: relative;
  padding: 8px 0 8px 18px;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
}
.pillar li::before {
  content: '';
  position: absolute;
  left: 0; top: 1.15em;
  width: 8px; height: 1px;
  background: var(--accent);
}

@media (max-width: 860px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--rule-mid); }
  .pillar + .pillar { padding-left: 0; border-bottom: 0; }
}

/* ==========================================================================
   FLAG CHIP — a bordered mono label naming a status or a franchise
   (idx-flag generalised so it can stand outside a title)
   ========================================================================== */

.flag-chip {
  display: inline-block;
  padding: 4px 10px 3px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid currentColor;
}
.field-dark .flag-chip, .field-abyss .flag-chip, .hero-dark .flag-chip { color: var(--accent-bright); }
a.flag-chip { text-decoration: none; }

/* ==========================================================================
   THE DESK — the flagship retainer, presented on the dark ground
   ========================================================================== */

.desk-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--s5) var(--s6);
  align-items: start;
}
.desk-claim {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 50px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--on-dark);
  text-wrap: balance;
}
.desk-claim em { font-style: italic; color: var(--accent-bright); }
.desk-body > p { font-size: var(--t-small); line-height: 1.65; color: var(--on-dark-mid); max-width: 56ch; }
.desk-body > p + p { margin-top: 1em; }
.desk-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3) var(--s4); margin-top: var(--s4); }

.desk-mods { list-style: none; border-top: 1px solid var(--rule-dk-mid); }
.desk-mod {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: var(--s3);
  align-items: baseline;
  padding-block: 14px;
  border-bottom: 1px solid var(--rule-dk);
}
.desk-mod .svc-num { color: var(--on-dark-muted); }
.desk-mod h3 {
  font-family: var(--serif);
  font-size: 18.5px;
  font-weight: 400;
  color: var(--on-dark);
}
.desk-mod p {
  grid-column: 2;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--on-dark-muted);
  max-width: 52ch;
  margin-top: 3px;
}

@media (max-width: 1024px) {
  .desk-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   DASHBOARD — the comparative data desk
   Lives on the dark ground. Controls are bordered mono chips; the figure
   inherits the standard figure system; the ranking is a real table.
   ========================================================================== */

.dash-tabs {
  display: inline-flex;
  border: 1px solid var(--rule-dk-mid);
}
.dash-tab {
  padding: 11px 20px;
  background: none;
  border: 0;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-mid);
  cursor: pointer;
  transition: background-color 0.18s var(--ease-out), color 0.18s var(--ease-out);
}
.dash-tab + .dash-tab { border-left: 1px solid var(--rule-dk-mid); }
.dash-tab[aria-selected="true"] { background: var(--paper); color: var(--ink); }

.dash-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin: var(--s4) 0 var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule-dk);
}
.dash-chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-chiprow .chip-caption {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  align-self: center;
  margin-right: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  background: none;
  border: 1px solid var(--rule-dk);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-mid);
  cursor: pointer;
  transition: border-color 0.15s var(--ease-out), color 0.15s var(--ease-out), background-color 0.15s var(--ease-out);
}
.chip:hover { border-color: var(--rule-dk-strong); color: var(--on-dark); }
.chip[aria-pressed="true"] {
  border-color: var(--rule-dk-strong);
  background: rgba(244, 240, 230, 0.08);
  color: var(--on-dark);
}
.chip .chip-swatch { width: 12px; height: 2px; flex: none; background: transparent; }
.chip[aria-pressed="true"] .chip-swatch { background: var(--sw, var(--on-dark)); }
.chip[disabled] { opacity: 0.4; cursor: not-allowed; }

.dash-layout {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--s4) var(--s5);
  align-items: start;
}
.dash-fig .figure-frame { aspect-ratio: 16 / 8; min-height: 300px; }

.dash-reads { list-style: none; border-top: 1px solid var(--rule-dk-mid); }
.dash-read {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-dk);
}
.dash-read .read-swatch { width: 14px; height: 2px; background: var(--sw, var(--on-dark)); }
.dash-read .read-name {
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--on-dark-mid);
}
.dash-read .read-val {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--on-dark);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.dash-read .read-yr {
  grid-column: 3;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--on-dark-muted);
  text-align: right;
}

.dash-side .figure-source { margin-top: var(--s3); }
.dash-cta {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule-dk);
  font-size: var(--t-small);
  color: var(--on-dark-mid);
  max-width: 40ch;
}
.dash-cta .text-link { margin-top: 8px; }

/* ---------- The ranking table ---------- */

.rank-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: var(--s4); }
.rank-table {
  width: 100%;
  min-width: 780px;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.rank-table caption {
  text-align: left;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  padding-bottom: var(--s3);
}
.rank-table th, .rank-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule-dk);
  text-align: right;
  vertical-align: top;
}
.rank-table thead th {
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  border-bottom: 1px solid var(--rule-dk-mid);
}
.rank-table tbody th {
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 400;
  color: var(--on-dark-mid);
  text-align: left;
}
.rank-table tbody th .row-unit {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin-top: 2px;
}
/* First column stays put while the peers scroll on a narrow screen. */
.rank-table thead th:first-child,
.rank-table tbody th {
  position: sticky;
  left: 0;
  background: var(--navy-deep);
  z-index: 1;
}
.rank-table .cell-val { font-family: var(--mono); font-size: 14px; color: var(--on-dark); }
.rank-table .cell-yr {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--on-dark-muted);
  margin-top: 2px;
}
.rank-table .is-na .cell-val { color: var(--on-dark-muted); }
.rank-table .is-india { background: rgba(88, 190, 150, 0.07); }
.rank-table thead .is-india { color: var(--accent-bright); }
.rank-table td .rank-badge {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-top: 3px;
}

/* ---------- Source drawer ---------- */

.src-drawer { border-top: 1px solid var(--rule-dk); margin-top: var(--s4); }
.src-drawer summary {
  padding: 14px 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  cursor: pointer;
  list-style: none;
  transition: color 0.15s var(--ease-out);
}
.src-drawer summary::-webkit-details-marker { display: none; }
.src-drawer summary::before { content: '+ '; color: var(--accent-bright); }
.src-drawer[open] summary::before { content: '\2212 '; }
.src-drawer summary:hover { color: var(--on-dark); }
.src-drawer .drawer-body {
  padding: 0 0 var(--s3);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--on-dark-muted);
  max-width: 88ch;
}
.src-drawer .drawer-body p + p { margin-top: 0.8em; }

@media (max-width: 1024px) {
  .dash-layout { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .dash-fig .figure-frame { aspect-ratio: 4 / 3; min-height: 260px; }
  .dash-controls { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   SELECTED WORK — engagement rows, stated plainly
   ========================================================================== */

.work-rows { list-style: none; border-top: 1px solid var(--rule-mid); }
.field-dark .work-rows { border-color: var(--rule-dk-mid); }
.work-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 200px;
  column-gap: var(--s4);
  row-gap: 8px;
  align-items: baseline;
  padding-block: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--rule);
}
.work-client {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.6;
}
.work-q {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 26ch;
}
.work-q a { color: inherit; text-decoration: none; }
.work-q a:hover { color: var(--accent); }
.work-desc {
  grid-column: 2;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--muted);
  max-width: 56ch;
}
.work-tags {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 900px) {
  .work-row { grid-template-columns: 1fr; }
  .work-tags { grid-column: 1; grid-row: auto; flex-direction: row; gap: var(--s2); text-align: left; }
}

/* ==========================================================================
   PENDING PUBLICATION — the shell a paper occupies until the document lands
   ========================================================================== */

.pending {
  margin: var(--s4) 0;
  padding: var(--s4);
  background: var(--paper-dn);
  border-left: 2px solid var(--ink);
}
.pending .part-label {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--s2);
}
.pending p { font-size: var(--t-small); line-height: 1.65; color: var(--body-c); max-width: 60ch; }
.pending p + p { margin-top: 0.8em; }
.pending .text-link { margin-top: var(--s2); }

/* ==========================================================================
   SHARED EDITORIAL FRAGMENTS
   The accent-dash list (the exec-summary bullet, freed from its container),
   the two-column question grid, and the emerald-italic emphasis on light
   grounds — each existed as an inline improvisation before it was a class.
   ========================================================================== */

.dash-list { list-style: none; border-top: 1px solid var(--rule-mid); }
.dash-list li {
  position: relative;
  padding: 12px 0 12px 20px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--body-c);
}
.dash-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 1.3em;
  width: 10px; height: 1px;
  background: var(--accent);
}

.question-grid {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  column-gap: var(--s5);
}

.statement-lg em, .section-title em { font-style: italic; color: var(--accent); }
.field-dark .statement-lg em, .field-dark .section-title em,
.field-abyss .statement-lg em, .field-abyss .section-title em { color: var(--accent-bright); }

/* ==========================================================================
   SERIES REGISTER — the static source table on the data desk page.
   Works without JavaScript; every series names its source ID in print.
   ========================================================================== */

.series-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.series-table th, .series-table td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.series-table thead th {
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule-mid);
}
.series-table td { font-size: var(--t-small); color: var(--body-c); }
.series-table td.mono, .series-table .mono {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ==========================================================================
   METHOD NOTE — the comparison-set principle, set apart on the dark ground
   ========================================================================== */

.method-note {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule-dk-mid);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--s3) var(--s6);
  align-items: start;
}
.method-note h3 {
  font-family: var(--serif);
  font-size: var(--t-statement);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--on-dark);
}
.method-note h3 em { font-style: italic; color: var(--accent-bright); }
.method-note p { font-size: var(--t-small); line-height: 1.65; color: var(--on-dark-mid); max-width: 58ch; }
.method-note p + p { margin-top: 1em; }
@media (max-width: 900px) { .method-note { grid-template-columns: 1fr; } }

/* Without JS the masthead must not sit fixed over a page it cannot react
   to: it simply scrolls with the page. JS upgrades it to fixed. */
.site-header { position: absolute; }
html.js .site-header { position: fixed; }

/* ==========================================================================
   MOTION STATES
   Initial hidden states exist ONLY under html.anim, which the loader sets
   when JS is running and the reader has not asked for reduced motion. So
   no-JS and reduced-motion readers get the finished page, immediately.

   These are START states, and .is-in retires them. That qualifier is not
   cosmetic. A reveal ends by clearing the inline transform GSAP wrote, and
   if the rule below still matched at that moment the element would snap
   back down to its start offset the instant it finished arriving — which
   reads, while scrolling, as text jumping. app.js adds .is-in before the
   tween runs, so by the time the props are cleared there is nothing left
   to fall back to: no inline transform, no CSS transform, a clean box.
   ========================================================================== */

html.anim .a-rise:not(.is-in) { opacity: 0; transform: translateY(18px); }
html.anim .a-fade:not(.is-in) { opacity: 0; }
html.anim .a-line:not(.is-in) { transform: scaleX(0); transform-origin: left; }
html.anim .a-hero-el { opacity: 0; transform: translateY(14px); }
/* The plate is never hidden at rest. It is the largest paint on the page,
   so it renders as soon as it arrives and only settles in scale. Nothing
   about the hero's main image depends on a script finishing. */

/* SplitText lines animate inside masked line wrappers. */
.split-mask .line-mask { overflow: hidden; }

/* ==========================================================================
   SMOOTH SCROLL
   Lenis 1.3 (vendored, same-origin) interpolates the real document scroll
   — it does not transform a wrapper — so position: fixed, position: sticky
   and every viewport measurement on this page keep working untouched.
   These are the library's own required rules, inlined rather than fetched
   as a sixth stylesheet. Lenis puts .lenis on <html> only once it runs, so
   nothing here applies to a reader scrolling natively.
   ========================================================================== */

html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* The ranking table scrolls sideways inside the page. Lenis is vertical
   only and never consumes deltaX, so the sideways gesture stays native;
   containing the overscroll stops reaching its end from turning into a
   browser back-swipe. It is deliberately NOT [data-lenis-prevent]: that
   would make vertical wheel over the table scroll nothing at all. */
.rank-scroll { overscroll-behavior-x: contain; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .stage-sticky { position: static; }
  .stage-step { min-height: 0; margin-bottom: var(--s4); }
  .stage-step p, .phase, .annot { opacity: 1 !important; }
}

/* ---------- Data table (comparative exhibits rebuilt as semantic HTML) ---------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
  line-height: 1.5;
  min-width: 640px;
}
.data-table caption { text-align: left; }
.data-table thead th {
  text-align: left;
  vertical-align: bottom;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--ink);
  padding: 0 var(--s3) 10px 0;
  border-bottom: 2px solid var(--rule-strong);
}
.data-table .th-sub {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--muted);
  margin-top: 3px;
}
.data-table tbody th[scope="row"] {
  text-align: left;
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
}
.data-table tbody th, .data-table td {
  padding: 12px var(--s3) 12px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  color: var(--body-c);
}
.data-table td:nth-child(2), .data-table td:nth-child(3) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table td:last-child { white-space: normal; min-width: 22ch; }
.field-dark .data-table thead th, .field-dn .data-table thead th { color: var(--ink); }

/* ==========================================================================
   V9 — THE EMERGING-MARKETS BUILD
   Everything above is production's system, carried forward unchanged: the
   same tokens, the same grounds, the same type ladder. Everything below
   extends it for the two-desk practice — and closes the one gap production
   left open: components that were only ever set on paper now know how to
   sit on the dark grounds without disappearing into them.
   ========================================================================== */

/* ---------- ON-DARK GUARANTEE ----------
   Every class that reads in ink, body or muted on paper is re-inked here for
   the three dark grounds. Specificity (0,2,x) beats every paper rule above,
   and the group lives in one place so no section ever hardcodes a colour. */

.field-dark .statement-lg, .field-abyss .statement-lg, .hero-dark .statement-lg,
.field-dark .page-head h1, .field-abyss .page-head h1,
.field-dark .pillar h3, .field-abyss .pillar h3,
.field-dark .principle h3, .field-abyss .principle h3,
.field-dark .term h3, .field-abyss .term h3,
.field-dark .step h3, .field-abyss .step h3,
.field-dark .svc-row h3, .field-abyss .svc-row h3,
.field-dark .idx-title, .field-abyss .idx-title,
.field-dark .work-q, .field-abyss .work-q,
.field-dark .uncov-name, .field-abyss .uncov-name,
.field-dark .question-list p, .field-abyss .question-list p,
.field-dark .byline-name, .field-abyss .byline-name,
.field-dark .service-block-head h2, .field-abyss .service-block-head h2,
.field-dark .note h2, .field-abyss .note h2,
.field-dark .readout-fig, .field-abyss .readout-fig,
.field-dark .who-body .signature, .field-abyss .who-body .signature,
.field-dark .exec-summary .part-label, .field-abyss .exec-summary .part-label,
.field-dark .article-head h1, .field-abyss .article-head h1,
.field-dark .data-table tbody th[scope="row"], .field-abyss .data-table tbody th[scope="row"],
.field-dark .data-table thead th, .field-abyss .data-table thead th,
.field-dark .crumbs span[aria-current], .field-abyss .crumbs span[aria-current],
.field-dark .field label, .field-abyss .field label,
.field-dark .notfound h1, .field-abyss .notfound h1,
.field-dark .prose h2, .field-abyss .prose h2 { color: var(--on-dark); }

.field-dark .intro-body > p:not(.statement-lg), .field-abyss .intro-body > p:not(.statement-lg),
.field-dark .pillar > p, .field-abyss .pillar > p,
.field-dark .who-body > p:not(.statement-lg), .field-abyss .who-body > p:not(.statement-lg),
.field-dark .prose, .field-abyss .prose,
.field-dark .prose p, .field-abyss .prose p,
.field-dark .contact-intro p, .field-abyss .contact-intro p,
.field-dark .next-steps li, .field-abyss .next-steps li,
.field-dark .data-table tbody th, .field-abyss .data-table tbody th,
.field-dark .data-table td, .field-abyss .data-table td,
.field-dark .note-body p, .field-abyss .note-body p,
.field-dark .article-body p, .field-abyss .article-body p,
.field-dark .stage-step p, .field-abyss .stage-step p,
.field-dark .uncov-path, .field-abyss .uncov-path,
.field-dark .dash-list li, .field-abyss .dash-list li,
.field-dark .exec-summary li, .field-abyss .exec-summary li,
.field-dark .form-confirm, .field-abyss .form-confirm { color: var(--on-dark-mid); }

.field-dark .pillar li, .field-abyss .pillar li,
.field-dark .pillar-kicker, .field-abyss .pillar-kicker,
.field-dark .term p, .field-abyss .term p,
.field-dark .term-num, .field-abyss .term-num,
.field-dark .svc-row > p, .field-abyss .svc-row > p,
.field-dark .idx-desc, .field-abyss .idx-desc,
.field-dark .idx-meta, .field-abyss .idx-meta,
.field-dark .idx-num, .field-abyss .idx-num,
.field-dark .work-desc, .field-abyss .work-desc,
.field-dark .work-tags, .field-abyss .work-tags,
.field-dark .work-client, .field-abyss .work-client,
.field-dark .uncov-limit, .field-abyss .uncov-limit,
.field-dark .byline-role, .field-abyss .byline-role,
.field-dark .service-q, .field-abyss .service-q,
.field-dark .note-date, .field-abyss .note-date,
.field-dark .readout-meta, .field-abyss .readout-meta,
.field-dark .page-lede, .field-abyss .page-lede,
.field-dark .crumbs, .field-abyss .crumbs,
.field-dark .crumbs a, .field-abyss .crumbs a,
.field-dark .updated, .field-abyss .updated,
.field-dark .contact-alt, .field-abyss .contact-alt,
.field-dark .article-subtitle, .field-abyss .article-subtitle,
.field-dark .article-byline, .field-abyss .article-byline,
.field-dark .data-table .th-sub, .field-abyss .data-table .th-sub,
.field-dark .article-sources li, .field-abyss .article-sources li,
.field-dark .filter-btn, .field-abyss .filter-btn,
.field-dark .anchor-rail a, .field-abyss .anchor-rail a,
.field-dark .notfound p, .field-abyss .notfound p { color: var(--on-dark-muted); }

/* Accent marks step up to the bright emerald on the dark grounds. */
.field-dark .pillar-claim, .field-abyss .pillar-claim,
.field-dark .readout-year, .field-abyss .readout-year,
.field-dark .article-theme, .field-abyss .article-theme,
.field-dark .uncov-path .path-key, .field-abyss .uncov-path .path-key,
.field-dark .idx-flag, .field-abyss .idx-flag,
.field-dark .idx-row:hover .idx-num, .field-abyss .idx-row:hover .idx-num,
.field-dark .idx-title a:hover, .field-abyss .idx-title a:hover,
.field-dark .svc-row h3 a:hover, .field-abyss .svc-row h3 a:hover,
.field-dark .work-q a:hover, .field-abyss .work-q a:hover,
.field-dark .idx-arrow, .field-abyss .idx-arrow,
.field-dark .anchor-rail a.is-active, .field-abyss .anchor-rail a.is-active,
.field-dark .filter-btn:hover, .field-abyss .filter-btn:hover,
.field-dark .filter-btn[aria-pressed="true"], .field-abyss .filter-btn[aria-pressed="true"] { color: var(--accent-bright); }
.field-dark .filter-btn::after, .field-abyss .filter-btn::after { background: var(--accent-bright); }
.field-dark .anchor-rail a, .field-abyss .anchor-rail a { border-left-color: var(--rule-dk); }
.field-dark .anchor-rail a.is-active, .field-abyss .anchor-rail a.is-active { border-left-color: var(--accent-bright); }
.field-dark .who-body .signature, .field-abyss .who-body .signature { border-left-color: var(--accent-bright); }
.field-dark .dash-list li::before, .field-abyss .dash-list li::before,
.field-dark .pillar li::before, .field-abyss .pillar li::before,
.field-dark .exec-summary li::before, .field-abyss .exec-summary li::before { background: var(--accent-bright); }
.field-dark .page-lede a, .field-abyss .page-lede a,
.field-dark .note-body a, .field-abyss .note-body a,
.field-dark .contact-alt a, .field-abyss .contact-alt a { color: var(--on-dark); }

/* Rules and hover washes take the cream-alpha register on dark. */
.field-dark .pillars, .field-abyss .pillars,
.field-dark .terms-grid, .field-abyss .terms-grid,
.field-dark .question-list, .field-abyss .question-list,
.field-dark .uncov, .field-abyss .uncov,
.field-dark .dash-list, .field-abyss .dash-list,
.field-dark .work-rows, .field-abyss .work-rows,
.field-dark .filter-row, .field-abyss .filter-row,
.field-dark .service-block, .field-abyss .service-block,
.field-dark .article-figure, .field-abyss .article-figure,
.field-dark .article-sources, .field-abyss .article-sources,
.field-dark .who-byline, .field-abyss .who-byline,
.field-dark .next-steps, .field-abyss .next-steps,
.field-dark .page-head, .field-abyss .page-head,
.field-dark .data-table thead th, .field-abyss .data-table thead th { border-color: var(--rule-dk-mid); }
.field-dark .pillar, .field-abyss .pillar,
.field-dark .pillar li, .field-abyss .pillar li,
.field-dark .term, .field-abyss .term,
.field-dark .question-list li, .field-abyss .question-list li,
.field-dark .uncov-row, .field-abyss .uncov-row,
.field-dark .dash-list li, .field-abyss .dash-list li,
.field-dark .work-row, .field-abyss .work-row,
.field-dark .next-steps li, .field-abyss .next-steps li,
.field-dark .article-sources li, .field-abyss .article-sources li,
.field-dark .data-table tbody th, .field-abyss .data-table tbody th,
.field-dark .data-table td, .field-abyss .data-table td { border-color: var(--rule-dk); }
.field-dark .idx-row:hover, .field-abyss .idx-row:hover,
.field-dark .svc-row:hover, .field-abyss .svc-row:hover { background: rgba(244, 240, 230, 0.035); }
.field-dark .exec-summary, .field-abyss .exec-summary,
.field-dark .pending, .field-abyss .pending,
.field-dark .author-card, .field-abyss .author-card { background: rgba(244, 240, 230, 0.05); border-color: var(--on-dark-mid); }
.field-dark .field select, .field-dark .field textarea,
.field-abyss .field input, .field-abyss .field select, .field-abyss .field textarea {
  background: rgba(244, 240, 230, 0.05);
  border-color: var(--rule-dk-mid);
  color: var(--on-dark);
}
.field-dark .field select:focus, .field-dark .field textarea:focus,
.field-abyss .field input:focus, .field-abyss .field select:focus, .field-abyss .field textarea:focus { border-color: var(--on-dark); background: rgba(244, 240, 230, 0.08); }
.field-dark .field .optional, .field-abyss .field .optional { color: var(--on-dark-muted); }
.field-abyss .figure-tip { background: var(--paper); color: var(--ink); }
.field-abyss .figure-tip .tip-year { color: var(--muted); }
.field-abyss .idx { border-color: var(--rule-dk-mid); }
.field-abyss .idx-row { border-color: var(--rule-dk); }
.field-abyss .svc-rows { border-color: var(--rule-dk-mid); }
.field-abyss .svc-row { border-color: var(--rule-dk); }
.field-abyss .svc-num { color: var(--on-dark-muted); }
.field-abyss .mono-label { color: var(--on-dark-muted); }
.field-abyss .section-intro { color: var(--on-dark-mid); }
.field-abyss .section-head { border-color: var(--rule-dk-mid); }
.field-abyss .figure-source, .field-abyss .figure-unit, .field-abyss .figure-legend { color: var(--on-dark-muted); }
.field-abyss .figure-title { color: var(--on-dark); }
.field-abyss .figure-head { border-color: var(--rule-dk-mid); }
.field-abyss .gridline { stroke: var(--rule-dk); }
.field-abyss .zeroline { stroke: var(--rule-dk-mid); }
.field-abyss .axis-label { fill: var(--on-dark-muted); }
.field-abyss .series-line { stroke: var(--accent-bright); }
.field-abyss .annot-dot { fill: var(--accent-bright); }
.field-abyss .annot-rule { stroke: var(--rule-dk-mid); }
.field-abyss .annot-val { fill: var(--on-dark); }
.field-abyss .annot-note { fill: var(--on-dark-mid); }
.field-abyss .hover-rule { stroke: var(--rule-dk-strong); }
.field-abyss .hover-dot { stroke: var(--navy-abyss); }
.field-abyss .flag-chip { color: var(--accent-bright); }
.field-abyss .steps, .field-abyss .principles { border-color: var(--rule-dk-mid); }
.field-abyss .principle { border-color: var(--rule-dk); }
.field-abyss .principle p, .field-abyss .step p { color: var(--on-dark-mid); }
.field-abyss .step-num { color: var(--accent-bright); }
.field-abyss .svc-part .part-label { color: var(--accent-bright); }
.field-abyss .svc-part p, .field-abyss .svc-part li { color: var(--on-dark-mid); }
.field-abyss .svc-part li::before { background: var(--accent-bright); }
.field-abyss .method-num { background: var(--navy-abyss); }

/* ---------- SERIES LADDER FOR THE COMPARATIVE HERO ----------
   Five markets on the navy desk. India keeps the emerald it wears
   everywhere; the four peers step down a single blue-cream ladder so the
   figure stays inside the brand's one hue. Every line is named at its end,
   so colour is a courtesy, never the only key. */
:root {
  --em-ind: #58BE96;   /* India — the subject line, 6.9:1 on navy-deep */
  --em-chn: #F4F0E6;   /* China — the cream line */
  --em-vnm: #AEC3E4;   /* Vietnam — pale steel, 9.4:1 */
  --em-idn: #7C9DD3;   /* Indonesia — steel, 5.7:1 */
  --em-mex: #5A78A8;   /* Mexico — deep steel, 3.6:1, the bottom line */
  --em-bra: #6E8AB8;   /* Brazil — reserve tone if a sixth line is ever drawn */
}

/* ==========================================================================
   HERO — the comparative desk
   The plate, washes and type are production's. The figure changes job: no
   single readout, but a titled multi-series exhibit whose lines carry their
   own names and multiples at the right edge. It re-renders to the width it
   is given, so the labels stay 10.5px on a phone rather than scaling down
   with a fixed viewBox.
   ========================================================================== */

.hero-fig-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2) var(--s3);
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-dk-mid);
}
.hero-fig-title {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.hero-fig-unit {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.hero-chart.is-em { margin-top: var(--s2); min-height: 220px; }
.hero-chart.is-em svg { display: block; width: 100%; height: auto; overflow: visible; }

.hero-chart .em-line {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-chart .em-line.is-subject { stroke-width: 2.4; }
.hero-chart .em-end-dot { r: 3; }
.hero-chart .em-end-dot.is-subject { r: 3.6; }
.hero-chart .em-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  fill: var(--on-dark-mid);
}
.hero-chart .em-label.is-subject { fill: var(--on-dark); }
.hero-chart .em-label .em-val { font-family: var(--serif); font-size: 13.5px; letter-spacing: 0; fill: var(--on-dark); font-variant-numeric: tabular-nums; }
.hero-chart .em-label.is-subject .em-val { fill: var(--accent-bright); }
.hero-chart .em-label-rule { stroke: var(--rule-dk-mid); stroke-width: 1; }
.hero-chart .em-baseline { stroke: var(--rule-dk-mid); stroke-width: 1; stroke-dasharray: 2 3; }
.hero-chart .em-note {
  font-family: var(--sans);
  font-size: 11.5px;
  fill: var(--on-dark-muted);
}
.hero-chart .em-note-val { font-family: var(--mono); font-size: 10.5px; fill: var(--on-dark-mid); letter-spacing: 0.06em; }

/* The value flag inherits the production tooltip; the row order is the
   chart's own ranking for the year under the pointer. */
.hero-chart .figure-tip .tip-row + .tip-row { margin-top: 2px; }

/* The strip: five markets, one measure. India's cell keeps the emerald
   spark; the peers draw in cream so the subject stays legible as such. */
.strip-cell .strip-spark .spark-line { stroke: var(--on-dark-mid); }
.strip-cell .strip-spark .spark-end { fill: var(--on-dark-mid); }
.strip-cell.is-subject .strip-spark .spark-line { stroke: var(--accent-bright); }
.strip-cell.is-subject .strip-spark .spark-end { fill: var(--accent-bright); }
.strip-market {
  display: block;
  font-family: var(--serif);
  font-size: 15.5px;
  color: var(--on-dark);
  margin-bottom: 4px;
  letter-spacing: 0;
  text-transform: none;
}
.strip-cell.is-subject .strip-market { color: var(--accent-bright); }
.strip-foot a { color: var(--on-dark-mid); }

/* Mobile hero: a designed stack, not a squeeze. The h1 steps down below
   the production clamp floor so a 60-character line lands in four lines,
   not seven; the chart keeps its own scale via JS; the strip becomes a
   two-by-two ledger with the source line under it. */
@media (max-width: 1100px) {
  .hero-row { gap: var(--s5); }
  .hero-fig { margin-top: var(--s2); }
}
@media (max-width: 720px) {
  .hero-dark { padding-top: calc(var(--header-h) + 22px); }
  .hero-dark h1 { font-size: clamp(34px, 9.4vw, 46px); line-height: 1.06; letter-spacing: -0.02em; }
  .hero-dateline { margin-bottom: 22px; }
  .hero-sub { font-size: 16.5px; }
  .hero-actions { margin-top: 22px; gap: var(--s2) var(--s3); }
  .hero-actions .btn { width: 100%; }
  .hero-row { margin-top: 28px; gap: var(--s4); }
  .hero-fig-head { flex-direction: column; gap: 4px; align-items: flex-start; }
  .strip { margin-top: 40px; }
  .strip-value { font-size: 26px; }
  .strip-market { font-size: 14.5px; }
  .strip-label { font-size: 10.5px; }
  .strip-note { font-size: 10px; }
}
@media (max-width: 380px) {
  .hero-dark h1 { font-size: 32px; }
  .strip-grid { grid-template-columns: 1fr; }
  .strip-cell, .strip-cell:nth-child(odd) { border-right: 0; padding-right: 0; }
  .strip-cell:nth-child(even) { padding-left: 0; }
  .strip-cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule-dk); }
  .strip-cell:last-child { border-bottom: 0; }
}

/* ==========================================================================
   THE FOUR PATHS — what a client can buy, set as a ledger not a card grid
   ========================================================================== */

.paths {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule-mid);
}
.field-dark .paths, .field-abyss .paths { border-color: var(--rule-dk-mid); }
.path {
  position: relative;
  padding: var(--s4) var(--s4) var(--s4) 0;
  margin-right: var(--s4);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.path:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.field-dark .path, .field-abyss .path { border-color: var(--rule-dk); }
.path-kicker {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.path-kicker .path-mode { color: var(--accent); letter-spacing: 0.1em; }
.path h3 {
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: var(--s2) 0 var(--s2);
}
.path h3 a { color: inherit; text-decoration: none; }
.path h3 a::after { content: ''; position: absolute; inset: 0; }
.path:hover h3 a { color: var(--accent); transition: color 0.2s var(--ease-out); }
.path > p { font-size: var(--t-small); line-height: 1.6; color: var(--muted); max-width: 30ch; flex: 1; }
.path .text-link { position: relative; z-index: 2; margin-top: var(--s3); align-self: flex-start; }
.field-dark .path-kicker, .field-abyss .path-kicker { color: var(--on-dark-muted); }
.field-dark .path-kicker .path-mode, .field-abyss .path-kicker .path-mode { color: var(--accent-bright); }
.field-dark .path h3, .field-abyss .path h3 { color: var(--on-dark); }
.field-dark .path > p, .field-abyss .path > p { color: var(--on-dark-mid); }
.field-dark .path:hover h3 a, .field-abyss .path:hover h3 a { color: var(--accent-bright); }

@media (max-width: 1024px) {
  .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .path { border-bottom: 1px solid var(--rule); }
  .field-dark .path, .field-abyss .path { border-color: var(--rule-dk); }
  .path:nth-child(2n) { border-right: 0; margin-right: 0; padding-right: 0; }
  .path:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 600px) {
  .paths { grid-template-columns: 1fr; }
  .path { border-right: 0; margin-right: 0; padding-right: 0; padding-block: var(--s3); }
  .path:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .path:last-child { border-bottom: 0; }
  .path > p { max-width: none; }
}

/* ==========================================================================
   DESK BLOCKS — the two retained desks presented as sister products.
   .desk-grid / .desk-claim / .desk-mods are production's; the mirror
   variant flips the columns so the two blocks read as a pair, not a repeat.
   ========================================================================== */

.desk-grid.is-mirror .desk-body { order: 2; }
.desk-grid.is-mirror .desk-mods { order: 1; }
.desk-kicker { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.desk-kicker .flag-chip { margin: 0; }
.desk-kicker .mono-label { margin: 0; }

/* On paper the desk block re-inks itself. */
.on-paper .desk-claim { color: var(--ink); }
.on-paper .desk-claim em { color: var(--accent); }
.on-paper .desk-body > p { color: var(--body-c); }
.on-paper .desk-mods { border-color: var(--rule-mid); }
.on-paper .desk-mod { border-color: var(--rule); }
.on-paper .desk-mod h3 { color: var(--ink); }
.on-paper .desk-mod p { color: var(--muted); }
.on-paper .desk-mod .svc-num { color: var(--muted); }

@media (max-width: 1024px) {
  .desk-grid.is-mirror .desk-body { order: 1; }
  .desk-grid.is-mirror .desk-mods { order: 2; }
}

/* ==========================================================================
   DESK PAGE HERO — the dark opening of a desk page: proposition on the
   left, the desk's term sheet on the right. The sheet is typeset like a
   proposal cover: labels, values, thin rules. No card, no shadow.
   ========================================================================== */

.desk-hero {
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy-abyss) 100%);
  color: var(--on-dark);
  padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 8vw, 112px);
  --on-dark-muted: rgba(244, 240, 230, 0.66);
}
.desk-hero .crumbs { color: var(--on-dark-muted); }
.desk-hero .crumbs a { color: var(--on-dark-muted); }
.desk-hero .crumbs a:hover { color: var(--on-dark); }
.desk-hero .crumbs span[aria-current] { color: var(--on-dark); }
.desk-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s5) var(--s6);
  align-items: start;
}
.desk-hero h1 {
  font-family: var(--serif);
  font-size: var(--t-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--on-dark);
  text-wrap: balance;
  max-width: 18ch;
}
.desk-hero h1 em { font-style: italic; color: var(--accent-bright); }
.desk-hero .page-lede { color: var(--on-dark-mid); max-width: 54ch; }
.desk-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3) var(--s4); margin-top: var(--s4); }
.desk-hero .flag-chip { color: var(--accent-bright); }
.desk-hero .text-link { color: var(--on-dark); }
.desk-hero .btn-primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.desk-hero .btn-primary:hover { background: var(--paper-up); border-color: var(--paper-up); }
.desk-hero :focus-visible { outline-color: var(--accent-bright); }

.desk-sheet {
  border-top: 1px solid var(--rule-dk-strong);
  padding-top: var(--s2);
  font-variant-numeric: tabular-nums;
}
.desk-sheet-head {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  padding: 4px 0 var(--s2);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.desk-sheet-head span:last-child { color: var(--on-dark-muted); }
.desk-sheet dl { margin: 0; }
.desk-sheet-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--s2);
  padding: 13px 0;
  border-top: 1px solid var(--rule-dk);
}
.desk-sheet-row dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  padding-top: 3px;
}
.desk-sheet-row dd { margin: 0; font-size: var(--t-small); line-height: 1.55; color: var(--on-dark-mid); }
.desk-sheet-row dd b { font-weight: 500; color: var(--on-dark); }
.desk-sheet-row dd em { font-style: italic; color: var(--accent-bright); }
.desk-sheet-foot {
  padding-top: var(--s2);
  border-top: 1px solid var(--rule-dk);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  line-height: 1.6;
  color: var(--on-dark-muted);
}

@media (max-width: 1024px) {
  .desk-hero-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .desk-hero h1 { max-width: 20ch; }
}
@media (max-width: 560px) {
  .desk-sheet-row { grid-template-columns: 1fr; gap: 4px; }
  .desk-hero-actions .btn { width: 100%; }
}

/* ==========================================================================
   FORMATS — how the work can arrive. A tabular list, not a menu of tiers.
   ========================================================================== */

.formats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--s5);
  border-top: 1px solid var(--rule-mid);
}
.field-dark .formats, .field-abyss .formats { border-color: var(--rule-dk-mid); }
.formats li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 10px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--body-c);
}
.field-dark .formats li, .field-abyss .formats li { border-color: var(--rule-dk); color: var(--on-dark-mid); }
.formats li .fmt-num { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--muted); }
.field-dark .formats li .fmt-num, .field-abyss .formats li .fmt-num { color: var(--on-dark-muted); }
.formats li b { font-weight: 500; color: var(--ink); }
.field-dark .formats li b, .field-abyss .formats li b { color: var(--on-dark); }
.formats-note {
  margin-top: var(--s3);
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-lede);
  color: var(--ink);
  max-width: 44ch;
}
.field-dark .formats-note, .field-abyss .formats-note { color: var(--on-dark); }

@media (max-width: 900px) { .formats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .formats { grid-template-columns: 1fr; } }

/* ==========================================================================
   PEER SETS — which markets a question actually runs against
   ========================================================================== */

.peer-rows { list-style: none; border-top: 1px solid var(--rule-mid); }
.field-dark .peer-rows, .field-abyss .peer-rows { border-color: var(--rule-dk-mid); }
.peer-row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--s2) var(--s5);
  align-items: baseline;
  padding-block: clamp(18px, 2.4vw, 26px);
  border-bottom: 1px solid var(--rule);
}
.field-dark .peer-row, .field-abyss .peer-row { border-color: var(--rule-dk); }
.peer-q { font-family: var(--serif); font-size: clamp(18px, 1.7vw, 23px); font-weight: 400; line-height: 1.25; color: var(--ink); }
.field-dark .peer-q, .field-abyss .peer-q { color: var(--on-dark); }
.peer-set { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.peer-set span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--body-c);
  padding: 6px 10px 5px;
  border: 1px solid var(--rule-mid);
}
.peer-set span.is-subject { color: var(--accent); border-color: var(--accent); }
.field-dark .peer-set span, .field-abyss .peer-set span { color: var(--on-dark-mid); border-color: var(--rule-dk-mid); }
.field-dark .peer-set span.is-subject, .field-abyss .peer-set span.is-subject { color: var(--accent-bright); border-color: var(--accent-bright); }
.peer-set i { font-style: normal; font-size: var(--t-small); color: var(--muted); }
.field-dark .peer-set i, .field-abyss .peer-set i { color: var(--on-dark-muted); }
@media (max-width: 760px) { .peer-row { grid-template-columns: 1fr; gap: 10px; } }

/* ==========================================================================
   PUBLICATION COVER — the flagship shown as the object it is. Drawn in
   CSS from the report's own cover typography; nothing pictured that is
   not on the document.
   ========================================================================== */

.pub-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--s5) var(--s6);
  align-items: start;
}
.pub-cover {
  position: relative;
  aspect-ratio: 1 / 1.3;
  max-width: 400px;
  background: var(--navy-deep);
  color: var(--on-dark);
  padding: clamp(22px, 2.6vw, 34px);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(244, 240, 230, 0.12);
  overflow: hidden;
}
.pub-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(20, 41, 75, 0.55) 0%, rgba(14, 29, 56, 0) 45%, rgba(10, 21, 38, 0.6) 100%);
  pointer-events: none;
}
.pub-cover > * { position: relative; }
.pub-cover-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-dk-mid);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.pub-cover-top .pub-wordmark { font-family: var(--serif); font-size: 13.5px; text-transform: none; letter-spacing: 0; color: var(--on-dark); }
.pub-cover-kicker {
  margin-top: clamp(28px, 4vw, 44px);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.pub-cover-title {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--on-dark);
  text-wrap: balance;
}
.pub-cover-sub {
  margin-top: 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--on-dark-mid);
  max-width: 28ch;
}
.pub-cover-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--rule-dk-mid);
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.pub-body .statement-lg { max-width: 22ch; }
.pub-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--s3);
  margin-top: var(--s2);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.field-dark .pub-meta, .field-abyss .pub-meta { color: var(--on-dark-muted); }
.pub-meta b { font-weight: 400; color: var(--accent); }
.field-dark .pub-meta b, .field-abyss .pub-meta b { color: var(--accent-bright); }
.pub-themes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s3); }
.pub-themes span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 5px 9px 4px;
  border: 1px solid var(--rule-mid);
}
.field-dark .pub-themes span, .field-abyss .pub-themes span { color: var(--on-dark-mid); border-color: var(--rule-dk-mid); }
.pub-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3) var(--s4); margin-top: var(--s4); }
.pub-note { margin-top: var(--s2); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; color: var(--muted); }
.field-dark .pub-note, .field-abyss .pub-note { color: var(--on-dark-muted); }

@media (max-width: 900px) {
  .pub-grid { grid-template-columns: 1fr; }
  .pub-cover { max-width: 320px; }
}

/* ==========================================================================
   RESEARCH LIBRARY — status flags and row actions
   ========================================================================== */

.idx-flag.is-published { color: var(--accent); }
.idx-flag.is-request, .idx-flag.is-online { color: var(--muted); }
.field-dark .idx-flag.is-request, .field-dark .idx-flag.is-online,
.field-abyss .idx-flag.is-request, .field-abyss .idx-flag.is-online { color: var(--on-dark-muted); }
.idx-row .idx-actions { flex-wrap: wrap; align-items: center; }
.idx-row .idx-actions .btn { padding: 11px 18px; font-size: 14px; }
.idx-row.is-request .idx-title a::after { display: none; }
.idx-abstract {
  grid-column: 2;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--body-c);
  max-width: 62ch;
  margin-top: 4px;
}
.field-dark .idx-abstract, .field-abyss .idx-abstract { color: var(--on-dark-mid); }

/* ==========================================================================
   REQUEST MODAL — one dialog for the whole site. Cream panel on a navy
   scrim; the report named in serif; the fields production's; two truthful
   end states, neither of which pretends.
   ========================================================================== */

.req-modal[hidden] { display: none; }
.req-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: var(--s3);
  background: rgba(10, 21, 38, 0.72);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.req-panel {
  position: relative;
  width: min(560px, 100%);
  background: var(--paper);
  color: var(--body-c);
  border: 1px solid var(--rule-mid);
  padding: clamp(24px, 3.4vw, 40px);
  max-height: calc(100vh - 2 * var(--s3));
  overflow-y: auto;
}
html.anim .req-modal:not(.is-open) .req-panel { opacity: 0; transform: translateY(12px); }
html.anim .req-modal.is-open .req-panel { transition: opacity 0.22s var(--ease-out), transform 0.26s var(--ease-out); }
.req-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.15s var(--ease-out);
}
.req-close:hover { color: var(--ink); }
.req-close span { position: absolute; left: 13px; right: 13px; top: 21px; height: 1.5px; background: currentColor; }
.req-close span:first-child { transform: rotate(45deg); }
.req-close span:last-child { transform: rotate(-45deg); }
.req-kicker { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.req-title {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 10px 0 var(--s2);
  padding-right: 36px;
}
.req-report {
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr);
  gap: var(--s2);
  padding: 12px 0 var(--s3);
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
}
.req-report::before { content: ''; background: var(--accent); }
.req-report-name { font-family: var(--serif); font-size: 18px; line-height: 1.25; color: var(--ink); }
.req-report-meta { margin-top: 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.req-panel .field { margin-bottom: var(--s2); }
.req-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-top: var(--s2); }
.req-privacy { margin-top: var(--s2); font-size: 12.5px; line-height: 1.6; color: var(--muted); max-width: 52ch; }
.req-privacy a { color: var(--ink); }
.req-status {
  margin-top: var(--s3);
  padding: var(--s2) var(--s3);
  border-left: 2px solid var(--accent);
  background: var(--paper-dn);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--body-c);
}
.req-status.is-error { border-left-color: var(--rule-strong); }
.req-status[hidden] { display: none; }
.req-done { display: none; }
.req-modal.is-done .req-form { display: none; }
.req-modal.is-done .req-done { display: block; }
.req-done h3 { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 28px); font-weight: 400; color: var(--ink); line-height: 1.15; }
.req-done p { margin-top: var(--s2); font-size: var(--t-small); line-height: 1.6; color: var(--body-c); max-width: 46ch; }
.req-done .req-actions { margin-top: var(--s3); }
.field-error { font-size: 12.5px; color: var(--ink); margin-top: -2px; }
.field-error[hidden] { display: none; }
.field input[aria-invalid="true"] { border-color: var(--ink); }
body.modal-open { overflow: hidden; }
@media (max-width: 560px) {
  .req-modal { padding: 0; align-items: end; }
  .req-panel { width: 100%; max-height: 100dvh; border: 0; border-top: 1px solid var(--rule-mid); }
  .req-panel .field-row { grid-template-columns: 1fr; }
  .req-actions .btn { width: 100%; }
}
.btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* ==========================================================================
   MOBILE NAVIGATION — the overlay is a dialog: it now carries the primary
   action, the toggle is its close affordance, and the page beneath is
   inert while it is open (set by app.js). Focus is trapped inside.
   ========================================================================== */

.site-nav .nav-cta, .site-nav .nav-foot { display: none; }
@media (max-width: 900px) {
  .site-nav { justify-content: flex-start; padding-top: calc(var(--header-h) + var(--s3)); }
  .site-nav > .nav-link,
  .site-nav .nav-drop { font-size: clamp(27px, 7vw, 38px); padding: 9px 0; min-height: 44px; }
  .site-nav .nav-cta {
    display: inline-flex;
    margin-top: var(--s4);
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
    width: 100%;
    max-width: 360px;
    padding: 16px 24px;
  }
  .site-nav .nav-cta:hover { background: var(--paper-up); border-color: var(--paper-up); }
  .site-nav .nav-foot {
    display: block;
    margin-top: auto;
    padding-top: var(--s4);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--on-dark-muted);
    line-height: 1.9;
  }
  .site-nav .nav-foot a { color: var(--on-dark-mid); text-decoration: none; }
  .nav-toggle { width: 44px; height: 44px; margin-right: -8px; }
  .nav-toggle span { left: 11px; right: 11px; }
  .nav-toggle span:first-child { top: 18px; }
  .nav-toggle span:last-child  { top: 26px; }
  .nav-toggle[aria-expanded="true"] span:first-child { top: 22px; }
  .nav-toggle[aria-expanded="true"] span:last-child  { top: 22px; }
}

/* ==========================================================================
   MOBILE — global guards. Nothing may scroll the page sideways.
   ========================================================================== */

html, body { max-width: 100%; overflow-x: clip; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
@media (max-width: 720px) {
  .section       { padding-block: clamp(56px, 12vw, 88px); }
  .section-tight { padding-block: clamp(40px, 9vw, 64px); }
  .section-head { margin-bottom: var(--s3); }
  .page-head { padding: clamp(36px, 8vw, 64px) 0 clamp(28px, 6vw, 48px); }
  .page-head h1 { font-size: clamp(32px, 9vw, 44px); }
  .cta-inner .btn { width: 100%; }
  .desk-actions .btn, .pub-actions .btn { width: 100%; }
  .footer-grid { padding-block: 48px 32px; }
  .figure-frame { min-height: 220px; }
  .idx-row { padding-block: 22px; }
  .idx-row.is-flagship { padding-block: 26px; }
  .idx-actions { flex-direction: column; align-items: stretch; }
  .idx-actions .btn { width: 100%; }
  .btn { padding: 15px 22px; }
}
@media (max-width: 400px) {
  .container { padding-inline: 18px; }
  .hero-dateline { gap: 6px 14px; }
  .hero-dateline span + span { padding-left: 14px; }
}

/* ==========================================================================
   INTERIOR ACCENTS
   ========================================================================== */

/* A short serif pull line used mid-page: emerald italic on paper. */
.pull {
  font-family: var(--serif);
  font-size: var(--t-statement);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 24ch;
}
.pull em { font-style: italic; color: var(--accent); }
.field-dark .pull, .field-abyss .pull { color: var(--on-dark); }
.field-dark .pull em, .field-abyss .pull em { color: var(--accent-bright); }

/* Two-column notes: label left, body right — the interior sibling of intro-grid. */
.note-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: var(--s3) var(--s6);
  align-items: start;
  padding-block: var(--s4);
  border-top: 1px solid var(--rule);
}
.note-grid:first-of-type { border-top: 1px solid var(--rule-mid); }
.field-dark .note-grid, .field-abyss .note-grid { border-color: var(--rule-dk); }
.note-grid h3 { font-family: var(--serif); font-size: var(--t-h3); font-weight: 400; color: var(--ink); }
.field-dark .note-grid h3, .field-abyss .note-grid h3 { color: var(--on-dark); }
.note-grid p { font-size: var(--t-small); line-height: 1.65; color: var(--body-c); max-width: 62ch; }
.note-grid p + p { margin-top: 0.8em; }
.field-dark .note-grid p, .field-abyss .note-grid p { color: var(--on-dark-mid); }
@media (max-width: 760px) { .note-grid { grid-template-columns: 1fr; gap: var(--s2); } }

/* Consulting: the engagement rows carry four parts and a light-weight
   "where it lands" line rather than a page count. */
.service-lands {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--body-c);
  max-width: 70ch;
}
.service-lands b { font-weight: 500; color: var(--ink); }
.field-dark .service-lands, .field-abyss .service-lands { border-color: var(--rule-dk); color: var(--on-dark-mid); }
.field-dark .service-lands b, .field-abyss .service-lands b { color: var(--on-dark); }

/* Reduced motion for everything V9 adds. */
@media (prefers-reduced-motion: reduce) {
  html.anim .req-modal:not(.is-open) .req-panel { opacity: 1; transform: none; }
  .hero-chart .em-label, .hero-chart .em-end-dot, .hero-chart .em-line { opacity: 1 !important; }
}

/* ---------- Audit fixes: the abyss bands, focus rings, small-screen wraps ----------
   .cta-band, .closing and .site-footer are abyss-coloured but were never
   given the .field-abyss class, so nothing inside them was re-inked. Named
   here directly. The primary button becomes paper on every dark ground, the
   same as it already was on the hero and the dark fields. */
.cta-band .text-link, .closing .text-link, .site-footer .text-link { color: var(--on-dark); }
.cta-band .btn-primary, .closing .btn-primary, .site-footer .btn-primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.cta-band .btn-primary:hover, .closing .btn-primary:hover, .site-footer .btn-primary:hover { background: var(--paper-up); border-color: var(--paper-up); }
.cta-band .btn-outline, .closing .btn-outline { color: var(--on-dark); border-color: var(--rule-dk-mid); }
.cta-band .btn-outline:hover, .closing .btn-outline:hover { border-color: var(--on-dark); }
.cta-band :focus-visible, .closing :focus-visible, .site-footer :focus-visible,
.site-nav.is-open :focus-visible, .desk-hero :focus-visible, .req-modal :focus-visible { outline-color: var(--accent-bright); }
.req-modal .req-panel :focus-visible { outline-color: var(--accent); }
.site-header.on-hero :focus-visible { outline-color: var(--accent-bright); }

/* Small-screen wraps: nothing may push the page sideways. */
.question-grid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.principles { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.dash-tabs { flex-wrap: wrap; }
.idx-meta { flex-wrap: wrap; }
.btn { flex-wrap: wrap; row-gap: 4px; line-height: 1.15; }
.strip-label, .strip-note, .hero-source, .figure-source, .footer-line { overflow-wrap: anywhere; }
@media (max-width: 860px) { .idx-meta { flex-wrap: wrap; row-gap: 4px; } }

/* Solid fallbacks under the gradient grounds, so tooling and old engines
   see a navy surface rather than transparency. */
.hero-dark, .desk-hero { background-color: var(--navy-deep); }

/* Figure frames may never force a grid track wider than its container:
   the 4:3 aspect with a min-height computed a 347px min-content width on a
   324px phone column. Width wins; height follows. */
.figure-frame, .dash-fig .figure-frame { min-width: 0; }
@media (max-width: 1024px) { .dash-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .figure-frame, .dash-fig .figure-frame { min-height: 0; aspect-ratio: 4 / 3; }
}
/* Tap targets: footer links and the wordmark clear 24px. */
.footer-col a { padding-block: 3px; }
.wordmark { padding-block: 8px; }
.footer-line a { padding-block: 2px; display: inline-block; }

/* Row actions live under the title column, on every grid. */
.idx-row .idx-actions { grid-column: 2; }
@media (max-width: 860px) { .idx-row .idx-actions { grid-column: 2; } }
/* The strip stays a two-by-two ledger down to 340px; only the very smallest
   phones stack it. */
@media (min-width: 341px) and (max-width: 380px) {
  .strip-grid { grid-template-columns: repeat(2, 1fr); }
  .strip-cell { border-right: 0; border-bottom: 1px solid var(--rule-dk); padding-left: 0; padding-right: 0; }
  .strip-cell:nth-child(odd) { border-right: 1px solid var(--rule-dk); padding-right: var(--s2); }
  .strip-cell:nth-child(even) { padding-left: var(--s2); }
  .strip-cell:nth-last-child(-n+2) { border-bottom: 0; }
  .strip-cell:last-child { border-bottom: 0; }
}

/* The ranking table's small metadata steps up one register: 9px type at
   0.55 alpha measured under 4.5:1 on navy-deep. */
.rank-table .cell-yr, .rank-table tbody th .row-unit, .dash-read .read-yr { color: var(--on-dark-mid); }
/* cache-bust: 1787153769 */

/* ==========================================================================
   V13 — RESEARCH-LED CONSULTING, WORKING GLOBALLY
   Additions only. Nothing above is removed: the comparative EM exhibit
   keeps every rule it had and moves down the page into the specialist
   section; the hero now carries a typeset scope sheet instead of a chart.
   ========================================================================== */

/* ---------- Navigation groups ----------
   The trigger is a real link to the group's overview page. Hover opens the
   menu on a pointer device (app.js), focus-within opens it for a keyboard,
   and in the mobile overlay the group is simply printed in full. */
.nav-drop { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.nav-drop .caret {
  display: inline-block;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.75;
}
.nav-item:focus-within .drop-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.drop-menu { min-width: 250px; }
.drop-menu a[aria-current="page"] { color: var(--ink); background: var(--paper-dn); }
.drop-head {
  display: block;
  padding: 4px 22px 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 900px) {
  .nav-drop .caret { display: none; }
  .drop-menu, .nav-item.is-open .drop-menu { display: block; }
  .drop-head { display: none; }
  .drop-menu a { font-size: 17px; padding: 7px 0; }
  .drop-menu a[aria-current="page"] { background: none; color: var(--accent-bright); }
  .nav-item { padding-bottom: 6px; }
}

/* ---------- Hero, V13 ----------
   The plate, washes and type are production's. The right column is a
   scope sheet, typeset like the written scope every engagement starts
   from; the four-market strip has moved to the specialist section. */
.hero-dark.is-v13 { padding-bottom: clamp(48px, 7vh, 96px); }
.hero-dark.is-v13 h1 { font-size: clamp(38px, 5.3vw, 78px); max-width: 15ch; }
.hero-dark.is-v13 .hero-row {
  grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr);
  gap: var(--s4) var(--s6);
  margin-top: clamp(24px, 3.5vh, 44px);
}
.hero-dark.is-v13 .hero-sub { max-width: 46ch; }
.hero-line {
  margin-top: clamp(24px, 3.5vh, 40px);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  max-width: 44ch;
}
.hero-line b { font-weight: 400; color: var(--on-dark); }

.hero-sheet { border-top: 1px solid var(--rule-dk-strong); padding-top: var(--s2); }
.hero-sheet-head {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  flex-wrap: wrap;
  padding: 4px 0 var(--s2);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.hero-sheet-head span:last-child { color: var(--on-dark-muted); }
.hero-sheet ol { list-style: none; }
.hero-sheet li {
  display: grid;
  grid-template-columns: 30px 128px minmax(0, 1fr);
  column-gap: var(--s2);
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--rule-dk);
}
.sh-num { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--on-dark-muted); }
.sh-key { font-family: var(--serif); font-size: 17px; line-height: 1.3; color: var(--on-dark); }
.sh-val { font-size: 13.5px; line-height: 1.55; color: var(--on-dark-mid); }
.sh-val em { font-style: italic; color: var(--accent-bright); }
.hero-sheet-foot {
  padding-top: var(--s2);
  border-top: 1px solid var(--rule-dk);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  line-height: 1.65;
  color: var(--on-dark-muted);
}
.hero-sheet-foot b { font-weight: 400; color: var(--on-dark-mid); }
@media (max-width: 1100px) {
  .hero-dark.is-v13 .hero-row { grid-template-columns: 1fr; gap: var(--s5); }
  .hero-sheet { max-width: 660px; }
}
@media (max-width: 720px) {
  .hero-dark.is-v13 h1 { font-size: clamp(33px, 9vw, 44px); max-width: none; }
  .hero-line { margin-top: 22px; }
  .hero-sheet li { grid-template-columns: 26px minmax(0, 1fr); row-gap: 4px; }
  .sh-val { grid-column: 2; }
}

/* ---------- Ways of working: an editorial service index ----------
   Four rows, one per engagement form. Number, mode and title on the left;
   the commercial facts on the right as a term sheet, so the four can be
   compared line by line rather than read as four slogans. */
.eng { list-style: none; border-top: 1px solid var(--rule-mid); }
.eng-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 5fr) minmax(0, 6fr);
  column-gap: var(--s5);
  row-gap: var(--s3);
  align-items: start;
  padding-block: clamp(28px, 3.4vw, 46px);
  border-bottom: 1px solid var(--rule);
}
.eng-num { font-family: var(--mono); font-size: var(--t-small); color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 6px; }
.eng-mode {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.eng-row h3 {
  font-family: var(--serif);
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.014em;
  color: var(--ink);
  max-width: 16ch;
}
.eng-row h3 a { color: inherit; text-decoration: none; transition: color 0.2s var(--ease-out); }
.eng-row h3 a:hover { color: var(--accent); }
.eng-lede { margin-top: var(--s2); font-size: var(--t-body); line-height: 1.6; color: var(--body-c); max-width: 42ch; }
.eng-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s3); }
.eng-facts { margin: 0; border-top: 1px solid var(--rule-mid); }
.eng-facts > div {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  column-gap: var(--s2);
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
}
.eng-facts dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 3px;
}
.eng-facts dd { margin: 0; font-size: var(--t-small); line-height: 1.55; color: var(--body-c); }
.eng-facts dd b { font-weight: 500; color: var(--ink); }
@media (max-width: 1024px) {
  .eng-row { grid-template-columns: 44px minmax(0, 1fr); }
  .eng-facts { grid-column: 2; }
}
@media (max-width: 560px) {
  .eng-row { grid-template-columns: 1fr; row-gap: var(--s2); }
  .eng-num { display: none; }
  .eng-facts { grid-column: 1; }
  .eng-facts > div { grid-template-columns: 1fr; row-gap: 2px; }
  .eng-actions .btn { width: 100%; }
}

/* ---------- Client perspectives ----------
   Static. Three set side by side as a ledger; the rest under a native
   disclosure, printed in full for anyone who opens it. No motion, no
   ranking, no decorative quotation marks. */
.rev-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule-mid);
}
.rev-item {
  padding: var(--s4) var(--s4) var(--s4) 0;
  margin-right: var(--s4);
  border-right: 1px solid var(--rule);
  min-width: 0;
}
.rev-item:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.rev-item figure { margin: 0; display: flex; flex-direction: column; height: 100%; }
.rev-q { font-family: var(--serif); font-size: clamp(16.5px, 1.3vw, 19.5px); line-height: 1.52; color: var(--ink); flex: 1; }
.rev-q p + p { margin-top: 0.8em; }
.rev-cite {
  margin-top: var(--s3);
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.75;
  color: var(--muted);
}
.rev-cite b { display: block; font-weight: 400; color: var(--ink); }
.rev-note { font-size: var(--t-small); line-height: 1.6; color: var(--muted); max-width: 62ch; margin-bottom: var(--s4); }
.rev-more { margin-top: var(--s2); border-top: 1px solid var(--rule-mid); }
.rev-more summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) 0;
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink);
  min-height: 44px;
}
.rev-more summary::-webkit-details-marker { display: none; }
.rev-more summary .rev-toggle-icon {
  flex: none;
  width: 9px; height: 9px;
  margin-top: -3px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease-out);
}
.rev-more[open] summary .rev-toggle-icon { transform: rotate(-135deg); margin-top: 3px; }
.rev-more summary .rev-count { color: var(--muted); font-weight: 400; }
.rev-more summary:hover { color: var(--accent); }
.rev-more summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.rev-more .rev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.rev-more .rev-item { padding-block: var(--s3); border-bottom: 1px solid var(--rule); }
.rev-more .rev-item:nth-child(2n) { border-right: 0; margin-right: 0; padding-right: 0; }
.rev-more .rev-item:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
@media (max-width: 900px) {
  .rev-grid, .rev-more .rev-grid { grid-template-columns: 1fr; }
  .rev-item, .rev-more .rev-item { border-right: 0; margin-right: 0; padding-right: 0; padding-block: var(--s3); border-bottom: 1px solid var(--rule); }
  .rev-grid > .rev-item:last-child { border-bottom: 0; }
  .rev-q { font-size: 17px; }
}

/* ---------- Research as evidence: the compact library ---------- */
.lib {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s5);
  margin-top: var(--s5);
  border-top: 1px solid var(--rule-mid);
}
.lib li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--s3);
  row-gap: 4px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.lib-title { font-family: var(--serif); font-size: 18px; line-height: 1.3; color: var(--ink); }
.lib-title a { color: inherit; text-decoration: none; }
.lib-title a:hover { color: var(--accent); }
.lib-meta { grid-column: 1; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.lib li > .btn, .lib li > .text-link { grid-column: 2; grid-row: 1 / span 2; }
.lib li > .btn { padding: 10px 16px; font-size: 13.5px; }
.lib-note { margin-top: var(--s3); font-size: var(--t-small); line-height: 1.6; color: var(--muted); max-width: 66ch; }
@media (max-width: 860px) { .lib { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .lib li { grid-template-columns: 1fr; }
  .lib li > .btn, .lib li > .text-link { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; }
}

/* ---------- Specialist depth: emerging markets and India ----------
   The comparative exhibit and the four-market strip, exactly as they were
   drawn in the V10 hero, now sit here on the dark field with the desks and
   the research that go with them. */
.depth-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s5) var(--s6);
  align-items: start;
}
.depth-grid .desk-body > p { max-width: 52ch; }
.depth .strip { margin-top: var(--s5); }
.depth-links {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--s4);
  margin-top: var(--s5);
  border-top: 1px solid var(--rule-dk-mid);
}
.depth-links li { padding: var(--s3) 0; border-bottom: 1px solid var(--rule-dk); min-width: 0; }
.depth-links .mono-label { display: block; margin-bottom: 8px; }
.depth-links h3 { font-family: var(--serif); font-size: clamp(18px, 1.5vw, 22px); font-weight: 400; line-height: 1.2; }
.depth-links h3 a { color: var(--on-dark); text-decoration: none; transition: color 0.2s var(--ease-out); }
.depth-links h3 a:hover { color: var(--accent-bright); }
.depth-links p { margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--on-dark-muted); max-width: 30ch; }
@media (max-width: 1024px) {
  .depth-grid { grid-template-columns: 1fr; }
  .depth-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .depth-links { grid-template-columns: 1fr; } .depth-links p { max-width: none; } }

/* ---------- The founder-led team ---------- */
.who-body .team-line { font-size: var(--t-small); line-height: 1.6; color: var(--muted); max-width: 60ch; }
.who-facts { list-style: none; margin-top: var(--s3); border-top: 1px solid var(--rule-mid); max-width: 60ch; }
.who-facts li { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: var(--s3); padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: var(--t-small); line-height: 1.55; color: var(--body-c); }
.who-facts li b { font-weight: 500; color: var(--ink); }
@media (max-width: 480px) { .who-facts li { grid-template-columns: 1fr; row-gap: 2px; } }

/* ---------- Retained research page: the two desks as configurations ---------- */
.cfg { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule-mid); }
.cfg li { padding: var(--s4) var(--s5) var(--s4) 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); min-width: 0; }
.cfg li:nth-child(2n) { border-right: 0; padding-right: 0; padding-left: var(--s5); }
.cfg li:nth-last-child(-n+2) { border-bottom: 0; }
.cfg .mono-label { display: block; margin-bottom: 12px; }
.cfg h3 { font-family: var(--serif); font-size: clamp(22px, 2.2vw, 30px); font-weight: 400; line-height: 1.1; letter-spacing: -0.012em; color: var(--ink); }
.cfg h3 a { color: inherit; text-decoration: none; }
.cfg h3 a:hover { color: var(--accent); }
.cfg p { margin-top: var(--s2); font-size: var(--t-small); line-height: 1.6; color: var(--body-c); max-width: 46ch; }
.cfg .text-link { margin-top: var(--s3); }
@media (max-width: 760px) {
  .cfg { grid-template-columns: 1fr; }
  .cfg li, .cfg li:nth-child(2n) { border-right: 0; padding-inline: 0; border-bottom: 1px solid var(--rule); }
  .cfg li:last-child { border-bottom: 0; }
}

/* ---------- Small guards ---------- */
[id] { scroll-margin-top: calc(var(--header-h) + var(--s2)); }
@media (prefers-reduced-motion: reduce) {
  .rev-more summary .rev-toggle-icon { transition: none; }
}

/* ---------- Client perspectives: the moving rail ----------
   One track, two identical halves, moved by a transform at a constant
   speed (js/rail.js sets the duration from the measured width, so the
   pace is the same on every screen). Each card carries its own trailing
   margin, so one half is exactly half the track and the loop lands on an
   identical pixel. It holds still on hover, on the control, off-screen
   and under reduced motion, where it becomes a plain horizontal scroll. */
.rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.rail-toggle {
  flex: none;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 40px; padding: 8px 14px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--ink);
  background: none; border: 1px solid var(--rule-mid); cursor: pointer;
  transition: border-color 0.15s var(--ease-out), background-color 0.15s var(--ease-out);
}
.rail-toggle:hover { border-color: var(--ink); background: var(--paper-up); }
.rail-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.rail-toggle-icon { position: relative; width: 10px; height: 12px; }
.rail-toggle-icon::before, .rail-toggle-icon::after { content: ''; position: absolute; top: 0; bottom: 0; width: 3px; background: currentColor; }
.rail-toggle-icon::before { left: 0; } .rail-toggle-icon::after { right: 0; }
.rail-toggle[aria-pressed="true"] .rail-toggle-icon::before { left: 1px; width: 0; height: 0; top: 0; bottom: auto; background: none; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.rail-toggle[aria-pressed="true"] .rail-toggle-icon::after { display: none; }

.rail { position: relative; overflow: hidden; padding-block: 6px; }
.rail-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 clamp(24px, 6vw, 96px), #000 calc(100% - clamp(24px, 6vw, 96px)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 clamp(24px, 6vw, 96px), #000 calc(100% - clamp(24px, 6vw, 96px)), transparent 100%);
}
.rail-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  padding-left: var(--gutter);
  animation: rail-move var(--rail-dur, 120s) linear infinite;
  will-change: transform;
}
.rail.is-still .rail-track, .rail:hover .rail-track { animation-play-state: paused; }
@keyframes rail-move { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

.rail-card {
  flex: 0 0 auto;
  width: clamp(300px, 31vw, 440px);
  margin-right: clamp(14px, 1.6vw, 24px);
  display: flex; flex-direction: column;
  padding: 26px 28px 22px;
  background: var(--paper-up);
  border: 1px solid var(--rule-mid);
  box-shadow: 0 1px 0 rgba(20, 41, 75, 0.06);
  transition: border-color 0.2s var(--ease-out), transform 0.3s var(--ease-out);
}
.rail-card:hover { border-color: var(--rule-strong); transform: translateY(-2px); }
.rail-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 14px; }
.rail-num span { color: var(--muted); }
.rail-q { flex: 1; font-family: var(--serif); font-size: clamp(16px, 1.15vw, 17.5px); line-height: 1.5; color: var(--ink); }
.rail-cite {
  margin-top: 18px; padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.7; color: var(--muted);
}
.rail-cite b { display: block; font-weight: 400; color: var(--ink); }
#client-perspectives .rev-more { margin-top: var(--s4); }

@media (max-width: 720px) {
  .rail-head { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .rail-card { width: min(84vw, 360px); padding: 22px 22px 18px; }
  .rail-q { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .rail-track { animation: none; padding-right: var(--gutter); }
  .rail-viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x proximity; padding-bottom: 6px; }
  .rail-card { scroll-snap-align: start; }
  .rail-card.is-dup { display: none; }
  .rail-toggle { display: none; }
}

/* ---------- Rail: script-driven motion, deeper edge fade ----------
   When rail.js is running it moves the track itself and eases the speed
   in and out; the CSS animation is only the fallback for no-script. */
.rail.is-js .rail-track { animation: none; padding-left: 0; } /* the script sets where the current card rests */
.rail.is-js:hover .rail-track { animation: none; }
.rail-viewport {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 clamp(40px, 9vw, 150px), #000 calc(100% - clamp(40px, 9vw, 150px)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 clamp(40px, 9vw, 150px), #000 calc(100% - clamp(40px, 9vw, 150px)), transparent 100%);
}
.rail-card { transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), transform 0.35s var(--ease-out); }
.rail-card:hover { box-shadow: 0 10px 28px -18px rgba(20, 41, 75, 0.35); transform: translateY(-3px); }

/* ---------- Consulting: the questions that arrive ----------
   A dense, quiet grid: many question types, one line each. */
.qs {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--s5);
  border-top: 1px solid var(--rule-mid);
}
.qs li { padding: 18px 0 20px; border-bottom: 1px solid var(--rule); min-width: 0; }
.qs h3 { font-family: var(--serif); font-size: 18px; font-weight: 400; line-height: 1.25; color: var(--ink); }
.qs p { margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.qs li.is-more h3 { font-style: italic; color: var(--accent); }
@media (max-width: 1024px) { .qs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s4); } }
@media (max-width: 600px) { .qs { grid-template-columns: 1fr; } }

/* ---------- Header between 901px and 1180px ----------
   Six links plus the button no longer fit at the desktop sizes on a
   narrow laptop or a landscape tablet; the links and the button are kept
   on one line by tightening the type and the gaps rather than wrapping. */
@media (min-width: 901px) and (max-width: 1180px) {
  .header-inner { gap: var(--s2); }
  .site-nav { gap: clamp(11px, 1.5vw, 20px); }
  .nav-link { font-size: 13.5px; letter-spacing: 0; white-space: nowrap; }
  .header-cta { white-space: nowrap; padding: 10px 16px; font-size: 13.5px; }
  .wordmark-text { font-size: 18px; }
}
@media (min-width: 901px) and (max-width: 1010px) {
  .site-nav { gap: 10px; }
  .nav-link { font-size: 12.5px; }
  .header-cta { padding: 9px 13px; font-size: 12.5px; }
  .wordmark { gap: 8px; }
  .wordmark-text { font-size: 17px; }
}

/* ---------- QA pass, 6 September 2026 ----------
   Small corrections from the visual review: the header button never wraps;
   the desktop nav is explicitly static above the drawer breakpoint (so a
   capture or a resize across 900px cannot leave the overlay styles behind);
   the rail loses its edge fade when it is a plain scroll row; the fourth
   service column no longer stretches its kicker; annotation labels give way
   on small phone charts; the ranking-table caption wraps inside its scroll
   container; the hero eyebrow separators trail their items instead of
   leading the next one. */
.header-cta { white-space: nowrap; flex-wrap: nowrap; }
@media (min-width: 901px) {
  .site-nav { position: static; inset: auto; background: none; padding: 0; opacity: 1; visibility: visible; pointer-events: auto; transition: none; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .rail-viewport { -webkit-mask-image: none; mask-image: none; }
  .rail-track { padding-inline: var(--gutter); }
}
.rail:not(.is-js) .rail-viewport { -webkit-mask-image: none; mask-image: none; }
.rail:not(.is-js) .rail-track { padding-inline: var(--gutter); }
.path > p.path-kicker { flex: 0 0 auto; }
.depth-grid p + p { margin-top: 1em; }
.rank-table caption {
  display: block;
  position: sticky;
  left: 0;
  max-width: calc(100vw - 2 * var(--gutter));
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}
@media (max-width: 600px) { .annot-note, .annot-val { display: none; } }
.hero-dateline span { white-space: nowrap; }
.hero-dateline span + span { padding-left: 0; }
.hero-dateline span + span::before { content: none; }
.hero-dateline span:not(:last-child) { position: relative; padding-right: var(--s3); }
.hero-dateline span:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  width: 1px; height: 11px;
  transform: translateY(-50%);
  background: currentColor;
  opacity: 0.45;
}
@media (max-width: 720px) { .hero-dateline span:not(:last-child) { padding-right: 14px; } }

/* ---------- One team, every market: the map ----------
   Natural Earth land in navy on the paper ground; emerald pins for the
   clients quoted on the page, a cream pin for the base. Two columns on
   desktop, map first on a phone. */
.map-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s5) var(--s6);
  align-items: center;
}
.map { margin: 0; min-width: 0; }
.map-frame { position: relative; }
.map-frame img { display: block; width: 100%; height: auto; }
.map-pin {
  position: absolute;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.25px var(--accent);
}
.map-pin.is-base {
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  background: var(--paper);
  box-shadow: 0 0 0 2.5px var(--ink), 0 0 0 4.5px var(--paper);
}
.map-caption {
  display: flex; flex-wrap: wrap; gap: 6px var(--s4);
  margin-top: var(--s3);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.map-key { display: inline-flex; align-items: center; gap: 12px; }
.map-key .map-pin { position: static; margin: 0; flex: none; display: inline-block; }
.map-body .statement-lg { margin-bottom: 0.7em; }
.map-body > p:not(.statement-lg) { max-width: 52ch; }
.map-body .who-facts { max-width: 52ch; }
@media (max-width: 1024px) {
  .map-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .map-body > p:not(.statement-lg), .map-body .who-facts { max-width: 62ch; }
}
@media (max-width: 560px) {
  .map-pin { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 2.5px var(--accent); }
  .map-pin.is-base { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
}

/* ---------- Client perspectives: the hallmark and the phone carousel ----------
   Every card carries a large opening and closing quotation mark, set low
   in the ground behind the text. On phones and tablets (and under reduced
   motion) the rail becomes a one-card-per-view carousel that the reader
   swipes or steps through with the buttons; nothing moves on its own. */
.rail-card { position: relative; overflow: hidden; }
.rail-card::before, .rail-card::after {
  position: absolute;
  font-family: var(--serif);
  font-size: 96px;
  line-height: 1;
  color: var(--ink);
  opacity: 0.09;
  pointer-events: none;
}
.rail-card::before { content: '\201C'; top: 8px; right: 20px; }
.rail-card::after { content: '\201D'; right: 20px; bottom: -22px; }
.rail-card > * { position: relative; }

.rail.is-manual .rail-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: none; mask-image: none;
  padding-bottom: 2px;
}
.rail.is-manual .rail-viewport::-webkit-scrollbar { display: none; }
.rail.is-manual .rail-track {
  animation: none;
  transform: none;
  width: max-content;
  padding-inline: var(--gutter);
}
.rail.is-manual .rail-card {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  width: calc(100vw - 2 * var(--gutter));
  max-width: 480px;
}
.rail.is-manual .rail-card:last-child { margin-right: var(--gutter); }

.rail-nav {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s3);
}
.rail-nav[hidden], .rail-toggle[hidden] { display: none; }
.rail-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--rule-mid);
  background: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  cursor: pointer;
  transition: border-color 0.15s var(--ease-out), background-color 0.15s var(--ease-out);
}
.rail-arrow:hover:not(:disabled) { border-color: var(--ink); background: var(--paper-up); }
.rail-arrow:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.rail-arrow:disabled { opacity: 0.3; cursor: default; }
.rail-count { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; color: var(--muted); min-width: 4ch; text-align: center; }
@media (max-width: 720px) {
  .rail-card::before, .rail-card::after { font-size: 84px; }
}

/* ---------- V13 hero: where growth creates value ----------
   Four global industries, one measure (return on capital less cost of
   capital, percentage points), drawn by js/hero-value.js. Tones from the
   existing on-navy ladder; Software carries the emphasis. The strokes also
   differ in weight and dash, and each line is named at its end. */
:root {
  --val-software: var(--accent-bright);   /* emerald, 6.9:1 on navy-deep */
  --val-semis:    #F4F0E6;                /* cream */
  --val-pharma:   #AEC3E4;                /* pale steel, 9.4:1 */
  --val-auto:     #7C9DD3;                /* steel, 5.7:1: the line below zero */
}
.hero-chart.is-value { margin-top: var(--s2); min-height: 220px; }
.hero-chart.is-value svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-chart.is-value svg:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 6px; }
.hero-chart .val-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hero-chart .val-zero { stroke: var(--rule-dk-strong); stroke-width: 1; }
.hero-chart .val-zero-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--on-dark-mid);
}
.hero-chart .val-unit { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; fill: var(--on-dark-muted); }
.hero-chart .val-end { opacity: 0; transition: opacity 0.5s var(--ease-out); }
.hero-chart .val-end.is-on { opacity: 1; }
.hero-chart .val-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  fill: var(--on-dark-mid);
}
.hero-chart .val-end.is-emphasis .val-label { fill: var(--on-dark); }
.hero-chart .val-label .val-num { font-family: var(--serif); font-size: 13.5px; letter-spacing: 0; fill: var(--on-dark); font-variant-numeric: tabular-nums; }
.hero-chart .val-end.is-emphasis .val-num { fill: var(--accent-bright); }
.hero-chart .val-end-rule { stroke: var(--rule-dk-mid); stroke-width: 1; }
.hero-chart .val-pulse { fill: none; stroke-width: 1.5; opacity: 0; }
.hero-chart .figure-tip .tip-measure { display: block; color: var(--muted); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; margin: 2px 0 4px; }
.hero-chart .figure-tip .tip-row b { font-weight: 400; font-family: var(--serif); font-size: 13px; letter-spacing: 0; }
@media (max-width: 560px) {
  .hero-chart .val-zero-label { font-size: 9px; letter-spacing: 0.08em; }
}

/* Source and method under the figure. */
.hero-source a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--rule-dk-strong); }
.hero-source a:hover { color: var(--on-dark); text-decoration-color: currentColor; }
.hero-method {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--on-dark-muted);
}
.hero-method summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--on-dark-mid);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10px;
}
.hero-method summary::-webkit-details-marker { display: none; }
.hero-method summary::before {
  content: '';
  width: 5px; height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform 0.2s var(--ease-out);
}
.hero-method[open] summary::before { transform: rotate(-135deg); margin-top: 3px; }
.hero-method summary:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
.hero-method ul { margin: 8px 0 0; padding-left: 14px; max-width: 78ch; }
.hero-method li + li { margin-top: 3px; }

/* The cards: the four lines' latest values, keyed by the same stroke. */
.strip.is-value .strip-market {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px;
  white-space: nowrap; overflow-wrap: normal; word-break: normal;   /* the name drops under its key, never breaks mid-word */
}
@media (max-width: 900px) {
  /* four cells are too narrow for the industry names on a tablet: two by two */
  .strip.is-value .strip-grid { grid-template-columns: repeat(2, 1fr); }
  .strip.is-value .strip-cell { border-right: 0; border-bottom: 1px solid var(--rule-dk); padding-left: 0; }
  .strip.is-value .strip-cell + .strip-cell { padding-left: 0; }
  .strip.is-value .strip-cell:nth-child(odd) { border-right: 1px solid var(--rule-dk); padding-right: var(--s3); }
  .strip.is-value .strip-cell:nth-child(even) { padding-left: var(--s3); }
  .strip.is-value .strip-cell:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 560px) {
  .strip.is-value .strip-market { font-size: 14px; gap: 4px 7px; }
  .strip.is-value .strip-key { width: 18px; }
}
.strip-key { width: 22px; height: 6px; flex: none; overflow: visible; }
.strip-key line { stroke: var(--on-dark-mid); stroke-width: 1.6; stroke-linecap: round; }
.strip-cell[data-series="software"] .strip-key line { stroke: var(--val-software); stroke-width: 2.4; }
.strip-cell[data-series="semiconductors"] .strip-key line { stroke: var(--val-semis); }
.strip-cell[data-series="pharmaceuticals"] .strip-key line { stroke: var(--val-pharma); stroke-dasharray: 7 4; }
.strip-cell[data-series="automotive"] .strip-key line { stroke: var(--val-auto); stroke-width: 1.7; stroke-dasharray: 2 4; }
.strip.is-value .strip-value .unit { margin-left: 3px; }
.strip.is-value .strip-note { margin-top: 10px; }
.strip-foot .strip-lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--on-dark);
  margin-right: 4px;
}
@media (max-width: 380px) {
  .strip.is-value .strip-grid { grid-template-columns: repeat(2, 1fr); }
  .strip.is-value .strip-cell { border-right: 0; border-bottom: 1px solid var(--rule-dk); padding-left: 0; padding-right: 0; }
  .strip.is-value .strip-cell:nth-child(odd) { border-right: 1px solid var(--rule-dk); padding-right: var(--s2); }
  .strip.is-value .strip-cell:nth-child(even) { padding-left: var(--s2); }
  .strip.is-value .strip-cell:nth-last-child(-n+2) { border-bottom: 0; }
  .strip.is-value .strip-note { font-size: 9.5px; letter-spacing: 0.03em; }
}


/* ==========================================================================
   V14 · audit round (September 2026)
   Forms, the request dialog, the dashboard, the service grid, the masthead
   over the hero, print and forced colours. Nothing above is rewritten; the
   rules below take precedence by order.
   ========================================================================== */

/* ---------- Forms: a boundary that meets 3:1, a real focus ring, a distinct
   error state, and status regions that are always present. ---------- */
.field input, .field select, .field textarea {
  border-color: var(--rule-strong);            /* ≈3.4:1 against the paper */
  background: var(--paper-up);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: var(--ink);
  box-shadow: inset 4px 0 0 var(--ink);        /* an edge, not just a darker line */
}
.field-dark .field input, .field-dark .field select, .field-dark .field textarea,
.field-abyss .field input, .field-abyss .field select, .field-abyss .field textarea { border-color: var(--rule-dk-strong); }
.field-dark .field input:focus-visible, .field-abyss .field input:focus-visible,
.field-dark .field select:focus-visible, .field-abyss .field select:focus-visible,
.field-dark .field textarea:focus-visible, .field-abyss .field textarea:focus-visible { outline-color: var(--accent-bright); }
.field-error { margin-top: 6px; font-size: 13px; color: var(--ink); }
.field-error[hidden] { display: none; }

/* The status region is in the document from the start, empty and silent;
   it takes its box only once it says something. */
.form-confirm:empty, .req-status:empty { padding: 0; border: 0; margin: 0; min-height: 0; }
.form-confirm { outline: none; }
.form-confirm.is-error { border-left-color: var(--rule-strong); }
.form-confirm:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.req-status { outline: none; }
.req-status[hidden] { display: block; }

/* ---------- The request dialog: title and report above the form, the
   metadata in the content column (the 3px column held only the edge). ---------- */
.req-head { margin-bottom: var(--s2); }
.req-report { grid-template-rows: auto auto; }
.req-report::before { grid-row: 1 / span 2; grid-column: 1; }
.req-report-name, .req-report-meta { grid-column: 2; }
.req-modal.is-done .req-head { display: block; }
.req-done h3:focus { outline: none; }
.req-done h3:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.req-form[aria-busy="true"] button[type="submit"] { opacity: 0.7; cursor: progress; }
form[aria-busy="true"] button[type="submit"] { cursor: progress; }

/* ---------- The masthead over the hero: a ground once the page has moved. ---------- */
.site-header.on-hero.is-scrolled {
  background: rgba(14, 29, 56, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--rule-dk);
}

/* ---------- Service grid: four equal measures, labels on one line. ---------- */
/* Every column carries the same padding and the grid carries the gutter, so
   the four measures are equal; the rule sits on the column's outer edge. */
.paths { column-gap: var(--s4); }
.path { margin-right: 0; padding-right: var(--s4); }
.path:last-child { padding-right: var(--s4); margin-right: 0; border-right: 0; }
.path-kicker { white-space: nowrap; gap: var(--s2); }
.path-kicker .path-mode { letter-spacing: 0.08em; }
@media (max-width: 1180px) and (min-width: 901px) {
  .path-kicker { font-size: 10px; }
  .path-kicker .path-mode { letter-spacing: 0.06em; }
}
@media (max-width: 900px) {
  .path:last-child { padding-right: 0; }
}

/* ---------- Dashboard: dashed legend swatches, a named scroll region, one
   shading scale with its own key, and India marked by an edge. ---------- */
.figure-legend .legend-line { width: 28px; height: 6px; overflow: visible; flex: none; display: inline-block; }
.figure-legend .legend-line line { stroke-linecap: round; }
.read-swatch.is-dashed { background-image: repeating-linear-gradient(90deg, var(--sw) 0 6px, transparent 6px 10px); background-color: transparent; }
.rank-scroll:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 4px; }
.rank-table td.is-india { box-shadow: inset 3px 0 0 var(--accent-bright); }
.rank-table td.is-na .cell-yr { display: block; font-family: var(--mono); font-size: 10px; color: var(--on-dark-muted); margin-top: 2px; }
.rank-key {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
  margin-top: var(--s2);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-muted);
}
.rank-key-swatch { width: 22px; height: 12px; border: 1px solid var(--rule-dk); display: inline-block; }
.rank-key-note { flex-basis: 100%; letter-spacing: 0.05em; text-transform: none; }
.dash-tab:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
.figure-frame svg:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 6px; }

/* ---------- Print: the research pages on paper. ---------- */
@media print {
  .site-header, .site-footer, .nav-toggle, .skip-link, .cta-band, .closing,
  .rail-nav, .rail-toggle, .req-modal, .progress-bar, .hero-plate, .btn, .text-link .arrow { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .hero-dark, .field-dark, .field-abyss, .desk-hero, .strip, .dash { background: #fff !important; color: #000 !important; }
  .hero-dark *, .field-dark *, .field-abyss *, .desk-hero * { color: #000 !important; }
  .hero-chart, .figure-frame { break-inside: avoid; }
  .hero-chart .axis-label, .hero-chart .val-label, .figure-frame .axis-label { fill: #000 !important; }
  .hero-chart .gridline, .figure-frame .gridline { stroke: #999 !important; }
  .hero-chart .val-zero { stroke: #000 !important; }
  .a-rise, .a-hero-el, html.anim .a-rise, html.anim .a-hero-el { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  .container { max-width: none; padding: 0; }
  h1, h2, h3 { break-after: avoid; }
  .rail-viewport { overflow: visible !important; mask-image: none !important; -webkit-mask-image: none !important; }
  .rail-track { transform: none !important; flex-wrap: wrap; animation: none !important; }
  .rail-card.is-dup { display: none !important; }
  details { display: block; }
  details > summary { list-style: none; }
  details:not([open]) > *:not(summary) { display: block; }
}

/* ---------- Forced colours: keep edges and lines where the palette goes. ---------- */
@media (forced-colors: active) {
  .btn, .rail-arrow, .rail-toggle, .chip, .dash-tab, .filter-btn, .req-close { border: 1px solid ButtonText; forced-color-adjust: auto; }
  .field input, .field select, .field textarea { border: 1px solid FieldText; }
  .hero-chart .val-line, .hero-chart .val-zero, .series-line, .series-peer, .spark-line { stroke: CanvasText; }
  .hero-chart .val-end-dot, .hover-dot, .map-pin, .strip-key line { fill: CanvasText; stroke: CanvasText; }
  .rank-table td { border: 1px solid CanvasText; }
  .rail-card { border: 1px solid CanvasText; }
}

/* ---------- Flagship page: exhibits reproduced as tables ---------- */
.exhibit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); }
.exhibit figcaption p { font-family: var(--serif); font-size: 18px; line-height: 1.3; color: var(--ink); margin: 6px 0 var(--s2); }
.exhibit-table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.exhibit-table th, .exhibit-table td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.exhibit-table th[scope="col"] { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.exhibit-table th[scope="row"] { font-weight: 400; color: var(--body-c); padding-right: var(--s3); }
.exhibit-table td { font-family: var(--serif); font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
.exhibit-table tr.is-total th, .exhibit-table tr.is-total td { border-top: 1px solid var(--rule-strong); border-bottom: 0; color: var(--ink); font-weight: 500; }
.exhibit .figure-source { margin-top: var(--s2); }
@media (max-width: 760px) { .exhibit-grid { grid-template-columns: 1fr; } }

/* ---------- The founder: one photograph, beside the biography and the byline ---------- */
.founder-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s4) var(--s6); align-items: start; }
.founder-grid .prose { grid-column: 1; grid-row: 1; }
.founder-portrait { grid-column: 2; grid-row: 1; margin: 0; width: 100%; max-width: 380px; justify-self: end; }
.founder-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--rule); background: var(--paper-dn); }
.founder-portrait figcaption { margin-top: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) {
  .founder-grid { grid-template-columns: 1fr; gap: var(--s3); }
  .founder-portrait { grid-column: 1; grid-row: 1; max-width: 260px; justify-self: start; }
  .founder-grid .prose { grid-row: 2; }
}
.who-byline .founder-thumb { display: block; width: 200px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--rule-dk); margin-bottom: var(--s3); }
@media (max-width: 900px) { .who-byline .founder-thumb { width: 140px; } }