/* ---- site.css ---- */
/* ==========================================================================
   VASRO homepage, design round 1. Designer 3: "Modern merchant bank".
   Two fields (paper, navy), one grid, type at the size of conviction.
   ========================================================================== */

/* ---------- Fonts (local, licensed for web use) ---------- */
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/serif.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/sans-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/sans-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/sans-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Colour: six named tokens */
  --paper: #F5F0E7;
  --navy: #14223C;
  --slate: #535D73;          /* muted text on paper, 5.8:1 */
  --rule: #CCCBC8;           /* hairline on paper: navy at 18% */
  --white: #FFFFFF;          /* the report sheet */
  --orange: #D2622F;         /* home and the live star only */
  /* Paper at an opacity, for use on navy */
  --on-navy: var(--paper);
  --on-navy-muted: rgba(245, 240, 231, 0.72);   /* 7.8:1 on navy */
  --on-navy-rule: rgba(245, 240, 231, 0.2);
  --land: rgba(245, 240, 231, 0.085);

  /* Type */
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --symbols: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;

  /* Fluid scale: phone 390 value to desktop 1440 value, linear in between */
  --fs-display: clamp(48px, min(calc(10.6px + 11.8vw), 16.5vh), 160px);   /* lead: capped so the line, lead and first action fit the first screen */
  --fs-h2: clamp(40px, calc(18.7px + 6.48vw), 112px);
  --fs-figure: clamp(44px, min(calc(54px + 1.52vw), 15.4vw), 76px);
  --fs-statement: clamp(26px, calc(22.2px + 1.24vw), 40px);
  --fs-title: clamp(21px, calc(19.4px + 0.67vw), 29px);
  --fs-lead: clamp(17px, calc(16.5px + 0.38vw), 22px);
  --fs-body: clamp(16px, calc(16.6px + 0.1vw), 18px);
  --fs-meta: clamp(14px, calc(13.6px + 0.1vw), 15px);
  --fs-small: 13px;

  /* Grid: phone 4 columns */
  --maxw: 1440px;
  --cols: 4;
  --m: 20px;
  --g: 16px;
  --header-h: 64px;
  --section: 72px;
  /* Left edge of the navy plate: the middle of the gutter between columns 7 and 8 (desktop only) */
  --plate-x: calc(50% + (min(100%, var(--maxw)) - 2 * var(--m) + var(--g)) / 12);

  /* Motion: crisp, exact */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.7, 0, 0.2, 1);
}
@media (min-width: 700px) {
  :root { --cols: 8; --m: 40px; --g: 24px; --section: 96px; }
}
@media (min-width: 1100px) {
  :root { --cols: 12; --m: 64px; --g: 32px; --header-h: 80px; --section: 128px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Review 13 Oct (F4, WCAG 2.4.11): a focused link scrolled into view never lands under the sticky header. */
html { scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font: 400 var(--fs-body)/1.55 var(--sans);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure, address { margin: 0; padding: 0; }
ol, ul { list-style: none; }
address { font-style: normal; }
::selection { background: var(--navy); color: var(--paper); }
.on-navy ::selection { background: var(--paper); color: var(--navy); }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
:focus-visible, .is-focus { outline: 2px solid var(--navy); outline-offset: 4px; }
.on-navy :focus-visible, .on-navy .is-focus { outline-color: var(--paper); }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Review 13 Oct (F3, WCAG 2.4.1): the skip link, the first element in <body>. Hidden until it takes
   keyboard focus; then a pill in the top corner where reading starts, above the sticky header. */
.skip-link {
  position: fixed; inset-block-start: 10px; inset-inline-start: 10px; z-index: 2147483647;
  padding: 12px 20px;
  background: var(--paper); color: var(--navy);
  border: 1px solid var(--navy); border-radius: 999px;
  font: 600 16px/1.2 var(--sans); text-decoration: none; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(20, 34, 60, 0.18);
}
.skip-link:not(:focus) {
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); box-shadow: none;
}
.skip-link:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--m); }
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--g); }

/* The navy plate: a large calm field that starts on a column line and runs to the right edge. */
.plate { display: none; position: absolute; top: 0; bottom: 0; right: 0; left: var(--plate-x); background: var(--navy); }

/* ---------- Links and buttons ---------- */
.btn {
  --h: 56px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--h); padding: 0 28px;
  font: 600 16px/1 var(--sans);
  text-decoration: none; white-space: nowrap;
  border: 0; border-radius: 0; cursor: pointer;
}
.btn__label { position: relative; padding-block: 4px; }
/* Hover and focus: a hairline is drawn under the words, like a ruling pen. */
.btn__label::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform 0.45s var(--ease-out);
}
.btn:hover .btn__label::after, .btn:focus-visible .btn__label::after,
.btn.is-hover .btn__label::after, .btn.is-focus .btn__label::after { transform: scaleX(1); }
.btn:active, .btn.is-active { transform: translateY(1px); }
.btn--navy { background: var(--navy); color: var(--paper); }
.btn--navy:hover, .btn--navy.is-hover { background: #0C1629; }
.btn--paper { background: var(--paper); color: var(--navy); }
.btn--paper:hover, .btn--paper.is-hover { background: var(--white); }
.btn--sm { --h: 44px; padding: 0 20px; font-size: 15px; }

.link {
  font: 600 16px/1.3 var(--sans);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.34em;
}
.link:hover, .link.is-hover { text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.link:active, .link.is-active { opacity: 0.8; }

/* ---------- Header ---------- */
.hdr-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }
.hdr {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
}
.hdr::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--rule); opacity: 0; transition: opacity 0.3s var(--ease-out);
}
.hdr.is-stuck::after { opacity: 1; }
.hdr__bar { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); }
.hdr__logo { display: block; flex: none; }
.hdr__logo img { width: 104px; height: auto; }
.hdr__menu {
  display: none;
  margin-left: auto; height: 40px; padding: 0 2px;
  background: none; border: 0; color: var(--navy); cursor: pointer;
  font: 600 16px/1 var(--sans);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.34em;
}
.hdr__nav { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.nav { display: flex; align-items: baseline; gap: 28px; }
.nav a {
  position: relative; display: inline-block; padding: 10px 0;
  font: 500 15px/1 var(--sans); text-decoration: none; white-space: nowrap;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform 0.4s var(--ease-out);
}
.nav a:hover::after, .nav a.is-hover::after { transform: scaleX(1); }
.star { display: inline-block; line-height: 0; font-family: var(--symbols); color: var(--orange); font-size: 0.92em; margin-right: 2px; }

.lang { position: relative; }
.lang summary {
  display: flex; align-items: center; gap: 7px; padding: 10px 2px;
  list-style: none; cursor: pointer; font: 500 15px/1 var(--sans);
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after {
  content: ""; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.3s var(--ease-out);
}
.lang[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.lang__list {
  position: absolute; top: calc(100% + 10px); left: -14px; min-width: 76px;
  padding: 6px 0; background: var(--paper); border: 1px solid var(--rule);
}
.lang__list a { display: block; padding: 9px 14px; font: 500 15px/1 var(--sans); text-decoration: none; }
.lang__list a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.lang__list a[aria-current] { color: var(--slate); }

/* ---------- Section 1: hero ---------- */
.hero__top { padding-top: clamp(28px, 4.2vw, 60px); padding-bottom: clamp(36px, 3.4vw, 48px); }
.hero__title {
  font-family: var(--serif);
  font-weight: 370;
  font-size: var(--fs-display);
  line-height: 1.05;   /* measured: a 'p' over a 'k' collides below 1.005; 1.05 leaves air */
  letter-spacing: -0.025em;
  font-optical-sizing: auto;
}
/* Room for descenders inside the reveal mask. */
.hero__mask { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.hero__line { display: block; }

.hero__base { position: relative; }
.hero__rule { height: 2px; background: var(--navy); margin-inline: var(--m); transform-origin: left center; }
.hero__grid { padding-top: 28px; padding-bottom: 32px; row-gap: 32px; }
.hero__lead { grid-column: 1 / -1; font: 400 var(--fs-lead)/1.45 var(--sans); max-width: 31em; }
.hero__actions { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
.hero__primary { width: 100%; background: var(--navy); color: var(--paper); }
.hero__primary:hover { background: #0C1629; }
.hero__secondary { align-self: flex-start; }

/* ---------- Section 2: the research as an object ---------- */
.research { position: relative; padding-block: var(--section); }
.research__grid { align-items: start; }
.research__head { grid-column: 1 / -1; }
.h2 {
  font-family: var(--serif);
  font-weight: 370;
  font-size: var(--fs-h2);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.h2__line { display: block; }
.research__line { margin-top: 20px; font: 400 var(--fs-lead)/1.45 var(--sans); }

/* The stack: one pile of reports, never a row of covers. */
.stack-col {
  grid-column: 1 / -1;
  margin: 40px calc(var(--m) * -1) 8px;
  padding: 44px 0 64px;
  background: var(--navy);
}
.stack {
  --w: 232px;
  --step: 5px;
  position: relative;
  width: var(--w);
  aspect-ratio: 640 / 905;
  margin-inline: auto;
  translate: calc(var(--step) * -3) 0;
}
.stack__sheet, .stack__edge { position: absolute; inset: 0; width: 100%; height: 100%; }
.stack__sheet { background: var(--white); z-index: calc(20 - var(--i)); }
/* The label under the object, like a vitrine card: the report on top of the stack (desktop only). */
.stack__caption { display: none; }
.stack__mask { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.stack__co, .stack__date { display: block; }
/* The edges of the sheets underneath: the pile has a thickness. */
.stack__edge {
  z-index: calc(10 - var(--k));
  background: var(--white);
  box-shadow: inset -1px -1px 0 rgba(20, 34, 60, 0.28);
  transform: translate(calc(var(--k) * var(--step)), calc(var(--k) * var(--step)));
}

.ledger { grid-column: 1 / -1; margin-top: 8px; border-bottom: 1px solid var(--rule); }
.entry {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr);
  padding: 22px 0 26px;
  border-top: 1px solid var(--rule);
}
/* The rule tightens: a 2px navy line drawn over the hairline. */
.entry::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--navy);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.6s var(--ease-out);
}
.entry:hover::before, .entry.is-active::before, .entry.is-hover::before { transform: scaleX(1); }
.entry__date { font: 500 var(--fs-meta)/1.4 var(--sans); color: var(--slate); font-variant-numeric: tabular-nums; }
.entry__day { display: inline-block; text-align: right; }
.entry__date { white-space: nowrap; }
.entry__meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin: 2px 0 10px;
  font: 500 var(--fs-meta)/1.4 var(--sans);
}
.entry__co { font-weight: 600; }
.entry__type { color: var(--slate); text-align: right; }
.entry__title {
  font-family: var(--serif);
  font-weight: 420;
  font-size: var(--fs-title);
  line-height: 1.22;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.entry__link { text-decoration: none; }
.entry__link::after { content: ""; position: absolute; inset: 0; }
.entry:hover .entry__link, .entry.is-hover .entry__link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.entry__link:focus-visible { outline: none; }
.entry:has(.entry__link:focus-visible) { outline: 2px solid var(--navy); outline-offset: 4px; }
.research__all { grid-column: 1 / -1; padding-top: 32px; }

/* ---------- Section 3: reach ---------- */
.reach { position: relative; background: var(--navy); color: var(--on-navy); padding-block: var(--section); }
.reach__title { grid-column: 1 / -1; }
.map { grid-column: 1 / -1; position: relative; margin: 40px calc(var(--m) * -1) 0; }
.map__svg { width: 100%; height: auto; }
.map__land { fill: var(--land); }
.map__pts { position: absolute; inset: 0; }
.map__pt, .map__home { position: absolute; width: 0; height: 0; }
.map__pt::before {
  content: ""; position: absolute; width: 4px; height: 4px; left: -2px; top: -2px;
  border-radius: 50%; background: var(--paper);
}
.map__home::before {
  content: ""; position: absolute; width: 8px; height: 8px; left: -4px; top: -4px;
  border-radius: 50%; background: var(--orange);
}
.map__label {
  position: absolute; left: 11px; top: -6px;
  font: 500 12px/1 var(--sans); color: var(--on-navy-muted); white-space: nowrap;
}

.figures { grid-column: 1 / -1; margin-top: 40px; border-top: 1px solid var(--on-navy-rule); }
.figure { padding: 26px 0 30px; border-bottom: 1px solid var(--on-navy-rule); }
.figure__num {
  white-space: nowrap;
  font-family: var(--serif);
  font-weight: 370;
  font-size: var(--fs-figure);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}
.figure__means { margin-top: 14px; font: 400 var(--fs-body)/1.5 var(--sans); color: var(--on-navy-muted); max-width: 24em; }
.reach__close {
  grid-column: 1 / -1;
  margin-top: 48px;
  font-family: var(--serif);
  font-weight: 380;
  font-size: var(--fs-statement);
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.reach__close span { display: block; text-wrap: balance; }

/* ---------- Footer ---------- */
.ftr { padding-block: 48px 40px; }
.ftr__grid { row-gap: 20px; align-items: start; }
.ftr__motto { grid-column: 1 / -1; font: 380 26px/1.1 var(--serif); letter-spacing: -0.01em; }
.ftr__addr { grid-column: 1 / -1; font: 400 14px/1.6 var(--sans); color: var(--slate); }
.ftr__links { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, max-content); gap: 6px 28px; font: 500 14px/1.6 var(--sans); }
.ftr__links a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.3em; }
.ftr__links a:hover { text-decoration-color: currentColor; }

/* ==========================================================================
   Phone and tablet: the menu becomes a full navy sheet (only with JavaScript)
   ========================================================================== */
@media (max-width: 1099.98px) {
  .js .hdr__menu { display: inline-flex; align-items: center; }
  .js .hdr__nav { display: none; }
  .js.menu-open { overflow: hidden; }
  .js.menu-open .hdr::after { opacity: 0; }
  .js.menu-open .hdr__nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 32px;
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
    padding: 24px var(--m) 40px; overflow-y: auto;
    background: var(--navy); color: var(--on-navy);
  }
  .js.menu-open .nav { flex-direction: column; align-items: stretch; gap: 0; }
  .js.menu-open .nav a {
    display: block; padding: 16px 0 14px;
    font: 370 34px/1.05 var(--serif); letter-spacing: -0.01em;
    border-bottom: 1px solid var(--on-navy-rule);
  }
  .js.menu-open .nav a::after { content: none; }
  .js.menu-open .lang summary { display: none; }
  .js.menu-open .lang__list { position: static; display: flex; gap: 8px; padding: 0; border: 0; background: none; }
  .js.menu-open .lang__list a { padding: 10px 12px 10px 0; }
  .js.menu-open .lang__list a[aria-current] { color: var(--on-navy-muted); }
  .js.menu-open .hdr__cta { background: var(--paper); color: var(--navy); height: 56px; font-size: 16px; }
  .js.menu-open .hdr__nav :focus-visible { outline-color: var(--paper); }
  /* Review 13 Oct (B1): with the sheet open the header's hidden call gives its place back, so the longer
     labels ("Schließen") keep the whole width; Close moves to the far edge (the inline end, also in Arabic).
     html and .hdr__bar lift the rule above r3e.css and the Arabic block of r5.css. */
  .js.menu-open .hdr__call { display: none; }
  html.js.menu-open .hdr__bar .hdr__menu { margin-inline-start: auto; }

  /* Without JavaScript the navigation simply wraps under the logo. */
  html:not(.js) .hdr { position: relative; }
  html:not(.js) .hdr__bar { flex-wrap: wrap; padding-block: 12px; row-gap: 4px; }
  html:not(.js) .hdr__nav { flex-wrap: wrap; margin-left: 0; width: 100%; gap: 4px 20px; }
  html:not(.js) .nav { flex-wrap: wrap; gap: 0 18px; }
}
/* The language list opens in place when the details element is open on any width. */
.lang:not([open]) .lang__list { display: none; }
.js.menu-open .lang .lang__list { display: flex; }

/* ==========================================================================
   Tablet (700 and up)
   ========================================================================== */
@media (min-width: 700px) {
  .hdr__logo img { width: 116px; }
  .hero__actions { flex-direction: row; align-items: center; gap: 32px; }
  .hero__primary { width: auto; }
  .hero__secondary { align-self: center; }
  .stack { --w: 260px; --step: 6px; }
  .entry { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--g); }
  .entry__date { grid-column: 1 / span 2; padding-top: 1px; }
  .entry__day { min-width: 1.2em; }   /* two tabular digits of Instrument Sans: 600 + 600 units */
  .entry__body { grid-column: 3 / -1; }
  .research__all { padding-left: calc((100% - 7 * var(--g)) / 8 * 2 + 2 * var(--g)); }
  .map { margin-inline: 0; }
  .ftr__motto { grid-column: 1 / span 4; }
  .ftr__addr { grid-column: 5 / span 4; }
}

/* ==========================================================================
   Desktop (1100 and up): the plate system
   ========================================================================== */
@media (min-width: 1100px) {
  .hdr__logo img { width: 128px; }
  /* The header sits on the same 12 columns: the action spans exactly columns 11 and 12. */
  .hdr__bar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
  .hdr__logo { grid-column: 1 / span 2; }
  .hdr__nav { grid-column: 3 / -1; display: grid; grid-template-columns: subgrid; align-items: center; margin: 0; }
  .hdr__nav > nav { grid-column: 1 / span 7; justify-self: end; }
  .lang { grid-column: 8; justify-self: start; }
  .hdr__cta { grid-column: 9 / span 2; width: 100%; }
  .nav { gap: clamp(20px, 2vw, 30px); }
  .hdr__nav { gap: clamp(24px, 2.2vw, 36px); }

  .plate { display: block; }

  /* Hero: the rule runs into the corner of the plate */
  .hero__rule { margin: 0; position: absolute; top: 0; height: 2px; left: calc((100% - min(100%, var(--maxw))) / 2 + var(--m)); right: calc(100% - var(--plate-x)); }
  .hero__grid { position: relative; padding-top: 34px; padding-bottom: 80px; row-gap: 0; }
  .hero__lead { grid-column: 1 / span 6; }
  .hero__actions { grid-column: 9 / span 4; align-self: start; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px 36px; color: var(--on-navy); }
  .hero__secondary { white-space: nowrap; }
  .hero__actions :focus-visible { outline-color: var(--paper); }
  .hero__primary { background: var(--paper); color: var(--navy); }
  .hero__primary:hover { background: var(--white); }

  /* Section 2: index on paper (columns 1 to 7), the stack on the plate (8 to 12) */
  .research { padding-block: 112px 120px; }
  .research__head { grid-column: 1 / span 7; grid-row: 1; padding-bottom: 72px; }
  .research__line { margin-top: 28px; }
  .stack-col {
    grid-column: 8 / span 5; grid-row: 1 / span 3; align-self: stretch;
    margin: 0; padding: 0; background: none;
  }
  .stack-wrap {
    --w: min(320px, calc((min(100vw, 1440px) - 480px) / 3 + 36px));
    position: sticky;
    /* The object and its label, centred below the header; capped so a very tall viewport keeps it near the top. */
    top: min(calc(var(--header-h) + (100vh - var(--header-h) - var(--w) * 1.414 - 132px) / 2), 210px);
    margin: 10px 0 0 calc((100% - 4 * var(--g)) / 5 + var(--g));   /* left edge on column 9 */
  }
  .stack { --w: inherit; --step: 6px; margin: 0; translate: none; }
  .stack__caption { display: block; margin-top: 56px; color: var(--on-navy); }
  .stack__co { font: 380 28px/1.1 var(--serif); letter-spacing: -0.01em; }
  .stack__date { margin-top: 6px; font: 500 15px/1.4 var(--sans); color: var(--on-navy-muted); font-variant-numeric: tabular-nums; }
  .ledger {
    grid-column: 1 / span 7; grid-row: 2; margin-top: 0;
    display: grid; grid-template-columns: subgrid;
  }
  .entry { grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: var(--g); padding: 26px 0 30px; }
  .entry__date { grid-column: 1 / span 2; padding-top: 2px; }
  .entry__body { grid-column: 3 / -1; }
  .research__all { grid-column: 3 / span 5; grid-row: 3; padding: 36px 0 0; }

  /* Section 3: the plate floods the full width */
  .reach { padding-block: 120px 128px; }
  .reach__title { grid-column: 1 / span 11; }
  .map { margin: 56px 0 0; }
  .map__pt::before { width: 7px; height: 7px; left: -3.5px; top: -3.5px; }
  .map__home::before { width: 11px; height: 11px; left: -5.5px; top: -5.5px; }
  .map__label { left: 16px; top: -7px; font-size: 13px; }

  .figures {
    margin-top: 56px; display: grid; grid-template-columns: subgrid;
    border-bottom: 1px solid var(--on-navy-rule);
  }
  .figure { grid-column: span 4; position: relative; padding: 36px 0 40px; border-bottom: 0; }
  /* 18.3% of a four-column cell: 76px at 1440, 66px at 1280, 55px at 1100. */
  .figure__num { font-size: min(76px, calc(6.09vw - 11.7px)); }
  .figure + .figure::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--g) / -2); width: 1px;
    background: var(--on-navy-rule);
  }
  .figure__means { margin-top: 20px; max-width: 21em; }
  .reach__close { grid-column: 1 / span 9; margin-top: 64px; }

  .ftr { padding-block: 56px 48px; }
  .ftr__grid { align-items: baseline; }
  .ftr__links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
  .ftr__motto { grid-column: 1 / span 4; font-size: 30px; }
  .ftr__addr { grid-column: 5 / span 4; }
  .ftr__links { grid-column: 9 / span 4; justify-content: flex-end; }
}

/* ==========================================================================
   Motion: hidden starting states, only with JavaScript and only when motion is allowed
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .motion:not(.intro-done) .hero__mask { clip-path: inset(0 0 100% 0); }
  .motion:not(.intro-done) .hero__rule { transform: scaleX(0); }
  .motion:not(.intro-done) .hero__lead,
  .motion:not(.intro-done) .hero__actions { clip-path: inset(0 100% 0 0); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1100px) {
  .motion:not(.intro-done) .plate--hero { clip-path: inset(0 0 100% 0); }
  /* While the index scrolls, the newest sheet is laid on top. */
  .motion .stack__sheet { z-index: calc(20 + var(--i)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ==========================================================================
   Merge (lead): the client's two preview choices
   1. data-hero="report": the latest report stands on the line between the words (paper)
      and the work (navy plate) from the first screen, and it is the same stack that
      receives each report as the index is read. data-hero="words": designer 3's original.
   2. data-accent: burnt orange from the brief, or the coral of the VASRO logo.
   ========================================================================== */
html[data-accent="coral"] { --orange: #FD5E5E; }

.work { position: relative; }
.work__aside { display: none; }

@media (min-width: 1100px) {
  .work {
    /* Same width rule as the stack in Section 2, so the object never changes size. */
    --sw: min(320px, calc((min(100vw, 1440px) - 480px) / 3 + 36px));
    --sh: calc(var(--sw) * 1.4141);
    /* Where the rule sits, measured from the top of the hero: its padding plus three set lines. */
    --rule-y: calc(clamp(28px, 4.2vw, 60px) + 3 * 1.05 * var(--fs-display) + clamp(36px, 3.4vw, 48px));
  }

  html[data-hero="report"] .research .stack-col { display: none; }
  html[data-hero="report"] .work__aside {
    display: block;
    position: absolute; left: 0; right: 0;
    /* Half of the report above the line, half on the plate. */
    top: calc(var(--rule-y) - var(--sh) / 2 - 10px);
    bottom: 120px;
    z-index: 2;
    pointer-events: none;
  }
  html[data-hero="report"] .work__grid { height: 100%; }
  html[data-hero="report"] .stack-col--aside { grid-column: 8 / span 5; height: 100%; }
  html[data-hero="report"] .stack-col--aside .stack-wrap { --w: var(--sw); }
  /* Above the line the sheet lies on paper, so it needs a soft shadow to read as an object. */
  html[data-hero="report"] .stack-col--aside .stack { filter: drop-shadow(0 22px 34px rgba(20, 34, 60, 0.16)); }

  /* The actions leave the plate and sit under the line, on paper. */
  html[data-hero="report"] .hero__lead { grid-column: 1 / span 6; grid-row: 1; }
  html[data-hero="report"] .hero__actions { grid-column: 1 / span 6; grid-row: 2; margin-top: 32px; color: var(--navy); }
  html[data-hero="report"] .hero__actions :focus-visible { outline-color: var(--navy); }
  html[data-hero="report"] .hero__primary { background: var(--navy); color: var(--paper); }
  html[data-hero="report"] .hero__primary:hover { background: #0C1629; }
  html[data-hero="report"] .hero__grid { padding-bottom: 96px; }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 1100px) {
  /* The report rises out of the plate once the plate has dropped. */
  html[data-hero="report"].motion:not(.intro-done) .work__aside .stack-wrap { clip-path: inset(100% 0 0 0); }
}

/* Merge: while the hero's own primary action is on screen, the header's copy of it steps back
   to an outline; once the page has scrolled, it becomes the solid action. */
@media (min-width: 1100px) {
  html[data-hero="report"] .hdr:not(.is-stuck) .hdr__cta { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
  html[data-hero="report"] .hdr:not(.is-stuck) .hdr__cta:hover { background: var(--navy); color: var(--paper); }
  .hdr__cta { transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
}

/* ---- hero.css ---- */
/* ==========================================================================
   First screen, round 1b: one full-screen photograph, the headline on its calm sky.
   The client's 4 October plan ("PROMPT 1, FIRST SCREEN"). Replaces the A/B heroes.
   ========================================================================== */

/* The photograph runs under the header: the header floats over it until the hero has scrolled past. */
.hero--photo {
  position: relative;
  isolation: isolate;
  color: var(--paper);
  background: var(--navy);           /* what shows while the photograph loads */
  min-height: clamp(560px, 92svh, 980px);
  display: flex;
}
.js .hero--photo { margin-top: calc(-1 * var(--header-h)); }

.hero__media { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.hero__media picture, .hero__img { display: block; width: 100%; height: 100%; }
.hero__img { object-fit: cover; object-position: 50% 50%; transform-origin: 70% 70%; will-change: transform; }

/* A photographic scrim, not a decorative gradient: it only keeps white type readable. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 17, 31, 0.5) 0%, rgba(10, 17, 31, 0.22) 42%, rgba(10, 17, 31, 0) 68%),
    linear-gradient(180deg, rgba(10, 17, 31, 0.55) 0%, rgba(10, 17, 31, 0.2) 38%, rgba(10, 17, 31, 0.12) 58%, rgba(10, 17, 31, 0.62) 100%);
}

.hero__inner {
  position: relative;
  width: 100%;
  align-content: space-between;
  padding-top: calc(var(--header-h) + clamp(36px, 7vh, 96px));
  padding-bottom: clamp(36px, 7vh, 88px);
  row-gap: 40px;
}
.hero--photo .hero__title {
  grid-column: 1 / -1;
  color: var(--paper);
  font-size: clamp(46px, min(calc(8px + 7.4vw), 13.5vh), 124px);
  line-height: 1.04;
  text-wrap: balance;
}
.hero__foot { grid-column: 1 / -1; display: grid; row-gap: 28px; align-self: end; }
.hero--photo .hero__lead { color: rgba(245, 240, 231, 0.92); max-width: 30em; font: 400 var(--fs-lead)/1.45 var(--sans); }
.hero--photo .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; color: var(--paper); }
.hero--photo .hero__primary { background: var(--paper); color: var(--navy); }
.hero--photo .hero__primary:hover { background: var(--white); }
.hero--photo .hero__secondary { color: var(--paper); }
.hero--photo :focus-visible { outline-color: var(--paper); }

@media (min-width: 1100px) {
  .hero__foot { grid-column: 1 / span 7; }
}

/* Review 13 Oct (B4, WCAG 1.4.3): on phones the tall crop puts the lamp-lit book behind the line and the
   actions (on tablets the line's end reaches the book too). The scrim deepens from just above the line to
   the photograph's lower edge, edge to edge, so the line keeps 4.5:1 whatever the language's line count;
   the sky and the headline above stay as they are. It belongs to the words (it fades in with them on the
   first visit). Desktop keeps the photograph's own scrim (measured 4.5:1 and more). */
@media (max-width: 1099.98px) {
  .hero__foot { position: relative; }
  .hero__foot::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: calc(-1 * var(--m)); right: calc(-1 * var(--m));
    top: -72px; bottom: calc(-1 * clamp(36px, 7vh, 88px));
    background: linear-gradient(180deg, rgba(10, 17, 31, 0) 0, rgba(10, 17, 31, 0.6) 72px, rgba(10, 17, 31, 0.66) 100%);
  }
}

/* ---------- Header over the photograph ---------- */
.hdr__logo-light { display: none; }
.js:not(.menu-open) .hdr--over { background: transparent; color: var(--paper); }
.js:not(.menu-open) .hdr--over::after { opacity: 0; }
.js:not(.menu-open) .hdr--over .hdr__logo-dark { display: none; }
.js:not(.menu-open) .hdr--over .hdr__logo-light { display: block; }
.js:not(.menu-open) .hdr--over .nav a,
.js:not(.menu-open) .hdr--over .lang summary,
.js:not(.menu-open) .hdr--over .hdr__menu { color: var(--paper); }
/* The language list is a paper box: its links stay navy over the photograph (they inherited paper before). */
.js:not(.menu-open) .hdr--over .lang__list a { color: var(--navy); }
.js:not(.menu-open) .hdr--over .lang__list a[aria-current] { color: var(--slate); }
.js:not(.menu-open) .hdr--over .hdr__cta { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px rgba(245, 240, 231, 0.7); }
.js:not(.menu-open) .hdr--over .hdr__cta:hover { background: var(--paper); color: var(--navy); }
.js:not(.menu-open) .hdr--over :focus-visible { outline-color: var(--paper); }
.hdr { transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out); }

/* ---------- Motion starting states (only with JavaScript, only when motion is allowed) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .motion:not(.intro-done) .hero__foot { opacity: 0; transform: translateY(14px); }
}
@media (prefers-reduced-motion: no-preference) {
  /* The round 1 hero wiped its line and actions in; this one does not. */
  .motion:not(.intro-done) .hero--photo .hero__lead,
  .motion:not(.intro-done) .hero--photo .hero__actions { clip-path: none; }
}

/* Once the page moves, the header over the photograph becomes a dark glass bar, so the headline
   never runs through the logo; it turns to paper when the photograph has scrolled away. */
.js:not(.menu-open) .hdr--over.is-stuck {
  background: rgba(14, 24, 43, 0.94);
}
@supports (backdrop-filter: blur(8px)) {
  .js:not(.menu-open) .hdr--over.is-stuck { background: rgba(14, 24, 43, 0.82); backdrop-filter: blur(10px); }
}

/* ---- r2a.css ---- */
/* ==========================================================================
   VASRO homepage, round 2, builder A: Sections 4, 5 and 6.
   Linked after site.css. Uses only its tokens, type sizes, grid and plate line.
   ========================================================================== */

/* ---------- Section 4: the companies (a belt with no visible heading) ---------- */
.companies {
  --k: 0.56;        /* logo scale: each logo's reference height (--h, set in the HTML) times this */
  --gap: 48px;      /* space between logos in the moving belt */
  padding-block: 48px;
}
.belt { padding-block: 16px; }
/* Base state, which is also the state without JavaScript and under reduced motion:
   a still wall, left aligned on the grid. */
.belt__set {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 28px 40px;
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--m);
}
.belt__logo { display: block; flex: none; width: auto; height: calc(var(--h) * var(--k) * 1px); }

/* With motion (js/r2a.js adds .belt-on): one undivided row, edge to edge of the screen. */
.belt-on .belt { overflow: hidden; }
.belt-on .belt__track { display: flex; width: max-content; }
.belt-on .belt__set { flex-wrap: nowrap; gap: var(--gap); max-width: none; margin: 0; padding: 0 var(--gap) 0 0; }
/* The region takes keyboard focus so the belt can be stopped without a mouse; the ring frames the belt. */
.belt-on:focus-visible { outline: none; }
.belt-on:focus-visible .belt { outline: 2px solid var(--navy); outline-offset: -2px; }

/* ---------- Section 5: what a listed company receives ---------- */
.services { padding-block: var(--section); }
.services__title { grid-column: 1 / -1; }
.services__line { grid-column: 1 / -1; margin-top: 20px; font: 400 var(--fs-lead)/1.45 var(--sans); max-width: 31em; }

/* The ledger of five. On a phone each photograph is a full-width band, as the plate is in m1. */
.svc-list { margin-top: 48px; }
.svc + .svc { margin-top: 56px; }
.svc__photo {
  grid-column: 1 / -1; grid-row: 1;
  margin-inline: calc(var(--m) * -1);
  aspect-ratio: 3 / 2; overflow: hidden;
  background: var(--rule);
}
.svc__photo img { width: 100%; height: 100%; object-fit: cover; }
.svc__text { grid-column: 1 / -1; grid-row: 2; padding-top: 22px; }
.svc__name {
  font-family: var(--serif);
  font-weight: 380;
  font-size: var(--fs-statement);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.svc__line { margin-top: 10px; font: 400 var(--fs-lead)/1.45 var(--sans); max-width: 31em; text-wrap: balance; }
/* The quiet link: the footer's underline in the rule colour, which darkens on hover. */
.svc__talk {
  display: inline-block; margin-top: 12px; padding-block: 4px;
  font: 500 var(--fs-meta)/1.4 var(--sans);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: var(--rule); text-underline-offset: 0.3em;
}
.svc__talk:hover { text-decoration-color: currentColor; }

/* After the five: the section's closing line (not a sixth service: no photograph, no row). */
.svc-close { margin-top: 72px; }
.svc-close__head { grid-column: 1 / -1; font: 600 var(--fs-body)/1.4 var(--sans); }
.svc-close__line {
  grid-column: 1 / -1; margin-top: 12px;
  font-family: var(--serif);
  font-weight: 380;
  font-size: var(--fs-statement);
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* ---------- Section 6: we stay (typography only) ---------- */
.stay { background: var(--navy); color: var(--on-navy); padding-block: var(--section); }
.stay__title { grid-column: 1 / -1; }
.stay__line {
  grid-column: 1 / -1; margin-top: 24px;
  font-family: var(--serif);
  font-weight: 380;
  font-size: var(--fs-statement);
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.stay__line span { display: block; text-wrap: balance; }

/* ==========================================================================
   Tablet (700 and up): words on the left half, the photograph from the middle gutter to the edge
   ========================================================================== */
@media (min-width: 700px) {
  .companies { --k: 0.68; --gap: 72px; padding-block: 64px; }
  .belt__set { gap: 32px 56px; }

  .services__line { margin-top: 24px; }
  .svc-list { margin-top: 64px; }
  .svc { align-items: start; }
  .svc + .svc { margin-top: 48px; }
  .svc__text {
    grid-column: 1 / span 4; grid-row: 1; align-self: stretch;
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start;
  }
  /* The quiet link sits on the photograph's bottom line. */
  .svc__talk { margin-top: auto; padding-top: 20px; }
  /* The row's hairline runs from the margin into the photograph's corner. */
  .svc__text::before {
    content: ""; position: absolute; top: 0; left: 0; right: calc(var(--g) / -2);
    height: 1px; background: var(--rule);
  }
  .svc__photo { grid-column: 5 / -1; grid-row: 1; margin: 0 calc(var(--m) * -1) 0 calc(var(--g) / -2); }

  .svc-close { margin-top: 88px; }
  .svc-close__line { grid-column: 1 / span 7; }
}

/* ==========================================================================
   Desktop (1100 and up): the photographs stand where the plate stood
   ========================================================================== */
@media (min-width: 1100px) {
  .companies { --k: 0.8; --gap: 96px; padding-block: 88px; }
  /* The still wall keeps to two even rows at every desktop width (sizes and gaps follow the grid's width). */
  .belt__set { gap: 32px min(64px, calc((100vw - 128px) * 64 / 1312)); }
  .companies:not(.belt-on) .belt__set { padding-right: calc(var(--m) + (min(100vw, var(--maxw)) - 2 * var(--m)) * 162 / 1312); }
  .companies:not(.belt-on) .belt__logo { height: min(calc(var(--h) * var(--k) * 1px), calc(var(--h) * var(--k) * (100vw - 128px) / 1312)); }

  .services { padding-block: 96px 128px; }
  .services__title { grid-column: 1 / span 10; }
  .services__line { grid-column: 1 / span 6; margin-top: 28px; }
  .svc-list { margin-top: 88px; }
  .svc + .svc { margin-top: 64px; }
  .svc__text { grid-column: 1 / span 7; padding-top: 26px; }
  .svc__line { margin-top: 12px; }
  /* From the middle of the gutter between columns 7 and 8 (the plate line) to the edge of the screen. */
  .svc__photo {
    grid-column: 8 / -1;
    margin: 0 calc(-1 * (var(--m) + (100vw - min(100vw, var(--maxw))) / 2)) 0 calc(var(--g) / -2);
    aspect-ratio: auto;
  }
  /* 2:1. Wider than 1440 the band grows longer, not taller (the cap sits on the image, whose width is fixed). */
  .svc__photo img { height: auto; aspect-ratio: 2 / 1; max-height: 360px; }

  .svc-close { margin-top: 112px; }
  .svc-close__line { grid-column: 1 / span 9; margin-top: 16px; }

  .stay { padding-block: 120px 128px; }
  .stay__grid { align-items: baseline; }
  .stay__title { grid-column: 1 / span 4; }
  .stay__line { grid-column: 5 / -1; margin-top: 0; }
}

/* ---- r2b.css ---- */
/* ==========================================================================
   VASRO homepage, round 2, builder B.
   Section 7 (ask), Section 8 (the firm and the close), Section 9 (the footer).
   Loaded after site.css. Uses its tokens and components only; no new colour, no new type size.
   Blocks: .ask, .firm, .foot. Nothing here restyles an m1 class, with one exception at the end of
   this file: the header's action steps back while the closing call is on screen, the rule m1
   already applies at the hero.
   ========================================================================== */

/* ---------- Section 7: let your own AI question us ---------- */
.ask { position: relative; padding-block: var(--section); }
.ask__grid { align-items: start; }
.ask__title { grid-column: 1 / -1; }
.ask__line { display: block; }
.ask__text { grid-column: 1 / -1; margin-top: 20px; }
.ask__lead { font: 400 var(--fs-lead)/1.45 var(--sans); max-width: 31em; }
/* One sentence per line: the short pair at the end stands on its own line, as in Section 3. */
.ask__sentence { display: block; text-wrap: balance; }
.ask__action { margin-top: 28px; }
.ask__btn { width: 100%; }

/* The demonstration panel: an index entry at rest. Hairlines above and below, the question set
   like a report headline, five identical cells for the five AIs. (The 2px rule is kept for the
   hero and the close, so the page's two rules into the plate stay the only ones of their kind.) */
.ask__demo {
  grid-column: 1 / -1;
  margin-top: 48px;
  padding: 22px 0 24px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.ask__q {
  font-family: var(--serif);
  font-weight: 420;
  font-size: var(--fs-title);
  line-height: 1.22;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.ask__ais { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 24px; }
.ask__ai {
  --h: 44px;
  width: 100%; padding: 0 6px;
  font-size: 15px;
  color: var(--navy); background: transparent;
  box-shadow: inset 0 0 0 1px var(--navy);
}
.ask__ai:hover, .ask__ai.is-hover { background: var(--navy); color: var(--paper); }
.ask__copy { margin-top: 20px; }

/* ---------- Section 8: the firm and the close ---------- */
.firm { position: relative; padding-top: var(--section); }
.firm__grid { align-items: start; }
.firm__title { grid-column: 1 / -1; }
/* Set by hand. On a phone the last line falls as "We stand behind / ours", never balanced. */
.firm__line { display: block; text-wrap: wrap; }
/* The "y" of "your" stands directly over the "W" of "We". At the system's 0.95 they touch on a phone
   and nearly touch at 112px, so this headline is set looser (measured; see NOTES-2). */
.firm__title { line-height: 1.04; }

.firm__motto { grid-column: 1 / -1; margin-top: 40px; }
.firm__creed {
  font-family: var(--serif);
  font-weight: 380;
  font-size: var(--fs-statement);
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.firm__means { margin-top: 10px; font: 400 var(--fs-body)/1.55 var(--sans); max-width: 26em; text-wrap: balance; }

/* The founder, in text only: a signature, set like the label under the stack. */
.firm__founder { grid-column: 1 / -1; margin-top: 32px; }
.firm__name {
  display: block;
  font-family: var(--serif);
  font-weight: 380;
  font-size: var(--fs-title);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.firm__role { display: block; font: 500 var(--fs-meta)/1.45 var(--sans); color: var(--slate); }
.firm__name + .firm__role { margin-top: 8px; }

/* The closing action area: the hero's gesture again. A 2px rule into the corner of the plate,
   the reason on paper, the call on the plate. On phones the plate becomes a full-width band. */
.firm__base { position: relative; margin-top: 48px; }
.firm__rule { height: 2px; margin-inline: var(--m); background: var(--navy); transform-origin: left center; }
.firm__row { padding-top: 24px; }
.firm__lead { grid-column: 1 / -1; font: 400 var(--fs-lead)/1.45 var(--sans); max-width: 31em; }
.firm__sentence { display: block; text-wrap: balance; }
.firm__call {
  grid-column: 1 / -1;
  margin: 36px calc(var(--m) * -1) 0;
  padding: 40px var(--m) 56px;
  background: var(--navy);
  color: var(--on-navy);
}
.firm__btn { width: 100%; }
.firm__lines { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 32px; }
.firm__tel {
  font-family: var(--serif);
  font-weight: 380;
  font-size: var(--fs-statement);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums proportional-nums;
  white-space: nowrap;
  text-decoration: none;
}
.firm__tel:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }

/* ---------- Section 9: the footer ---------- */
.foot { padding-block: 56px 40px; }
.foot__grid { row-gap: 36px; align-items: start; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }

.foot__brand { grid-column: 1 / -1; }
.foot__logo { display: inline-block; }
.foot__logo img { width: 116px; height: auto; }
/* Smaller than in Section 8, where the motto is a statement: here it is the sign-off beside the logo. */
.foot__motto { margin-top: 14px; font: 380 var(--fs-title)/1.15 var(--serif); letter-spacing: -0.01em; }

.foot__firm {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: flex-start;
  font: 400 var(--fs-meta)/1.6 var(--sans); color: var(--slate);
}
.foot__co { color: var(--navy); font-weight: 600; }
.foot__tel { margin-top: 12px; }
.foot__tel, .foot__mail, .foot__social { color: var(--navy); font-weight: 500; }

.foot__nav { grid-column: span 2; }
.foot__list { display: grid; gap: 4px; font: 500 var(--fs-meta)/1.6 var(--sans); }

.foot__base {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; row-gap: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.foot__legal { order: 3; font: 400 var(--fs-small)/1.6 var(--sans); color: var(--slate); }
.foot__inline { display: flex; flex-wrap: wrap; gap: 4px 22px; font: 500 var(--fs-meta)/1.6 var(--sans); }
.foot__inline a[aria-current] { color: var(--slate); }

/* ==========================================================================
   Tablet (700 and up)
   ========================================================================== */
@media (min-width: 700px) {
  .ask__text { grid-column: 1 / span 6; }
  .ask__btn { width: auto; }
  .ask__demo { margin-top: 56px; }
  .ask__ais { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .firm__motto { grid-column: 1 / span 6; }
  .firm__founder { grid-column: 1 / span 6; }
  .firm__lead { grid-column: 1 / span 6; }
  .firm__btn { width: auto; }

  .foot__brand { grid-column: 1 / span 4; }
  .foot__firm { grid-column: 5 / span 4; }
  .foot__nav { grid-column: 1 / span 4; }
  .foot__nav--legal { grid-column: 5 / span 4; }
  .foot__base { display: grid; grid-template-columns: subgrid; align-items: baseline; row-gap: 14px; }
  .foot__legal { order: 0; grid-column: 1 / span 4; }
  .foot__langs { grid-column: 5 / span 4; }
}

/* ==========================================================================
   Desktop (1100 and up)
   ========================================================================== */
@media (min-width: 1100px) {
  /* Section 7: the headline across the page, then the line and its action (columns 1 to 5)
     beside the panel (columns 7 to 12). */
  .ask { padding-block: 120px 96px; }
  .ask__text { grid-column: 1 / span 5; grid-row: 2; margin-top: 56px; }
  .ask__demo { grid-column: 7 / span 6; grid-row: 2; margin-top: 56px; }

  /* Section 8 */
  .firm { padding-top: 96px; }
  .firm__grid { row-gap: 64px; align-items: baseline; }
  .firm__title { grid-column: 1 / span 11; line-height: 1; }
  .firm__motto { grid-column: 1 / span 6; grid-row: 2; margin-top: 0; }
  /* The signature starts on column 9, the column of everything on the plate below it. */
  .firm__founder { grid-column: 9 / span 4; grid-row: 2; margin-top: 0; }

  .firm__base { margin-top: 80px; }
  .firm__rule {
    margin: 0; position: absolute; top: 0;
    left: calc((100% - min(100%, var(--maxw))) / 2 + var(--m));
    right: calc(100% - var(--plate-x));
  }
  .firm__row { position: relative; padding-top: 34px; padding-bottom: 112px; }
  .firm__lead { grid-column: 1 / span 6; }
  .firm__call { grid-column: 9 / span 4; margin: 0; padding: 0; background: none; }
  .firm__lines { margin-top: 40px; }

  /* Footer: brand (1 to 4), company (5 to 8), site (9, 10), legal (11, 12). */
  .foot { padding-block: 72px 48px; border-top: 1px solid var(--rule); }
  .foot__grid { row-gap: 0; }
  .foot__brand { grid-column: 1 / span 4; }
  .foot__logo img { width: 128px; }
  .foot__motto { margin-top: 18px; }
  .foot__firm { grid-column: 5 / span 4; }
  .foot__nav { grid-column: 9 / span 2; }
  .foot__nav--legal { grid-column: 11 / span 2; }
  /* Two columns hold the longest name from 1140 up; below that it may lean up to 10px into the gutter. */
  .foot__list a { white-space: nowrap; }
  .foot__base { margin-top: 72px; padding-top: 22px; }
  .foot__legal { grid-column: 1 / span 8; }
  .foot__langs { grid-column: 9 / span 4; }
}

@media (min-width: 1200px) {
  /* Wide enough for the whole headline on one line. */
  .ask__line { display: inline; }
}

/* While the closing call is on screen, the header's copy of it steps back to the outline it wears
   at the top of the page (m1's rule for the hero), so the closing call is the one solid action.
   The class is set by js/r2b.js; without JavaScript both stay solid. */
@media (min-width: 1100px) {
  html.r2b-call .hdr__cta { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
  html.r2b-call .hdr__cta:hover { background: var(--navy); color: var(--paper); }
}

/* ---- r3m.css ---- */
/* ==========================================================================
   VASRO homepage, round 3, builder M: Section 3, the map as the earth at night.
   Loaded after the other stylesheets; tokens from site.css only. The figure's place in the grid
   is still m3's .map rule. Everything inside it is pre-rendered by tools/build-nightmap.cjs.
   Layers, bottom to top: the land; the access glow (haze and grain) that js/r3m.js reveals from
   Frankfurt; the band of light that travels over the land while it does; the city lights; Frankfurt.
   ========================================================================== */

.nightmap {
  --land-a: 0.07;     /* the land at night: paper at 7% on navy */
  position: relative;
  overflow: hidden;   /* light never spills out of the map */
}
.nightmap__land { display: block; width: 100%; height: auto; opacity: var(--land-a); }
.nightmap__lit, .nightmap__lights, .nightmap__wave { position: absolute; inset: 0; pointer-events: none; }
.nightmap__glow, .nightmap__dust { position: absolute; inset: 0; width: 100%; height: 100%; }

/* The band of light that leaves Frankfurt: a soft ring, cut to the shape of the land, so it washes
   over the continents and never over the sea. Seen only while it travels (js/r3m.js). */
.nightmap__wave {
  opacity: 0;
  -webkit-mask: url("../../img/reach-land.svg") 0 0 / 100% 100% no-repeat;
          mask: url("../../img/reach-land.svg") 0 0 / 100% 100% no-repeat;
}
.nightmap__band {
  position: absolute;   /* a square centred on Frankfurt; its box is written by the build */
  background: radial-gradient(circle closest-side,
    rgba(245, 240, 231, 0) 35%, rgba(245, 240, 231, 0.045) 74%, rgba(245, 240, 231, 0.12) 95%, rgba(245, 240, 231, 0) 100%);
}

/* A city light: a point and its own small halo. Not a pin, no label. */
.nightmap__city { position: absolute; width: 0; height: 0; }
.nightmap__city::before {
  content: ""; position: absolute; left: -1px; top: -1px; width: 2px; height: 2px;
  border-radius: 50%; background: var(--paper);
  box-shadow: 0 0 3px 1px rgba(245, 240, 231, 0.6), 0 0 9px 2px rgba(245, 240, 231, 0.2), 0 0 18px 4px rgba(245, 240, 231, 0.06);
}

/* Home: the accent, and the only word on the map. */
.nightmap__home { position: absolute; width: 0; height: 0; }
.nightmap__home::before {
  content: ""; position: absolute; width: 8px; height: 8px; left: -4px; top: -4px;
  border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--orange) 35%, transparent);   /* home is a light too */
}
.nightmap__label {
  position: absolute; left: 10px; top: -6px;
  font: 500 12px/1 var(--sans); color: var(--on-navy-muted); white-space: nowrap;
  text-shadow: 0 0 4px var(--navy), 0 0 8px var(--navy);   /* carved out of the dust behind it */
}

@media (min-width: 1100px) {
  .nightmap__city::before {
    left: -1.5px; top: -1.5px; width: 3px; height: 3px;
    box-shadow: 0 0 5px 1px rgba(245, 240, 231, 0.62), 0 0 14px 4px rgba(245, 240, 231, 0.2), 0 0 30px 8px rgba(245, 240, 231, 0.07);
  }
  .nightmap__home::before { width: 11px; height: 11px; left: -5.5px; top: -5.5px; }
  .nightmap__label { left: 16px; top: -7px; font-size: 13px; }
}

/* Lead, 11 Oct: the second layer of light, the financial centres with access to our research.
   A smaller, dimmer point than an institution city, so the two never read as the same thing. */
.nightmap__city--hub::before {
  left: -1.25px; top: -1.25px; width: 2.5px; height: 2.5px;
  background: rgba(245, 240, 231, 0.95);
  box-shadow: 0 0 4px 1px rgba(245, 240, 231, 0.5), 0 0 9px 2px rgba(245, 240, 231, 0.12);
}
@media (min-width: 1100px) {
  .nightmap__city--hub::before {
    left: -1.75px; top: -1.75px; width: 3.5px; height: 3.5px;
    box-shadow: 0 0 5px 1px rgba(245, 240, 231, 0.55), 0 0 12px 3px rgba(245, 240, 231, 0.14);
  }
  /* Second pass: the institution cities one step larger, so they still lead the brighter centres. */
  .nightmap__city:not(.nightmap__city--hub)::before {
    left: -2.25px; top: -2.25px; width: 4.5px; height: 4.5px;
    box-shadow: 0 0 7px 2px rgba(245, 240, 231, 0.66), 0 0 18px 5px rgba(245, 240, 231, 0.22), 0 0 34px 10px rgba(245, 240, 231, 0.08);
  }
}

/* The key: the two kinds of light, in the words of the figures below. */
.nightmap__key {
  grid-column: 1 / -1;
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 32px;
  font: 400 13px/1.4 var(--sans); color: var(--on-navy-muted);
}
.nightmap__keyitem { position: relative; padding-left: 18px; }
.nightmap__keyitem::before {
  content: ""; position: absolute; left: 3px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%; background: var(--paper);
  box-shadow: 0 0 6px 1px rgba(245, 240, 231, 0.55), 0 0 14px 3px rgba(245, 240, 231, 0.15);
}
.nightmap__keyitem--hub::before {
  left: 4px; width: 3px; height: 3px; margin-top: -1.5px;
  background: rgba(245, 240, 231, 0.92);
  box-shadow: 0 0 4px 1px rgba(245, 240, 231, 0.42);
}
.nightmap__keyitem--home::before {
  left: 2px; width: 7px; height: 7px; margin-top: -3.5px;
  background: var(--orange); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--orange) 35%, transparent);
}
@media (min-width: 1100px) { .nightmap__key { margin-top: 20px; font-size: 14px; } }

/* Lead, 11 Oct: the standard line closes the section. On a phone each sentence wraps, so a little air
   between them keeps the three statements apart. */
@media (max-width: 699.98px) { .reach__close span + span { margin-top: 0.3em; } }

/* ---- r3s.css ---- */
/* ==========================================================================
   VASRO homepage, round 3, builder S.
   Section 5: the five services as one ledger that drives one photograph on the plate.
   Section 6: "We stay" over its own photograph (the first screen's room, late at night).
   Linked after r2b.css. Uses the system's tokens, type sizes, grid, plate line and the
   2px tightening rule of the research index. No new colour, no new type size.
   Blocks: .sv (Section 5), .stay--photo (Section 6). The close of Section 5 reuses
   .svc-close from r2a.css.
   ========================================================================== */

/* ---------- Section 5: what we do for a listed company ---------- */
/* Phones first: a plain column, each photograph above its service. Nothing sticks, nothing moves. */
.sv { padding-block: 0 var(--section); }
.sv__body { position: relative; padding-top: var(--section); }
.sv__head { grid-column: 1 / -1; }
.sv__stage { display: none; }

.sv__list { grid-column: 1 / -1; margin-top: 48px; }
.sv__item { display: flex; flex-direction: column; }
.sv__item + .sv__item { margin-top: 48px; }
.sv__photo {
  order: -1;
  margin: 0 calc(var(--m) * -1) 22px;
  aspect-ratio: 3 / 2; overflow: hidden;
  background: var(--rule);
}
.sv__photo img { width: 100%; height: 100%; object-fit: cover; }
.sv__name {
  font-family: var(--serif);
  font-weight: 380;
  font-size: var(--fs-statement);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.sv__line { margin-top: 10px; font: 400 var(--fs-lead)/1.45 var(--sans); max-width: 31em; text-wrap: balance; }
/* One action after the fifth service, as the research index ends with one link. */
.sv__talk { grid-column: 1 / -1; margin-top: 40px; }
/* The close of the section (type from r2a.css): it stays last. */
.sv__close { grid-column: 1 / -1; }

/* ---------- Section 6: we stay ---------- */
/* The photograph runs edge to edge; the words stand on the dark window, the first screen's grammar. */
.stay--photo {
  position: relative;
  isolation: isolate;
  display: flex;
  /* On a phone the photograph is a tall crop on the lamp and the report: the words sit on the dark
     window above the lamp, so the section is as tall as the first screen and the lamp sits low enough. */
  min-height: 92vh;
  min-height: clamp(600px, 92svh, 860px);
  padding: 0;
  background: var(--navy);             /* what shows while the photograph loads */
  color: var(--paper);
}
.stay__media { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.stay__media picture, .stay__img { display: block; width: 100%; height: 100%; }
.stay__img { object-fit: cover; object-position: 50% 50%; transform-origin: 70% 40%; }
/* A photographic scrim, not a decorative gradient: only where legibility needs it. On a phone the words
   sit close to the lamp's glow, so the top of the crop is softened a little. */
.stay__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 17, 31, 0.4) 0%, rgba(10, 17, 31, 0.12) 22%, rgba(10, 17, 31, 0) 34%);
}
.stay--photo .stay__grid { width: 100%; align-content: start; padding-block: 40px; }
.stay--photo .stay__title { grid-column: 1 / -1; color: var(--paper); }
/* The line under the headline, as under the first screen's headline: the sans lead, one sentence per line. */
.stay--photo .stay__line {
  grid-column: 1 / -1;
  margin-top: 16px;
  max-width: 30em;
  font: 400 var(--fs-lead)/1.45 var(--sans);
  letter-spacing: 0;
  color: rgba(245, 240, 231, 0.92);
}
.stay--photo .stay__line span { display: block; text-wrap: balance; }

/* ==========================================================================
   Tablet (700 and up): the words on columns 1 to 4, the photograph from the middle gutter to the edge
   ========================================================================== */
@media (min-width: 700px) {
  .sv__list { margin-top: 64px; }
  .sv__item {
    position: relative;
    display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--g);
    align-content: start;
  }
  .sv__item + .sv__item { margin-top: 48px; }
  /* The row's hairline runs from the margin into the photograph's corner. */
  .sv__item::after {
    content: ""; position: absolute; top: 0; left: 0; width: 50%; height: 1px;
    background: var(--rule);
  }
  .sv__name { grid-column: 1 / span 4; grid-row: 1; padding-top: 22px; }
  .sv__line { grid-column: 1 / span 4; grid-row: 2; }
  .sv__photo {
    order: 0;
    grid-column: 5 / -1; grid-row: 1 / span 3;
    margin: 0 calc(var(--m) * -1) 0 calc(var(--g) / -2);
  }
  .sv__talk { margin-top: 48px; }

  .stay--photo { min-height: 84vh; min-height: clamp(560px, 84svh, 900px); }
  .stay--photo .stay__grid { padding-block: 72px 64px; }
  .stay--photo .stay__title { grid-column: 1 / span 6; }
  .stay--photo .stay__line { grid-column: 1 / span 6; margin-top: 24px; }
  /* Narrower than the photograph: keep the whole lamp, the report and the notebook in the frame. */
  .stay__img { object-position: 86% 50%; }
}

/* ==========================================================================
   Desktop (1100 and up): the ledger on paper (columns 1 to 7), one photograph on the plate
   ========================================================================== */
@media (min-width: 1100px) {
  .sv {
    /* The frame: columns 9 to 12, 4:5, never taller than the screen under the header allows. */
    --sv-w: calc((min(100vw, var(--maxw)) - 480px) / 3 + 96px);
    --sv-h: min(calc(var(--sv-w) * 1.25), calc(100vh - var(--header-h) - 96px));
    padding-block: 0 112px;
  }
  .sv__body { padding-block: 112px 112px; }
  .sv__grid { align-items: start; }
  .sv__head { grid-column: 1 / span 7; grid-row: 1; padding-bottom: 72px; }
  /* The headline keeps to columns 1 to 7 at every desktop width: "a listed company" is 6.53 times its
     own size wide, the cap allows 6.71, so it reaches the full 112px only from 1440. */
  .sv .services__title { font-size: min(var(--fs-h2), calc((7 * min(100vw, var(--maxw)) - 1056px) / 80.5)); }
  .sv .services__line { margin-top: 28px; }

  /* The ledger: the research index's hairlines, its 2px rule that tightens at the reading line. */
  .sv__list {
    grid-column: 1 / span 7; grid-row: 2; margin-top: 0;
    border-bottom: 1px solid var(--rule);
  }
  .sv__item { display: block; padding: 26px 0 30px; border-top: 1px solid var(--rule); }
  .sv__item + .sv__item { margin-top: 0; }
  .sv__item::after { content: none; }
  .sv__item::before {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
    background: var(--navy);
    transform: scaleX(0); transform-origin: left center;
    transition: transform 0.6s var(--ease-out);
  }
  .sv__item.is-active::before { transform: scaleX(1); }
  .sv__name { padding-top: 0; }
  .sv__line { margin-top: 12px; }
  .sv__photo { display: none; }
  .sv__talk { grid-column: 1 / span 7; grid-row: 3; margin-top: 0; padding-top: 36px; }
  /* The close stays beside the plate, so the last photograph (the investor room) is still there while it is read. */
  .sv .sv__close { grid-column: 1 / span 7; grid-row: 4; margin-top: 104px; }

  /* The photograph of the service being read, on the plate, at reading height. CSS sticky inside
     its own column: it never pins the page. js/r3s.js lays each photograph over the last. */
  .sv__stage { display: block; grid-column: 9 / span 4; grid-row: 1 / span 4; align-self: stretch; }
  .sv__frame {
    position: sticky;
    /* At the optical centre under the header (a little above the middle), so the frame is still
       there while the last lines of the section cross the reading line. */
    top: calc(var(--header-h) + (100vh - var(--header-h) - var(--sv-h)) * 0.36);
    height: var(--sv-h);
    overflow: hidden;
    background: var(--navy);
  }
  .sv__shot {
    position: absolute; inset: 0;
    width: 100%; height: 100%; max-width: none;
    object-fit: cover;
    opacity: 0;
  }
  .sv__shot:first-child { opacity: 1; }

  .stay--photo { min-height: 86vh; min-height: clamp(600px, 86svh, 980px); }
  .stay--photo .stay__grid { padding-block: clamp(72px, 12vh, 136px) 72px; }
  .stay--photo .stay__title { grid-column: 1 / span 7; }
  .stay--photo .stay__line { grid-column: 1 / span 6; margin-top: 28px; }
  .stay__img { object-position: 50% 50%; }
  /* Measured: the night window behind the words is 15:1 or more against paper without help, so on
     a desktop the photograph is left as it is. */
  .stay__scrim { background: none; }
}

/* Lead, 11 Oct: on phones the lamp sits where the words would be (failed contrast on short screens),
   so the words stand on navy above the photograph and the whole scene shows below them. */
@media (max-width: 699.98px) {
  .stay--photo { display: flex; flex-direction: column-reverse; min-height: 0; }
  .stay__media { position: relative; inset: auto; z-index: auto; aspect-ratio: 660 / 1200; width: 100%; }
  .stay__scrim { display: none; }
  .stay--photo .stay__grid { padding-block: 64px 36px; }
}


/* ==========================================================================
   R8 (13 Oct, the founder): on the homepage each service opens its own section on the listed-companies
   page. The whole row is the link (the name's link stretches over the row); on hover the name draws its
   underline from the left and an arrow comes in, so the row reads as a way on, not as a button.
   ========================================================================== */
.sv__item { position: relative; }
.sv__link {
  color: inherit; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size 0.4s var(--ease-out);
}
.sv__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sv__name::after {
  content: "\2192"; display: inline-block; margin-left: 0.3em;
  font-family: var(--sans); font-size: 0.6em; vertical-align: 0.2em;
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.sv__item:hover .sv__link, .sv__link:focus-visible { background-size: 100% 1px; }
.sv__item:hover .sv__name::after, .sv__item:focus-within .sv__name::after { opacity: 1; transform: none; }
[dir="rtl"] .sv__name::after { content: "\2190"; margin: 0 0.3em 0 0; transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) { .sv__link, .sv__name::after { transition: none; } }

/* ---- r3e.css ---- */
/* ==========================================================================
   VASRO homepage, round 3, builder E. Loaded after r2b.css.
   Improvements 2 (the period row), 4 (the page ends dark), 6 (the phone and tablet
   header action), 7 (the founder's name links to LinkedIn) and 8 (the second way in).
   Existing tokens, sizes and components only. Where a rule of site.css, hero.css or
   r2b.css has to change, it is overridden here and named in the comment.
   ========================================================================== */

/* The canvas behind the page is navy, so the rubber band above the photograph and below
   the footer is dark too: the page opens dark and ends dark. The body stays paper. */
html { background-color: var(--navy); }

/* ---------- Improvement 6: the compact action in the header (below 1100 px) ----------
   Shown by js/r3e.js (html.r3e-call) once the photograph has scrolled away, and not while
   #contact is on screen. Also hidden while the menu is open and whenever the header is still
   over the photograph (hdr--over), so the transparent and dark-glass states never carry it.
   Opacity only. The hidden button keeps its place, so nothing in the bar moves. */
.hdr__call { display: none; }
.hdr__call-short { display: none; }

@media (max-width: 1099.98px) {
  .js .hdr__call {
    display: inline-flex;
    --h: 40px;
    flex: none;
    margin-left: auto;
    padding: 0 14px;
    font-size: 15px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s var(--ease-out), visibility 0s linear 0.3s;
  }
  /* site.css pushes Menu right with an automatic margin; the button now takes that role. */
  .js .hdr__call + .hdr__menu { margin-left: 0; }
  .js.r3e-call:not(.menu-open) .hdr:not(.hdr--over) .hdr__call {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.3s var(--ease-out), visibility 0s linear 0s;
  }
}
@media (max-width: 699.98px) {
  .js .hdr__bar { column-gap: 16px; }
}
/* Measured: logo 104 + button 162.5 + Menu 46.8 + two 16 px gaps = 345.3 px. Below 390 px
   "Talk to the analysts" does not fit beside the logo, so the approved short label takes over. */
@media (max-width: 389.98px) {
  .hdr__call-long { display: none; }
  .hdr__call-short { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hdr__call,
  .js.r3e-call:not(.menu-open) .hdr:not(.hdr--over) .hdr__call { transition: none !important; }
}

/* ---------- Improvement 2: the period row of the research ledger ----------
   The first item of the ledger, sitting on its top rule (the first entry's hairline), in the
   date column's exact type: Instrument Sans 500, meta size, slate, tabular figures, no tracking.
   The theme inserts one whenever the quarter changes (NOTES-3, section 3). */
.ledger__period { padding: 28px 0 12px; }
.ledger__when {
  display: block;
  font: 500 var(--fs-meta)/1.4 var(--sans);
  color: var(--slate);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* A later quarter further down the list: air above it, then it sits on its own first rule. */
.ledger__period ~ .ledger__period { padding-top: 48px; }

@media (min-width: 1100px) {
  .ledger__period { grid-column: 1 / -1; padding: 0 0 12px; }
  .ledger__period ~ .ledger__period { padding-top: 56px; }
}

/* ---------- Improvement 4: from the rule under the headline, navy to the very bottom ----------
   Section 8 keeps its headline on paper. The close (r2b's .firm__base, still #contact) becomes
   a full-width navy field where the 2px rule ran; the rule and the half plate are gone from the
   markup, so r2b.js finds no rule to draw and stops there. */
.firm__base { background: var(--navy); color: var(--on-navy); }
.firm__row { padding-top: 48px; padding-bottom: 64px; align-items: start; }

/* Left: the reason, and the founder it names. */
.firm__words { grid-column: 1 / -1; }
.firm__words .firm__founder { margin-top: 32px; }

/* Improvement 7: the founder's name is a link to his LinkedIn profile. A 1px underline in the
   muted paper, so it reads as a link at rest without outweighing the name; solid on hover. */
.firm__name {
  display: inline-block;
  color: var(--on-navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--on-navy-muted);
  text-underline-offset: 0.2em;
}
.firm__name:hover { text-decoration-color: currentColor; }
.firm__role { color: var(--on-navy-muted); }

/* Right: the call. r2b gave it its own navy band on phones; the whole field is navy now. */
.firm__call { margin: 40px 0 0; padding: 0; background: none; }

/* Improvement 8: one quiet text link directly under the button, the second way in. */
.firm__first { margin-top: 14px; }
.firm__first-link {
  display: inline-block;
  padding-block: 4px;
  font: 500 var(--fs-meta)/1.4 var(--sans);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--on-navy-rule);
  text-underline-offset: 0.3em;
}
.firm__first-link:hover { text-decoration-color: currentColor; }
.firm__first + .firm__lines { margin-top: 28px; }

/* ---------- The footer on navy (same content and links as r2b's) ---------- */
.foot { background: var(--navy); color: var(--on-navy); padding-top: 0; border-top: 0; }
/* One hairline between the close and the footer, from margin to margin. */
.foot::before {
  content: "";
  display: block;
  height: 1px;
  width: calc(min(100%, var(--maxw)) - 2 * var(--m));
  margin-inline: auto;
  background: var(--on-navy-rule);
}
.foot__grid { padding-top: 48px; }
.foot__firm { color: var(--on-navy-muted); }
.foot__co, .foot__tel, .foot__mail, .foot__social { color: var(--on-navy); }
.foot__legal { color: var(--on-navy-muted); }
.foot__inline a[aria-current] { color: var(--on-navy-muted); }
.foot__base { border-top-color: var(--on-navy-rule); }

/* The motto, once on the page, with its line: the last large line, above the legal row. */
.foot__sign { grid-column: 1 / -1; margin-top: 12px; }
.foot__sign .foot__motto {
  margin: 0;
  font-family: var(--serif);
  font-weight: 370;
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.foot__means {
  margin-top: 16px;
  font: 400 var(--fs-lead)/1.45 var(--sans);
  color: var(--on-navy-muted);
  max-width: 31em;
  text-wrap: balance;
}

/* ==========================================================================
   Tablet (700 and up)
   ========================================================================== */
@media (min-width: 700px) {
  .firm__row { padding-top: 64px; padding-bottom: 80px; }
  /* Two columns from tablet up: the call starts on column 5, the column of the footer's address below. */
  .firm__words { grid-column: 1 / span 4; }
  .firm__call { grid-column: 5 / span 4; margin-top: 0; }

  .foot__grid { padding-top: 56px; }
  /* --fs-figure from here up: it meets --fs-h2 at 700 px within a pixel, so the size runs on. */
  .foot__sign { margin-top: 24px; }
  .foot__sign .foot__motto { font-size: var(--fs-figure); line-height: 1; }
  .foot__means { margin-top: 20px; }
}

/* ==========================================================================
   Desktop (1100 and up)
   ========================================================================== */
@media (min-width: 1100px) {
  .firm__row { padding-top: 88px; padding-bottom: 96px; }
  .firm__words { grid-column: 1 / span 6; }
  .firm__words .firm__founder { margin-top: 48px; }
  /* Column 9, as on the plate before: the column of the header action and the footer's site links. */
  .firm__call { grid-column: 9 / span 4; margin: 0; }

  .foot__grid { padding-top: 72px; }
  .foot__sign { grid-column: 1 / span 9; margin-top: 104px; }
  .foot__base { margin-top: 64px; }
}

/* ---- r5.css ---- */
/* ==========================================================================
   VASRO homepage, round 5. Linked last, on index.html and for-investors.html.
   1. The investor block (#investors) and its sign-up form; the same block opens for-investors.html.
   2. "For investors" in the header: the bar still fits from 1100 px (sizes and gaps only).
   3. The Ask AI section (#ask), redesigned: the box as it is printed on every cover, lifted out of a
      blurred cover; the demonstration; three facts.
   4. for-investors.html: its own sections.
   Tokens, type sizes, grid and components from site.css only; no new colour (the Ask box's coral is
   site.css's own coral accent, held fixed there, see section 3), no new type size.
   Where a rule of an earlier file has to change, it is overridden here and named in the comment.
   ========================================================================== */

/* ==========================================================================
   1. The investor block
   ========================================================================== */
.inv { position: relative; padding-block: var(--section); }
.inv__grid { align-items: start; }

/* One statement in two registers: line 1 at the statement size names what everyone knows;
   lines 2 and 3, at the size of the page's other section statements, are the answer. */
.inv__title { grid-column: 1 / -1; font-family: var(--serif); font-optical-sizing: auto; color: var(--navy); }
.inv__known {
  display: block;
  font-weight: 380;
  font-size: var(--fs-statement);
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.inv__answer {
  display: block;
  margin-top: 14px;
  font-weight: 370;
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: -0.02em;
}
.inv__line { display: block; text-wrap: balance; }

/* The form: a label, a field, the consent, the action. Square, ruled, no box around it. */
.inv__form { grid-column: 1 / -1; margin-top: 44px; }
.inv__label { display: block; font: 500 var(--fs-meta)/1.4 var(--sans); }
.inv__field {
  display: block;
  width: 100%; height: 56px;
  margin-top: 10px; padding: 0 18px;
  border: 1px solid var(--navy); border-radius: 0;
  background: transparent; color: var(--navy);
  font: 400 var(--fs-body)/1.2 var(--sans);
  -webkit-appearance: none; appearance: none;
}
.inv__field:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }

.inv__consent { display: flex; align-items: flex-start; gap: 14px; margin-top: 22px; }
/* The tick box: square, a navy hairline; ticked, it fills navy and carries a paper tick. */
.inv__check {
  -webkit-appearance: none; appearance: none;
  flex: none;
  display: grid; place-content: center;
  width: 22px; height: 22px; margin: 0;
  border: 1px solid var(--navy); border-radius: 0;
  background: transparent;
  cursor: pointer;
}
.inv__check::before {
  content: "";
  width: 11px; height: 6px;
  border-left: 2px solid var(--paper); border-bottom: 2px solid var(--paper);
  transform: translateY(-1px) rotate(-45deg) scale(0);
  transition: transform 0.2s var(--ease-out);
}
.inv__check:checked { background: var(--navy); }
.inv__check:checked::before { transform: translateY(-1px) rotate(-45deg) scale(1); }
.inv__check:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.inv__terms { font: 400 var(--fs-meta)/1.5 var(--sans); max-width: 38em; }
.inv__terms label { cursor: pointer; }
.inv__privacy {
  font-weight: 500; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em;
}
.inv__privacy:hover { text-decoration-thickness: 2px; }

/* The action, and beside it the quiet way further (the hero's pair: button, then a link). */
.inv__send { display: flex; flex-direction: column; align-items: stretch; gap: 20px; margin-top: 28px; }
.inv__btn { width: 100%; }
.inv__more {
  align-self: flex-start;
  display: inline-block; padding-block: 4px;
  font: 500 var(--fs-meta)/1.4 var(--sans);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: var(--slate); text-underline-offset: 0.3em;
}
.inv__more:hover { text-decoration-color: currentColor; }
.inv__note { margin-top: 18px; font: 400 var(--fs-small)/1.5 var(--sans); color: var(--slate); }

@media (min-width: 700px) {
  .inv__answer { margin-top: 18px; }
  .inv__form { grid-column: 1 / span 6; margin-top: 56px; }
  .inv__send { flex-direction: row; align-items: center; gap: 18px 36px; }
  .inv__btn { width: auto; }
  .inv__more { align-self: center; }
}
@media (min-width: 1100px) {
  .inv { padding-block: 120px 128px; }
  .inv__title { grid-column: 1 / span 11; }
  .inv__answer { margin-top: 22px; }
  .inv__form { grid-column: 1 / span 6; margin-top: 72px; }
}

/* ==========================================================================
   2. The header with "For investors" (1100 to 1279 px)
   From 1280 the bar keeps site.css's grid: the menu on columns 3 to 9, the language on 10, the action
   on 11 and 12. Below 1280 two columns are narrower than "Talk to the analysts" with its padding, so
   the menu, the language and the action stand in one row from the right (site.css: a subgrid).
   ========================================================================== */
@media (min-width: 1100px) and (max-width: 1279.98px) {
  .hdr__nav { display: flex; justify-content: flex-end; align-items: center; gap: 20px; }
  .hdr__cta { width: auto; padding: 0 16px; font-size: 14px; }
  .nav { gap: 18px; }
  .nav a, .lang summary { font-size: 14px; }
}
@media (min-width: 1180px) and (max-width: 1279.98px) {
  .hdr__nav { gap: 22px; }
  .hdr__cta { padding: 0 18px; font-size: 15px; }
  .nav { gap: 20px; }
  .nav a, .lang summary { font-size: 15px; }
}
/* The page you are on: its menu line is drawn (the hover hairline, kept); in the phone sheet and in the
   footer it steps back to the muted tone, as the current language does. */
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.js.menu-open .nav a[aria-current="page"] { color: var(--on-navy-muted); }
.foot__list a[aria-current="page"] { color: var(--on-navy-muted); }

/* ==========================================================================
   3. Let your own AI question us (#ask)
   r2b.css set the line and the panel side by side; this section has its own places (below).
   ========================================================================== */
.ask--r5 { padding-block: var(--section); }
.ask--r5 .ask__title { grid-column: 1 / -1; }
.ask--r5 .ask__line { display: block; }          /* r2b.css set the headline on one line from 1200 */
.ask--r5 .ask__text { grid-column: 1 / -1; margin-top: 20px; }

/* ---- The proof: a blurred cover, and its box lifted out at reading size ----
   Geometry from the cover itself: on the A4 page the box sits at x 411.4 to 568.0 pt and y 752.7 to
   794.6 pt (69.1 to 95.4 % across, 89.4 to 94.4 % down), 156.6 by 41.9 pt, its coral head 12 pt deep.
   The scene is drawn in fractions of its own width. Phones (and desktops of 1100 to 1279): the cover on
   58 %, the box on the full width below it. Tablets and desktops from 1280: the cover on 64 %, the box on
   the last 78.8 % (4.7 times the printed size), hanging from the cover's corner; from 1280 that is exactly
   columns 9 to 12. The two hairline paths in the HTML use the same numbers. */
.ask__proof { grid-column: 1 / -1; margin-top: 40px; }
.ask__scene { position: relative; aspect-ratio: 1000 / 1137.71; }
.ask__cover {
  position: absolute; left: 0; top: 0;
  width: 58%; height: auto;
  background: var(--white);
  /* A sheet of paper on paper: the one physical object here keeps a soft shadow. */
  filter: drop-shadow(0 16px 26px rgba(20, 34, 60, 0.14)) drop-shadow(0 1px 1px rgba(20, 34, 60, 0.1));
}
/* The detail on the cover: a hairline round the printed box, and two hairlines to its enlargement. */
.ask__mark {
  position: absolute;
  left: 40.084%; top: 64.45%; width: 15.254%; height: 3.591%;
  outline: 1px solid var(--navy);
}
.ask__beam { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ask__beam path { fill: none; stroke: var(--navy); stroke-opacity: 0.4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ask__beam--wide { display: none; }

/* The box, as printed: flat, two tones, square. Its type is sized in the box's own width (cqw),
   so it keeps the printed proportions at every size. */
.ask__box {
  /* The cover's own coral: the logo coral (site.css's coral accent, #FD5E5E). The box is a picture of the
     printed cover beside it, so it keeps that coral whatever the preview's accent switch says. */
  --cover-coral: #FD5E5E;
  position: absolute; left: 0; top: 76.48%; width: 100%;
  aspect-ratio: 156.6 / 41.9;
  container-type: inline-size;
  display: grid; grid-template-rows: 28.64% 71.36%;
  background: var(--navy); color: var(--white);
  text-align: center;
}
.ask__box-head {
  display: grid; place-items: center;
  background: var(--cover-coral);
  font: 600 18px/1 var(--sans);
  font-size: 5.11cqw;
}
.ask__box-body {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.6cqw;
  padding-bottom: 0.6cqw;
}
.ask__box-line { display: block; font: 400 15px/1 var(--sans); font-size: 4.47cqw; }
.ask__box-url { display: block; font: 600 18px/1 var(--sans); font-size: 5.11cqw; }
/* The cover sets these two lines in a heavy condensed face; the system's sans is drawn narrower and
   a little heavier to match, without a new font file. */
.ask__box-cond { display: inline-block; transform: scaleX(0.86); -webkit-text-stroke: 0.035em currentColor; }

.ask__caption { margin-top: 20px; font: 500 var(--fs-meta)/1.4 var(--sans); color: var(--slate); }

/* ---- The demonstration: hairlines, the question set like a report headline, five equal names ---- */
.ask__try {
  grid-column: 1 / -1;
  margin-top: 48px;
  padding: 26px 0 28px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.ask--r5 .ask__q { font-weight: 400; }
.ask--r5 .ask__ais { margin-top: 26px; }
.ask--r5 .ask__ai { --h: 48px; font-weight: 500; }
.ask--r5 .ask__copy { margin-top: 22px; }

/* ---- Three facts in a row, between hairlines ---- */
/* On a phone the facts follow the panel directly: its closing hairline is their first. */
@media (max-width: 699.98px) { .ask__try { border-bottom: 0; padding-bottom: 36px; } }
.ask__facts { grid-column: 1 / -1; margin-top: 0; border-top: 1px solid var(--rule); }
.ask__fact {
  padding: 20px 0 22px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-title);
  line-height: 1.22;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* The wide geometry, wherever the proof is wide enough for it (tablets, and desktops from 1280). Between
   1100 and 1279 the proof has five narrow columns, so it keeps the phone geometry: the box then runs the
   figure's full width and its head stays at reading size. */
@media (min-width: 700px) and (max-width: 1099.98px), (min-width: 1280px) {
  .ask__scene { aspect-ratio: 1000 / 1150.8; }
  .ask__cover { width: 64%; }
  .ask__mark { left: 44.23%; top: 70.3%; width: 16.832%; height: 3.916%; }
  .ask__beam--narrow { display: none; }
  .ask__beam--wide { display: block; }
  .ask__box { left: 21.212%; top: 81.68%; width: 78.788%; }
  .ask__caption { padding-left: 21.212%; }
}

@media (min-width: 700px) {
  .ask--r5 .ask__text { grid-column: 1 / span 6; }
  .ask__proof { grid-column: 1 / span 6; margin-top: 56px; }
  .ask__try { margin-top: 64px; }

  .ask__facts {
    margin-top: 80px;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--g);
    border-bottom: 1px solid var(--rule);
  }
  .ask__fact { position: relative; padding: 28px 0 32px; border-bottom: 0; }
  .ask__fact + .ask__fact::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--g) / -2); width: 1px;
    background: var(--rule);
  }
}

/* Desktop: the words and the demonstration on columns 1 to 7, the proof on 8 to 12 beside them
   (the research section's order: the words on paper, the object to their right), the facts across. */
@media (min-width: 1100px) {
  .ask--r5 { padding-block: 120px 128px; }
  .ask--r5 .ask__grid { grid-template-rows: auto auto 1fr auto; }
  /* "Let your own AI" stays one line inside seven columns at every desktop width. */
  .ask--r5 .ask__title {
    grid-column: 1 / span 7; grid-row: 1;
    font-size: min(var(--fs-h2), calc((7 * min(100vw, var(--maxw)) - 1056px) / 77));
  }
  .ask--r5 .ask__text { grid-column: 1 / span 6; grid-row: 2; margin-top: 32px; }
  .ask__proof { grid-column: 8 / span 5; grid-row: 1 / span 3; margin-top: 10px; }
  .ask__try { grid-column: 1 / span 6; grid-row: 3; align-self: end; margin-top: 64px; }
  .ask__facts { grid-column: 1 / -1; grid-row: 4; margin-top: 104px; grid-template-columns: subgrid; }
  .ask__fact { grid-column: span 4; padding: 32px 0 36px; }
}
@media (min-width: 1280px) {
  /* The box and its caption start exactly on column 9: one column and one gutter into the figure. */
  .ask__box { left: calc((100% + var(--g)) / 5); width: calc(100% - (100% + var(--g)) / 5); }
  .ask__caption { padding-left: calc((100% + var(--g)) / 5); }
}

/* ==========================================================================
   4. for-investors.html
   ========================================================================== */
/* The opening: the investor block as the page's first statement, under the header. */
.inv--open { padding-block: 56px var(--section); }
@media (min-width: 700px) { .inv--open { padding-top: 72px; } }
@media (min-width: 1100px) { .inv--open { padding-block: 96px 120px; } }

/* Some of our recent research: the homepage's ledger, without the stack. */
.fi-research { position: relative; padding-block: var(--section); border-top: 1px solid var(--rule); }
.fi-research__grid { align-items: start; }
.fi-research__title { grid-column: 1 / -1; }
.fi-research .ledger { grid-column: 1 / -1; margin-top: 24px; }
.fi-research__all { grid-column: 1 / -1; padding-top: 32px; }
@media (min-width: 700px) {
  .fi-research .ledger { margin-top: 40px; }
  .fi-research__all { padding-left: calc((100% - 7 * var(--g)) / 8 * 2 + 2 * var(--g)); }
}
@media (min-width: 1100px) {
  .fi-research { padding-block: 112px 120px; }
  .fi-research__title { grid-column: 1 / span 10; }
  /* site.css places the homepage ledger on columns 1 to 7, row 2, beside the stack. */
  .fi-research .ledger { grid-column: 1 / span 8; grid-row: auto; margin-top: 64px; }
  .fi-research__all { grid-column: 3 / span 6; padding: 36px 0 0; }
}

/* How we work: four statements, each with its one line; the reach section's navy field. */
.fi-how { background: var(--navy); color: var(--on-navy); padding-block: var(--section); }
.fi-how__title { grid-column: 1 / -1; }
.fi-how__list { grid-column: 1 / -1; margin-top: 40px; border-top: 1px solid var(--on-navy-rule); }
.fi-how__item { padding: 24px 0 28px; border-bottom: 1px solid var(--on-navy-rule); }
.fi-how__name {
  font-family: var(--serif);
  font-weight: 380;
  font-size: var(--fs-statement);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.fi-how__line { margin-top: 10px; font: 400 var(--fs-lead)/1.45 var(--sans); color: var(--on-navy-muted); max-width: 30em; text-wrap: balance; }
@media (min-width: 700px) {
  .fi-how__list { margin-top: 56px; }
  .fi-how__item { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--g); align-items: baseline; padding: 28px 0 32px; }
  .fi-how__name { grid-column: 1 / span 4; }
  .fi-how__line { grid-column: 5 / span 4; margin-top: 0; }
}
@media (min-width: 1100px) {
  .fi-how { padding-block: 120px 128px; }
  .fi-how__list { margin-top: 72px; display: grid; grid-template-columns: subgrid; }
  .fi-how__item { grid-column: 1 / -1; grid-template-columns: subgrid; padding: 32px 0 36px; }
  .fi-how__name { grid-column: 1 / span 6; }
  .fi-how__line { grid-column: 7 / span 6; }
}

/* The notice, in small type above the footer. */
.fi-notice { padding-block: 36px 44px; border-top: 1px solid var(--rule); }
.fi-notice__text { grid-column: 1 / -1; font: 400 var(--fs-small)/1.6 var(--sans); color: var(--slate); max-width: 60em; }
@media (min-width: 1100px) { .fi-notice__text { grid-column: 1 / span 8; } }
/* r3e.css draws a hairline at the top of the footer, between two navy fields; here paper comes first. */
.page-investors .foot::before { content: none; }

/* Lead, 11 Oct: on the homepage the answer sits one size below the section headlines around it
   (research above, the map below), so the page keeps one loud voice per section. The investors page,
   where these lines are the page's own headline, keeps the headline size. */
#investors .inv__answer { font-size: var(--fs-figure); line-height: 1.04; letter-spacing: -0.015em; }

/* ==========================================================================
   R6 (lead, 11 Oct): the committee's changes.
   ========================================================================== */
/* The standard: his word, set as a short ruled list beside its label. */
.inv__std-head { grid-column: 1 / -1; margin-top: 34px; font: 380 var(--fs-statement)/1.18 var(--serif); letter-spacing: -0.01em; color: var(--navy); }
.inv__std-list { grid-column: 1 / -1; list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.inv__std-list li { padding: 14px 0 16px; border-bottom: 1px solid var(--rule); font: 380 var(--fs-statement)/1.18 var(--serif); letter-spacing: -0.01em; color: var(--navy); }
@media (min-width: 1100px) {
  .inv__std-head { grid-column: 1 / span 4; margin-top: 48px; padding-top: 15px; }
  .inv__std-list { grid-column: 5 / span 8; margin-top: 48px; }
}
/* Every listed report can be asked: a quiet link under its title, the mark in the accent. */
.entry__ask {
  display: inline-flex; align-items: baseline; gap: 6px; margin-top: 10px;
  font: 500 var(--fs-meta)/1.3 var(--sans); color: var(--navy);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--rule);
}
.entry__ask:hover { text-decoration-color: currentColor; }
.entry__ask .star { color: var(--orange); text-decoration: none; }
/* Ask AI as a band right under the research list: tighter, and the three facts stay on the investors page. */
.ask--band { padding-block: clamp(64px, 7vw, 104px); }   /* the plate's lower edge already marks the turn */
.ask--band .ask__facts { display: none; }
/* Two paper sections now meet (Ask, then the investor block): a hairline inside the grid marks the turn. */
#investors { padding-top: 0; }
#investors .inv__grid::before { content: ""; grid-column: 1 / -1; border-top: 1px solid var(--rule); margin-bottom: clamp(64px, 7vw, 104px); }

/* ==========================================================================
   R7 (lead, 11 Oct): the review round's fixes.
   ========================================================================== */
/* One action on the first screen: the header's button waits until the photograph has gone. */
.js:not(.menu-open) .hdr--over .hdr__cta { opacity: 0; visibility: hidden; }
.hdr__cta { transition: opacity 0.3s var(--ease-out), visibility 0s linear 0s, background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
/* No glass on the page: over the photograph the scrolled header is a solid bar. */
.js:not(.menu-open) .hdr--over.is-stuck { background: var(--navy); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* One loud voice per section: the headlines step down from 112 to 96, the hero stays the largest. */
:root { --fs-h2: clamp(40px, calc(18.7px + 6.48vw), 96px); }
.ask--band .ask__title { font-size: var(--fs-figure); line-height: 1.04; }
/* The ledger: titles stand alone; each report's Ask link sits under its date (under the title on phones). */
.entry__ask { margin-top: 0; }
@media (max-width: 699.98px) {
  .entry__date { order: 0; } .entry__body { order: 1; } .entry__ask { order: 2; margin-top: 12px; }
}
@media (min-width: 700px) {
  .entry__date { grid-row: 1; }
  .entry__body { grid-row: 1 / span 2; }
  .entry__ask { grid-column: 1 / span 2; grid-row: 2; align-self: start; margin-top: 10px; }
}
/* The form as one ruled row: the field with its button beside it, the consent beneath in slate. */
.inv__terms { color: var(--slate); }
@media (min-width: 1100px) {
  .inv__form { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: end; }
  .inv__label { grid-column: 1 / span 5; grid-row: 1; }
  .inv__field { grid-column: 1 / span 5; grid-row: 2; }
  .inv__send { grid-column: 6 / span 7; grid-row: 2; margin-top: 0; }
  .inv__consent { grid-column: 1 / span 8; grid-row: 3; }
  .inv__note { grid-column: 1 / span 8; grid-row: 4; }
}
/* Phone hero: the button full width, the two doors side by side under it. */
@media (max-width: 699.98px) {
  .hero--photo .hero__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
  .hero--photo .hero__primary { flex: 1 1 100%; }
}

/* Round 9 (11 Oct): a fourth figure, 5 million+, joins the reach band. Desktop: four across, three
   columns each, the number scaled to the narrower cell (nowrap, so it must fit its cell). */
@media (min-width: 1100px) {
  #reach .figure { grid-column: span 3; container-type: inline-size; }
  /* "172 countries", the longest, is 5.2 times its type size: 17.5% of the cell keeps it inside. */
  #reach .figure__num { font-size: min(60px, 17.5cqw); }
  #reach .figure__means { max-width: 17em; }
}

/* Round 9c (11 Oct): one report at a time, no pile and no edges; js/main.js cross-fades the covers with
   the scroll. Static (no script, reduced motion): the latest cover alone. */
.stack { translate: none; }
.stack__edge { display: none; }
.stack__sheet { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 30px 60px -24px rgba(0, 0, 0, 0.55); }
.stack__sheet:not(:nth-of-type(1)) { opacity: 0; }
/* Round 10: a little room above the pile, whose sheets step up and left by 4px each. */
.research .stack-wrap { padding-top: 28px; }
.stack__sheet { backface-visibility: hidden; }
.research { overflow-x: clip; }
@media (max-width: 1099.98px) { .research .stack-col { overflow: clip; } }
.entry__co a { color: inherit; text-decoration: none; }
.entry__co a:hover, .entry__co a:focus-visible { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }

/* ==========================================================================
   COMPANY PAGE (company-ainos.html), 11 Oct. START.
   The template for every covered company (Ainos first). Scoped to body.page-company and the co-*
   blocks; nothing above this line is changed. Tokens, type sizes, grid and components from site.css
   only; no new colour (the video card's ground is site.css's navy hover tone #0C1629), no new size.
   1. Header and footer: Research is the current section.
   2. The opening: the name, the listing, the company's definition, three facts.
   3. The video: a title card on a navy field; the player loads only on click (js/company.js).
   4. Share price: the chart block (a labelled placeholder in the mock-up).
   5. Research on the company: the homepage's ledger, every report, then the close.
   ========================================================================== */

/* ---- 1. The current section: its menu line drawn (as for-investors.html does for its page) ---- */
.page-company .nav a[aria-current="true"]::after { transform: scaleX(1); }
.js.menu-open .page-company .nav a[aria-current="true"] { color: var(--on-navy-muted); }
.page-company .foot__list a[aria-current="true"] { color: var(--on-navy-muted); }
/* r3e.css draws a hairline at the top of the footer, between two navy fields; here paper comes first. */
.page-company .foot::before { content: none; }

/* ---- 2. The opening ----
   The name at the section-headline size (the homepage hero stays the largest), the listing under it,
   the hero's 2px rule, then the definition on the ledger's body columns with the facts hanging in its
   date column. Phones: one column, the facts as ruled rows. */
.co-open { padding-block: 48px 64px; }
.co-open__grid { align-items: start; }
.co-open__name {
  grid-column: 1 / -1;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 370;
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: -0.02em;
}
.co-open__listing { grid-column: 1 / -1; margin-top: 12px; font: 500 var(--fs-lead)/1.4 var(--sans); color: var(--slate); }
.co-open__rule { grid-column: 1 / -1; height: 2px; margin-top: 32px; background: var(--navy); }
.co-open__def { grid-column: 1 / -1; margin-top: 24px; }
.co-open__lead {
  font-family: var(--serif);
  font-weight: 380;
  font-size: var(--fs-statement);
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.co-open__more { margin-top: 14px; font: 400 var(--fs-lead)/1.45 var(--sans); max-width: 32em; text-wrap: pretty; }
.co-open__facts { grid-column: 1 / -1; margin: 36px 0 0; border-top: 1px solid var(--rule); }
.co-open__fact {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g);
  padding: 12px 0 13px;
  border-bottom: 1px solid var(--rule);
  font: 500 var(--fs-meta)/1.4 var(--sans);
}
.co-open__fact dt { color: var(--slate); }
.co-open__fact dd { margin: 0; }

@media (min-width: 700px) {
  .co-open { padding-block: 72px 96px; }
  .co-open__rule { margin-top: 40px; }
  /* The ledger's columns: facts on 1 and 2 (the date column), the definition from 3. */
  .co-open__def { grid-column: 3 / -1; grid-row: 4; margin-top: 28px; }
  .co-open__facts { grid-column: 1 / span 2; grid-row: 4; margin-top: 36px; border-top: 0; }
  .co-open__fact { display: block; padding: 0; border: 0; }
  .co-open__fact + .co-open__fact { margin-top: 14px; }
}
@media (min-width: 1100px) {
  .co-open { padding-block: 96px 120px; }
  .co-open__name { grid-column: 1 / span 10; }
  .co-open__listing { margin-top: 18px; }
  .co-open__rule { margin-top: 48px; }
  .co-open__def { grid-column: 3 / span 8; margin-top: 36px; }
  .co-open__facts { margin-top: 45px; }
}

/* ---- 3. The video ----
   A navy field (the reach section's), the video's own title on a card a shade darker, one paper button.
   The button's hit area stretches over the whole card. On click js/company.js puts the player in the
   frame and hides the card (it stays in the page, so the section keeps its name). Without JavaScript the
   button is hidden: nothing could play it. */
.co-video { background: var(--navy); color: var(--on-navy); padding-block: var(--section); }
.co-video__frame {
  grid-column: 1 / -1;
  position: relative;
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  overflow: hidden;
  background: #0C1629;
  box-shadow: inset 0 0 0 1px var(--on-navy-rule);
}
/* The title and the button stand together at the lower left, as on a title card. */
.co-video__poster {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  gap: clamp(14px, 3.4cqw, 44px);
  padding: clamp(16px, 5cqw, 64px);
}
.co-video__poster[hidden] { display: none; }
.co-video__title {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 370;
  font-size: clamp(22px, 5.8cqw, 76px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--on-navy);
}
.co-video__line { display: block; }
.co-video__play { --h: 44px; position: static; gap: 12px; padding: 0 20px 0 18px; font-size: 15px; }
.co-video__play::after { content: ""; position: absolute; inset: 0; }
/* site.css nudges a pressed button 1px; a transform would shrink the stretched hit area mid-click. */
.co-video__play:active { transform: none; }
.co-video__poster:hover .co-video__play { background: var(--white); }
.co-video__poster:hover .co-video__play .btn__label::after { transform: scaleX(1); }
.co-video__icon {
  width: 0; height: 0;
  border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
}
.co-video__player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.co-video__host { grid-column: 1 / -1; margin-top: 16px; font: 500 var(--fs-meta)/1.4 var(--sans); color: var(--on-navy-muted); }
html:not(.js) .co-video__play { display: none; }

@media (min-width: 700px) {
  .co-video__play { --h: 56px; padding: 0 28px 0 24px; font-size: 16px; }
  .co-video__icon { border-width: 7px 0 7px 12px; }
}
@media (min-width: 1100px) {
  .co-video { padding-block: 112px 120px; }
  .co-video__host { margin-top: 20px; }
}

/* ---- 4. Share price ----
   One series, so no legend: the heading names it. Hairline grid in the rule colour, a navy baseline, the
   line 2px. In the mock-up the line is dashed and carries no values (a placeholder, never a price); the
   WordPress build draws the live series here, solid, with a hover read-out. */
.co-price { padding-block: var(--section); }
.co-price__title {
  grid-column: 1 / -1;
  font-family: var(--serif);
  font-weight: 380;
  font-size: var(--fs-statement);
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.co-price__chart { grid-column: 1 / -1; margin-top: 24px; }
.co-price__svg { width: 100%; height: clamp(180px, 26vw, 380px); overflow: visible; }
.co-price__grid-lines line { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.co-price__base { stroke: var(--navy); stroke-opacity: 0.45; stroke-width: 1; vector-effect: non-scaling-stroke; }
.co-price__line {
  fill: none;
  stroke: var(--slate); stroke-width: 2;
  stroke-dasharray: 2 7; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.co-price__caption { margin-top: 16px; font: 500 var(--fs-meta)/1.4 var(--sans); color: var(--slate); }
@media (min-width: 1100px) {
  .co-price { padding-block: 112px 120px; }
  .co-price__chart { margin-top: 40px; }
}

/* ---- 5. Research on the company ----
   The homepage's ledger (site.css, r3e.css period rows, the R7 placement of each Ask link), without the
   stack, on columns 1 to 8, as on for-investors.html. Then the close: one statement, one line, the way back. */
.co-research { padding-block: var(--section); border-top: 1px solid var(--rule); }
.co-research__grid { align-items: start; }
.co-research__title { grid-column: 1 / -1; }
.co-research .ledger { grid-column: 1 / -1; margin-top: 24px; }
/* site.css stretches each title link over its whole entry (.entry__link::after); the Ask link is lifted
   above that layer so it opens the Ask page, not the PDF. */
.page-company .entry__ask { position: relative; z-index: 1; }

.co-close { grid-column: 1 / -1; padding-top: 48px; }
.co-close__line {
  font-family: var(--serif);
  font-weight: 380;
  font-size: var(--fs-statement);
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.co-close__more { margin-top: 10px; font: 400 var(--fs-lead)/1.45 var(--sans); max-width: 30em; text-wrap: balance; }
.co-close__all { margin-top: 28px; }

@media (min-width: 700px) {
  .co-research .ledger { margin-top: 40px; }
  /* The close starts on column 3, the column of the report titles. */
  .co-close { grid-column: 3 / -1; padding-top: 56px; }
}
@media (min-width: 1100px) {
  .co-research { padding-block: 112px 128px; }
  .co-research__title { grid-column: 1 / span 10; }
  /* site.css places the homepage ledger on columns 1 to 7, row 2, beside the stack. */
  .co-research .ledger { grid-column: 1 / span 8; grid-row: auto; margin-top: 64px; }
  .co-close { grid-column: 3 / span 6; padding-top: 64px; }
}
/* COMPANY PAGE END
   ========================================================================== */
/* "Ask this report" sits above the title's whole-entry click area, so it opens Ask, not the PDF. */
.entry__ask { position: relative; z-index: 1; }

/* Round 11 (11 Oct): the AI mark is the familiar two-star sparkle, drawn (not a font glyph), in the accent.
   "Ask this report" is quiet type, no frame: a hairline draws under it on hover. */
.spark { display: inline-block; width: 1.3em; height: 1.3em; flex: none; fill: var(--orange); vertical-align: -0.24em; }
.entry__ask {
  position: relative; align-items: center; gap: 7px; width: max-content; padding: 2px 0 4px;
  border: 0; background: none; text-decoration: none; color: var(--navy); letter-spacing: 0.01em;
}
.entry__ask::after {
  content: ""; position: absolute; left: calc(1.3em + 7px); right: 0; bottom: 0; height: 1px;
  background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease;
}
.entry__ask:hover::after, .entry__ask:focus-visible::after { transform: scaleX(1); }
.entry__ask:hover, .entry__ask:focus-visible { text-decoration: none; color: var(--navy); }

/* Company page: why this company stands out. */
.co-why { padding-block: clamp(48px, 6vw, 96px) clamp(40px, 5vw, 80px); }
.co-why__title { grid-column: 1 / -1; margin: 0 0 clamp(24px, 3vw, 40px); font: 380 var(--fs-statement)/1.15 var(--serif); letter-spacing: -0.01em; color: var(--navy); }
.co-why__list { grid-column: 1 / -1; display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.co-why__item { padding: 22px 0 26px; border-bottom: 1px solid var(--rule); }
.co-why__point { margin: 0 0 8px; font: 400 var(--fs-title)/1.2 var(--serif); color: var(--navy); }
.co-why__fact { margin: 0; max-width: 34em; font: 400 var(--fs-body)/1.5 var(--sans); color: var(--slate); }
@media (min-width: 1100px) { .co-why__list { grid-template-columns: 1fr 1fr; column-gap: var(--g); } }

/* ==========================================================================
   RESEARCH, FIRM, CONTACT PAGES (research.html, firm.html, contact.html), 11 Oct. START.
   Scoped to body.page-research, .page-firm, .page-contact and the rs-* / pg-* blocks; nothing above
   this line is changed. Tokens, type sizes, grid and components from site.css only; no new colour,
   no new size. Openings follow the company page's (.co-open): the headline at the section size, the
   hero's 2px rule. Rows follow the ledger's columns: the label in the date column (1 and 2), the body
   from column 3.
   1. Header and footer: the current page.
   2. Research: the heading, its line, the filter by company (js/research.js), the ledger.
   3. Firm and contact: the opening, the ruled rows, the firm page's navy close.
   ========================================================================== */

/* ---- 1. The current page: its menu line drawn, as on for-investors.html (section 2 above) ---- */
/* Paper meets the footer on the research and contact pages: no hairline at the footer's top (r3e.css). */
.page-research .foot::before, .page-contact .foot::before { content: none; }

/* ---- 2. Research ---- */
.rs { padding-block: 48px var(--section); }
.rs__grid { align-items: start; }
.rs__title {
  grid-column: 1 / -1;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 370;
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: -0.02em;
}
.rs__line { grid-column: 1 / -1; margin-top: 16px; font: 400 var(--fs-lead)/1.45 var(--sans); max-width: 32em; text-wrap: balance; }
.rs__rule { grid-column: 1 / -1; height: 2px; margin-top: 32px; background: var(--navy); }

/* The filter: quiet text buttons in the meta type; the pressed one carries the menu's drawn line. */
.rs-filter { grid-column: 1 / -1; margin-top: 20px; }
.rs-filter[hidden] { display: none; }
.rs-filter__list { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.rs-filter__btn {
  position: relative;
  padding: 8px 0 10px;
  border: 0; border-radius: 0; background: none; cursor: pointer;
  font: 500 var(--fs-meta)/1.4 var(--sans);
  color: var(--slate);
}
.rs-filter__btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform 0.45s var(--ease-out);
}
.rs-filter__btn:hover { color: var(--navy); }
.rs-filter__btn:hover::after { transform: scaleX(1); }
.rs-filter__btn[aria-pressed="true"] { color: var(--navy); font-weight: 600; }
.rs-filter__btn[aria-pressed="true"]::after { transform: scaleX(1); height: 2px; }

.rs .ledger { grid-column: 1 / -1; margin-top: 4px; }
/* The filter hides entries and quarters with [hidden]; site.css gives each entry its own display. */
.rs__ledger > [hidden] { display: none; }
.rs__ledger .ledger__period.rs-lead { padding-top: 28px; }
/* The title link covers its whole entry (site.css); the company name is lifted above it, like Ask. */
.page-research .entry__co a { position: relative; z-index: 1; }

@media (min-width: 700px) {
  .rs { padding-top: 72px; }
  .rs__rule { margin-top: 40px; }
  /* The filter starts on column 3, the column of the report titles. */
  .rs-filter { grid-column: 3 / -1; margin-top: 24px; }
  .rs .ledger { margin-top: 12px; }
}
@media (min-width: 1100px) {
  .rs { padding-block: 96px 128px; }
  .rs__title { grid-column: 1 / span 10; }
  .rs__line { margin-top: 20px; }
  .rs__rule { margin-top: 48px; }
  .rs-filter { grid-column: 3 / span 6; margin-top: 28px; }
  /* site.css places the homepage ledger on columns 1 to 7, row 2, beside the stack. */
  .rs .ledger { grid-column: 1 / span 8; grid-row: auto; margin-top: 44px; }
  .rs__ledger .ledger__period.rs-lead { padding-top: 0; }
}

/* ---- 3. Firm and contact ---- */
.pg-open { padding-block: 48px 0; }
.pg-open__grid { align-items: start; }
.pg-open__title {
  grid-column: 1 / -1;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 370;
  font-size: var(--fs-h2);
  line-height: 1.04;           /* as index.html's firm headline (r2b.css): "your" over "We" */
  letter-spacing: -0.02em;
}
.pg-open__line { display: block; }
.pg-open__rule { grid-column: 1 / -1; height: 2px; margin-top: 32px; background: var(--navy); }
.pg-open__lead { grid-column: 1 / -1; margin-top: 24px; font: 400 var(--fs-lead)/1.45 var(--sans); max-width: 31em; }
.pg-open__sentence { display: block; text-wrap: balance; }
/* Contact: the call under the rule. */
.pg-open__call { grid-column: 1 / -1; margin-top: 28px; }
.pg-open__btn { width: 100%; }
.pg-open__first { margin-top: 14px; }
.pg-open__first-link {
  display: inline-block; padding-block: 4px;
  font: 500 var(--fs-meta)/1.4 var(--sans);
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--rule); text-underline-offset: 0.3em;
}
.pg-open__first-link:hover { text-decoration-color: currentColor; }

/* The rows: a hairline over each, the label in the date column's type. */
.pg-rows { padding-block: 48px var(--section); }
.pg-rows__grid { align-items: start; }
.pg-row { grid-column: 1 / -1; padding: 20px 0 26px; border-top: 1px solid var(--rule); }
.pg-row:last-child { border-bottom: 1px solid var(--rule); }
.pg-row__label { font: 500 var(--fs-meta)/1.4 var(--sans); color: var(--slate); }
.pg-row__body { margin-top: 10px; }
.pg-row__statement {
  font-family: var(--serif);
  font-weight: 380;
  font-size: var(--fs-statement);
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.pg-row__more { margin-top: 10px; font: 400 var(--fs-lead)/1.45 var(--sans); }
/* The founder: index.html's signature (r2b.css, r3e.css), on paper. */
.pg-row__name {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 380;
  font-size: var(--fs-title);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.2em;
}
.pg-row__name:hover { text-decoration-color: currentColor; }
.pg-row__role { display: block; font: 500 var(--fs-meta)/1.45 var(--sans); color: var(--slate); }
.pg-row__name + .pg-row__role { margin-top: 8px; }
.pg-row__address { display: flex; flex-direction: column; font: 400 var(--fs-lead)/1.45 var(--sans); }
.pg-row__co { font-weight: 600; }
/* Contact: the number and the address at the statement size, as index.html's close sets the number. */
.pg-row__big {
  font-family: var(--serif);
  font-weight: 380;
  font-size: var(--fs-statement);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums proportional-nums;
  overflow-wrap: anywhere;
  text-decoration: none;
}
.pg-row__big:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.pg-row__big[href^="tel:"] { white-space: nowrap; }

/* The firm page's close: index.html's navy close, the call alone on the title column. */
.pg-close { background: var(--navy); color: var(--on-navy); padding-block: 56px 64px; }
.pg-close__call { grid-column: 1 / -1; }
.pg-close__btn { width: 100%; }

@media (min-width: 700px) {
  .pg-open { padding-top: 72px; }
  .pg-open__rule { margin-top: 40px; }
  .pg-open__lead, .pg-open__call { grid-column: 3 / -1; margin-top: 28px; }
  .pg-open__btn, .pg-close__btn { width: auto; }
  .pg-rows { padding-top: 64px; }
  .pg-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--g); padding: 24px 0 30px; }
  .pg-row__label { grid-column: 1 / span 2; padding-top: 2px; }
  .pg-row__body { grid-column: 3 / -1; margin-top: 0; }
  .pg-close { padding-block: 72px 80px; }
  .pg-close__call { grid-column: 3 / -1; }
}
@media (min-width: 1100px) {
  .pg-open { padding-top: 96px; }
  .pg-open__title { grid-column: 1 / span 11; line-height: 1; }
  .pg-open__rule { margin-top: 48px; }
  .pg-open__lead, .pg-open__call { grid-column: 3 / span 6; margin-top: 36px; }
  .pg-rows { padding-block: 88px 128px; }
  .pg-rows__grid { row-gap: 0; }
  .pg-row { grid-column: 1 / span 10; grid-template-columns: subgrid; padding: 28px 0 34px; }
  .pg-row__body { grid-column: 3 / -1; }
  .pg-close { padding-block: 88px 96px; }
  .pg-close__call { grid-column: 3 / span 6; }
}
/* RESEARCH, FIRM, CONTACT PAGES END
   ========================================================================== */

/* Round 14: notes under contact rows; research page sub-line. */
.pg-row__note { margin: 8px 0 0; font: 400 var(--fs-meta)/1.5 var(--sans); color: var(--slate); }
.rs__line--sub { margin-top: 6px; color: var(--slate); }
.research__line--sub { margin-top: 6px; color: var(--slate); }

/* Round 15 (11 Oct): the navy panel carries the key sentence of the report being read (js/quote.js). */
.tq { display: none; }
@media (min-width: 1100px) {
  .tq { display: block; margin: 0 0 40px; color: var(--paper); max-width: 30rem; min-height: 9.5em; }
  .tq__q { margin: 0; font: 360 clamp(30px, 2.6vw, 40px)/1.18 var(--serif); letter-spacing: -0.01em; transition: opacity .6s ease, transform .6s ease; }
  .tq__q::before { content: "\201C"; display: block; font-size: 1.6em; line-height: .6; color: var(--orange); margin-bottom: 14px; }
  .tq__src { margin-top: 18px; font: 500 14px/1.4 var(--sans); color: rgba(245, 240, 231, .62); letter-spacing: .02em; transition: opacity .6s ease; }
  .tq.out .tq__q { opacity: 0; transform: translateY(10px); }
  .tq.out .tq__src { opacity: 0; }
  .research .stack-wrap { --w: 210px; }
}

/* Round 16 (11 Oct): the AI mark in a soft coral gradient with a faint glow. */
.spark { fill: url(#sparkGrad); filter: drop-shadow(0 0 3px rgba(253, 94, 94, 0.45)); }
.entry__ask:hover .spark, .entry__ask:focus-visible .spark { filter: drop-shadow(0 0 6px rgba(253, 94, 94, 0.7)); }
/* The logo belt gets a small visible label, true for every logo in it. */
.companies__label { margin: 0 0 18px; font: 500 var(--fs-meta)/1.4 var(--sans); letter-spacing: 0.02em; color: var(--slate); }
/* The hero photograph drifts slowly left and right, like a camera on a slider (individual
   translate/scale, so it stacks with the script's transform). Reduced motion: still. */
@media (prefers-reduced-motion: no-preference) {
  /* Round 21: on the picture's own frame, so the hero script (which owns the image's transform) never stops it. */
  /* Review 13 Oct (F1, WCAG 2.2.2) made it one pass; R7 (13 Oct, the founder: "it stops, that's the issue"):
     it glides on, left to right and back, without end. It rests while the first screen is out of view
     (js/main.js sets .is-away) and stands still under reduced motion. */
  .hero__media picture { display: block; height: 100%; animation: hero-drift 18s ease-in-out infinite alternate both; will-change: transform; }
  .hero--photo.is-away .hero__media picture { animation-play-state: paused; }
  /* the zoom lives on the frame too: the hero script resets the image's own scale */
  @keyframes hero-drift { from { transform: translateX(-2.4%) scale(1.08); } to { transform: translateX(2.4%) scale(1.08); } }
}

/* Round 17 (11 Oct): the AI mark as a cut gem: each arm in two facets, lit from the top left, so it reads
   in relief; a faint coral glow. */
.spark { width: 1.5em; height: 1.5em; vertical-align: -0.34em; filter: drop-shadow(0 0.5px 0.6px rgba(120, 20, 30, 0.35)) drop-shadow(0 0 4px rgba(253, 94, 94, 0.35)); }
.entry__ask:hover .spark, .entry__ask:focus-visible .spark { filter: drop-shadow(0 0.5px 0.6px rgba(120, 20, 30, 0.35)) drop-shadow(0 0 7px rgba(253, 94, 94, 0.65)); }

/* Round 18 (11 Oct): the AI mark as a hairline: one outlined four-point star and a small solid one, in a
   coral-to-plum gradient, with a whisper of glow. Minimal, a little futuristic. */
.spark { width: 1.3em; height: 1.3em; vertical-align: -0.26em; filter: drop-shadow(0 0 2.5px rgba(253, 94, 94, 0.35)); }
.entry__ask:hover .spark, .entry__ask:focus-visible .spark { filter: drop-shadow(0 0 5px rgba(253, 94, 94, 0.6)); }

/* Round 19 (11 Oct, "like Apple, Nvidia"): the AI mark is drawn the way the big firms draw it: one
   smooth four-point star and a small companion, solid, in the colour of the words beside it. No
   gradient, no glow. On hover it turns coral. */
.spark { fill: currentColor; filter: none; width: 1.15em; height: 1.15em; vertical-align: -0.18em; transition: fill 0.25s ease, transform 0.35s ease; }
.entry__ask:hover .spark, .entry__ask:focus-visible .spark { fill: var(--orange); filter: none; transform: rotate(45deg); }

/* Round 20 (11 Oct): his picks. C, a living ring, marks "Ask AI" (menu, footer, Ask band); E, a light
   that runs through the words, marks every "Ask this report". Reduced motion: both still.
   R6 (13 Oct, the founder): both move again, all the time, everywhere. The ring turns slowly and without end.
   "Ask this report" keeps its words navy in every frame: the light passes under them, as a soft warm glow
   behind the words and a bright filament along the line beneath (js/main.js staggers the rows, so the light
   travels down a list rather than flashing at once). Hover and keyboard focus: the coral line is drawn under
   the words (Round 11, above). Contrast, measured: navy on the glow's brightest point 10.3:1 (paper 14.0:1).
   Note for the record: continuous motion with no pause control is what review F1 (WCAG 2.2.2) flagged; it
   stops for every visitor whose system asks for reduced motion. */
.orb { display: inline-block; flex: none; width: 0.82em; height: 0.82em; border-radius: 50%; position: relative; vertical-align: -0.06em;
  background: conic-gradient(from 0deg, #FD5E5E, #FFC2A8, #C04B95, #7B5CFF, #FD5E5E);
  box-shadow: 0 0 10px rgba(253, 94, 94, 0.55), 0 0 2px rgba(192, 75, 149, 0.6); }
.orb::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: var(--paper); }
.on-navy .orb::after, .foot .orb::after, .hdr--over:not(.is-stuck) .orb::after, .js.menu-open .hdr__nav .orb::after { background: var(--navy); }
@keyframes orb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .orb { animation: orb-spin 5s linear infinite; }
}

.entry__ask .shim { position: relative; display: inline-block; color: var(--navy); isolation: isolate; }
/* The filament: a 2px line under the words; the light runs along it. At rest it is clear. */
.entry__ask .shim::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; pointer-events: none;
  background: linear-gradient(100deg, rgba(253, 94, 94, 0) 0%, rgba(253, 94, 94, 0) 40%, #FD5E5E 46%, #FFC2A8 50%, #C04B95 54%, rgba(192, 75, 149, 0) 60%, rgba(192, 75, 149, 0) 100%);
  background-size: 300% 100%; background-position: 100% 0; background-repeat: no-repeat;
}
/* The glow: a low, wide haze of warm light rising from the filament behind the words (z-index -1 inside the
   word box), faded at both ends. */
.entry__ask .shim::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -0.8em; right: -0.8em; top: -0.2em; bottom: -0.6em;
  background: radial-gradient(50% 62% at 50% 78%, rgba(253, 94, 94, 0.3), rgba(192, 75, 149, 0.12) 55%, rgba(192, 75, 149, 0) 100%) no-repeat;
  background-size: 52% 100%; background-position: -110% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%);
}
@keyframes shim-run { 0% { background-position: 100% 0; } 40%, 100% { background-position: 0% 0; } }
@keyframes shim-glow { 0% { background-position: -110% 50%; } 40%, 100% { background-position: 210% 50%; } }
@media (prefers-reduced-motion: no-preference) {
  .entry__ask .shim::after { animation: shim-run 5s cubic-bezier(.45, 0, .25, 1) var(--ask-d, 0s) infinite; }
  .entry__ask .shim::before { animation: shim-glow 5s cubic-bezier(.45, 0, .25, 1) var(--ask-d, 0s) infinite; }
}
.entry__ask { gap: 0; }
/* The hover hairline once sat after the sparkle (Round 11); with the words alone it runs under all of them. */
.entry__ask:not(:has(.spark))::after { left: 0; right: 0; }
@media (prefers-reduced-motion: reduce) {
  .orb, .entry__ask .shim::after, .entry__ask .shim::before { animation: none !important; }
  .entry__ask .shim::before { background: none; }
}

/* R6 (13 Oct, the founder): "the highest standard" carries a light passing through. Every five seconds a
   warm band glides across the letters, left to right, and leaves them navy. Each colour of the band keeps
   AA on paper (navy 14.0:1, indigo #3A3F7C 8.5:1, plum #8E3F72 6.0:1, deep coral #B9443F 4.67:1; the
   lowest anywhere along the gradient is 4.67:1, so AA holds even for normal text, in every frame).
   Only with motion, only where text can be clipped to a background; in forced colours and under reduced
   motion it is plain navy. Class .inv__light (index.html #investors, for-investors.html h1). */
/* R7 (13 Oct, the founder): first "too much delay", then "it should pass way slower, chic and strong". The band
   glides across at an even pace for 4.2 s, rests 0.8 s, and comes again; js/main.js starts it the moment the
   words come into view (.is-lit), every time. */
/* R8 (13 Oct, the founder: "between each light passing is five seconds, make it two or three"): a pass every
   3 seconds, 2.6 s across the words at an even pace, 0.4 s before the next. */
@keyframes inv-light { 0% { background-position: 100% 0; } 87%, 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: no-preference) {
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .inv__light {
      /* 13 Oct, the founder: "more clear when a person opens it". A wider, brighter band (peak coral #F0504F,
         3.1:1 on paper: AA for this large headline text), slower glide, first pass as the page opens. */
      background-image: linear-gradient(100deg, var(--navy) 0%, var(--navy) 35%, #3A3F7C 40%, #8E3F72 45%, #F0504F 50%, #8E3F72 55%, #3A3F7C 60%, var(--navy) 65%, var(--navy) 100%);
      background-size: 300% 100%; background-repeat: no-repeat; background-position: 100% 0;
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-box-decoration-break: slice; box-decoration-break: slice;
      animation: inv-light 3s cubic-bezier(.45, .05, .55, .95) .1s infinite;
    }
    .inv-js .inv__light:not(.is-lit) { animation: none; }
  }
}
/* For investors: "to the highest standard." stays one line, so the comma ends line one ("We do that work,").
   Measured: the phrase is 339 px wide in a 350 px line at 390, 815 in 888 at 1100; below 390 it may wrap. */
@media (min-width: 390px) { .inv__keep { white-space: nowrap; } }
@media (forced-colors: active) {
  .inv__light { background: none !important; -webkit-text-fill-color: currentColor !important; animation: none !important; }
}

/* ==========================================================================
   JA START (12 Oct): the Japanese pages (m5/ja/, <html lang="ja">). Everything below is scoped to
   :lang(ja), so the English pages do not change. Source Serif 4 and Instrument Sans have no Japanese
   glyphs: Latin (names, report titles, figures) stays in the house faces, kana and kanji fall through
   to the system's Mincho (serif) and Gothic (sans). System fonts only: no font request.
   ========================================================================== */
:root:lang(ja) {
  --serif: "Source Serif 4", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --sans: "Instrument Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", "Noto Sans JP", sans-serif;
  /* Kanji and kana are full width: the display sizes step down so a line holds a phrase. */
  --fs-display: clamp(34px, min(calc(4px + 7.4vw), 11.5vh), 100px);
  --fs-h2: clamp(30px, calc(17px + 3.4vw), 64px);
  --fs-figure: clamp(28px, min(calc(22px + 2vw), 8vw), 50px);
  --fs-statement: clamp(21px, calc(18.5px + 0.75vw), 29px);
  --fs-title: clamp(19px, calc(17.6px + 0.5vw), 24px);
}
:lang(ja) .hero--photo .hero__title { font-size: clamp(36px, min(calc(2px + 6.6vw), 10.5vh), 94px); }
:lang(ja) .hdr__menu { white-space: nowrap; }
/* Phones: "アナリストへのご相談" and "メニュー" do not both fit beside the logo; the short label takes over. */
@media (max-width: 459.98px) {
  :lang(ja) .hdr__call-long { display: none; }
  :lang(ja) .hdr__call-short { display: inline; }
}
/* Running text: strict line breaking (no small kana or prolonged sound mark at a line start); in Chrome,
   breaks fall between phrases (auto-phrase); elsewhere the browser's normal Japanese breaking. */
:lang(ja) body { line-break: strict; word-break: auto-phrase; overflow-wrap: anywhere; }
/* Headlines break between phrases, never inside a word: keep-all (Chrome: auto-phrase), and only if a
   phrase is wider than the line does it break anywhere. Tracking back to zero, leading opened for kanji. */
:lang(ja) :is(h1, h2, h3, .foot__motto, .co-why__point, .co-open__lead, .pg-row__statement, .fi-how__name, .svc-close__line, .ask__fact, .ask__q, .stay__line, .hw__stay) {
  word-break: keep-all; word-break: auto-phrase; overflow-wrap: anywhere; letter-spacing: 0 !important;
}
:lang(ja) :is(h1, h2) , :lang(ja) :is(h1, h2) * { line-height: 1.32 !important; }
:lang(ja) :is(h3, .foot__motto, .co-why__point, .co-open__lead, .pg-row__statement, .fi-how__name, .hw__stay) { line-height: 1.45 !important; }
:lang(ja) :is(p, dd, figcaption) { line-height: 1.75; }
/* No sign-up form on the Japanese pages (no Japanese consent text): one line to the English page. */
:lang(ja) .inv__form--ja { display: block; }
:lang(ja) .inv__ja { font: 400 var(--fs-body)/1.75 var(--sans); }
:lang(ja) .inv__ja + .inv__more { margin-top: 18px; }
/* Review 13 Oct (F7, WCAG 1.4.10): below 360 px the logo, "お問い合わせ" and "メニュー" need 342 px; the call
   steps out of the bar (Contact stays in the menu and the footer). */
@media (max-width: 359.98px) {
  :lang(ja) .hdr__call { display: none; }
}
/* Review 13 Oct (F9): the day hugs its month in Japanese dates ("2026年9月7日"), no box for two digits. */
:lang(ja) .entry__day { min-width: 0; }
/* Review 13 Oct: the hero's two doors stand side by side under the button, as in English (the Japanese
   button is short, so without a break the first door would join its line). The Arabic rule, extended. */
@media (min-width: 1100px) {
  :lang(ja) .hero--photo .hero__actions::after { content: ""; order: 1; flex: 0 0 100%; height: 0; }
  :lang(ja) .hero--photo .hero__secondary { order: 2; }
}
/* JA END */

/* ==========================================================================
   AR START (12 Oct): the Arabic pages (m5/ar/, <html lang="ar" dir="rtl">). Everything below is scoped
   to :lang(ar) or [dir="rtl"], so the English, German and Japanese pages do not change. Source Serif 4
   and Instrument Sans have no Arabic glyphs: Latin (names, report titles, figures) stays in the house
   faces; Arabic falls through to a naskh for the serif and the system's Arabic sans. System fonts only:
   no font request. dir="rtl" mirrors every grid and flex row on its own (columns count from the right,
   menus read from the right); this block mirrors what site.css places by left and right, and keeps the
   world map, the covers and their "Ask this report" box, the share price chart and the numbers as they are.
   ========================================================================== */
:root:lang(ar) {
  --serif: "Source Serif 4", "Noto Naskh Arabic", "Damascus", "Times New Roman", "Sakkal Majalla", serif;
  --sans: "Instrument Sans", "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", "Tahoma", "Arial", sans-serif;
  /* Review 13 Oct (F8): Arabic glyphs read about two sizes smaller than Latin at the same pixel size, so the
     small sizes step up (meta 14-15 to 16, small 13 to 15). */
  --fs-meta: 16px;
  --fs-small: 15px;
}
/* The header menu: 15 to 17 (the phone sheet keeps its own serif size). */
:lang(ar) .nav a { font-size: 17px; }
/* Joined script: no tracking anywhere. Arabic needs more leading than Latin (tall alif and lam, deep descenders). */
:lang(ar) body, :lang(ar) body *, :lang(ar) body ::before, :lang(ar) body ::after { letter-spacing: 0 !important; }
:lang(ar) :is(h1, h2), :lang(ar) :is(h1, h2) * { line-height: 1.3 !important; }
:lang(ar) :is(h3, .foot__motto, .co-why__point, .co-open__lead, .pg-row__statement, .fi-how__name, .svc-close__line, .ask__fact, .ask__q, .stay__line, .figure__means, .firm__lead, .pg-open__lead) { line-height: 1.5 !important; }
:lang(ar) :is(p, dd, figcaption, li, address) { line-height: 1.7; }
:lang(ar) .figure__num { line-height: 1.3; }
:lang(ar) .js.menu-open .nav a { line-height: 1.4; }

/* English inside the Arabic page: report titles, the key sentence, listings, the legal line. Each keeps
   its own word order and punctuation (first strong letter decides), and stays on the right edge. */
[dir="rtl"] :is(.entry__title, .tq__q, .co-open__listing, .co-open__fact dd, .foot__legal) { unicode-bidi: plaintext; text-align: right; }
/* Address lines, telephone and email: Latin, never reordered by the Arabic around them. */
[dir="rtl"] :is(.foot__firm, .pg-row__address) > * { unicode-bidi: plaintext; text-align: right; }
[dir="rtl"] :is(a[href^="tel:"], a[href^="mailto:"]) { direction: ltr; unicode-bidi: isolate; }
/* The proof scene is a picture of the English print: cover, box and hairlines keep their geometry. */
[dir="rtl"] .ask__scene { direction: ltr; }

/* Photographs: the dark side of each picture moves under the words, which now stand on the right.
   The whole media frame is flipped (scale), so the scripts that zoom the image keep working. */
[dir="rtl"] .hero__media, [dir="rtl"] .stay__media { scale: -1 1; }

/* Hero: the two doors stand side by side under the button, as in English (the Arabic button is shorter,
   so without a break the first door would join the button's line). */
@media (min-width: 1100px) {
  :lang(ar) .hero--photo .hero__actions { row-gap: 9px; }
  :lang(ar) .hero--photo .hero__actions::after { content: ""; order: 1; flex: 0 0 100%; height: 0; }
  :lang(ar) .hero--photo .hero__secondary { order: 2; }
}

/* The navy plate and the rules that run into its corner: on the left in Arabic. */
[dir="rtl"] .plate { right: var(--plate-x); left: 0; }
@media (min-width: 1100px) {
  [dir="rtl"] .hero__rule, [dir="rtl"] .firm__rule {
    right: calc((100% - min(100%, var(--maxw))) / 2 + var(--m)); left: calc(100% - var(--plate-x));
  }
  [dir="rtl"] .stack-wrap { margin: 10px calc((100% - 4 * var(--g)) / 5 + var(--g)) 0 0; }
  [dir="rtl"] .figure + .figure::before { left: auto; right: calc(var(--g) / -2); }
}
@media (min-width: 700px) {
  [dir="rtl"] .ask__fact + .ask__fact::before { left: auto; right: calc(var(--g) / -2); }
  [dir="rtl"] :is(.research__all, .fi-research__all) { padding-left: 0; padding-right: calc((100% - 7 * var(--g)) / 8 * 2 + 2 * var(--g)); }
  [dir="rtl"] .sv__item::after { left: auto; right: 0; }
  [dir="rtl"] .sv__photo { margin: 0 calc(var(--g) / -2) 0 calc(var(--m) * -1); }
  /* The day of the month hugs its month, so the months stand in one column (site.css: right-aligned day). */
  [dir="rtl"] .entry__day { text-align: left; }
}
@media (min-width: 1100px) {
  [dir="rtl"] .research__all, [dir="rtl"] .fi-research__all { padding-right: 0; }
}

/* Header: the automatic margins that push Menu and the call to the far side. */
[dir="rtl"] .hdr__menu, [dir="rtl"] .hdr__nav { margin-left: 0; margin-right: auto; }
@media (max-width: 1099.98px) {
  [dir="rtl"] .js .hdr__call { margin-left: 0; margin-right: auto; }
  [dir="rtl"] .js .hdr__call + .hdr__menu { margin-right: 0; }
  [dir="rtl"] .js.menu-open .lang__list a { padding: 10px 0 10px 12px; }
}
@media (min-width: 1100px) { [dir="rtl"] .hdr__nav { margin: 0; } }
[dir="rtl"] .lang__list { left: auto; right: -14px; }

/* Hairlines that draw on hover or at the reading line: they grow from the right. */
[dir="rtl"] :is(.btn__label, .nav a, .rs-filter__btn)::after,
[dir="rtl"] :is(.entry, .sv__item)::before { transform-origin: right center; }
[dir="rtl"] .entry__ask::after { left: 0; right: calc(1.3em + 7px); transform-origin: right; }
/* The light that runs under "Ask this report" runs the way the words are read (R6: continuously). */
[dir="rtl"] .entry__ask .shim::after { background-position: 0% 0; animation-name: shim-run-rtl; }
[dir="rtl"] .entry__ask .shim::before { background-position: 210% 50%; animation-name: shim-glow-rtl; }
@keyframes shim-run-rtl { 0% { background-position: 0% 0; } 40%, 100% { background-position: 100% 0; } }
@keyframes shim-glow-rtl { 0% { background-position: 210% 50%; } 40%, 100% { background-position: -110% 50%; } }
[dir="rtl"] .entry__ask:not(:has(.spark))::after { left: 0; right: 0; }
/* The first reveal of the hero's words opens from the right. */
@media (prefers-reduced-motion: no-preference) {
  [dir="rtl"].motion:not(.intro-done) .hero__lead,
  [dir="rtl"].motion:not(.intro-done) .hero__actions { clip-path: inset(0 0 0 100%); }
}

/* The map key: each light stands before its words, on the right. The map itself is not mirrored. */
[dir="rtl"] .nightmap__keyitem { padding-left: 0; padding-right: 18px; }
[dir="rtl"] .nightmap__keyitem::before { left: auto; right: 3px; }
[dir="rtl"] .nightmap__keyitem--hub::before { right: 4px; }
[dir="rtl"] .nightmap__keyitem--home::before { right: 2px; }

/* The logo belt runs the Arabic way: toward the right, new logos entering on the left. The band is
   mirrored as a whole (so the script's geometry holds) and each logo is turned back; the first logo
   starts on the right margin. */
[dir="rtl"] .belt { direction: ltr; transform: scaleX(-1); }
[dir="rtl"] .belt__logo { transform: scaleX(-1); }

/* No sign-up form on the Arabic pages (no checked Arabic consent text): one line to the English page. */
:lang(ar) .inv__form--ar { display: block; }
:lang(ar) .inv__ar { font: 400 var(--fs-body)/1.75 var(--sans); }
:lang(ar) .inv__ar + .inv__more { display: inline-block; margin-top: 18px; }
/* AR END */

/* ===== FIRM PAGE: the founder's portrait (12 Oct, Javad: "my face belongs on About us"). Beside the name
   from 700px, above it on phones. The photograph's own dark ground sits quietly on paper. ===== */
.pg-row__portrait { margin: 0 0 18px; width: 160px; }
.pg-row__portrait img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
@media (min-width: 700px) {
  .pg-row__body:has(.pg-row__portrait) { display: flex; gap: var(--g); align-items: flex-end; }
  .pg-row__portrait { width: 220px; flex: none; margin: 0; }
}

/* ==========================================================================
   REVIEW 13 OCT (design and accessibility, WCAG 2.2 AA): the fixes that have no older home.
   ========================================================================== */
/* B3: on phones the investor statement is a statement, not a poster: it fits the screen and wraps.
   (The homepage block is #investors, which r5.css sets at the figure size; the Japanese scale is
   already smaller and keeps its own size.) */
@media (max-width: 699.98px) {
  .inv__answer:not(:lang(ja)), #investors .inv__answer:not(:lang(ja)) { font-size: clamp(30px, 9vw, 38px); line-height: 1.05; }
}

/* Key sentences and "Why it stands out": balanced lines, no word left alone. */
.tq__q { text-wrap: balance; }
.co-why__point, .co-open__lead { text-wrap: balance; }

/* The source of the four points: one small line under the list, on its left edge. */
.co-why__source { grid-column: 1 / -1; margin-top: 16px; font: 400 var(--fs-meta)/1.5 var(--sans); color: var(--slate); max-width: 46em; }
@media (min-width: 1100px) { .co-why__source { margin-top: 20px; } }

/* Contact page: the page is the call, so the header does not repeat it. */
body.page-contact .hdr__cta, body.page-contact .hdr__call { display: none; }
/* Below 1100 px the call took the automatic margin that pushes Menu right (r3e.css); Menu takes it back. */
@media (max-width: 1099.98px) {
  html.js body.page-contact .hdr__bar .hdr__menu { margin-inline-start: auto; }
}

/* Touch targets (WCAG 2.5.8, and comfortable for a thumb): the footer's links get 38 px rows on phones and
   tablets; the list keeps its place (the negative margin takes the added padding back at the ends). */
@media (max-width: 1099.98px) {
  .foot__list { gap: 0; margin-block: -8px; }
  .foot__list a { display: inline-block; padding-block: 8px; }
}
/* The Research filter: 6 px more on each side of every name ("All" was 18 px wide). The list moves back by
   the same 6 px, so the first name still starts on the column; the drawn line stays under the words. */
.rs-filter__list { gap: 4px 10px; margin-inline-start: -6px; }
.rs-filter__btn { padding-inline: 6px; }
.rs-filter__btn::after { left: 6px; right: 6px; }

/* Research: the quarter label becomes a heading (<li class="ledger__period" role="none"><h2 class="ledger__when">),
   set exactly as the span was: the date column's type (r3e.css), with the heading defaults taken off. */
h2.ledger__when {
  margin: 0; padding: 0;
  font: 500 var(--fs-meta)/1.4 var(--sans);
  letter-spacing: normal;
}
:lang(ja) h2.ledger__when, :lang(ar) h2.ledger__when { line-height: 1.4 !important; letter-spacing: 0 !important; }

/* Research: one line under the headline now (the line above it is gone), so it takes that line's place. */
.rs__line--sub { margin-top: 16px; }
@media (min-width: 1100px) { .rs__line--sub { margin-top: 20px; } }

/* German compounds wider than a 320 px phone's line (DE Sirnaomics lead, "Biotechnologieunternehmen" at the
   statement size, 345 px): a word that cannot fit a line on its own breaks instead of running off the screen
   (never visible otherwise); on the narrowest phones the lead hyphenates such words (Chrome: only long ones). */
:lang(de) body { overflow-wrap: break-word; }
@media (max-width: 359.98px) {
  :lang(de) .co-open__lead { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 16 7 7; }
}

/* ---- r6-ask.css ---- */
/* ==========================================================================
   R6 ASK (13 Oct 2026): the Ask demonstration made real, its pop-up, and the Ask AI page.
   Linked after r5.css on index.html, for-investors.html and ask.html (the theme bundles every r6-*.css).
   1. The demonstration (#ask): the copy button, its status line, the select fallback.
   2. The pop-up (<dialog class="askd">): title, the report, three steps, one action, "How it works".
   3. The three steps and their line drawings (.steps, .ill), shared by the pop-up and the Ask AI page.
   4. The Ask AI page (ask.html, body.page-ask): the opening, the steps, the list, the close.
   Tokens, type sizes, grid and components from site.css only. The drawings use navy, slate, the rule,
   the report's white and the cover's own coral (#FD5E5E, as the printed box in r5.css). No new size.
   ========================================================================== */

/* ==========================================================================
   1. The demonstration
   ========================================================================== */
/* "Copy the eight questions" is a button now (it acts, it goes nowhere); it keeps the link's look. */
.ask__copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.ask__copy-btn {
  padding: 4px 0; border: 0; background: none; cursor: pointer; color: var(--navy);
}
.ask__copy-btn:focus-visible { outline-offset: 4px; }
/* What the button just did: "Copied." in the meta type, beside it. Always rendered (an empty live region
   that appears late is not read out); empty, it is zero wide. */
.ask__status { font: 500 var(--fs-meta)/1.4 var(--sans); color: var(--navy); }
/* Without the clipboard: the eight questions appear, selected, ready to copy by hand. */
.ask__select {
  display: block; width: 100%; min-height: 15em; margin-top: 18px; padding: 14px 16px;
  border: 1px solid var(--navy); border-radius: 0; background: var(--white); color: var(--navy);
  font: 400 var(--fs-meta)/1.55 var(--sans); resize: vertical;
}
.ask__select[hidden] { display: none; }
/* The five names open the pop-up: the pointer says so. */
.ask__ai[aria-haspopup] { cursor: pointer; }

/* ==========================================================================
   2. The pop-up
   A sheet of paper over the page, square, no glass. Phones: 16 px from every edge, the steps as rows.
   From 700 px: the steps side by side. Opening: a short rise and fade (none under reduced motion).
   ========================================================================== */
.askd {
  width: min(900px, calc(100% - 32px)); max-width: none;
  max-height: calc(100% - 32px);
  margin: auto; padding: 0;
  border: 0; border-radius: 0;
  background: var(--paper); color: var(--navy);
  box-shadow: 0 40px 90px -30px rgba(10, 17, 31, 0.55), 0 2px 8px rgba(10, 17, 31, 0.16);
  overflow: auto; overscroll-behavior: contain;
}
.askd::backdrop { background: rgba(10, 17, 31, 0.64); }
/* The page behind does not scroll while the pop-up is open. */
html:has(.askd[open]) { overflow: hidden; }
/* The inner sheet fills the dialog, so a click on the dimmed page (the dialog itself) can close it. */
.askd__in { position: relative; padding: 22px 20px 22px; }

.askd__close {
  position: absolute; top: 14px; right: 12px;
  padding: 8px; border: 0; background: none; cursor: pointer; color: var(--navy);
  font: 500 var(--fs-meta)/1 var(--sans);
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--rule); text-underline-offset: 0.3em;
}
.askd__close:hover { text-decoration-color: currentColor; }

.askd__title {
  padding-right: 64px;   /* the Close button's room */
  font-family: var(--serif); font-optical-sizing: auto;
  font-weight: 380; font-size: var(--fs-statement); line-height: 1.12; letter-spacing: -0.01em;
  text-wrap: balance;
}
.askd__report { margin-top: 8px; font: 500 var(--fs-meta)/1.4 var(--sans); color: var(--slate); }
/* The opening rule of the pages (2 px navy), at the pop-up's scale. (.askd lifts it over .steps below.) */
.askd .askd__steps { margin-top: 20px; border-top: 2px solid var(--navy); }

.askd__act { display: flex; flex-direction: column; align-items: stretch; margin-top: 22px; }
.askd__go { width: 100%; }
/* "Copied. Paste it into Gemini." under the button (beside it from 700 px). Always rendered, see .ask__status. */
.askd__status { margin-top: 12px; font: 500 var(--fs-meta)/1.4 var(--sans); color: var(--navy); }
.askd__status:empty { margin-top: 0; }
.askd .ask__select { min-height: 9em; }
.askd__how { margin-top: 16px; font: 400 var(--fs-meta)/1.4 var(--sans); }
.askd__how a {
  display: inline-block; padding-block: 4px; font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--slate); text-underline-offset: 0.3em;
}
.askd__how a:hover { text-decoration-color: currentColor; }

@media (min-width: 700px) {
  .askd { width: min(900px, calc(100% - 80px)); max-height: calc(100% - 64px); }
  .askd__in { padding: 40px 48px 36px; }
  .askd__close { top: 30px; right: 36px; }
  .askd__title { padding-right: 88px; }
  .askd__report { margin-top: 10px; }
  .askd .askd__steps { margin-top: 28px; }
  .askd__act { flex-direction: row; flex-wrap: wrap; align-items: center; margin-top: 32px; }
  .askd__go { width: auto; }
  .askd__status, .askd__status:empty { margin: 0 0 0 28px; }
  .askd__how { margin-top: 18px; }
}

@media (prefers-reduced-motion: no-preference) {
  .askd[open] { animation: askd-in 0.42s var(--ease-out) both; }
  .askd[open]::backdrop { animation: askd-fade 0.42s var(--ease-out) both; }
  @keyframes askd-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes askd-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* ==========================================================================
   3. The three steps and their drawings
   Phones (pop-up): each step a row, the drawing on the left. From 700 px: three columns between
   hairlines, the drawing on top. The page (.steps--page) sets them larger (section 4).
   ========================================================================== */
.steps { list-style: none; margin: 0; padding: 0; }
.steps__item {
  display: grid; grid-template-columns: 34% minmax(0, 1fr); column-gap: 16px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
}
.steps__art { grid-row: 1 / span 2; align-self: center; }
.steps__head {
  align-self: end;
  font-family: var(--serif); font-weight: 420; font-size: var(--fs-title); line-height: 1.2; letter-spacing: -0.005em;
}
.steps__n { display: inline-block; min-width: 1.05em; color: var(--slate); font-weight: 380; font-variant-numeric: lining-nums; }
.steps__line { align-self: start; margin-top: 4px; font: 400 var(--fs-meta)/1.45 var(--sans); color: var(--navy); text-wrap: pretty; }

@media (min-width: 700px) {
  .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--g); border-bottom: 1px solid var(--rule); }
  .steps__item { position: relative; display: block; padding: 22px 0 24px; border-bottom: 0; }
  .steps__item + .steps__item::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--g) / -2); width: 1px; background: var(--rule);
  }
  .steps__art { margin-bottom: 16px; }
  .steps__line { margin-top: 6px; font-size: var(--fs-body); line-height: 1.5; }
}

/* The drawings: inline SVG, decorative (the words carry the meaning). Hairlines stay 1.25 px at any size;
   the "text" lines scale with the drawing. */
.ill { display: block; width: 100%; height: auto; overflow: visible; }
/* Strokes first (no fill of their own), then fills, so "o w" is a white sheet with a navy hairline. */
.ill .o { fill: none; stroke: var(--navy); stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ill .rl { fill: none; stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ill .cs { fill: none; stroke: #FD5E5E; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.ill .tn { fill: none; stroke: var(--navy); stroke-linecap: round; }
.ill .ts { fill: none; stroke: var(--slate); stroke-opacity: 0.55; stroke-linecap: round; }
.ill .cl { fill: none; stroke: #FD5E5E; stroke-linecap: round; }
.ill .w { fill: var(--white); }
.ill .nv { fill: var(--navy); }
.ill .tint { fill: var(--navy); fill-opacity: 0.07; }
.ill .co { fill: #FD5E5E; }
.ill .num { fill: var(--navy); stroke: none; font: 600 7px/1 var(--sans); }

/* ==========================================================================
   4. The Ask AI page (ask.html)
   The opening as the Research page's (headline at the section size, its line, the 2px rule), then the
   three steps large, then "Pick a report" with the Research page's ledger, then the close.
   ========================================================================== */
.page-ask .foot::before { content: none; }   /* paper meets the footer (r3e.css draws a hairline) */

.ak { padding-block: 48px 64px; }
.ak__grid { align-items: start; }
.ak__title {
  grid-column: 1 / -1;
  font-family: var(--serif); font-optical-sizing: auto;
  font-weight: 370; font-size: var(--fs-h2); line-height: 1; letter-spacing: -0.02em;
  text-wrap: balance;
}
.ak__line { grid-column: 1 / -1; margin-top: 16px; font: 400 var(--fs-lead)/1.45 var(--sans); color: var(--slate); max-width: 32em; text-wrap: balance; }
.ak__rule { grid-column: 1 / -1; height: 2px; margin-top: 32px; background: var(--navy); }

/* The steps, large. Phones: as in the pop-up, each a row with the drawing beside its words. From 700 px:
   three across between hairlines, the drawing on top, sized so the opening, the rule and all three steps
   share the first screen at 1440 x 900. */
.steps--page { grid-column: 1 / -1; }
.steps--page .steps__item { grid-template-columns: 42% minmax(0, 1fr); column-gap: 18px; padding: 22px 0; }
.steps--page .steps__line { margin-top: 8px; font: 400 var(--fs-body)/1.45 var(--sans); max-width: 22em; }

/* Pick a report: the Research page's ledger (site.css, r3e.css, r5.css), on columns 1 to 8. */
.ak-list { padding-block: 56px var(--section); border-top: 1px solid var(--rule); }
.ak-list__grid { align-items: start; }
.ak-list__title {
  grid-column: 1 / -1;
  font-family: var(--serif); font-weight: 380; font-size: var(--fs-statement); line-height: 1.18; letter-spacing: -0.01em;
}
.ak-list .ledger { grid-column: 1 / -1; margin-top: 24px; }
/* The title link covers its whole entry (site.css); the company name is lifted above it, as on Research. */
.page-ask .entry__co a { position: relative; z-index: 1; }

/* The close: one statement on the column of the report titles. */
.ak-close {
  grid-column: 1 / -1; padding-top: 48px;
  font-family: var(--serif); font-weight: 380; font-size: var(--fs-statement); line-height: 1.18; letter-spacing: -0.01em;
  text-wrap: balance;
}

@media (min-width: 700px) {
  .ak { padding-block: 72px 88px; }
  .ak__rule { margin-top: 40px; }
  .steps--page .steps__item { padding: 28px 0 36px; }
  .steps--page .steps__art { max-width: 300px; margin-bottom: 24px; }
  .steps--page .steps__head { font-size: var(--fs-statement); font-weight: 380; line-height: 1.12; letter-spacing: -0.01em; }
  .steps--page .steps__line { margin-top: 10px; font-size: var(--fs-lead); }
  .ak-list { padding-top: 72px; }
  .ak-list .ledger { margin-top: 40px; }
  .ak-close { grid-column: 3 / -1; padding-top: 56px; }
}
@media (min-width: 1100px) {
  .ak { padding-block: 72px 104px; }
  .ak__title { grid-column: 1 / span 10; }
  .ak__line { margin-top: 20px; }
  .ak__rule { margin-top: 48px; }
  .steps--page { grid-template-columns: subgrid; }
  .steps--page .steps__item { grid-column: span 4; padding: 32px 0 40px; }
  .steps--page .steps__art { max-width: 340px; margin-bottom: 28px; }
  .ak-list { padding-block: 96px 128px; }
  /* site.css places the homepage ledger on columns 1 to 7, row 2, beside the stack. */
  .ak-list .ledger { grid-column: 1 / span 8; grid-row: auto; margin-top: 56px; }
  .ak-close { grid-column: 3 / span 6; padding-top: 72px; }
}

/* The AI's name in the second drawing of the pop-up, and the line for an AI that cannot open links. */
.ill__ai { font: 600 7.5px/1 var(--sans); fill: var(--navy); letter-spacing: 0.02em; }
.askd__note { margin: 10px 0 0; font: 400 var(--fs-meta)/1.5 var(--sans); color: var(--slate); max-width: 44ch; }

/* ---- r6-pages.css ---- */
/* ==========================================================================
   R6 PAGES, 13 Oct. Linked last, on two pages only:
   1. for-companies.html (new): the opening, the five services, the close.
   2. firm.html: "How we work", the five steps joined by one line.
   Tokens, type sizes, grid and the plate line from site.css; no new colour, no new type size.
   Everything is scoped to the .fc-* and .hw* blocks (and .fc-open on the shared .pg-open);
   nothing in the other files is overridden.
   ========================================================================== */


/* ==========================================================================
   1. FOR LISTED COMPANIES (for-companies.html, body.page-companies)
   ========================================================================== */

/* ---- The opening: r5.css .pg-open (headline, the hero's 2px rule, one line) ---- */
/* Two set lines from 700px. A phone is too narrow for "Serious money owns" (373px at 44px), so there the
   headline runs as one sentence in three balanced lines, never one word alone. */
.fc-open .pg-open__lead { text-wrap: balance; }
@media (max-width: 699.98px) {
  .fc-open .pg-open__title { text-wrap: balance; }
  .fc-open .pg-open__line { display: inline; }
}

/* ---- The five services ----
   Phones: the photograph first, edge to edge, then the name, the line, the points.
   From 700px: the words on the left; a hairline runs from the margin into the photograph's corner
   (index.html's services on a tablet). From 1100px the photograph starts on the plate line (the middle
   of the gutter between columns 7 and 8) and runs to the edge of the screen, as the plate does. */
/* .fc is a size container, so 100cqw below is the page's own width (never the scrollbar's). */
.fc { padding-block: 56px var(--section); container-type: inline-size; }
.fc-svc + .fc-svc { margin-top: 64px; }
.fc-svc__grid { align-items: start; }

.fc-svc__photo {
  grid-column: 1 / -1; grid-row: 1;
  margin: 0 calc(var(--m) * -1) 24px;
  aspect-ratio: 3 / 2; overflow: hidden;
  background: var(--rule);            /* what shows while the photograph loads */
}
.fc-svc__photo img { width: 100%; height: 100%; object-fit: cover; }

.fc-svc__text { grid-column: 1 / -1; grid-row: 2; position: relative; }
/* The name: the meta line of the system (index.html's "Before every results call"). */
.fc-svc__name { font: 600 var(--fs-body)/1.4 var(--sans); }
/* The line: what the service does, at the statement size. */
.fc-svc__line {
  margin-top: 10px;
  max-width: 16em;
  font-family: var(--serif);
  font-weight: 380;
  font-size: var(--fs-statement);
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
/* The points: what it changes for the company, one thought per line. */
.fc-svc__point {
  max-width: 30em;
  font: 400 var(--fs-lead)/1.45 var(--sans);
  color: var(--slate);
  text-wrap: balance;
}
.fc-svc__line + .fc-svc__point { margin-top: 18px; }
.fc-svc__point + .fc-svc__point { margin-top: 6px; }

/* ---- The close: the results-call line on the left, the call on the right (index.html's close) ---- */
.fc-close__grid { align-items: start; }
.fc-close__words { grid-column: 1 / -1; }
.fc-close__head { font: 600 var(--fs-body)/1.4 var(--sans); }
.fc-close__line {
  margin-top: 12px;
  font-family: var(--serif);
  font-weight: 380;
  font-size: var(--fs-statement);
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.fc-close__call { grid-column: 1 / -1; margin-top: 40px; }

@media (min-width: 700px) {
  .fc { padding-top: 80px; }
  .fc-svc + .fc-svc { margin-top: 72px; }
  .fc-svc__text { grid-column: 1 / span 4; grid-row: 1; padding-top: 22px; }
  /* The hairline: from the margin to the middle of the gutter, where the photograph begins. */
  .fc-svc__text::before {
    content: ""; position: absolute; top: 0; left: 0; height: 1px;
    width: calc(100% + var(--g) / 2);
    background: var(--rule);
  }
  .fc-svc__photo {
    grid-column: 5 / -1; grid-row: 1;
    margin: 0 calc(var(--m) * -1) 0 calc(var(--g) / -2);
  }
  .fc-close__words { grid-column: 1 / span 4; }
  .fc-close__call { grid-column: 5 / -1; margin-top: 0; }
}

@media (min-width: 1100px) {
  .fc { padding-block: 112px 128px; }
  .fc-svc + .fc-svc { margin-top: 104px; }
  .fc-svc__text { grid-column: 1 / span 6; padding-top: 28px; }
  /* Columns 1 to 6 are 100%; the plate line is one column and one and a half gutters further:
     7/6 of the text width plus 2/3 of a gutter. */
  .fc-svc__text::before { width: calc(100% * 7 / 6 + var(--g) * 2 / 3); }
  .fc-svc__line { margin-top: 14px; }
  .fc-svc__line + .fc-svc__point { margin-top: 24px; }
  /* On the plate line, to the edge of the screen (the second margin is for screens wider than 1440px,
     where the frame is centred; browsers without container units keep the first and stop at the frame). */
  .fc-svc__photo { grid-column: 8 / -1; margin: 0 calc(var(--m) * -1) 0 calc(var(--g) / -2); }
  .fc-svc__photo { margin-right: calc(var(--m) * -1 - max(0px, (100cqw - var(--maxw)) / 2)); }

  .fc-close__words { grid-column: 1 / span 6; }
  .fc-close__line { margin-top: 16px; }
  .fc-close__call { grid-column: 9 / span 4; }
}


/* ==========================================================================
   2. THE FIRM: HOW WE WORK (firm.html, section.hw)
   The row grammar of the page (the label in the date column, the statement from column 3), then one
   ordered list. Each step draws its own point (::before) and the line to the next point (::after);
   after the fifth the line runs on, lighter: "Then we stay". The numbers and the words are real text;
   the point and the line are decoration. Vertical below 1100px, horizontal from 1100px.
   ========================================================================== */
.hw {
  --hw-n: var(--fs-statement);        /* the numbers: the statement size, the serif */
  --hw-dot: 7px;                      /* the point */
  --hw-gap: 44px;                     /* between steps (vertical) */
  --hw-rail: 40px;                    /* the line's lane, left of the words (vertical) */
  --hw-mid: calc(var(--hw-n) * 0.42); /* the middle of a lining figure in a line box of 1 */
  padding-block: 0 var(--section);
  container-type: inline-size;        /* 100cqw below: the page's own width */
}
/* The section is the next row of the ledger above: the last row's hairline is its top rule, so the rows
   section gives up its bottom space (r5.css) and the label sits where a row's label sits. */
.page-firm .pg-rows { padding-bottom: 0; }
.hw__grid { align-items: start; }
.hw__label { grid-column: 1 / -1; margin-top: 20px; font: 500 var(--fs-meta)/1.4 var(--sans); color: var(--slate); }
.hw__lead {
  grid-column: 1 / -1; margin-top: 10px;
  font-family: var(--serif);
  font-weight: 380;
  font-size: var(--fs-statement);
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.hw__sentence { display: block; text-wrap: balance; }

.hw__steps { grid-column: 1 / -1; margin-top: 56px; display: flex; flex-direction: column; gap: var(--hw-gap); }
.hw__step { position: relative; padding-left: var(--hw-rail); }
.hw__num {
  display: block;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 340;
  font-size: var(--hw-n);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
}
.hw__name {
  margin-top: 12px;
  font-family: var(--serif);
  font-weight: 420;
  font-size: var(--fs-title);
  line-height: 1.22;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.hw__line { margin-top: 8px; max-width: 30em; font: 400 var(--fs-body)/1.5 var(--sans); color: var(--slate); text-wrap: pretty; }

/* The point, level with the middle of its number. */
.hw__step::before {
  content: ""; position: absolute; z-index: 1;
  left: 0; top: calc(var(--hw-mid) - var(--hw-dot) / 2);
  width: var(--hw-dot); height: var(--hw-dot); border-radius: 50%;
  background: var(--navy);
}
/* The line, from this point to the next one. */
.hw__step::after {
  content: ""; position: absolute;
  left: calc(var(--hw-dot) / 2 - 0.5px); top: var(--hw-mid);
  width: 1px; height: calc(100% + var(--hw-gap));
  background: var(--navy);
  transform-origin: 50% 0;
}
/* After the fifth point the line runs on, lighter, to the first line of "Then we stay". */
.hw__step:last-child::after {
  height: calc(100% - var(--hw-mid) + var(--hw-gap) + var(--fs-title) * 0.61);
  background: var(--rule);
}

.hw__close { grid-column: 1 / -1; margin-top: var(--hw-gap); padding-left: var(--hw-rail); }
.hw__stay {
  display: block;
  font-family: var(--serif);
  font-weight: 420;
  font-size: var(--fs-title);
  line-height: 1.22;
  letter-spacing: -0.005em;
}
.hw__view { display: block; margin-top: 8px; max-width: 30em; font: 400 var(--fs-lead)/1.45 var(--sans); text-wrap: balance; }
/* R7 (13 Oct, the founder: the light line after the fifth point "is great"; connect it to "Then we stay"):
   the light line ends in an open point, the next stop after publishing, still running. */
.hw__close { position: relative; }
.hw__close::before {
  content: ""; position: absolute; z-index: 1; box-sizing: border-box;
  left: calc(var(--hw-dot) / 2 - 4.5px); top: calc(var(--fs-title) * 0.61 - 4.5px);
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--navy); background: var(--paper);
}

@media (min-width: 700px) {
  /* The words start on column 2; the line keeps column 1. */
  .hw { --hw-gap: 48px; --hw-rail: calc((100% - 7 * var(--g)) / 8 + var(--g)); }
  .hw__label { grid-column: 1 / span 2; margin-top: 24px; padding-top: 2px; }
  .hw__lead { grid-column: 3 / -1; margin-top: 24px; }
  .hw__steps { margin-top: 72px; }
}

@media (min-width: 1100px) {
  /* Five equal steps across the twelve columns; the numbers above the line, the words below it. */
  .hw {
    --hw-n: var(--fs-figure);
    --hw-gap: 0px;
    --hw-y: calc(var(--hw-n) + 30px);   /* the line, under the numbers */
    padding-block: 0 128px;
  }
  .hw__label { margin-top: 28px; }
  .hw__lead { grid-column: 3 / span 8; margin-top: 28px; }
  .hw__steps {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--g);
    margin-top: 104px;
  }
  .hw__step { padding-left: 0; }
  .hw__num { font-weight: 320; }
  .hw__name { margin-top: calc(30px + var(--hw-dot) + 30px); }
  .hw__line { margin-top: 12px; }
  .hw__step::before { top: var(--hw-y); }
  .hw__step::after {
    left: calc(var(--hw-dot) / 2); top: calc(var(--hw-y) + var(--hw-dot) / 2 - 0.5px);
    width: calc(100% + var(--g)); height: 1px;
    transform-origin: 0 50%;
  }
  /* After the fifth point the light line runs on to the edge of the screen (to the frame's edge where
     container units are missing). */
  .hw__step:last-child::after { width: calc(100% - var(--hw-dot) / 2 + var(--m)); height: 1px; }
  .hw__step:last-child::after { width: calc(100% - var(--hw-dot) / 2 + var(--m) + max(0px, (100cqw - var(--maxw)) / 2)); }
  /* R7: "Then we stay" is the sixth place on the line: the five steps take ten columns, it takes the last two,
     its open point sits on the light line that runs on from the fifth, and its words stand where a step's do. */
  .hw__steps { grid-column: 1 / span 10; grid-row: 2; }
  .hw__close {
    grid-column: 11 / span 2; grid-row: 2; margin-top: 104px; padding-left: 0;
    padding-top: calc(var(--hw-n) + 30px + var(--hw-dot) + 30px);
  }
  .hw__close::before { left: 0; top: calc(var(--hw-y) + var(--hw-dot) / 2 - 4.5px); }
  /* The light line now crosses one more place (as wide as a step, plus its gutter) before the edge. */
  .hw__step:last-child::after { width: calc(200% + var(--g) - var(--hw-dot) / 2 + var(--m)); }
  .hw__step:last-child::after { width: calc(200% + var(--g) - var(--hw-dot) / 2 + var(--m) + max(0px, (100cqw - var(--maxw)) / 2)); }
  .hw__view { margin-top: 12px; font: 400 var(--fs-body)/1.5 var(--sans); color: var(--slate); text-wrap: pretty; }
}

/* 1100 to 1279px: a step is about 170px wide, so its line takes the meta size (the date column's size),
   four or five short lines instead of six. */
@media (min-width: 1100px) and (max-width: 1279.98px) {
  .hw__line, .hw__view { font-size: var(--fs-meta); line-height: 1.5; }
}

/* Motion: only when js has armed the section (firm.html's inline script, which checks
   prefers-reduced-motion first). Each point appears and its line draws to the next; the script makes
   every step wait for the one before it (--hw-wait). Without the script, the line stands, fully drawn. */
@media (prefers-reduced-motion: no-preference) {
  .hw.is-armed .hw__step::before {
    opacity: 0; transform: scale(0.3);
    transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out);
    transition-delay: var(--hw-wait, 0ms);
  }
  .hw.is-armed .hw__step::after {
    transform: scaleY(0);
    transition: transform 0.48s cubic-bezier(0.45, 0, 0.55, 1);
    transition-delay: var(--hw-wait, 0ms);
  }
  .hw.is-armed .hw__step:last-child::after { transition-duration: 1.2s; transition-timing-function: var(--ease-out); }
  .hw.is-armed .hw__step.is-drawn::before,
  .hw.is-armed .hw__step.is-drawn::after { opacity: 1; transform: none; }
  /* The open point comes when the light line reaches it (js/hw.js sets --hw-close). */
  .hw.is-armed .hw__close::before {
    opacity: 0; transform: scale(0.3);
    transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out);
    transition-delay: var(--hw-close, 0ms);
  }
  .hw.is-armed:has(.hw__step:last-child.is-drawn) .hw__close::before { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1100px) {
  .hw.is-armed .hw__step:not(.is-drawn)::after { transform: scaleX(0); }
}

/* Japanese: the serif statement lines keep the statement leading (the JA block sets every p to 1.75). */
:lang(ja) .hw__lead, :lang(ja) .fc-svc__line, :lang(ja) .fc-close__line { line-height: 1.45; }

/* ---- zz-ask.css ---- */
/* ===== THE ASK PANEL (WordPress theme): under each report on a company page. The eight questions on
   the left, the reader's own AI on the right. Quiet type on paper, hairlines, no boxes: the ledger's own
   language. It sits above the title's whole-entry click area (site.css .entry__link::after). ===== */
.askp {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px;
  margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--rule);
  order: 3; grid-column: 1 / -1;
}
html.js .askp:not(.is-open) { display: none; }
.askp__h { font: 600 var(--fs-meta)/1.4 var(--sans); color: var(--navy); margin: 0 0 14px; }
.askp__list { margin: 0; padding: 0; list-style: none; counter-reset: q; }
/* Logical sides: the number stands where the reading starts, so the list turns with its own direction
   (an English list on an Arabic page is set left to right, below). */
.askp__list li {
  counter-increment: q; position: relative; padding-block: 10px; padding-inline: 2.2em 0;
  font: 400 var(--fs-body)/1.5 var(--sans); color: var(--navy); border-top: 1px solid var(--rule);
}
.askp__list li:first-child { border-top: 0; padding-top: 0; }
.askp__list li::before {
  content: counter(q); position: absolute; inset-inline-start: 0; top: 10px; width: 1.6em;
  font: 500 var(--fs-meta)/1.6 var(--sans); color: var(--slate); font-variant-numeric: tabular-nums;
}
.askp__list li:first-child::before { top: 0; }
.askp__copy {
  margin-top: 16px; padding: 2px 0 4px; border: 0; background: none; cursor: pointer;
  font: 500 var(--fs-meta)/1.4 var(--sans); color: var(--navy);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
}
.askp__copy:hover { text-decoration-thickness: 2px; }
.askp__ais { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--navy); }
.askp__ais li { border-bottom: 1px solid var(--rule); }
.askp__ai {
  display: flex; justify-content: space-between; align-items: center; padding: 12px 2px;
  font: 500 var(--fs-body)/1.3 var(--sans); color: var(--navy); text-decoration: none;
}
.askp__ai:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.askp__pdf { margin: 20px 0 0; font: 500 var(--fs-body)/1.4 var(--sans); }
.askp__meta { margin: 6px 0 0; font: 400 var(--fs-meta)/1.4 var(--sans); color: var(--slate); }
/* What Copy and the Gemini link just did (js/ask.js writes it, then clears it): small slate type under the
   panel's last line, read out by screen readers (role="status"). */
.askp__status { margin: 12px 0 0; font: 400 var(--fs-meta)/1.4 var(--sans); color: var(--slate); }
.askp__status:empty { margin: 0; }
/* R6 (13 Oct, the founder): the light under "Ask this report" runs all the time (r5.css), also while its
   panel is open; the words stay navy. An open panel's link keeps the coral line drawn under its words, so
   the reader sees which report the panel belongs to. */
.entry__ask[aria-expanded="true"]::after { transform: scaleX(1); }
@media (min-width: 700px) {
  .askp { grid-row: 3; }
}
@media (min-width: 1100px) {
  .askp { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--g); }
}
@media (prefers-reduced-motion: no-preference) {
  .askp.is-open { animation: askp-in .45s var(--ease-out) both; }
  @keyframes askp-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}
/* Arabic page, questions not yet translated: the theme prints the list with lang="en" dir="ltr"; it reads
   left to right, punctuation in place (review 13 Oct, B5). */
[dir="rtl"] .askp__list[lang="en"] { direction: ltr; text-align: left; }

/* ---- zz-generic.css ---- */
/* ===== GENERIC PAGES (WordPress theme): articles, press releases, legal pages, archives, search, 404.
   The site's header and footer; the text in one reading column, in the system's type. ===== */
/* The header is sticky and in the flow, so the page starts below it on its own: the same top space as the
   designed pages' openings (review 13 Oct). */
.gx { background: var(--paper); color: var(--navy); padding: 48px 0 clamp(64px, 9vw, 128px); }
@media (min-width: 700px) { .gx { padding-top: 72px; } }
@media (min-width: 1100px) { .gx { padding-top: 96px; } }
/* One reading column; from 1100px it starts on column 3, where the report titles start. */
.gx__wrap > * { max-width: 780px; }
@media (min-width: 1100px) { .gx__wrap > * { margin-inline-start: calc((100% + var(--g)) / 6); } }
.gx__head { margin-bottom: clamp(28px, 4vw, 48px); border-bottom: 2px solid var(--navy); padding-bottom: clamp(18px, 2.4vw, 28px); }
.gx__title { font-family: var(--serif); font-optical-sizing: auto; font-weight: 380; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.06; letter-spacing: -0.015em; margin: 0; }
.gx__date { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--slate); margin: 0 0 14px; font-variant-numeric: tabular-nums; }
.gx__lead { font-size: 20px; }
.prose { font-family: var(--sans); font-size: 18px; line-height: 1.62; }
.prose > * + * { margin-top: 1em; }
.prose h2, .prose h3, .prose h4 { font-family: var(--serif); font-optical-sizing: auto; font-weight: 420; line-height: 1.2; margin-top: 1.8em; letter-spacing: -0.005em; }
.prose h2 { font-size: clamp(26px, 2.6vw, 34px); }
.prose h3 { font-size: clamp(21px, 2vw, 26px); }
.prose h4 { font-size: 19px; }
.prose a { color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose ul, .prose ol { padding-inline-start: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--slate); }
.prose li + li { margin-top: .4em; }
.prose img, .prose iframe, .prose video { max-width: 100%; height: auto; }
.prose figure { margin: 2em 0; }
.prose figcaption { font-size: 14px; color: var(--slate); margin-top: 8px; }
.prose blockquote { margin: 1.6em 0; padding-inline-start: 22px; border-inline-start: 2px solid var(--navy); font-family: var(--serif); font-size: 22px; line-height: 1.4; }
/* Tables keep their table semantics (screen readers read the headers); a wide one scrolls inside the
   theme's wrapper <div class="prose__scroll" role="region" tabindex="0" aria-label="…">. */
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.prose__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.prose__scroll:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
.prose th, .prose td { text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4em 0; }
.gx__list { list-style: none; margin-block: 0; padding: 0; }
.gx__item { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.gx__item .gx__date { margin-bottom: 6px; }
.gx__item-title { font-family: var(--serif); font-optical-sizing: auto; font-weight: 420; font-size: clamp(21px, 2.1vw, 27px); line-height: 1.22; margin: 0; }
.gx__item-title a { color: var(--navy); text-decoration: none; }
.gx__item-title a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.gx__pages { margin-top: 36px; display: flex; gap: 14px; font-family: var(--sans); font-size: 16px; }
.gx__pages .page-numbers { color: var(--navy); text-decoration: none; padding: 4px 8px; }
.gx__pages .current { border-bottom: 2px solid var(--navy); }

/* ---- zz-price.css ---- */
/* ===== SHARE PRICE (WordPress theme): the company page's chart, loaded on request (js/price.js). Before
   the press: a calm poster, the chart's own empty grid lines, one button and, under it, the one sentence
   that says what pressing it does (with the privacy link). No line is drawn that is not data. Once the chart
   is loaded the frame takes the chart's height. ===== */
/* The poster stands in the frame's flow, so a long sentence (Arabic, a narrow phone) makes the frame taller
   instead of being cut. */
.co-price__frame { position: relative; display: grid; min-height: 220px; overflow: hidden; }
@media (min-width: 700px) { .co-price__frame { min-height: 280px; } }
.co-price__frame.is-loaded { height: clamp(400px, 38vw, 540px); }
.co-price__poster {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px 16px; text-align: center;
}
.co-price__poster .co-price__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.co-price__show { position: relative; }
/* The consent line: small slate type on a strip of paper, so the grid lines never run through the words. */
.co-price__consent {
  position: relative; max-width: 46ch; margin: 0; padding: 2px 8px;
  background: var(--paper);
  font: 400 var(--fs-meta)/1.5 var(--sans); color: var(--slate);
  text-wrap: balance;
}
.co-price__consent .link { font: inherit; font-weight: 500; color: var(--navy); }
html:not(.js) .co-price__show, html:not(.js) .co-price__consent { display: none; }
.co-price__player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; color-scheme: light; }
.co-price__frame.is-loaded .co-price__poster { display: none; }
/* Stockdio draws a 1px frame round its chart; the frame sits just outside our box, so it is cut off. */
.co-price__frame[data-embed*="stockdio"] .co-price__player { inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); }

/* ---- zz-signup.css ---- */
/* New research by e-mail, until the mailing service is connected: one line in place of the form
   (the theme's vasro_signup()), set like the Japanese and Arabic pointer lines. */
.inv__form--mail { display: block; }
.inv__mail { font: 400 var(--fs-body)/1.75 var(--sans); }
.inv__mail + .inv__more { display: inline-block; margin-top: 18px; }

/* The disclosure line under every report list and at the end of press releases. */
.ledger__note, .gx__note { margin: 28px 0 0; font: 400 var(--fs-small, 14px)/1.6 var(--sans); color: var(--slate, #535D73); max-width: 46em; }
.gx__note { margin-top: 40px; padding-top: 16px; border-top: 1px solid rgba(20, 34, 60, .14); }
/* Placed in the page grid like the list above it: full width on phones, under the report titles from 700px. */
.ledger + .ledger__note { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .ledger + .ledger__note { grid-column: 3 / -1; }
}
@media (min-width: 1100px) {
  .ledger + .ledger__note { grid-column: 3 / span 6; grid-row: auto; }
  .research .ledger + .ledger__note { grid-column: 3 / span 5; grid-row: 4; margin-top: 24px; }
}