/* GATE Capital Management — the single stylesheet (HTML-7).
 *
 * Reproduces the live site's design: the dark blue photographic header with the
 * taupe wordmark, the video hero with its charcoal scrim, the alternating bands,
 * the warm translucent welcome panel, the taupe proof band, the charcoal values
 * grid, and the letterspaced Cinzel display type throughout.
 *
 * It is **compiled, not copied** (compiler/src/stages/stylesheet.ts). Three
 * functions are resolved at build time:
 *
 *     asset-image-set(id, preset, width)   format-negotiated background
 *     asset-url(id, preset, width)         one pinned object
 *     font-faces()                         @font-face from assets/fonts.json
 *
 * That indirection exists because a background image is an asset like any other
 * (invariant 2). A hard-coded `/cdn/derivatives/backdrop/1.0.0/303f25…/1920.avif`
 * would obey the letter of "no URLs in content" while breaking its purpose: the
 * address is derived, it changes when the original or the preset version changes,
 * and a stale one is a silently blank band. An unknown ID is a build failure.
 *
 * What this file must keep proving:
 *
 *   1. One stylesheet, content-hashed, no framework, no third-party origin.
 *   2. The audience presentation rule is ONE selector (SPEC-126).
 *   3. Removing this file leaves the page readable, in source order (HTML-39).
 *   4. Nothing is hidden by default. Every reveal is gated on `[data-motion]`,
 *      which the island sets, so a failed module leaves a complete static page
 *      rather than an invisible one (NG-18).
 *
 * Contrast: tools/check-contrast.mjs measures this file (VAL-64). Two negative
 * assertions matter as much as the positive ones — taupe as text on a light
 * ground, and white on taupe, are the live site's own defects and are build
 * failures here (D-BR-11). Where the live design puts white on taupe, this puts
 * dark ink on it.
 */

/* ── Fonts ─────────────────────────────────────────────────────────────────
 *
 * Generated from assets/fonts.json, so the faces the visitor receives are the
 * faces the index records, and adding a weight is an ingest rather than an edit
 * here. Self-hosted because HTML-9 permits zero third-party origins, which
 * disqualifies fonts.gstatic.com whatever its latency. Cinzel, Glegoo and Lato
 * are the live site's three families, all OFL.
 */

@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/cdn/fonts/sha256/ef/ef95296c778719c3d658a8284d65078100450948851b9114485ada01d9d3d3f8.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/cdn/fonts/sha256/ef/ef95296c778719c3d658a8284d65078100450948851b9114485ada01d9d3d3f8.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Glegoo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/cdn/fonts/sha256/f0/f02ad1fe9444bf84f8de10bc5866ec57cbc24b5f8e582f805caa523e93089554.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Glegoo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/cdn/fonts/sha256/25/25d6a374ae3db2c7f045bab998a5732593d2c761c52877560616ca05fd0bb2fb.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/cdn/fonts/sha256/d4/d4ae5188a65370ecfe28f42293bbee8297cfd5712c6aadfdb270d48f2bcd88b0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/cdn/fonts/sha256/5c/5c3360f8439a1a3f48e8b58fcb6f3a3cbaaa76488a1b846acfe1e3b623c0562f.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/cdn/fonts/sha256/7a/7a7ce1a34f3e9944fe88fc61abbc93b6db383afa2b90815fd7ccea456fbce4e5.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/cdn/fonts/sha256/bd/bd9a6192274f8f2f3ce31cd3d2cae5ebe32e2fa86fc7c4f60a3c28556e496d56.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── The audience presentation rule ───────────────────────────────────────
 *
 * The whole adaptation mechanism, in one selector. The document contains every
 * audience's blocks (TPL-4.1); this decides which are *presented*, on the device.
 * Before a declaration exists, `data-audience-pending` keeps everything visible —
 * so an undeclared reader and a crawler see the union (VAL-75, HTML-40).
 */
html[data-audience="professional"] [data-audience-only]:not([data-audience-only~="professional"]),
html[data-audience="institutional"] [data-audience-only]:not([data-audience-only~="institutional"]) {
  display: none;
}

html[data-audience] [data-audience-change] { display: inline; }
html[data-audience] .no-script-notice { display: none; }

/* ── Tokens ─────────────────────────────────────────────────────────────────
 *
 * Every colour is sampled from the live site or is a documented derivation made
 * to reach WCAG AA. Sampled values name their source so a later reader can check
 * them rather than trust them.
 */

:root {
  /* Brand, as extracted from the live stylesheet.
   * BR-C1: --taupe is a surface, rule and state colour. It is never `color` on a
   * light ground: it measures 2.94:1 on white, which fails AA. */
  --taupe:        #aa9378;  /* live: accent, footer headings, current nav item */
  --charcoal:     #4d4e50;  /* live: body colour, heading colour, values grid */
  --navy:         #295185;  /* live: link colour, welcome-panel heading */

  /* The header photograph's own blue, sampled from Background-CM-Blue_2560px.
   * The image is still the header ground; this is the colour behind it, so white
   * type is never white-on-white while the image is arriving. */
  --header-blue:      #35485c;
  --header-blue-deep: #24313f;

  /* Derived, so the brand is usable at AA (D-BR-2). */
  --taupe-deep:   #6f5a3c;  /* 6.56:1 on paper — taupe that carries text */
  --taupe-tint:   #bda587;  /* the wordmark's own sampled ink; on dark only */
  --navy-deep:    #1f3f6b;  /* 10.6:1 — hover, visited, emphasis */
  --field:        #16233a;  /* the dark field for the footer and contact band */
  --field-rule:   #38475f;  /* separator inside the dark field, non-text */

  /* Grounds */
  --paper:        #ffffff;
  --sand:         #f5f2ec;  /* warm panel: ink 15.89:1, navy 7.20:1 */
  --rule:         #ddd8cf;  /* warm rule, replacing the live cool #d8dce3 */

  /* Ink */
  --ink:          #16181d;  /* 17.76:1 on paper */
  --ink-quiet:    #575e69;  /* 6.54:1 on paper — meta and captions, still AA */
  --ink-on-dark:  #ffffff;  /* 15.72:1 on --field */
  --ink-on-dark-quiet: #b8c0cc; /* 8.57:1 on --field */
  --ink-on-taupe: #16181d;  /* 6.05:1. White on taupe is 2.94:1 — forbidden */

  /* The hero legibility panel.
   * Live: `linear-gradient(166deg, rgba(77,78,80,0.66) 43%, rgba(77,78,80,0.22)
   * 100%)` plus a text-shadow, to force copy over moving video. The light stop is
   * 0.22 alpha, which over bright video puts white type near 1.5:1 — the shadow
   * exists because the panel does not work. This keeps the gradient's *direction*
   * (the design) and darkens both stops until white measures 12.4:1 on the light
   * end before the video contributes anything, so no shadow is needed (BR-S2). */
  --scrim-from: rgb(22 24 29 / 0.86);
  --scrim-to:   rgb(22 24 29 / 0.62);

  /* The welcome panel. Live: `rgba(255,255,255,0.75)` over a photograph, which is
   * 12:1 on a light frame and 4:1 on a dark one. 0.93 is legible over any frame
   * while still reading as a panel on a photograph. */
  --panel-light: rgb(255 255 255 / 0.93);

  --link:         var(--navy);
  --link-hover:   var(--navy-deep);

  /* Type. Three families, the live site's own set:
   *   Cinzel  display capitals — section headings, wordmark, eyebrows
   *   Glegoo  the serif the hero and the panel headings use
   *   Lato    body text, navigation, captions
   * Each stack names a real fallback rather than ending at `serif`, so a face
   * that fails to load degrades to something chosen. */
  --font-display: "Cinzel", ui-serif, Georgia, "Times New Roman", serif;
  --font-serif:   "Glegoo", Georgia, "Times New Roman", serif;
  --font-text:    "Lato", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --step--1: 0.875rem;
  --step-0:  1.0625rem;
  --step-1:  1.1875rem;
  --step-2:  1.375rem;
  --step-3:  1.5625rem;
  --step-4:  1.875rem;
  --step-5:  clamp(1.75rem, 3.2vw, 2.5rem);

  /* The hero display line. Live: 80px desktop, 50px tablet, 30px phone, with the
   * paragraph inside it at 6vw. A clamp states the same intent in one declaration
   * that never jumps between breakpoints. */
  --step-hero: clamp(2rem, 5.4vw, 4.5rem);

  --leading-tight: 1.25;
  --leading-text:  1.7;
  --leading-loose: 1.9;   /* live: 1.9em–2em on body copy */

  /* Live tracks display Cinzel at 5px on 40px (0.125em), unreadable on an
   * already-wide inscriptional capital. The device is brand; the ratio is halved.
   * The uppercase eyebrows keep closer to the live 2px on 14px. */
  --tracking-display: 0.06em;
  --tracking-eyebrow: 0.1em;

  --measure:      38rem;
  --measure-wide: 72rem;   /* live: row max-width 1080px within a 1366px container */

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  2.75rem;
  --space-2xl: 4rem;
  --space-row:     2.125rem;
  --space-section: 4.75rem;   /* live: 76px on the taupe band */

  --radius: 0;              /* explicit in the live stylesheet (border-radius: 0) */
  --border: 1px;
  --border-accent: 3px;
  --shadow-overlay: 0 1rem 3rem rgb(0 0 0 / 25%);
  /* Live: `0 40px 200px -10px rgba(0,0,0,0.3)` on the hero panel and the feature
   * image. Kept, at a shorter blur: 200px on a 40px offset is a haze rather than
   * a shadow, and it costs a full-viewport composite. */
  --shadow-panel: 0 1.25rem 4rem -1rem rgb(0 0 0 / 30%);

  --motion-slow: 700ms;
  --motion-mid:  400ms;
  --motion-fast: 200ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: var(--leading-text);
  color: var(--charcoal);   /* live: body colour is #4d4e50, not black */
  background: var(--paper);
  /* The hero and the bands are full-bleed; a stray overflow would give the whole
   * document a horizontal scrollbar. */
  overflow-x: hidden;
}

/* ── Accessibility furniture ────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--navy);
  color: var(--ink-on-dark);   /* 8.05:1 */
  font-family: var(--font-text);
  z-index: 100;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}
/* On a dark ground the navy ring would disappear into it. */
.site-contact-strip :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.page-hero :focus-visible,
main > section[data-region="contact"] :focus-visible,
main > section[data-region="values"] :focus-visible,
main > section[data-region="thesis"] :focus-visible {
  outline-color: var(--taupe-tint);   /* 6.66:1 on --field */
}

/* ── The contact strip ────────────────────────────────────────────────────
 *
 * Live: `#top-header` in taupe, holding a telephone number at 12px. Taupe as a
 * *ground* is legitimate — BR-C1 forbids it only as text on a light ground — and
 * the number sits on it as dark ink at 6.05:1, where the live site uses white at
 * 2.94:1 (BR-C2).
 */
.site-contact-strip {
  margin: 0;
  padding: var(--space-2xs) max(var(--space-s), calc((100% - var(--measure-wide)) / 2));
  background: var(--taupe);
  color: var(--ink-on-taupe);
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: right;
  max-width: none;
}
.site-contact-strip a { color: var(--ink-on-taupe); text-decoration: none; }
.site-contact-strip a:hover { text-decoration: underline; }

/* ── The header ───────────────────────────────────────────────────────────
 *
 * Live: `#main-header` carries Background-CM-Blue as a `background-size: 100%
 * 100%` image, wordmark left and menu right in white.
 *
 * Two deliberate differences: `cover` rather than `100% 100%`, because the live
 * value stretches the photograph to whatever aspect the header happens to be and
 * distorts it at every width but one; and `--header-blue-deep` behind it, sampled
 * from the image, so white type is never white-on-white mid-load.
 */
.site-header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-s);
  padding-inline: max(var(--space-s), calc((100% - var(--measure-wide)) / 2));
  background-color: var(--header-blue-deep);
  background-image: image-set(url("/cdn/derivatives/backdrop/1.0.0/303f25510ec759caf71b0197c41e546b96d1626119ec54ff1b1c3695f193bf82/2560.avif") type("image/avif"), url("/cdn/derivatives/backdrop/1.0.0/303f25510ec759caf71b0197c41e546b96d1626119ec54ff1b1c3695f193bf82/2560.webp") type("image/webp"), url("/cdn/derivatives/backdrop/1.0.0/303f25510ec759caf71b0197c41e546b96d1626119ec54ff1b1c3695f193bf82/2560.jpeg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--ink-on-dark);
}

/* A scrim over the photograph: the live header puts white type straight onto it,
 * and the image has light regions where that falls below AA. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(20 27 36 / 0.82), rgb(20 27 36 / 0.55));
  pointer-events: none;
}
.site-header > * { position: relative; z-index: 1; }

/* The wordmark. Live: a 1280×254 PNG at `max-height: 54%` of an 81px header. */
.site-logo {
  display: inline-block;
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--taupe-tint);   /* 6.66:1 — used only when no wordmark asset exists */
  text-decoration: none;
  line-height: 1;
}
.site-logo img {
  width: auto;
  height: auto;
  max-height: 3.25rem;
  transition: opacity var(--motion-mid) var(--ease-out);
}
.site-logo:hover img { opacity: 0.82; }

/* ── The navigation (SPEC-18) ───────────────────────────────────────────
 *
 * Read this together with islands/site-nav.js. The division of labour:
 *
 *   MARKUP  every link, in order, complete, server-rendered (TPL-0.8).
 *   CSS     the horizontal bar; submenus revealed on hover AND focus-within, so
 *           the menu is fully usable with no script at all.
 *   SCRIPT  replaces that with a real disclosure, and only after wiring one.
 *
 * Every collapse is gated on `[data-nav-enhanced]`, which the island sets last.
 * Nothing is hidden unless the thing that reveals it is already working, so a
 * failed module leaves an expanded, navigable menu (NG-18, HTML-39).
 */

.site-header nav {
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 600;   /* live: #et-top-navigation is 600 */
}

.site-header nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs) var(--space-m);
}

.site-header nav li { position: relative; }

.site-header nav a {
  color: var(--ink-on-dark);   /* live: #top-menu a { color: white } */
  text-decoration: none;
  display: inline-block;
  padding-block: var(--space-2xs);
  transition: color var(--motion-mid) var(--ease-out);
}
.site-header nav a:hover { color: var(--taupe-tint); }

/* Current-page state is taupe on the dark ground — live behaviour, and the one
 * place in the system where taupe is text. There it measures 5.36:1. */
.site-header nav [aria-current] { color: var(--taupe); font-weight: 700; }

/* An underline that grows from the left on hover. Live fades opacity to 0.7,
 * which reads as the link becoming unavailable rather than active. */
.site-header nav > ul > li > a::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--taupe);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-mid) var(--ease-out);
}
.site-header nav > ul > li > a:hover::after,
.site-header nav > ul > li > a[aria-current]::after { transform: scaleX(1); }

/* ── Submenus ───────────────────────────────────────────────────────────── */

.site-header nav ul ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-s);
}
.site-header nav ul ul a { color: var(--ink-on-dark-quiet); }  /* 8.57:1 */
.site-header nav ul ul a:hover { color: var(--ink-on-dark); }

.submenu-toggle {
  font: inherit;
  line-height: 1;
  margin-left: var(--space-3xs);
  padding: var(--space-3xs);
  border: 0;
  background: none;
  color: var(--ink-on-dark);
  cursor: pointer;
}
/* Decoration for a control that already has an accessible name from aria-label,
 * so nothing here is the sole carrier of meaning (BR-C3). */
.submenu-toggle::before {
  content: "\25BE";
  display: block;
  transition: transform var(--motion-fast) var(--ease-out);
}
.submenu-toggle[aria-expanded="true"]::before { transform: rotate(180deg); }

.nav-toggle {
  font-family: var(--font-text);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  padding: var(--space-2xs) var(--space-s);
  border: var(--border) solid var(--taupe);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-on-dark);
  cursor: pointer;
  transition: background var(--motion-mid) var(--ease-out), color var(--motion-mid) var(--ease-out);
}
.nav-toggle:hover { background: var(--taupe); color: var(--ink-on-taupe); }

@media (min-width: 62rem) {
  .nav-toggle { display: none; }

  .site-header nav[data-nav-enhanced] ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    min-width: 17rem;
    padding: var(--space-2xs) var(--space-s);
    background: var(--header-blue-deep);
    border: var(--border) solid var(--field-rule);
    border-top: var(--border-accent) solid var(--taupe);
    box-shadow: var(--shadow-overlay);
  }
  /* A third level opens beside its parent rather than below it: the live menu
   * nests three deep under "Our Strategies". */
  .site-header nav[data-nav-enhanced] ul ul ul { top: 0; left: 100%; }

  .site-header nav[data-nav-enhanced] li[data-has-submenu] > ul { display: none; }
  .site-header nav[data-nav-enhanced] .submenu-toggle[aria-expanded="true"] + ul,
  /* Hover and focus-within keep the pointer and keyboard routes open even with
   * the island loaded, so the disclosure adds a way in rather than replacing two
   * that already worked. */
  .site-header nav[data-nav-enhanced] li[data-has-submenu]:hover > ul,
  .site-header nav[data-nav-enhanced] li[data-has-submenu]:focus-within > ul {
    display: block;
  }
}

@media (max-width: 61.9375rem) {
  .site-header nav[data-nav-enhanced] { flex-basis: 100%; display: none; }
  .site-header nav[data-nav-enhanced][data-open] { display: block; }
  .site-header nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-header nav > ul > li {
    border-top: var(--border) solid var(--field-rule);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .site-header nav a { padding-block: var(--space-xs); }
  .site-header nav > ul > li > a::after { display: none; }
  .site-header nav ul ul { flex-basis: 100%; padding-left: var(--space-m); }
  .site-header nav[data-nav-enhanced] li[data-has-submenu] > ul { display: none; }
  .site-header nav[data-nav-enhanced] .submenu-toggle[aria-expanded="true"] + ul { display: block; }
  .submenu-toggle { padding: var(--space-xs); }
}

/* ── Layout: full-bleed bands, one centred column ─────────────────────────
 *
 * The live home page is a stack of full-width bands — video, dark gradient, warm
 * panel over a photograph, taupe, charcoal grid, photograph, dark. That
 * alternation is the most recognisable thing about the design, and it cannot be
 * built by a `main` that is itself a centred column: a band would stop at the
 * text edge.
 *
 * So `main` is full width and **every direct child is its own band**, centring
 * its content with the same padding expression the shell uses.
 *
 *   - Nothing is positioned, floated or reordered, so reading order without CSS
 *     is still source order (VAL-63, HTML-39).
 *   - A band's treatment comes from `[data-region]`, which names the *template
 *     slot* the section fulfils. The author declares a region; the stylesheet
 *     decides appearance. No colour is ever authored (invariant 6).
 */

main { max-width: none; margin: 0; padding: 0; }

main > * {
  --band-inline: max(var(--space-s), calc((100% - var(--measure-wide)) / 2));
  padding-inline: var(--band-inline);
  padding-block: var(--space-section);
}

/* The hero manages its own edges: it is a moving picture, and one with a padded
 * gutter is a picture in a frame rather than a field. */
main > .page-hero { padding: 0; }

main > nav[aria-label="Breadcrumb"],
main > .audience-disclosure { padding-block: var(--space-l) 0; }

/* ── Bands ─────────────────────────────────────────────────────────────────
 *
 * Keyed on `[data-region]`, so the rhythm is a property of the template rather
 * than a decision an author repeats per page. Each band names the live treatment
 * it reproduces.
 */

/* `thesis`: the quotation band. Live: `linear-gradient(177deg, rgba(15,5,0,0.83),
 * rgba(77,78,80,0.84))` — a near-flat dark wash. */
main > section[data-region="thesis"] {
  background: linear-gradient(177deg, #1a1512 0%, var(--charcoal) 100%);
  color: var(--ink-on-dark);
}
main > section[data-region="thesis"] h2,
main > section[data-region="thesis"] h3 { color: var(--ink-on-dark); }
main > section[data-region="thesis"] a { color: var(--taupe-tint); }

/* `welcome`: the warm panel over a photograph. Live: a scaled photograph as the
 * section ground with a 75%-white panel over it, 5vw block padding. */
main > section[data-region="welcome"] {
  background-color: var(--sand);
  background-image: image-set(url("/cdn/derivatives/backdrop/1.0.0/be6228d63efee3d49c41b544a9cc9280780df076b6316f414eb530ce1d8aaaa7/1920.avif") type("image/avif"), url("/cdn/derivatives/backdrop/1.0.0/be6228d63efee3d49c41b544a9cc9280780df076b6316f414eb530ce1d8aaaa7/1920.webp") type("image/webp"), url("/cdn/derivatives/backdrop/1.0.0/be6228d63efee3d49c41b544a9cc9280780df076b6316f414eb530ce1d8aaaa7/1920.jpeg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
  padding-block: 5vw;
}

/* `proof`: the taupe band. Live: `linear-gradient(180deg, #aa9378,
 * rgba(170,147,120,0.85))` carrying white text at 2.94:1 — the defect the
 * contrast gate refuses. Text here is --ink-on-taupe, 6.05:1 (BR-C2). */
main > section[data-region="proof"] {
  background: linear-gradient(180deg, var(--taupe) 0%, #b9a48c 100%);
  color: var(--ink-on-taupe);
}
main > section[data-region="proof"] h2,
main > section[data-region="proof"] h3,
main > section[data-region="proof"] dt { color: var(--ink-on-taupe); }
main > section[data-region="proof"] a { color: var(--navy-deep); }
main > section[data-region="proof"] .eyebrow { color: var(--ink-on-taupe); }

/* `specificity`: paper, with the live gold-square motif at the foot. The motif is
 * decoration behind text, so it sits at low opacity in a pseudo-element rather
 * than as a background the type has to survive. */
main > section[data-region="specificity"] {
  position: relative;
  background: var(--paper);
  color: var(--charcoal);
}
main > section[data-region="specificity"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 12rem;
  background-image: image-set(url("/cdn/derivatives/backdrop/1.0.0/1464437c2ad47688c316c2fbd16fae465d87b7689587e9342faff36f25ba3db0/1280.avif") type("image/avif"), url("/cdn/derivatives/backdrop/1.0.0/1464437c2ad47688c316c2fbd16fae465d87b7689587e9342faff36f25ba3db0/1280.webp") type("image/webp"));
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.13;
  pointer-events: none;
}
main > section[data-region="specificity"] > * { position: relative; z-index: 1; }

/* `values`: the charcoal grid. Live: `#4d4e50` inner rows over the gold-square
 * background, with text at 0.8 alpha white. Full opacity here — 0.8 white on
 * #4d4e50 passes at 5.6:1, but there is no reason to spend contrast on body copy
 * that has none to spare. */
main > section[data-region="values"] {
  background-color: var(--charcoal);
  background-image: image-set(url("/cdn/derivatives/backdrop/1.0.0/81a9323b6c51ec10c331c220a143f4045afaf2e7c5e0176f206a1737327fe933/2560.avif") type("image/avif"), url("/cdn/derivatives/backdrop/1.0.0/81a9323b6c51ec10c331c220a143f4045afaf2e7c5e0176f206a1737327fe933/2560.webp") type("image/webp"));
  background-position: center bottom;
  background-repeat: no-repeat;
  color: var(--ink-on-dark);
}
main > section[data-region="values"] h2,
main > section[data-region="values"] h3 { color: var(--ink-on-dark); }
main > section[data-region="values"] .eyebrow,
main > section[data-region="values"] a { color: var(--taupe-tint); }

/* `rest`: the photographic band. It carries no text, so it takes no padding —
 * the picture is the band. */
main > section[data-region="rest"] { padding: 0; background: var(--field); }

/* `close`: the closing quotation. Live: `linear-gradient(163deg, #574f4d,
 * rgba(87,79,77,0.74))`. */
main > section[data-region="close"] {
  background: linear-gradient(163deg, #574f4d 0%, #6b6260 100%);
  color: var(--ink-on-dark);
}
main > section[data-region="close"] h2 { color: var(--ink-on-dark); }

main > section[data-region="next"] { background: var(--sand); }

/* `contact`: the dark field, closing the page as the shell opens it. */
main > section[data-region="contact"] {
  background-color: var(--field);
  background-image: image-set(url("/cdn/derivatives/backdrop/1.0.0/1954e58a067e9d2e0046d059cc6c2f9fa3410574b084e08838e5d3af566e5457/2560.avif") type("image/avif"), url("/cdn/derivatives/backdrop/1.0.0/1954e58a067e9d2e0046d059cc6c2f9fa3410574b084e08838e5d3af566e5457/2560.webp") type("image/webp"));
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--ink-on-dark);
  border-top: var(--border-accent) solid var(--taupe);
}
main > section[data-region="contact"] h2,
main > section[data-region="contact"] .eyebrow { color: var(--taupe-tint); }
main > section[data-region="contact"] a { color: var(--ink-on-dark); }
main > section[data-region="contact"] a:hover { color: var(--taupe-tint); }
main > section[data-region="contact"] .contact-form-state { color: var(--ink-on-dark-quiet); }

/* Consecutive bands of the same ground would read as one, so the rule between
 * them is removed rather than doubled. */
main > section[data-region="thesis"] + section[data-region="thesis"] { border-top: 0; }

/* An editorial page has one body region rather than a band sequence, so it keeps
 * a paper ground and a measure-bounded column. */
main > section[data-region="body"],
main > section[data-region="rationale"],
main > section[data-region="grid"],
main > section[data-region="summary"],
main > section[data-region="facts"],
main > section[data-region="documents"] { background: var(--paper); }
main > section[data-region="aside"] { background: var(--sand); }

nav[aria-label="Breadcrumb"] ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-l);
  padding: 0;
  font-family: var(--font-text);
  font-size: var(--step--1);
}
nav[aria-label="Breadcrumb"] li + li::before {
  content: "/";
  margin-right: var(--space-2xs);
  color: var(--ink-quiet);
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }

/* ── Typography ────────────────────────────────────────────────────────────
 *
 * Live: h1–h6 are #4d4e50; a section h2 is Glegoo 40px/1.4; the h3 in the values
 * grid is Cinzel 700; the h4 eyebrows are 14px uppercase with 2px tracking; body
 * copy is 15–19px at 1.9–2em.
 */

h1, h2, h3, h4 {
  line-height: var(--leading-tight);
  color: var(--charcoal);
  text-wrap: balance;
}

/* The page's h1 is the hero's display line: Glegoo, as live. */
h1 {
  font-family: var(--font-serif);
  font-size: var(--step-hero);
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-xs);
}

/* A section heading is Glegoo at the live 40px, scaled fluidly. */
h2 {
  font-family: var(--font-serif);
  font-size: var(--step-5);
  font-weight: 700;
  margin: var(--space-xl) 0 var(--space-s);
}

/* h3 is Cinzel, as the values grid uses it: letterspaced capitals. */
h3 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: var(--space-m) 0 var(--space-2xs);
}

/* h4 is the small uppercase label live sets in navy. --navy is 8.05:1 on paper
 * and the live #1d48c0 is 7.0:1, so both pass; navy is the palette's own. */
h4 {
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--navy);
  margin: var(--space-s) 0 var(--space-2xs);
}

section > h2:first-child,
.section-intro h2:first-child { margin-top: 0; }

p, ul, ol, dl, table, figure, blockquote { max-width: var(--measure); }

/* The eyebrow: Cinzel capitals, letterspaced. --taupe-deep, never --taupe
 * (BR-C1). */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--taupe-deep);   /* 6.56:1 */
  margin: 0 0 var(--space-2xs);
}

.standfirst {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-quiet);
  margin: 0 0 var(--space-m);
  max-width: var(--measure);
}

/* BLK-6. Cinzel, navy, tracked — the live display treatment at a readable
 * tracking ratio. */
.statement {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--tracking-display);
  color: var(--navy);   /* 8.05:1 */
  border-left: var(--border-accent) solid var(--taupe);
  padding-left: var(--space-m);
  margin: var(--space-l) 0;
  max-width: 48rem;
}
/* On the dark bands navy would fall out of contrast. */
main > section[data-region="thesis"] .statement,
main > section[data-region="values"] .statement,
main > section[data-region="close"] .statement,
main > section[data-region="contact"] .statement { color: var(--ink-on-dark); }
main > section[data-region="proof"] .statement { color: var(--ink-on-taupe); }

/* BLK-23. The framing pair that opens a band. */
.section-intro { max-width: 52rem; margin-bottom: var(--space-l); }
.section-intro h2 { margin-bottom: var(--space-s); }
.section-intro .standfirst { margin-bottom: 0; }
main > section[data-region="values"] .section-intro .standfirst,
main > section[data-region="thesis"] .section-intro .standfirst,
main > section[data-region="contact"] .section-intro .standfirst { color: var(--ink-on-dark-quiet); }

/* ── Quotations ────────────────────────────────────────────────────────────
 *
 * Live renders each of its four quotations as `<h1>` for the quote and `<h2>` for
 * the name, which is most of why its home page reports four `<h1>` and seven
 * `<h2>` for three real sections. A quotation is not a heading and an attribution
 * is not a section (HTML-13), so the same visual weight is built from a
 * `<blockquote>` and the outline is unaffected by the typography.
 */
blockquote {
  margin: var(--space-l) 0;
  padding-left: var(--space-m);
  border-left: var(--border-accent) solid var(--taupe);
  font-size: var(--step-1);
  line-height: var(--leading-loose);
  font-style: normal;
}
blockquote footer {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--taupe-deep);
  margin-top: var(--space-s);
}
blockquote footer cite { font-style: normal; }

/* A quotation that is a band of its own gets the display treatment: centred
 * italic Glegoo, as live sets it. */
main > section > blockquote {
  max-width: 56rem;
  margin-inline: auto;
  padding: 0;
  border-left: 0;
  border-block: var(--border) solid rgb(255 255 255 / 0.18);
  padding-block: var(--space-l);
  text-align: center;
  font-family: var(--font-serif);
  font-size: var(--step-4);
  font-style: italic;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--ink-on-dark);
}
main > section > blockquote > p { max-width: none; margin: 0; }
main > section > blockquote footer {
  margin-top: var(--space-m);
  font-style: normal;
  color: var(--taupe-tint);   /* 6.66:1 on the dark quotation bands */
}

/* On the light bands the same block needs dark ink. */
main > section[data-region="specificity"] > blockquote,
main > section[data-region="next"] > blockquote,
main > section[data-region="welcome"] > blockquote {
  color: var(--navy);
  border-block-color: var(--rule);
}
main > section[data-region="specificity"] > blockquote footer,
main > section[data-region="next"] > blockquote footer,
main > section[data-region="welcome"] > blockquote footer { color: var(--taupe-deep); }
main > section[data-region="proof"] > blockquote,
main > section[data-region="proof"] > blockquote footer { color: var(--ink-on-taupe); }

/* The warm panel. */
.note, .long-description {
  font-size: var(--step--1);
  color: var(--charcoal);   /* 7.45:1 on --sand */
  background: var(--sand);
  border: var(--border) solid var(--rule);
  border-left: var(--border-accent) solid var(--taupe);
  padding: var(--space-xs) var(--space-s);
  margin: var(--space-m) 0;
  max-width: var(--measure);
}

/* ── Media ──────────────────────────────────────────────────────────────── */

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

/* ── The hero ──────────────────────────────────────────────────────────────
 *
 * Live: a full-bleed autoplaying video with the opening copy over it in a
 * translucent charcoal panel, `text-shadow` doing the legibility work, and four
 * buttons beneath.
 *
 * Built with grid rather than absolute positioning, deliberately: both children
 * occupy the same grid area, so the copy sits over the motion *without leaving
 * the flow*. With no stylesheet the poster and the copy stack in source order. An
 * absolutely positioned overlay would collapse the header's height to zero the
 * moment the stylesheet were missing.
 */

.page-hero {
  display: grid;
  grid-template-areas: "hero";
  align-items: end;
  margin-bottom: 0;
  background: var(--header-blue-deep);
  overflow: hidden;
}
.page-hero > picture,
.page-hero > video,
.page-hero > .page-hero-copy { grid-area: hero; }

.page-hero > picture { margin: 0; }
.page-hero picture img,
.page-hero > video {
  width: 100%;
  height: 100%;
  min-height: min(78vh, 40rem);
  max-height: min(88vh, 48rem);
  object-fit: cover;
  display: block;
}

/* The video fades in only once it is genuinely playing, so a stalled fetch shows
 * the poster rather than a black rectangle. The poster is the `poster` attribute,
 * which the browser paints until the first frame arrives. */
.page-hero > video {
  opacity: 0;
  transition: opacity var(--motion-slow) var(--ease-out);
}
.page-hero > video[data-playing] { opacity: 1; }

.page-hero-copy {
  position: relative;
  z-index: 1;
  align-self: center;
  max-width: var(--measure-wide);
  margin-inline: auto;
  width: 100%;
  padding: var(--space-2xl) var(--space-s);
  display: grid;
  gap: var(--space-s);
  justify-items: start;
}

/* The copy panel keeps the live gradient's 166° direction with both stops
 * darkened until white measures 12.4:1 on the light end (BR-S3), which is why no
 * text-shadow is needed (BR-S2). */
.page-hero-copy > :not(.hero-links) {
  max-width: 46rem;
  background: linear-gradient(166deg, var(--scrim-from) 43%, var(--scrim-to) 100%);
  color: var(--ink-on-dark);
  padding: var(--space-s) var(--space-l);
  margin: 0;
}
.page-hero-copy .eyebrow { color: var(--taupe-tint); }
.page-hero-copy h1 {
  color: var(--ink-on-dark);
  /* Live sets the hero in italic small-caps Glegoo at 80px. Small-caps on a
   * display line is the brand's own device, kept. */
  font-variant: small-caps;
  box-shadow: var(--shadow-panel);
}
/* Live emboldens the initial of each word — G, A, T, E. A brand device, kept, in
 * the accent tint. */
.page-hero-copy h1 strong { color: var(--taupe-tint); font-weight: 700; }
.page-hero-copy .standfirst,
.page-hero-copy .hero-intro {
  color: var(--ink-on-dark);
  font-size: var(--step-1);
  line-height: 1.6;
  max-width: 40rem;
}
/* The intro assertions read as one stack, so consecutive paragraphs close up
 * rather than each carrying its own panel edge. */
.page-hero-copy .hero-intro + .hero-intro { margin-top: calc(-1 * var(--space-s)); }

/* BLK-1.1: the onward paths. Anchors styled as buttons — a control that navigates
 * is a link, and the live site's four Divi buttons are links too. Live styles them
 * with a white-to-transparent gradient, a 2px border and a `→` that slides in on
 * hover. The gradient is not brand (BR-S3); the sliding arrow is, and it is a
 * pseudo-element so it never becomes the label. */
.hero-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-s);
  margin: 0;
  padding: 0;
  max-width: none;
}
.hero-links a {
  display: inline-block;
  padding: var(--space-2xs) var(--space-m);
  border: 2px solid var(--taupe);
  background: rgb(255 255 255 / 0.9);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--motion-mid) var(--ease-out),
              border-color var(--motion-mid) var(--ease-out),
              color var(--motion-mid) var(--ease-out);
}
.hero-links a::after {
  content: "\2192";
  display: inline-block;
  width: 0;
  overflow: hidden;
  opacity: 0;
  transition: width var(--motion-mid) var(--ease-out), opacity var(--motion-mid) var(--ease-out);
}
.hero-links a:hover {
  background: var(--taupe);
  border-color: var(--taupe);
  color: var(--ink-on-taupe);   /* 6.05:1 — never white on taupe (BR-C2) */
}
.hero-links a:hover::after { width: 1.25em; opacity: 1; padding-left: 0.35em; }

/* An interior page has no video, so its hero is a dark field with the same copy
 * treatment rather than a panel floating on nothing. */
.page-hero:not(:has(picture)):not(:has(video)) { padding-block: var(--space-2xl); }
.page-hero:not(:has(picture)):not(:has(video)) .page-hero-copy > * {
  background: transparent;
  box-shadow: none;
}

/* ── Figures ────────────────────────────────────────────────────────────── */

figure { margin: var(--space-l) 0; }
figcaption {
  font-family: var(--font-text);
  font-size: var(--step--1);
  color: var(--ink-quiet);
  margin-top: var(--space-2xs);
  border-top: var(--border) solid var(--rule);
  padding-top: var(--space-3xs);
}
figcaption cite { display: block; font-style: normal; }

/* BLK-27. A band of photography carrying no text. */
.banner-image { max-width: none; }
.banner-image img { width: 100%; max-height: 22rem; object-fit: cover; }

/* ── BLK-24 prosePanel ─────────────────────────────────────────────────────
 *
 * Live: a 75%-white panel over the section photograph, holding four paragraphs
 * and a right-aligned button. Its heading is Cinzel 40px navy with 5px tracking —
 * kept, at half the tracking, and as the h2 it structurally is.
 */
.prose-panel {
  max-width: 46rem;
  margin-inline: auto;
  padding: 2vw clamp(var(--space-m), 2.5vw, var(--space-2xl));
  background: var(--panel-light);
  color: var(--ink);
  box-shadow: var(--shadow-panel);
}
.prose-panel > :first-child { margin-top: 0; }
.prose-panel > :last-child { margin-bottom: 0; }
.prose-panel h2 {
  font-family: var(--font-display);
  font-size: var(--step-4);
  letter-spacing: var(--tracking-display);
  color: var(--navy);   /* 8.05:1 */
  line-height: 1.4;
}
.prose-panel p {
  font-size: var(--step-1);
  line-height: 1.8;   /* live: 1.8em on this block */
  max-width: none;
}

/* ── The onward link ──────────────────────────────────────────────────────
 *
 * Live aligns it right and sets it in navy at 44% alpha with a white label —
 * 2.3:1, unreadable. The right alignment and the sliding arrow are the design;
 * the alpha is a defect, so the ground is the solid navy it was reaching for.
 */
.onward { margin: var(--space-m) 0 0; text-align: right; max-width: none; }
.onward a {
  display: inline-block;
  padding: var(--space-2xs) var(--space-m);
  border: 2px solid var(--navy);
  background: var(--navy);
  color: var(--ink-on-dark);   /* 8.05:1 */
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--motion-mid) var(--ease-out),
              border-color var(--motion-mid) var(--ease-out),
              color var(--motion-mid) var(--ease-out);
}
.onward a::after {
  content: "\2192";
  display: inline-block;
  width: 0;
  overflow: hidden;
  opacity: 0;
  transition: width var(--motion-mid) var(--ease-out), opacity var(--motion-mid) var(--ease-out);
}
.onward a:hover {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: var(--ink-on-dark);
}
.onward a:hover::after { width: 1.25em; opacity: 1; padding-left: 0.35em; }

/* On the taupe band navy-on-taupe is 3.4:1, so the button inverts to the dark ink
 * the band already uses. On the dark bands the navy ground disappears, so it
 * becomes an outline in the accent tint. */
main > section[data-region="proof"] .onward a {
  background: var(--ink-on-taupe);
  border-color: var(--ink-on-taupe);
  color: var(--paper);
}
main > section[data-region="values"] .onward a,
main > section[data-region="thesis"] .onward a,
main > section[data-region="contact"] .onward a {
  background: transparent;
  border-color: var(--taupe);
  color: var(--ink-on-dark);
}
main > section[data-region="values"] .onward a:hover,
main > section[data-region="thesis"] .onward a:hover,
main > section[data-region="contact"] .onward a:hover {
  background: var(--taupe);
  color: var(--ink-on-taupe);
}

/* ── BLK-25 splitFeature ───────────────────────────────────────────────────
 *
 * Live: a two-column row, prose one side and an image the other, the image
 * carrying the long shadow and a small square motif behind it.
 *
 * `data-image-side` is the authored side and the stylesheet reads it. The picture
 * always comes *after* the prose in source order, whichever side it takes
 * visually, so an unstyled read is always argument-then-illustration and reading
 * order never depends on this file (VAL-63).
 */
.split-feature {
  display: grid;
  gap: var(--space-l) clamp(var(--space-l), 4vw, var(--space-2xl));
  align-items: center;
  max-width: none;
  margin-block: var(--space-l);
}
.split-feature-copy > :first-child { margin-top: 0; }
.split-feature-copy > :last-child { margin-bottom: 0; }
.split-feature-copy h2 { font-size: var(--step-4); }
.split-feature-copy p { font-size: var(--step-1); line-height: 1.8; }
.split-feature > picture { margin: 0; }
.split-feature > picture img {
  width: 100%;
  box-shadow: var(--shadow-panel);
}

@media (min-width: 55rem) {
  .split-feature { grid-template-columns: 1fr 1fr; }
  /* Logical, not left/right: `start` is the reading-start side, so a
   * right-to-left locale inverts it for free. The prose column is placed
   * explicitly in both cases, because relying on source order would put the
   * picture second in the grid regardless of the declared side. */
  .split-feature[data-image-side="start"] > picture { grid-column: 1; grid-row: 1; }
  .split-feature[data-image-side="start"] > .split-feature-copy { grid-column: 2; grid-row: 1; }
  .split-feature[data-image-side="end"] > .split-feature-copy { grid-column: 1; grid-row: 1; }
  .split-feature[data-image-side="end"] > picture { grid-column: 2; grid-row: 1; }
}

/* ── BLK-26 claimColumns ───────────────────────────────────────────────────
 *
 * Live: three equal columns on the taupe band, each with a short assertion and a
 * 300×200 photograph, the middle column pushed down by `padding-top: 20vw`.
 *
 * The offset is kept as a much smaller one. At 20vw the middle column starts a
 * screen and a half below its neighbours, so on a laptop the three claims are
 * never visible together — which defeats the point of setting them side by side.
 */
.claim-columns {
  list-style: none;
  padding: 0;
  margin: var(--space-l) 0 0;
  max-width: none;
  display: grid;
  gap: var(--space-l) clamp(var(--space-m), 3vw, var(--space-2xl));
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  align-items: start;
}
.claim-columns > li { max-width: none; }
.claim-columns p {
  font-size: var(--step-1);
  line-height: 1.7;
  text-align: center;
  max-width: none;
  margin: var(--space-s) 0;
}
.claim-columns picture { display: block; }
.claim-columns img { width: 100%; }

@media (min-width: 55rem) {
  /* The live vertical rhythm, at a workable amplitude. */
  .claim-columns > li:nth-child(2) { margin-top: var(--space-2xl); }
}

/* ── Definition lists (HTML-18) ─────────────────────────────────────────── */

dl {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: var(--space-3xs) var(--space-s);
  margin: var(--space-m) 0;
  padding: var(--space-xs) 0;
  /* The taupe rule as separator. Non-text use, so 2.94:1 is fine (BR-C1). */
  border-top: var(--border-accent) solid var(--taupe);
  border-bottom: var(--border) solid var(--rule);
  font-size: var(--step-0);
}
dt {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
dd { margin: 0; }
main > section[data-region="values"] dt,
main > section[data-region="thesis"] dt,
main > section[data-region="contact"] dt { color: var(--ink-on-dark-quiet); }

/* ── Grids ─────────────────────────────────────────────────────────────── */

.card-grid, .strategy-grid {
  list-style: none;
  padding: 0;
  margin: var(--space-m) 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-m);
}
.card-grid > li, .strategy-grid > li {
  border: var(--border) solid var(--rule);
  border-top: var(--border-accent) solid var(--taupe);
  background: var(--paper);
  padding: 0 0 var(--space-s);
  transition: transform var(--motion-mid) var(--ease-out),
              box-shadow var(--motion-mid) var(--ease-out);
}
/* A card lifts on hover, which is the live site's own card behaviour. Transform
 * and shadow only: no layout property, so nothing reflows and nothing shifts. */
.card-grid > li:hover, .strategy-grid > li:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-overlay);
}
.card-grid > li > *, .strategy-grid > li > * {
  padding-inline: var(--space-s);
  max-width: none;
}
.card-grid picture, .strategy-grid picture { padding: 0; display: block; }
.card-grid img, .strategy-grid img { width: 100%; }
.card-grid h3, .card-grid h2,
.strategy-grid h2, .strategy-grid h3 {
  margin-top: var(--space-s);
  font-size: var(--step-1);
}
.card-grid a, .strategy-grid a { text-decoration: none; }
.card-grid a:hover, .strategy-grid a:hover { text-decoration: underline; }
.strategy-grid .status {
  font-family: var(--font-text);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-quiet);
}

/* ── BLK-7 numberedPoints ───────────────────────────────────────────────
 *
 * Live renders this sequence as `<h4>#1</h4>` + `<h3>World Economy</h3>` and then
 * collapses all three points into a single 40-line `&nbsp;` paragraph. Here the
 * `<ol>` carries the sequence semantically, so the visible number is the
 * presentation of a fact the markup already states (HTML-13).
 *
 * The counter is NOT generated by CSS: the number is authored in the content and
 * emitted in the HTML, because a reader with no stylesheet must still see which
 * point is which (HTML-39, D-02-3).
 */
.numbered-points {
  list-style: none;
  padding: 0;
  max-width: none;
  display: grid;
  gap: var(--space-row);
}
.numbered-points > li {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  column-gap: var(--space-m);
  align-items: start;
  border-top: var(--border) solid var(--rule);
  padding-top: var(--space-s);
  max-width: none;
}
.numbered-points > li > * { grid-column: 2; max-width: var(--measure); }
.point-number {
  grid-column: 1;
  grid-row: 1 / span 99;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--taupe-deep);   /* 6.56:1 — BR-C1 forbids --taupe as text on paper */
}
.numbered-points > li > h3 { margin-top: 0; }

@media (max-width: 34rem) {
  .numbered-points > li { grid-template-columns: 1fr; }
  .numbered-points > li > * { grid-column: 1; }
  .point-number { grid-row: auto; font-size: var(--step-3); }
}

/* ── BLK-8 valueList ────────────────────────────────────────────────────
 *
 * Live renders the eight values as eight `<h4>` + `<p>` pairs in nested Divi
 * columns on a charcoal ground, so eight values read as eight unrelated sections.
 * A `<dl>` states what they are (HTML-18): named values, each with a sentence.
 *
 * `data-columns` is the authored layout hint (BLK-8.1) and the only place in this
 * stylesheet where content influences layout.
 */
.value-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-l);
  max-width: none;
  margin: var(--space-m) 0;
  padding: 0;
  border: 0;
  font-size: var(--step-0);
}
.value-list > dt {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-top: var(--space-l);
  padding-top: var(--space-s);
  border-top: var(--border-accent) solid var(--taupe);
}
.value-list > dd {
  margin: var(--space-2xs) 0 0;
  color: inherit;
  max-width: var(--measure);
  line-height: var(--leading-loose);
}
/* On the charcoal values band the term needs light ink. */
main > section[data-region="values"] .value-list > dt { color: var(--ink-on-dark); }

@media (min-width: 45rem) {
  .value-list[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value-list[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .value-list[data-columns="2"] > dd,
  .value-list[data-columns="3"] > dd { margin-bottom: var(--space-s); }
}

/* ── BLK-22 keyFigure ───────────────────────────────────────────────────
 *
 * Live animates a counter to 500 with `$` and `bn` as CSS `content`, and sets the
 * claim as an `<h3>`. Two changes:
 *
 *   - The figure is text in the HTML, not CSS content, so a reader without this
 *     file still sees `$500bn` (D-02-3). The island counts to the value already
 *     there rather than filling in a zero.
 *   - The claim is the figure's `<dt>` rather than a heading, because it is what
 *     the value answers to (HTML-18) — and `basis` and `asAt` sit beside it, so
 *     an unqualified financial figure is unrepresentable (BLK-22.1).
 */
.key-figure {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: none;
  margin: 0 0 var(--space-s);
  padding: 0;
  border: 0;
  text-align: center;
}
.key-figure > dt {
  font-family: var(--font-text);
  font-size: var(--step-1);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: inherit;
  order: 2;
}
.key-figure > dd { order: 3; }
.key-figure-value {
  font-family: var(--font-serif);
  /* Live: 72px. */
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  order: 1;
  /* The counter changes width as it runs; tabular figures stop the whole band
   * jittering while it does. */
  font-variant-numeric: tabular-nums;
}
.key-figure-basis {
  font-size: var(--step--1);
  max-width: var(--measure);
  margin: 0 auto;
  text-align: center;
}
main > section[data-region="proof"] .key-figure-basis { color: var(--ink-on-taupe); }

/* ── BLK-15 personGrid ─────────────────────────────────────────────────────
 *
 * The live team page is a Divi `et_pb_row` of `1_3` + `2_3` columns: a portrait
 * beside its biography, one person per row, full measure. It is **not** a card
 * grid — cards were the wrong reading of it, and three abreast turns a five-person
 * firm into a directory of thumbnails.
 *
 * `auto-fit` on a `minmax` track is deliberately not used here. A biography is
 * prose, and prose in a 17rem column is unreadable; the row keeps the text at
 * `--measure` and lets the portrait hold a fixed 160px, which is exactly the
 * `avatar` preset's rendered width (SPEC-82), so no derivative is ever upscaled.
 *
 * Square, never circular (branding/03). A round mask crops the corners of a
 * portrait the focal point was chosen to preserve. */

.person-grid {
  list-style: none;
  padding: 0;
  margin: var(--space-l) 0 0;
  max-width: none;
  display: grid;
  gap: var(--space-xl);
}
.person-grid > li {
  display: grid;
  /* The live 1/3 + 2/3 row, stated as a fixed portrait and a fluid text column.
   * Below 34rem the grid collapses to one column and the portrait sits above the
   * name, which is the live site's own tablet behaviour. */
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--space-m) var(--space-l);
  align-items: start;
  padding-top: var(--space-l);
  border-top: var(--border) solid var(--rule);
}
/* The first row needs no rule: the region already ends above it. */
.person-grid > li:first-child {
  padding-top: 0;
  border-top: 0;
}
.person-grid picture {
  /* All rows, not `span 3`. The text column holds three items for a person with a
   * biography and two without one (Daniela Lunardo has none), so a fixed span
   * would invent an empty row on some people and not others. */
  grid-row: 1 / -1;
  display: block;
  padding: 0;
}
.person-grid img {
  width: 100%;
  height: auto;
  /* The taupe edge is the live site's accent applied to a portrait, and it is a
   * border rather than an outline so it occupies layout and cannot overlap type. */
  border-bottom: var(--border-accent) solid var(--taupe);
}
.person-grid > li > h2,
.person-grid > li > h3 {
  margin: 0;
  font-size: var(--step-2);
  max-width: none;
}
.person-grid a { text-decoration: none; }
.person-grid a:hover { text-decoration: underline; }

/* The role is a label, so it takes the eyebrow treatment the rest of the site
 * uses for labels — not italics, which would read as emphasis. */
.person-role {
  margin: var(--space-2xs) 0 0;
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--taupe-deep);
  max-width: none;
}
/* "(external)" is a qualifier, not part of the role: lighter, and in the body
 * face, so it reads as an aside to the label beside it. */
.person-external {
  font-family: var(--font-text);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-quiet);
}
.person-external::before { content: "— "; }

/* BLK-15.1. Prose, so it takes the prose measure and leading rather than the
 * card's tighter setting. */
.person-bio {
  margin-top: var(--space-s);
}
.person-bio > p {
  margin: 0 0 var(--space-s);
  max-width: var(--measure);
  line-height: var(--leading-text);
}
.person-bio > p:last-child { margin-bottom: 0; }

@media (max-width: 34rem) {
  .person-grid > li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-s);
  }
  .person-grid picture { grid-row: auto; width: 160px; }
}

/* ── BLK-16 careerTimeline ─────────────────────────────────────────────────
 *
 * An `<ol>` whose numbering is suppressed: the sequence is the periods, which are
 * text, and a second set of numerals beside them would be furniture. The taupe
 * left rule is the live site's divider device turned into structure — it is what
 * makes four entries read as one history rather than four unrelated headings. */

.career-timeline {
  list-style: none;
  padding: 0;
  margin: var(--space-l) 0 0;
  max-width: none;
}
.career-timeline > li {
  padding: 0 0 var(--space-l) var(--space-l);
  border-left: var(--border-accent) solid var(--rule);
  position: relative;
}
.career-timeline > li:last-child { padding-bottom: 0; }
/* The marker sits on the rule rather than beside it, so the eye follows one line
 * down the page. Square, like every other corner in this system. */
.career-timeline > li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--border-accent));
  top: 0;
  width: calc(var(--border-accent) * 3);
  height: calc(var(--border-accent) * 3);
  background: var(--taupe);
}
.career-period {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--taupe-deep);
  font-variant-numeric: tabular-nums;
  max-width: none;
}
.career-timeline h2,
.career-timeline h3 {
  margin: var(--space-3xs) 0 var(--space-s);
  font-size: var(--step-2);
}
.career-timeline p:not(.career-period) {
  max-width: var(--measure);
  line-height: var(--leading-text);
}

/* Dark-ground counterparts.
 *
 * `--taupe-deep` is a light-ground colour: 6.56:1 on paper, roughly 1.6:1 on
 * `--field`. Any of these blocks can be moved into a dark region by a template
 * change, and the failure would be a label nobody can read on a page nobody
 * re-measured. `--taupe-tint` is the sampled wordmark ink and holds 6.66:1 there
 * (D-BR-11), so the accent survives the inversion instead of disappearing. */
main > section[data-region="contact"] .person-role,
main > section[data-region="contact"] .career-period,
main > section[data-region="contact"] .publication-editions-label,
main > section[data-region="proof"] .person-role,
main > section[data-region="proof"] .career-period {
  color: var(--taupe-tint);
}
main > section[data-region="contact"] .person-external {
  color: var(--ink-on-dark-quiet);
}
main > section[data-region="contact"] .person-grid > li,
main > section[data-region="contact"] .career-timeline > li {
  border-color: var(--field-rule);
}

/* ── BLK-14 publicationGrid ────────────────────────────────────────────────
 *
 * A publication is a document with a date and one edition per locale, so the card
 * carries the same top accent as every other card in the system and the editions
 * read as a list of routes rather than as a row of buttons. */

.publication-grid {
  list-style: none;
  padding: 0;
  margin: var(--space-m) 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--space-m);
}
.publication-grid > li {
  border: var(--border) solid var(--rule);
  border-top: var(--border-accent) solid var(--taupe);
  background: var(--paper);
  /* Stated, not inherited. A card that sets its own light ground must set its own
   * ink: dropped into a dark band it would otherwise inherit `--ink-on-dark` and
   * render white on white. */
  color: var(--ink);
  padding: var(--space-s);
  display: flex;
  flex-direction: column;
}
.publication-grid > li > * { max-width: none; }
.publication-grid h2,
.publication-grid h3 {
  margin: 0;
  font-size: var(--step-1);
}
.publication-subtitle {
  margin: var(--space-2xs) 0 0;
  font-family: var(--font-serif);
  color: var(--ink-quiet);
  line-height: var(--leading-tight);
}
.publication-date {
  margin: var(--space-xs) 0 0;
  font-size: var(--step--1);
  color: var(--ink-quiet);
  font-variant-numeric: tabular-nums;
}
/* The label introduces the edition list, so it is bound to it: the margin below
 * is the list's, not a gap between two unrelated paragraphs. */
.publication-editions-label {
  margin: var(--space-s) 0 var(--space-3xs);
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--taupe-deep);
}
.publication-editions {
  list-style: none;
  padding: 0;
  /* Pushes the editions to the foot of the card, so a two-line title and a
   * one-line title still align their download rows. */
  margin: 0;
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-s);
}
.publication-editions > li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3xs);
}

/* ── BLK-18 contactInvitation, no-provider state ────────────────────────── */

.contact-route {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
}
.contact-address { margin: var(--space-s) 0; }
.contact-form-state {
  font-size: var(--step--1);
  border-left: var(--border-accent) solid var(--taupe);
  padding-left: var(--space-s);
  max-width: var(--measure);
}

.document-list { list-style: none; padding: 0; max-width: none; }
/* BLK-13 is the singular form of BLK-12, so it takes the same row: one ruled line
 * carrying the title and its type, size and version date. It shares the selector
 * rather than copying the declarations, because two rules that must stay identical
 * eventually will not. */
.document-list > li,
.document-download {
  padding: var(--space-2xs) 0;
  border-bottom: var(--border) solid var(--rule);
  max-width: none;
}
/* Consecutive singular downloads read as one list — the ESG page has three —
 * without the top rule doubling the one above it. */
.document-download + .document-download { margin-top: 0; }
.document-meta {
  display: block;
  font-family: var(--font-text);
  font-size: var(--step--1);
  color: var(--ink-quiet);
}

/* ── The living figure (BLK-19) ─────────────────────────────────────────── */

.fund-value dd { font-variant-numeric: tabular-nums; }

/* BLK-19.2: the mock qualifier is text, and it is never conveyed by colour
 * alone. It reads as a qualification in the label itself. */
.mock-qualifier {
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-style: italic;
  text-transform: none;
  letter-spacing: normal;
  color: var(--taupe-deep);   /* 6.56:1 */
}

.fund-value-status:empty { display: none; }
.fund-value-status,
.fund-value-unavailable {
  font-family: var(--font-text);
  font-size: var(--step--1);
  color: var(--ink-quiet);
}

/* ── The audience disclosure and overlay ────────────────────────────────── */

.audience-disclosure {
  font-family: var(--font-text);
  font-size: var(--step--1);
  background: var(--sand);
  border: var(--border) solid var(--rule);
  border-left: var(--border-accent) solid var(--taupe);
  padding: var(--space-2xs) var(--space-xs);
  margin: 0 0 var(--space-l);
  max-width: none;
  color: var(--charcoal);
}
.audience-disclosure [data-audience-change] {
  font: inherit;
  margin-left: var(--space-2xs);
  padding: var(--space-3xs) var(--space-2xs);
  cursor: pointer;
  border: var(--border) solid var(--charcoal);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}

/* HTML-36.1/36.2: the overlay ships hidden. Without script it never appears, and
 * its failure mode is harmless invisibility rather than an uncloseable dialog.
 * `[hidden]` is honoured explicitly because the element is display:grid when
 * shown. */
#audience-overlay[hidden] { display: none; }
#audience-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--space-xs);
  max-width: 34rem;
  margin: auto;
  padding: var(--space-xl);
  background: var(--paper);
  border: var(--border) solid var(--rule);
  border-top: var(--border-accent) solid var(--taupe);
  box-shadow: var(--shadow-overlay);
  font-family: var(--font-text);
}
#audience-overlay h2 { margin-top: 0; }
#audience-overlay button {
  font: inherit;
  padding: var(--space-2xs) var(--space-s);
  cursor: pointer;
  border: var(--border) solid var(--field);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--ink-on-dark);   /* 15.72:1 */
}
#audience-overlay button:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
body.overlay-active { overflow: hidden; }

/* ── Page notes and footer ──────────────────────────────────────────────── */

.page-notes {
  border-top: var(--border-accent) solid var(--taupe);
  margin-top: var(--space-2xl);
  padding-top: var(--space-s);
}
.page-notes h2 { font-size: var(--step-0); margin-top: 0; }
.footnotes { font-size: var(--step--1); color: var(--ink-quiet); }

/* Live: `#main-footer` is `#4d4e50` with taupe headings. Taupe on charcoal is
 * 2.4:1, so the heading takes --taupe-tint at 4.9:1 on the same ground. */
.site-footer {
  background: var(--charcoal);
  color: var(--ink-on-dark);
  padding-inline: max(var(--space-s), calc((100% - var(--measure-wide)) / 2));
  padding-block: var(--space-section) var(--space-l);
  font-size: var(--step--1);
  border-top: var(--border-accent) solid var(--taupe);
}
.site-footer strong {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--taupe-tint);
}
.site-footer nav ul {
  list-style: none;
  margin: var(--space-m) 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
}
.site-footer a { color: var(--ink-on-dark); }
.site-footer a:hover { color: var(--taupe-tint); }
.copyright { color: var(--ink-on-dark-quiet); font-size: var(--step--1); }

/* The regulatory notice sits in the dark footer, so it cannot use the sand panel.
 * It stays a distinct field, with light quiet ink. */
.regulatory-notice {
  max-width: var(--measure);
  margin: var(--space-m) 0;
  padding: var(--space-xs) var(--space-s);
  border-left: var(--border-accent) solid var(--taupe);
  background: rgb(255 255 255 / 0.06);
  font-size: var(--step--1);
  color: var(--ink-on-dark-quiet);
}
.regulatory-notice h2 {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--taupe-tint);
  margin: 0 0 var(--space-2xs);
}
/* If the notice ever moves into the page body (TPL-4.3 requires it last in the
 * page), it must read on paper too. */
main .regulatory-notice {
  background: var(--sand);
  color: var(--charcoal);
  border: var(--border) solid var(--rule);
  border-left: var(--border-accent) solid var(--taupe);
}
main .regulatory-notice h2 { color: var(--taupe-deep); }

.empty { color: var(--ink-quiet); font-style: italic; }

/* ── Responsive ─────────────────────────────────────────────────────────
 *
 * Breakpoints follow the measure, not device widths. There is little layout to
 * collapse: the grids are auto-fit and the shell is flex, so this mostly relaxes
 * spacing and the two-column `<dl>`.
 */

@media (max-width: 34rem) {
  dl { grid-template-columns: 1fr; gap: var(--space-3xs); }
  dt { margin-top: var(--space-2xs); }
  /* The value list and the key figure are already single-column here and both set
   * their own spacing, so the collapse above must not reach them. */
  .value-list, .key-figure { gap: 0; }
  main > * { padding-block: var(--space-xl); }
  main > .page-hero { padding: 0; }
  main > section[data-region="rest"] { padding: 0; }
  .page-hero-copy { padding: var(--space-xl) var(--space-xs); }
  .page-hero-copy > :not(.hero-links) { padding: var(--space-xs) var(--space-s); }
  .page-hero picture img, .page-hero > video { min-height: min(70vh, 30rem); }
  main > section > blockquote { font-size: var(--step-3); }
  .prose-panel { padding: var(--space-m) var(--space-s); }
  .onward { text-align: left; }
  /* Block and inline are set separately so the centring rule survives. Below the
   * measure the max() collapses to the inline value anyway. */
  .site-contact-strip { padding-inline: var(--space-xs); text-align: center; }
  .site-header, .site-footer { padding-inline: var(--space-xs); }
  .site-footer { padding-block: var(--space-xl) var(--space-m); }
  .hero-links a { padding-inline: var(--space-s); }
}

/* ── Motion ─────────────────────────────────────────────────────────────
 *
 * The live site reveals each section as it scrolls into view, using Divi's
 * `.et-waypoint { opacity: 0 }` plus a class added by script. That pattern fails
 * in exactly the wrong direction: if the script does not run, the page is
 * **invisible**.
 *
 * This inverts it. Everything ships visible. `[data-motion]` is set on `<html>`
 * by islands/motion.js, and only then does a band become briefly pending. So:
 *
 *   1. No stylesheet, no script, a CSP block, a parse error → a complete static
 *      page. Never a blank one (NG-18, HTML-39, D-02-3).
 *   2. `prefers-reduced-motion: reduce` removes all of it, twice: the island does
 *      not mark anything, and the query below neutralises the rules regardless.
 *   3. Motion is opacity and small transforms only — no layout property — so
 *      nothing reflows and CLS stays zero (INT-059).
 *
 * The effect is deliberately quieter than the source's. This is a regulated
 * financial publisher, and a page that performs at the reader undermines the copy
 * it is presenting.
 */

@media (prefers-reduced-motion: no-preference) {
  /* The transition, not an animation: an element with `data-reveal-pending`
   * removed transitions back to its resting state, and its resting state is the
   * visible one. There is no keyframe that ends in `opacity: 1`, because there is
   * no state that begins at 0 unless the island put it there. */
  html[data-motion] [data-reveal] {
    transition: opacity var(--motion-slow) var(--ease-out),
                transform var(--motion-slow) var(--ease-out);
  }
  html[data-motion] [data-reveal][data-reveal-pending] {
    opacity: 0;
    transform: translateY(1.5rem);
  }

  /* The hero copy rises once, on load. It is not gated on `[data-motion]`
   * because it is a plain animation whose final state is the resting state: if
   * animation never runs, the panel is simply already there. */
  .page-hero-copy > * {
    animation: gcm-hero-rise var(--motion-slow) var(--ease-out) both;
  }
  .page-hero-copy > :nth-child(2) { animation-delay: 80ms; }
  .page-hero-copy > :nth-child(3) { animation-delay: 160ms; }
  .page-hero-copy > :nth-child(4) { animation-delay: 240ms; }
  .page-hero-copy > :nth-child(5) { animation-delay: 320ms; }

  @keyframes gcm-hero-rise {
    from { opacity: 0; transform: translateY(1.25rem); }
    to   { opacity: 1; transform: none; }
  }

  /* A slow scale on the hero poster, so a still hero is not wholly static. The
   * video, once playing, is its own motion and takes none of this. */
  .page-hero picture img {
    animation: gcm-hero-settle 1.6s var(--ease-out) both;
  }
  @keyframes gcm-hero-settle {
    from { transform: scale(1.04); }
    to   { transform: scale(1); }
  }
}

/* Belt and braces. The island already declines to mark anything when motion is
 * refused; this makes the guarantee hold even if a future rule is added
 * elsewhere in this file. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  /* Whatever state a pending element was left in, it is visible. */
  html [data-reveal], html [data-reveal][data-reveal-pending] {
    opacity: 1 !important;
    transform: none !important;
  }
  .card-grid > li:hover, .strategy-grid > li:hover { transform: none; }
}

/* ── Print ──────────────────────────────────────────────────────────────
 *
 * A fund page is printed and filed. The dark bands would waste ink and the
 * navigation is meaningless on paper, so both go — but nothing that carries
 * content is removed.
 */

@media print {
  :root { --field: #ffffff; --scrim-from: transparent; --scrim-to: transparent; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .site-contact-strip, .site-header nav, .site-footer nav, .skip-link,
  #audience-overlay, .nav-toggle, .submenu-toggle, .hero-links, .onward { display: none; }
  .site-header, .site-footer {
    background: #fff;
    color: #000;
    border-color: #000;
    background-image: none;
  }
  .site-header::before { display: none; }
  .site-logo, .site-footer strong, .regulatory-notice h2 { color: #000; }
  .regulatory-notice { background: #fff; color: #000; border-left-color: #000; }
  .copyright, .site-footer a, a { color: #000; }
  /* The bands are screen furniture: on paper each would cost a block of ink and
   * none carries content. */
  main > section[data-region] {
    background: #fff;
    background-image: none;
    color: #000;
  }
  main > section[data-region]::after { display: none; }
  main > section[data-region] h2,
  main > section[data-region] h3,
  main > section[data-region] dt,
  main > section[data-region] a,
  main > section[data-region] .eyebrow,
  main > section > blockquote,
  main > section > blockquote footer { color: #000; }
  .prose-panel { background: #fff; box-shadow: none; }
  .page-hero { display: block; background: #fff; overflow: visible; }
  .page-hero > video { display: none; }
  .page-hero-copy > * { background: transparent; color: #000; box-shadow: none; }
  .page-hero-copy .eyebrow, .page-hero-copy h1, .page-hero-copy .standfirst,
  .page-hero-copy .hero-intro { color: #000; }
  .page-hero picture img { max-height: none; }
  .banner-image { display: none; }
  /* A printed link whose target is invisible is a dead reference. */
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  h1, h2, h3 { page-break-after: avoid; }
  figure, blockquote, dl, .card-grid > li, .split-feature,
  .person-grid > li, .career-timeline > li, .publication-grid > li {
    page-break-inside: avoid;
  }
  /* A person and a career entry are single units on paper: the taupe accents are
   * screen furniture, and a portrait's coloured edge costs ink for no meaning. */
  .person-grid img { border-bottom: 0; }
  .career-timeline > li::before { display: none; }
  .career-timeline > li { border-left-color: #000; }
  .person-role, .career-period, .publication-editions-label { color: #000; }
}