/* LatAm Bonds by SQX — designed stylesheet (design.md has the rationale).
   Visual language from logo.svg: a heavy calligraphic serif name, ONE solid
   square-ended copper bar exactly the cap height of that name, then a light
   grotesque byline that sits on the shared baseline. Here that becomes:
   serif = the market's voice (headings, prose), grotesque = the data's voice
   (numbers, captions, tables, labels, chrome), and the copper bar = the
   divide between them (hero, page lede, stats, steps, callouts, CTA band,
   article sections). Type: Alegreya (Huerta Tipografica, Buenos Aires) and
   Chivo (Omnibus-Type, Buenos Aires). */

:root {
  --primary: #12395C;      /* Andes navy: the wordmark, headings, chart ink */
  --accent: #C4582F;       /* Logo copper: the bar. Marks only, never text */
  --ink: #17212B;          /* Body text */
  --paper: #F3F5F4;        /* Ledger: cool security-paper ground */
  --deep: #0E2A45;         /* Night navy: dark bands (copper holds 3.3:1 here) */
  --copper-ink: #9A4220;   /* Copper that carries text and fills buttons (6:1) */
  --surface: #FFFFFF;      /* Exhibit panels */
  --muted: #4E5B68;        /* Secondary text (6.3:1 on paper) */
  --tint: #E2E8EE;         /* Navy wash for table heads and plates */
  --rule: rgba(18, 57, 92, 0.16);
  --serif: "Alegreya", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Chivo", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --bar: 5px;              /* the logo bar: 5 units wide on a 34-unit cap */
  --wrap: 1120px;
  --gutter: 32px;
  --measure: 41rem;
  --wide: 1056px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.62;
  background: var(--paper);
  color: var(--ink);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* Proof after the evidence: the testimonial strip sits below the page body,
   just before the CTA band (visual order only; it holds nothing focusable). */
body > .quote-strip { order: 1; }
body > .cta-band { order: 2; }
body > .site-footer { order: 3; }
body > main { flex: 1 0 auto; width: 100%; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--copper-ink); }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--copper-ink); outline-offset: 3px; }
strong { font-weight: 700; }
em { font-style: italic; }
code { font-family: var(--mono); font-size: 0.82em; }

/* ---------- Header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  flex-wrap: wrap;
  padding: 24px max(var(--gutter), calc((100% - var(--wide)) / 2)) 0;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
/* The wordmark's letterforms are currentColor; the bar keeps its copper. */
.site-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--primary); text-decoration: none; }
.site-logo svg { height: 30px; width: auto; display: block; }
.site-logo-img { height: 30px; width: auto; display: block; }
.site-logo-name { font-family: var(--serif); font-size: 1.3rem; font-weight: 800; }
.site-logo-name .logo-light { font-family: var(--sans); font-weight: 400; font-size: 0.7em; margin-left: 0.4em; }
.site-nav {
  flex: 1 0 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 2px 4px; flex-wrap: wrap;
  font-family: var(--sans);
  border-top: 1px solid var(--rule);
  padding: 8px 0;
}
.site-nav a {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 8px 0;
  line-height: 1.2;
}
.site-nav a:hover { color: var(--primary); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
/* Current page: the logo bar, cap height, before the name. */
.site-nav a[aria-current="page"] { color: var(--primary); font-weight: 700; padding-left: 11px; }
.site-nav a[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 0.95em;
  transform: translateY(-50%); background: var(--accent);
}
.site-nav .nav-cta {
  margin-left: 4px;
  background: var(--primary);
  color: var(--paper);
  font-weight: 600;
  padding: 9px 16px;
}
.site-nav .nav-cta:hover { background: var(--deep); color: var(--paper); text-decoration: none; }
.site-nav .nav-cta[aria-current="page"] { padding-left: 16px; }
.site-nav .nav-cta[aria-current="page"]::before { display: none; }
.nav-menu-btn { display: none; font: 600 0.875rem var(--sans); background: none; border: 1.5px solid var(--primary); color: var(--primary); padding: 8px 14px; cursor: pointer; }

/* Nav groups (zero-JS dropdowns; closed = clipped, still in tab order). */
.site-nav .nav-group { position: relative; display: inline-flex; align-items: center; }
.site-nav .nav-group-label, .site-nav .nav-group-toggle {
  font: 500 0.875rem var(--sans); background: none; border: 0; cursor: pointer;
  color: var(--ink); padding: 8px 10px; line-height: 1.2;
}
.site-nav button.nav-group-label::after, .site-nav .nav-group-toggle::after { content: " \25BE"; font-size: 0.8em; color: var(--muted); }
.site-nav .nav-group-toggle { padding-left: 0; margin-left: -6px; }
.site-nav .nav-group:hover .nav-group-label,
.site-nav .nav-group:has(:focus-visible) .nav-group-label,
.site-nav .nav-group[data-current] .nav-group-label { color: var(--primary); }
.site-nav .nav-sub {
  position: absolute; top: 100%; left: 0; z-index: 60; min-width: 220px; padding: 8px;
  background: var(--surface); border: 1px solid var(--rule); box-shadow: 0 10px 30px rgba(14, 42, 69, 0.14);
  display: flex; flex-direction: column; gap: 2px;
  clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none;
}
.site-nav .nav-group:hover .nav-sub,
.site-nav .nav-group:has(:focus-visible) .nav-sub { clip-path: none; opacity: 1; pointer-events: auto; }
.site-nav .nav-sub a { display: block; white-space: nowrap; }
.header-actions { display: flex; gap: 8px; font-family: var(--sans); }
.header-action { font-size: 0.85rem; color: var(--primary); }
.site-social { color: var(--primary); display: inline-flex; width: 22px; height: 22px; }
.site-social svg { width: 100%; height: 100%; }
.section-bar { background: var(--surface); border-bottom: 1px solid var(--rule); font-family: var(--sans); font-size: 0.85rem; }
.section-bar-inner { max-width: var(--wrap); margin: 0 auto; padding: 10px var(--gutter); display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.section-nav { display: flex; gap: 12px; flex-wrap: wrap; }
.crumb-current { font-weight: 600; }

/* The signature mark: the logo's bar, drawn as a glyph after a serif "name".
   Cap height of the face it follows (Alegreya caps ~0.65em), width about
   1:7, sitting on the baseline — exactly how the bar stands after "Bonds"
   in the wordmark. One definition, used by the hero, every page title and
   the article headline (display sizes only: below ~40px it reads as a
   text caret, so smaller serif lines do not carry it). */
.hero h1::after,
main > h1::after,
.site-article h1::after {
  content: "";
  display: inline-block;
  width: max(3px, 0.095em);
  height: 0.65em;
  margin-left: 0.2em;
  vertical-align: baseline;
  background: var(--accent);
}

/* ---------- Hero (home): the wordmark at page scale ----------
   serif name, bar, then the grotesque byline: the lede's last line and the
   headline's last line share one baseline, with the bar standing between
   them at cap height, as "BY SQX" shares the baseline of "LatAm Bonds". */
.hero {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 80px var(--gutter) 60px;
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 40px;
}
.hero h1 {
  grid-column: 1;
  grid-row: 1;
  align-self: last baseline;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(2.6rem, 5.4vw, 4.85rem);
  line-height: 0.98;
  letter-spacing: -0.012em;
  color: var(--primary);
  text-wrap: balance;
}
.hero p {
  grid-column: 2;
  grid-row: 1;
  align-self: last baseline;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.58;
  color: var(--ink);
  max-width: 46ch;
}
.hero .contact-actions { grid-column: 2; grid-row: 2; margin-top: 26px; align-items: center; gap: 10px 22px; }
/* One button; the address and number are plain links beside it. */
.hero .action-btn:not(.action-primary) {
  border: 0; padding: 4px 0; background: none; color: var(--primary);
  font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 0.2em; text-decoration-color: rgba(18, 57, 92, 0.4);
}
.hero .action-btn:not(.action-primary):hover { background: none; color: var(--copper-ink); text-decoration-color: currentColor; }

/* ---------- Main column ---------- */
/* The prose column. The imported Explorer (sqx apps/explorer, /explorer/) has two
   mains of its own, main.results (the list, a grid cell) and main.detail-view (a
   bond's page), laid out by the app's styles.css; the column's padding, measure
   and prose type would squeeze its table, so these rules skip them. :where keeps
   each selector's specificity what a bare main gives. */
main:where(:not(.results, .detail-view)) {
  display: block;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 56px var(--gutter) 72px;
}
.page-home main { padding-top: 8px; }
main:not(.lbm, .results, .detail-view) > *, .article-body > *, .document-body > * { max-width: var(--measure); margin-left: auto; margin-right: auto; }
/* The issuer map app keeps its own inner grid, but sits on the site grid
   (the masthead's 1056px) and takes the site's square, white-panel exhibits.
   main.lbm outranks the app's own .lbm rules, which load after this sheet. */
main.lbm {
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 56px var(--gutter) 72px;
  font-family: var(--sans);
  font-size: 1rem;
}
main.lbm > h1 { margin-bottom: 22px; }
main.lbm .lbm-lede { font-size: 1.125rem; line-height: 1.55; max-width: var(--measure); margin-bottom: 28px; }
main.lbm .lbm-map,
main.lbm .lbm-pin,
main.lbm .lbm-key,
main.lbm .lbm-chip,
main.lbm .lbm-close,
main.lbm .lbm-country select,
.lbm ~ .chart-tip, body:has(main.lbm) .chart-tip { border-radius: 0; }
main.lbm .lbm-pin, main.lbm .lbm-key {
  border: 0; border-top: 3px solid var(--primary); padding: 16px 18px 18px;
}
main.lbm .lbm-chip { min-height: 36px; padding: 4px 12px; }
main.lbm .lbm-chip-n { color: var(--muted); }
main.lbm .lbm-country select { padding: 4px 10px; border-color: #77838F; }  /* 3.5:1 on the page, 3.9:1 inside (WCAG 1.4.11) */
main.lbm .lbm-h { font-family: var(--serif); font-weight: 800; font-size: 1.2rem; }
main.lbm .lbm-table summary { font-weight: 600; color: var(--primary); }
/* The app's warm cream card becomes the site's white panel, in either OS
   colour scheme: the site and the app are light only. */
main.lbm {
  --lbm-card: var(--surface); --lbm-muted: var(--muted); --lbm-hair: var(--rule);
  /* cool the app's warm land to the site's grey-green paper family */
  --lbm-land: #D6DDE1; --lbm-land-hot: #C8D1D6; --lbm-context: #E8ECEC; --lbm-key-fill: #C2CBD1; --lbm-border: #F7F9F9;
}
/* The Explorer is a data app, so it sets in the site's sans at the base size, as
   the issuer map does, and its heading and body faces are the site's sans (the
   app's own default face is not loaded here). Its accent is the copper ink. The list's grid fills the page width:
   in the body's flex column an auto-margined box would shrink to its content.
   Chivo sets a 12px ISIN up to 98px wide (MX0MGO… is the widest), so the ISIN
   column takes 8px more and the grid's gaps give it back. From 861px to 1180px
   the rail narrows to 240px so the Instrument column keeps its name and class
   pill beside the seven figure columns. */
.layout:has(> main.results), main.detail-view {
  --head: var(--sans); --body: var(--sans);
  --blue: var(--copper-ink);  /* the app's text-and-fill colour; the logo copper (--accent) is 4.4:1 on white, so marks only */
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
}
.layout:has(> main.results) { width: 100%; gap: 16px; }
.layout:has(> main.results) .grid th.col-isin { width: 120px; }
@media (min-width: 861px) and (max-width: 1180px) {
  .layout:has(> main.results) { grid-template-columns: 240px minmax(0, 1fr); padding-left: 20px; padding-right: 20px; }
}
main:where(:not(.results, .detail-view)) > p, .article-body > p, main:where(:not(.results, .detail-view)) > ul, main:where(:not(.results, .detail-view)) > ol, .article-body > ul, .article-body > ol { margin-bottom: 1.05em; }
main:where(:not(.results, .detail-view)) ul, main:where(:not(.results, .detail-view)) ol { padding-left: 1.3em; }
main:where(:not(.results, .detail-view)) li { margin-bottom: 0.4em; }
main:where(:not(.results, .detail-view)) li::marker { color: var(--copper-ink); }
main:where(:not(.results, .detail-view)) hr { border: 0; height: var(--bar); width: 64px; background: var(--accent); margin-top: 48px; margin-bottom: 48px; }
main:where(:not(.results, .detail-view)) h1, .site-article h1 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--primary);
  margin-bottom: 22px;
  text-wrap: balance;
}
/* Page lede: the byline register under the name (the title carries the bar). */
main:where(:not(.results, .detail-view)) > h1 + p, main:where(:not(.results, .detail-view)) > h1 + .dict-intro {
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 44px;
}
main:where(:not(.results, .detail-view)) h2, main:where(:not(.results, .detail-view)) h3 {
  font-family: var(--serif);
  font-weight: 800;
  color: var(--primary);
  line-height: 1.15;
  text-wrap: balance;
}
main:where(:not(.results, .detail-view)) h2 { font-size: 1.75rem; margin-top: 64px; margin-bottom: 14px; }
main:where(:not(.results, .detail-view)) h3 { font-size: 1.875rem; margin-top: 72px; margin-bottom: 16px; }
main:where(:not(.results, .detail-view)) h4 { font-family: var(--sans); font-size: 1rem; margin-top: 28px; margin-bottom: 8px; }
main:where(:not(.results, .detail-view)) > :first-child { margin-top: 0; }
main:where(:not(.results, .detail-view)) h2 + p, main:where(:not(.results, .detail-view)) h3 + p { margin-top: 0; }

/* Buttons */
.site-btn, .action-btn, .cta-btn, .dict-download-btn, .contact-form button {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none;
  padding: 13px 22px;
  border-radius: 0;
  cursor: pointer;
}
.site-btn, .site-btn-primary { background: var(--copper-ink); color: #fff; border: 1.5px solid var(--copper-ink); margin-top: 8px; }
.site-btn:hover { background: #7E3518; border-color: #7E3518; color: #fff; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.action-btn { font-size: 0.9rem; padding: 11px 18px; color: var(--primary); background: transparent; border: 1.5px solid var(--primary); }
.action-btn:hover { background: var(--primary); color: var(--paper); }
.action-primary { background: var(--copper-ink); border-color: var(--copper-ink); color: #fff; }
.action-primary:hover { background: #7E3518; border-color: #7E3518; color: #fff; }

/* ---------- Layout primitives ---------- */
/* Stats: each figure is a small wordmark — serif numeral, bar, grotesque label. */
.stat-strip {
  list-style: none;
  max-width: var(--wide) !important;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 40px;
  padding: 36px 0 40px !important;
  margin-bottom: 40px !important;
  border-bottom: 1px solid var(--rule);
}
.stat-strip li {
  display: grid;
  grid-template-columns: auto var(--bar) minmax(0, 1fr);
  font-size: 4rem;
  column-gap: 16px;
  align-items: end;
  margin: 0;
}
.stat-strip li::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  height: 0.65em;
  margin-bottom: 0.105em;
  background: var(--accent);
}
.stat-strip strong {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1em;
  line-height: 0.9;
  text-align: right;
  color: var(--primary);
  font-variant-numeric: lining-nums tabular-nums;
}
.stat-strip span {
  grid-column: 3;
  grid-row: 1;
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--ink);
  padding-bottom: 0.4rem;
}

/* Callout: the SQX method note — grotesque on night navy, bar inset. */
.site-callout {
  position: relative;
  background: var(--deep);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 500;
  padding: 24px 30px 24px 56px;
  margin-top: 40px;
  margin-bottom: 40px;
}
.site-callout::before {
  content: ""; position: absolute; left: 30px; top: 28px; bottom: 28px; width: var(--bar); background: var(--accent);
}
.site-callout p { max-width: 62ch; margin: 0 0 0.6em; }
.site-callout p:last-child { margin-bottom: 0; }
.site-callout a { color: var(--paper); }
.site-callout :focus-visible { outline-color: var(--paper); }

/* Pull-quote: the market's voice, set large in the calligraphic italic. */
.site-pullquote {
  margin-top: 48px;
  margin-bottom: 48px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  line-height: 1.22;
  color: var(--primary);
  text-wrap: balance;
}
.site-pullquote p { max-width: 30ch; margin: 0; }

.section-split {
  max-width: var(--wide) !important;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  margin-top: 40px;
  margin-bottom: 48px;
}
.section-split .site-figure { margin: 0; }
.section-split.flip .site-figure { order: 2; }
.split-copy > :last-child { margin-bottom: 0; }
.split-copy p { margin-bottom: 1em; }
.split-copy ul { padding-left: 1.2em; }
.split-copy .card-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 10px; margin-top: 18px !important; }
.split-copy .card-grid li { padding: 14px 18px; }
.section-split.wrap { display: block; }
.section-split.wrap .site-figure { float: left; width: 42%; margin: 4px 32px 12px 0; }
.section-split.wrap.flip .site-figure { float: right; margin: 4px 0 12px 32px; }
.section-split.wrap::after { content: ""; display: table; clear: both; }
.section-split.badge .site-figure { width: 160px; }

/* Figures are plates: a white mat, square, no shadow. */
.site-figure { margin: 36px 0; background: var(--surface); padding: 10px; border: 1px solid var(--rule); }
.site-figure img { display: block; width: 100%; height: auto; }
.site-figure figcaption { font-family: var(--sans); font-size: 0.8rem; color: var(--muted); padding: 10px 4px 2px; }

/* Steps: a real sequence — serif numeral, bar, step. */
.step-flow { max-width: var(--measure); }
.step-flow ol { list-style: none; counter-reset: step; padding: 0; margin: 36px 0 48px; }
.step-flow li {
  counter-increment: step;
  position: relative;
  padding: 2px 0 26px 76px;
  margin: 0;
  min-height: 3.4rem;
}
.step-flow li::before {
  content: counter(step);
  position: absolute; left: 0; top: -0.28rem; width: 42px;
  text-align: right;
  font-family: var(--serif); font-weight: 800; font-size: 2.6rem; line-height: 1;
  color: var(--primary);
}
.step-flow li::after {
  content: ""; position: absolute; left: 56px; top: 0.25rem; width: var(--bar); height: 1.85rem; background: var(--accent);
}
.step-flow li strong { display: block; font-family: var(--sans); font-size: 1.05rem; color: var(--primary); margin-bottom: 2px; }

/* Country assignment (markets page): the same step grammar drawn as an
   exhibit — square night-navy blocks in reading order, each opening with
   serif numeral | bar | label, joined by one navy rule that runs behind
   them (the order is the method: the first test that applies wins). */
.page-markets .step-flow { max-width: var(--wide) !important; }
.page-markets .step-flow ol {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 28px 0 36px;
  background: linear-gradient(var(--primary), var(--primary)) 50% 50% / 80% 2px no-repeat;
}
.page-markets .step-flow li {
  background: var(--deep);
  color: #DCE4EB;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.5;
  padding: 22px 22px 24px;
  min-height: 0;
}
.page-markets .step-flow li::before {
  left: 22px; top: 15px; width: 24px; text-align: left;
  font-size: 2.5rem; color: #fff;
}
.page-markets .step-flow li::after { left: 50px; top: 24px; width: var(--bar); height: 1.62rem; }
.page-markets .step-flow li strong {
  display: flex; align-items: flex-end;
  min-height: 2.05rem; margin: 0 0 12px 46px;
  font-size: 1rem; line-height: 1.25; color: #fff;
}

/* Card grid: plain white panels, square, even rows from the cards-N count. */
.card-grid {
  list-style: none;
  max-width: var(--wide) !important;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  padding: 0 !important;
  margin-top: 32px !important;
  margin-bottom: 48px !important;
}
.card-grid.cards-2, .card-grid.cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid.cards-3, .card-grid.cards-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid li {
  background: var(--surface);
  border-top: 3px solid var(--primary);
  padding: 22px 24px 24px;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
}
.card-grid li strong {
  display: block;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--primary);
  margin-bottom: 10px;
}

/* People / logos (contract classes; unused on this site today). */
.people-grid { list-style: none; padding: 0 !important; max-width: var(--wide) !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px; margin-top: 28px; margin-bottom: 28px; }
.person-card { display: grid; grid-template-columns: 132px 1fr; gap: 20px; align-items: start; }
.person-card:not(:has(.person-photo)) { grid-template-columns: 1fr; }
.person-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.person-text > :first-child { margin-top: 0; }
.logo-wall { list-style: none; padding: 0 !important; max-width: var(--wide) !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin-top: 28px; margin-bottom: 28px; }
.logo-cell { display: flex; align-items: center; justify-content: center; height: 96px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--rule); }
.logo-cell a { display: contents; }
.logo-cell img { max-width: 100%; max-height: 100%; object-fit: contain; }
.section-pair { max-width: var(--wide) !important; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }

/* ---------- Tables ---------- */
.table-scroll { max-width: var(--wide) !important; overflow-x: auto; margin-top: 28px; margin-bottom: 32px; -webkit-overflow-scrolling: touch; }
.site-table, main > table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  background: var(--surface);
}
.site-table th, .site-table td { text-align: left; vertical-align: top; padding: 11px 16px; border-bottom: 1px solid var(--rule); }
.site-table thead th { background: var(--primary); color: var(--paper); font-weight: 600; font-size: 0.85rem; vertical-align: bottom; border-bottom: 0; }
.site-table tbody tr:last-child td { border-bottom: 0; }
.site-table td:first-child { font-weight: 600; color: var(--primary); }
.site-table .num { text-align: right; white-space: nowrap; }
.site-table th.num { white-space: normal; }

/* ---------- Charts: exhibits on white, data marks only ---------- */
.chart-panel {
  max-width: var(--wide) !important;
  background: var(--surface);
  border-top: 3px solid var(--primary);
  padding: 22px 28px 24px;
  margin-top: 32px;
  margin-bottom: 40px;
  font-family: var(--sans);
}
.chart-compare { max-width: 880px !important; }
.chart-caption { font-family: var(--sans); font-size: 0.85rem; line-height: 1.55; color: var(--muted); max-width: 78ch; margin: 0 0 18px; }
.chart-caption .fact { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-panel .table-scroll { margin: 0; }
.chart-panel .site-table { background: transparent; }
.chart-row {
  display: grid;
  grid-template-columns: minmax(10ch, 15rem) minmax(0, 1fr) 4.5rem;
  align-items: center;
  gap: 16px;
  padding: 3px 0;
}
.chart-label { font-family: var(--sans); font-size: 0.85rem; font-weight: 500; color: var(--ink); line-height: 1.25; }
.chart-mark { display: block; width: 100%; height: 18px; overflow: visible; }
.chart-mark .chart-bar { fill: var(--primary); }
.chart-mark .chart-last { fill: var(--primary); stroke: none; }
.chart-mark .chart-ink { fill: var(--primary); }
.chart-mark .chart-spark { fill: none; stroke: var(--primary); stroke-width: 1.75; stroke-linejoin: round; }
.chart-mark circle.chart-last { fill: var(--accent); }
.chart-mark .chart-axis-line { stroke: var(--ink); stroke-opacity: 0.6; stroke-width: 1; }
.chart-value { font-family: var(--sans); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.875rem; color: var(--ink); text-align: right; }
.chart-axis-row { padding-top: 6px; }
.chart-axis-row .chart-value { text-align: left; }
.chart-tick { font-family: var(--sans); font-size: 0.75rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart-axis-caption { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; color: var(--ink); margin-top: 4px; }
.chart-point-value { font-size: 0.75rem; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.chart-values-row { padding-bottom: 0; }
.chart-scale { display: block; font-size: 0.72rem; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.chart-legend { font-family: var(--sans); color: var(--muted); }
.chart-grid-table { font-family: var(--sans); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.chart-grid-head { font-size: 0.8rem; font-weight: 600; color: var(--ink); }
.chart-cell-value { font-variant-numeric: tabular-nums; }
.chart-table { font-variant-numeric: tabular-nums; }

/* Overlay (multi-series line charts): lines, end labels, light value grid. */
.chart-overlay-svg { width: 100%; height: auto; font-family: var(--sans); color: var(--ink); }
.chart-overlay-svg .chart-trail { fill: none; stroke: currentColor; stroke-opacity: 0.18; stroke-width: 1; }
.chart-overlay-svg .chart-trail-pt { fill: currentColor; }
.chart-overlay-svg .chart-grid-line { stroke: var(--primary); stroke-opacity: 0.1; }
.chart-overlay-svg .chart-base-line, .chart-overlay-svg .chart-tick-line { stroke: var(--ink); stroke-opacity: 0.6; }
.chart-overlay-svg .chart-axis-label { fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart-overlay-svg .chart-axis-title { fill: var(--ink); font-weight: 600; }
.chart-overlay-svg .chart-line { fill: none; stroke: var(--c); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.chart-overlay-svg .chart-dot { fill: var(--c); }
.chart-overlay-svg .chart-end { fill: var(--c); font-weight: 700; }
.chart-overlay-svg .chart-leader { stroke: var(--ink); stroke-opacity: 0.35; }
.chart-overlay-svg .chart-zero-line { stroke: var(--ink); stroke-opacity: 0.55; stroke-dasharray: 4 3; }
.chart-overlay-svg .chart-pt { fill: var(--c, var(--primary)); fill-opacity: 0.62; }
.chart-overlay-svg .chart-line, .chart-overlay-svg .chart-dot, .chart-overlay-svg .chart-end { transition: opacity 0.12s, stroke-width 0.12s; }
.chart-overlay-svg.is-active .chart-line:not(.is-on),
.chart-overlay-svg.is-active .chart-dot:not(.is-on),
.chart-overlay-svg.is-active .chart-end:not(.is-on) { opacity: 0.2; }
.chart-overlay-svg .chart-line.is-on { stroke-width: 3.75; }
.chart-overlay-svg .chart-pt:hover, .chart-overlay-svg .chart-pt:focus { fill-opacity: 1; stroke: var(--ink); stroke-width: 1.5; outline: none; }
.chart-overlay-svg .chart-pt-name { fill: var(--ink); font-weight: 600; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.chart-overlay-svg .chart-hover { fill: transparent; }
.chart-overlay-svg .chart-cross { stroke: var(--ink); stroke-opacity: 0.45; pointer-events: none; }
.chart-overlay-svg:focus { outline: none; }
.chart-overlay-svg:focus-visible { outline: 3px solid var(--copper-ink); outline-offset: 3px; }
/* Series inks: navy, teal, copper, ochre, plum, slate — each 4.8:1+ on white
   so the end labels read as text. */
.chart-s0 { --c: #12395C; }
.chart-s1 { --c: #1D6B61; }
.chart-s2 { --c: #B04E28; }
.chart-s3 { --c: #7C6208; }
.chart-s4 { --c: #7A3E66; }
.chart-s5 { --c: #56636F; }
.chart-s6 { --c: #3F6FA8; }
.chart-s7 { --c: #4C7A2A; }
.chart-s8 { --c: #8C2F39; }
.chart-s9 { --c: #2B3440; }
/* Many-line charts: every country a thin context line, the picked ones in
   series ink and named at their ends; the picker names the lines. */
.chart-overlay-svg .chart-ctx { fill: none; stroke: var(--primary); stroke-opacity: 0.2; stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.chart-overlay-svg .chart-ctx.is-picked { stroke: var(--c); stroke-opacity: 1; stroke-width: 2.25; }
.chart-overlay-svg .chart-near { fill: none; stroke: var(--ink); stroke-opacity: 0.6; stroke-width: 1.5; pointer-events: none; }
.chart-overlay-svg .chart-many-end circle { fill: var(--c); }
.chart-overlay-svg .chart-many-end text { fill: var(--c); font-weight: 700; }
.chart-panel .chart-many-hint { font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); opacity: 1; margin: 0 0 6px; }
.chart-panel .chart-picker { margin-top: 10px; font-family: var(--sans); font-size: 0.8125rem; }
.chart-panel .chart-picker summary { cursor: pointer; padding: 4px 0; font-weight: 600; color: var(--primary); }
.chart-panel .chart-picker-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chart-panel .chart-picker-list button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 2px 10px;
  border: 1px solid rgba(18, 57, 92, 0.35); border-radius: 0; background: var(--surface); color: var(--ink);
  font: 500 0.8125rem var(--sans); cursor: pointer;
}
.chart-panel .chart-picker-list button[aria-pressed="true"] { border-color: var(--c); box-shadow: inset 0 0 0 1px var(--c); font-weight: 700; }
.chart-panel .chart-picker-list button[aria-pressed="true"]::before { content: ""; width: 12px; height: 3px; background: var(--c); }
.chart-value-ticks { font-family: var(--sans); }
.chart-tick-strip { font-family: var(--sans); font-size: 0.75rem; color: var(--muted); }
.chart-tip {
  position: fixed; z-index: 50; min-width: 130px; max-width: 280px; padding: 9px 11px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-top: 3px solid var(--primary);
  box-shadow: 0 6px 20px rgba(14, 42, 69, 0.16);
  font-family: var(--sans); font-size: 12.5px; line-height: 1.45; pointer-events: none;
}
.chart-tip-title { margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.chart-tip-row { display: flex; align-items: center; gap: 6px; }
.chart-tip-row strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-tip-row span:last-child { color: var(--muted); }
.chart-tip-key { width: 12px; height: 3px; flex: none; }

/* Panel charts (scatter / network) and hydration — structure kept intact. */
.chart-panel-mark { width: 100%; height: auto; aspect-ratio: 106.40 / 72.40; overflow: visible; }
.chart-panel-mark .chart-point { fill: var(--primary); fill-opacity: 0.62; }
.chart-panel-mark .chart-node { fill: var(--primary); }
.chart-panel-mark .chart-edge { stroke: var(--primary); stroke-opacity: 0.28; }
.chart-panel-mark .chart-arrow { fill: var(--primary); fill-opacity: 0.45; }
.chart-point-label, .chart-node-label { font-size: 2.05px; fill: currentColor; opacity: 0.8; }
.chart-panel-mark .chart-g0 { fill: var(--primary); }
.chart-panel-mark .chart-g1 { fill: var(--accent); }
.chart-panel-mark .chart-g2 { fill: currentColor; fill-opacity: 0.45; }
.chart-stack { position: relative; }
.chart-frame { padding: 6px; }
.chart-stack > .chart-live { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; opacity: 0; transition: opacity 180ms ease-in; }
.chart-live > svg, .chart-live canvas { max-width: 100%; height: auto; }
.chart-hydrated .chart-stack > .chart-live { opacity: 1; }
.chart-hydrated .chart-panel-mark { visibility: hidden; }

/* ---------- Testimonials ---------- */
.quote-strip {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 40px var(--gutter) 64px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 40px;
  border-top: 1px solid var(--rule);
}
.quote-strip h2 {
  grid-column: 1 / -1;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0;
}
.quote { margin: 0; }
.quote blockquote { font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.45; color: var(--ink); }
.quote-attr { margin-top: 8px; font-family: var(--sans); font-size: 0.78rem; line-height: 1.4; color: var(--muted); }

/* ---------- Listings and the financing brief ---------- */
.listing { list-style: none; padding: 0 !important; display: grid; gap: 0; margin-top: 40px !important; }
.listing-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 28px 0 30px;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.listing-item h2 { order: 2; margin: 6px 0 10px !important; font-size: 1.75rem; line-height: 1.15; }
.listing-item h2 a { text-decoration: none; color: var(--primary); }
.listing-item h2 a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.listing-date { order: 1; }
.listing-blurb { order: 3; margin: 0; }
.listing-empty { color: var(--muted); }
.listing-date, .article-date { margin: 0; font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: var(--copper-ink); }
.listing-tags { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--sans); font-size: 0.85rem; margin-bottom: 18px; }

/* Article header: the same divide as the hero — name, bar, standfirst. */
.site-article { max-width: none !important; }
.site-article > header {
  max-width: var(--wide);
  margin: 0 auto 52px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--rule);
}
.site-article > header .article-date { grid-column: 1 / -1; grid-row: 1; margin-bottom: 16px; }
.site-article h1 { grid-column: 1; grid-row: 2; align-self: last baseline; margin: 0; font-size: clamp(2.1rem, 3.7vw, 3.25rem); }
.article-kicker { grid-column: 2; grid-row: 2; align-self: last baseline; font-family: var(--sans); font-size: 1rem; line-height: 1.58; color: var(--ink); margin: 0; }
.article-byline { grid-column: 1 / -1; font-family: var(--sans); font-size: 0.85rem; color: var(--muted); margin-top: 16px; }
.article-hero { max-width: var(--wide); margin: 0 auto 40px; }
.article-hero img { display: block; width: 100%; height: auto; }
.article-body { max-width: none; font-size: 1.1875rem; }
.article-body > p { line-height: 1.66; }
/* Section heads: the bar hangs in the margin at cap height. */
.article-body h2 { position: relative; text-wrap: pretty; font-size: 1.6rem; margin-top: 60px; margin-bottom: 14px; }
.article-body h2::before {
  content: ""; position: absolute; left: -24px; top: 0.2em; width: var(--bar); height: 0.74em; background: var(--accent);
}
.article-body h3 { font-size: 1.3rem; margin-top: 36px; }
.article-body > .table-scroll + p, .article-body > .chart-panel + p { margin-top: 0; }
.article-body > .table-scroll + p { font-family: var(--sans); font-size: 0.8rem; line-height: 1.5; color: var(--muted); }
.article-body > p:last-child { border-top: 1px solid var(--rule); padding-top: 22px; margin-top: 36px; font-family: var(--sans); font-size: 1rem; }
.page-api-link { font-family: var(--sans); font-size: 0.85rem; }

/* ---------- Data dictionary (ink only; the page ships its own fit) ---------- */
.document-body { max-width: var(--wide); }
.dict-intro { font-size: 1.05rem; }
.dict-relationships { margin-top: 32px; margin-bottom: 32px; }
.dict-relationships h2 { margin-top: 32px; }
.dict-download { margin-top: 20px; margin-bottom: 8px; }
.dict-download-btn { background: var(--copper-ink); color: #fff; border: 1.5px solid var(--copper-ink); }
.dict-download-btn:hover { background: #7E3518; border-color: #7E3518; color: #fff; }
.dict-toc { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 24px; margin-bottom: 36px; font-family: var(--sans); font-size: 0.9rem; font-weight: 600; }
.dict-toc a { color: var(--primary); }
.dict-section, .dict-enums { max-width: var(--wide) !important; margin-top: 48px; margin-bottom: 48px; }
.dict-section h2 { margin-top: 0; }
.dict-note { font-family: var(--sans); font-size: 0.92rem; color: var(--muted); max-width: 72ch; margin-bottom: 10px; }
.dict-file-links { font-family: var(--sans); font-size: 0.85rem; margin-bottom: 16px; }
.dict-table { border-collapse: collapse; font-family: var(--sans); font-size: 0.875rem; line-height: 1.45; background: var(--surface); }
.dict-table th, .dict-table td { text-align: left; vertical-align: top; padding: 9px 14px; border-bottom: 1px solid var(--rule); }
.dict-table thead th { background: var(--primary); color: var(--paper); font-size: 0.8rem; font-weight: 600; border-bottom: 0; }
.dict-table tbody tr:nth-child(even) { background: #F7F9FA; }
.dict-table tbody th { font-weight: 600; }
.dict-table code { font-family: var(--mono); font-size: 0.82rem; color: var(--primary); background: none; padding: 0; }
.dict-table td[data-label="Type"] { color: var(--muted); font-family: var(--mono); font-size: 0.8rem; }
.dict-relationships p { margin-bottom: 1em; }
.dict-relationships p:last-child { margin-bottom: 0; }
/* The two file links are separated by space, not a middle dot (the dot is a
   text node the builder writes; font-size 0 on the line removes it). */
.dict-file-links { font-size: 0; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.dict-file-links a { font-size: 0.875rem; }
.dict-modal-form h2 { font-family: var(--serif); }
.dict-modal { font-family: var(--sans); border-radius: 0 !important; }
.dict-modal-form input[type="email"] { border-radius: 0 !important; }

/* ---------- CTA band: statement, bar, action ---------- */
.cta-band { background: var(--deep); color: var(--paper); }
.cta-band .cta-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 56px var(--gutter);
  display: flex;
  align-items: last baseline;
  justify-content: space-between;
  gap: 24px 48px;
}
/* Statement and button share the statement's last baseline. */
.cta-band p { flex: 0 1 auto; font-family: var(--serif); font-size: 1.6rem; line-height: 1.3; max-width: 36ch; margin: 0; }
.cta-band .cta-btn { flex: none; background: var(--paper); color: var(--deep); border: 1.5px solid var(--paper); white-space: nowrap; }
.cta-band .cta-btn:hover { background: #fff; color: var(--copper-ink); }
.cta-band :focus-visible { outline-color: var(--paper); }

/* ---------- Contact ---------- */
.contact-form { display: flex; flex-direction: column; gap: 16px; max-width: var(--measure); margin-top: 32px; font-family: var(--sans); }
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--primary); }
.contact-form input, .contact-form textarea {
  font: 400 1rem var(--sans);
  border: 1.5px solid #8A97A5;
  border-radius: 0;
  padding: 11px 12px;
  background: var(--surface);
  color: var(--ink);
}
.contact-form input:focus, .contact-form textarea:focus { outline: 3px solid var(--copper-ink); outline-offset: 0; border-color: var(--copper-ink); }
.contact-form button { align-self: flex-start; background: var(--copper-ink); color: #fff; border: 1.5px solid var(--copper-ink); }
.contact-form button:hover { background: #7E3518; }
.contact-form button:disabled { opacity: 0.6; cursor: wait; }
.form-note { font-family: var(--sans); font-size: 0.8rem; color: var(--muted); max-width: 56ch; }
.form-success { background: var(--surface); border-left: var(--bar) solid var(--accent); padding: 22px 24px; max-width: 640px; font-family: var(--sans); }
.form-error { color: #A4262C; font-family: var(--sans); font-size: 0.9rem; }

/* ---------- Team ---------- */
.team-grid { list-style: none; padding: 0 !important; max-width: var(--wide) !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.team-card { background: var(--surface); border-top: 3px solid var(--primary); padding: 22px 24px; margin: 0; }
.team-card h2 { margin: 0 0 4px !important; font-size: 1.3rem; }
.team-title { margin: 0 0 10px; font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: var(--copper-ink); }
.team-link { font-family: var(--sans); font-size: 0.85rem; }

/* ---------- Footer ---------- */
.site-footer { background: #0A1F33; color: #D9E1E8; font-family: var(--sans); font-size: 0.875rem; }
.site-footer .footer-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 30px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px 24px;
  flex-wrap: wrap;
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: #fff; text-decoration-color: var(--accent); }
.site-footer .footer-brand { font-family: var(--serif); font-weight: 800; font-size: 1.05rem; color: #fff; }
/* Brand, phone and email separated by space (font-size 0 drops the
   builder's middle-dot text nodes between them). */
.site-footer .footer-inner > div:first-child { font-size: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; }
.site-footer .footer-inner > div:first-child > a { font-size: 0.875rem; }
.site-footer .footer-meta { color: #AEBBC7; }
.site-footer :focus-visible { outline-color: var(--paper); }
.footer-col h2, .footer-col h4 { font-size: 0.85rem; color: #fff; margin-bottom: 8px; }
.footer-legal { color: #AEBBC7; }

/* ---------- Phone ---------- */
@media (max-width: 1100px) {
  /* Too narrow for name and byline side by side: they stack, and the bar
     stays where the name ends. */
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; padding-top: 48px; padding-bottom: 44px; }
  .hero h1 { grid-column: 1; grid-row: 1; align-self: start; margin-bottom: 24px; max-width: 16ch; }
  .hero p { grid-column: 1; grid-row: 2; align-self: start; max-width: 60ch; }
  .hero .contact-actions { grid-column: 1; grid-row: 3; margin-top: 20px; }
  .site-article > header { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .site-article h1 { grid-column: 1; grid-row: 2; align-self: start; margin-bottom: 20px; }
  .article-kicker { grid-column: 1; grid-row: 3; align-self: start; max-width: 60ch; }
}
@media (max-width: 900px) {
  .site-article > header { margin-bottom: 32px; padding-bottom: 28px; }
  .stat-strip { grid-template-columns: 1fr; gap: 22px; }
  .quote-strip { grid-template-columns: 1fr 1fr; }
  .section-split { grid-template-columns: 1fr; gap: 24px; }
  .section-split.flip .site-figure { order: 0; }
  .card-grid.cards-3, .card-grid.cards-6 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  :root { --gutter: 16px; }
  body { font-size: 1.125rem; }
  .site-header { padding: 16px var(--gutter) 0; gap: 12px; }
  .site-logo svg, .site-logo-img { height: 24px; }
  .site-nav { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 0 8px; padding: 4px 0 12px; }
  .site-nav a { padding: 9px 0; font-size: 0.85rem; }
  .site-nav a[aria-current="page"] { padding-left: 11px; }
  .site-nav a[aria-current="page"]::before { left: 0; }
  .site-nav .nav-cta { margin: 6px 0 4px; grid-column: 1 / -1; text-align: center; padding: 11px 16px; }
  .site-nav .nav-group { display: block; width: 100%; }
  .site-nav .nav-group-label { display: block; width: 100%; text-align: left; padding-left: 0; }
  .site-nav .nav-group-toggle { display: none; }
  .site-nav .nav-sub, .site-nav .nav-group:hover .nav-sub {
    position: static; display: flex; box-shadow: none; border: 0; background: none; padding: 0 0 0 12px;
    clip-path: none; opacity: 1; pointer-events: auto;
  }
  main:where(:not(.results, .detail-view)) { padding-top: 36px; padding-bottom: 52px; }
  main:where(:not(.results, .detail-view)) h3 { font-size: 1.6rem; margin-top: 56px; }
  main:where(:not(.results, .detail-view)) h2 { font-size: 1.5rem; margin-top: 52px; }
  .stat-strip li { font-size: 3.2rem; grid-template-columns: 1.15em var(--bar) minmax(0, 1fr); }
  .quote-strip { grid-template-columns: 1fr; padding-top: 32px; padding-bottom: 44px; gap: 20px; }
  .site-callout { padding: 20px 20px 20px 42px; }
  .site-callout::before { left: 20px; top: 24px; bottom: 24px; }
  .chart-panel { padding: 18px 16px 20px; margin-left: calc(-1 * var(--gutter) + 4px) !important; margin-right: calc(-1 * var(--gutter) + 4px) !important; }
  .chart-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 4px 0; }
  .chart-row .chart-mark-stack { grid-column: 1 / -1; grid-row: 2; }
  .chart-axis-row .chart-label, .chart-axis-row .chart-value { display: none; }
  .chart-axis-row .chart-mark-stack { grid-row: 1; }
  .card-grid, ul.card-grid[class*="cards-"] { grid-template-columns: 1fr; }
  .contact-form .form-row { grid-template-columns: 1fr; }
  .site-table { font-size: 0.8rem; }
  .site-table th, .site-table td { padding: 9px 8px; }
  .site-table thead th { font-size: 0.75rem; }
  .article-body h2::before { left: -12px; width: 4px; }
  .step-flow li { padding-left: 64px; }
  .step-flow li::before { width: 34px; font-size: 2.2rem; }
  .step-flow li::after { left: 46px; }
  .cta-band .cta-inner { flex-direction: column; align-items: flex-start; gap: 22px; padding-top: 44px; padding-bottom: 44px; }
  .cta-band p { font-size: 1.35rem; }
  .site-footer .footer-inner { flex-direction: column; align-items: flex-start; }
  .site-footer .footer-inner > div:first-child { flex-direction: column; align-items: flex-start; gap: 8px; }
  .section-split.wrap .site-figure, .section-split.wrap.flip .site-figure { float: none; width: 100%; margin: 0 0 18px; }
  .person-card { grid-template-columns: 96px 1fr; gap: 16px; }
  .section-pair { grid-template-columns: 1fr; }
}

/* Data dictionary, stacked (the page's own fit stacks each field at 760px):
   each field is a padded record, and the cell names read as quiet
   sentence-case Chivo, not tracked capitals. main-scoped selectors outrank
   the page's inline rules. */
@media (max-width: 760px) {
  main .dict-table tbody tr { padding: 14px 16px !important; }
  main .dict-table tbody th, main .dict-table tbody td { padding: 1px 0 !important; }
  main .dict-table tbody th { padding-bottom: 4px !important; }
  main .dict-table td[data-label]::before {
    content: attr(data-label) ": ";
    font-family: var(--sans); font-size: 0.8125rem; font-weight: 500;
    letter-spacing: 0; text-transform: none; opacity: 1; color: var(--muted);
  }
  main .dict-table td[data-label="Type"] { font-family: var(--sans); }
  main .dict-table td[data-label="Type"]::before { font-family: var(--sans); }
}
@media (max-width: 760px) {
  .page-markets .step-flow ol {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); gap: 14px;
    background-position: 34px 50%; background-size: 2px 80%;
  }
  .page-markets .step-flow li { padding: 22px 18px 22px; }
  .page-markets .step-flow li::before { left: 18px; }
  .page-markets .step-flow li::after { left: 46px; }
}

/* ---------- Header search (brand.json header_actions, style search) ----------
   The Explorer's bond search sits at the right of the wordmark row; Enter
   submits, and site_search.js fills the suggestion list under the field. */
.site-logo { order: 1; }
.header-actions { order: 2; margin-left: auto; display: flex; align-items: center; }
.site-nav { order: 3; }
.nav-menu-btn { order: 2; }
.header-search { position: relative; display: flex; align-items: center; }
.header-search-toggle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.header-search-input {
  width: 300px; height: 38px; padding: 0 12px;
  border: 1px solid var(--rule); border-radius: 0; background: #fff; color: var(--ink);
  font: 400 0.875rem var(--sans);
}
.header-search-input::placeholder { color: var(--muted); opacity: 1; }
.header-search-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--primary); }
.header-search-submit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; padding: 0; }
.header-search-list {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; width: min(420px, 92vw);
  margin: 0; padding: 4px 0; list-style: none; background: #fff;
  border: 1px solid var(--rule); box-shadow: 0 8px 24px rgba(18, 57, 92, 0.14);
  max-height: 60vh; overflow-y: auto;
}
.header-search-list[hidden] { display: none; }
.header-search-list > li { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; cursor: pointer; }
.header-search-list > li:hover, .header-search-list > li[aria-selected="true"] { background: var(--paper); box-shadow: inset 3px 0 0 var(--accent); }
.header-search-list .hs-name { color: var(--ink); font: 500 0.875rem var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-search-list .hs-meta { color: var(--muted); font: 400 0.75rem var(--sans); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .header-actions { order: 4; flex-basis: 100%; margin: 10px 0 0; }
  .header-search, .header-search-input { width: 100%; }
}

/* ---------- Phone menu (brand.json nav_menu_button) ----------
   Seven menu entries wrap to five rows on a phone and push the page below the
   first screen, so below 760px they collapse behind the Menu button and open
   as one column. */
.nav-menu-btn { display: none; }
@media (max-width: 760px) {
  .site-header { padding-bottom: 14px; }
  .nav-menu-btn {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
    border: 1px solid var(--rule); background: none; color: var(--primary);
    font: 600 0.875rem var(--sans); cursor: pointer;
  }
  .nav-menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .site-nav { display: none; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 6px 0 0; }
  .nav-open .site-nav { display: flex; }
  .site-nav a { min-height: 44px; display: flex; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}